JavaScript Kodu WordPress Sayfa ve Yazılarına Nasıl Eklenir?

WordPress sayfa veya yazılara bir JavaScript kodu nasıl eklenir? Bazen tüm WordPress web sitesine veya farklı sayfaya bir JavaScript kodu eklemek gerekebilir. WordPress doğrudan yazılara veya sayfalara kod eklenmesine izin vermez. Bu eğitici yazımda, WordPress sayfa veya yazılara JavaScript kodunu nasıl ekleyebileceğinizi anlatmaya çalışacağım.

JavaScript nedir, ne işe yarar?

JavaScript, siteyi ziyaret eden kullanıcının tarayıcısında (google chrome, firefox, opera, internet explorer) çalışan programlama dilidir. Bu programlama dili ile yazılan kodlar, web site geliştiricilerinin siteyi yavaşlatmadan uygulamalar yapmalarını sağlar.

Veri isteme formları, üstün özellikli resim galerileri veya herhangi bir uygulama eklemek için, JavaScript kodları kullanılır.

Basit JavaScript kod grubu aşağıdaki gibi görünür:

// Basit JavaScript kodu
</script>
<!-- Herhangi bir ornek: --!>
<script type="text/javascript" src="/yol/ek/basit-script.js?x31423"></script>

Denemek için WordPress’te bir yazı  veya sayfa açalım ve herhangi bir JavaScript kodu ekleyelim. Sayfayı yada yazıyı kaydetmeye çalıştığımızda kodun kaybolduğunu görürürüz.  Bu problemi yaşamamak için aşağıda bir kaç yöntem ile JavaScript kodunu nasıl ekleyeceğimizi ankatacağım.

1.Yöntem: Üstbilgi ve Altbilgi Alanı Kullanarak Ekleme

Genelde web sitenizi takip etmek için JavaScript kodunu kopyalayıp web sitenize eklemeniz istenir. Bu dosyalar genellikle web sitenizin </body> etiketinin üstüne veya altına eklenmelidir. Böylelikle kod her sayfa ve yazıda görünür hale gelir.

Bir örnek vermek gerekirse en basit haliyle hemen hemen her siteye eklediğiğimiz Google Analytics kurulum kodunun eklenmesi için kullanırız.

Kodu WordPress aktif temanızın header.php veya footer.php dosyalarına ekleyebiliriz. Fakat, temanızı her güncellediğinizde veya değiştirdiğinizde eklediğiniz kod tema deaktif olduğundan ve dosya güncellendiğinden kaybolur ve görünmez hale gelir.

Bu sebeple WordPress web sitenize JavaScript yüklemek için bir eklenti kurmanızı öneriyorum.

İlk olarak, Insert Headers and Footers (Üstbilgi ve Altbilgi Ekle) eklentisini yükleyip aktif hale getirin.

Eklentiyi etkinleştirdikten sonra Ayarlar → Insert Headers and Footers sayfasını açın. Biri üstbilgi (header) diğeri altbilgi (footer) bölümü olmak üzere iki adet boş alan görünür.

Insert Headers and Footers

Bu eklenti sayesinde elinizde var olan JavaScript kodunu herhangi bir alana yapıştırarak kaydedebilirsiniz. Eklediğiniz kod tüm web sitesinde görünecektir.

2. Yöntem El İle Ekleme

Bu yöntemde, WordPress tema yada sistem dosyalarınıza kod eklemenizi gerektiriyor.

Kod ekleme işlemi hakkında bilgi sahibi değilseniz destek alabilirsiniz.

WordPress temanızın function.php dosyasına veya sitenide var olan bir eklentiye aşağıdaki kodu eklemeniz gerekiyor.

function wpb_hook_javascript() {
?>
<script>
          // Ekleyeceginiz JavaScript kodu
</script>
<?php
}
add_action('wp_head', 'wpb_hook_javascript');

Kod Kullanarak Belirli WordPress Yazı veya Sayfaya JavaScript Kodu Ekleme

Bu JavaScript kodunu yalnızca belirli bir WordPress yazısına yüklemek istediğiniz zaman kullanabilirsiniz. Bu işlemi yapmak için aşağıdaki örnek koda koşullu mantık eklemeniz gerekiyor. Örneğe göz atın:

function wpb_hook_javascript() {
if (is_single ('16')) {
?>
<script type="text/javascript">
// Ekleyeceginiz JavScript kodu
</script>
<?php
}
}
add_action('wp_head', 'wpb_hook_javascript');

Yukarıdaki kod grubunu incelediğinizde detayda gördüğünüz gibi yayınladığınız yazının yazı ID numarasını 16 yazan yere eklemeniz gerekiyor. Böylece bu yazı da JavaScript kodu aktif olacaktır.

function wpb_hook_javascript() {
if (is_page ('10')) {
?>
<script type="text/javascript">
          // Ekleyeceginiz JavaScript kodu
</script>
<?php
}
}
add_action('wp_head', 'wpb_hook_javascript');

is_single yazan yere, JavaScript kodunun olmasını istediğimiz sayfa kimliğini kontrol etmek için is_page kullanıyoruz. 10 yazan yere de JavaScript’i kullanacağımız sayfa kimlik numarası yani ID numarasını yazmamız gerekiyor.

function wpb_hook_javascript_footer() {
?>
<script>
          // Ekleyeceginiz JavaScript kod
</script>
<?php
}
add_action('wp_footer', 'wpb_hook_javascript_footer');

Yukarıdaki kod örneğinde gördüğünüz gibi ekleyeceğiniz JavaScript kodunu header (site üstü) yerine footer (site altı) kısmına ekleyebilirsiniz.

3. Yöntem: Eklenti kullanarak eklemek

Bu yöntem, WordPress yazı ve sayfaların içine herhangi bir konuma JavaScript kodu eklemenize olanak tanır.

Bunun için ilk yapmanız gereken işlem, Code Embed eklentisini yüklemek ve aktif etmek olacaktır. Aktif ettikten sonra, JavaScript eklemek istediğiniz yazı veya sayfayı düzenlemeniz gerekiyor. Düzenleme sayfasında, üst sağda bulunan “Ekran Tercihleri” düğmesini tıklayın ve “Özel Alanlar” kutucuğunu işaretleyin.

Ekran Tercihleri – Özel Alanlar

Daha sonra aşağıda bulunan Özel Alanlar kısmına gelip en alttan Yeni Özel Alan Eklekısmına bir kısa kod yazmalısınız. Bu kısa kod başına CODE yazıp yanına istediğinizi yazabilirsiniz.

CODEJavaScript

Örneğin: CODEJavaScript yazabilirsiniz. Sağ tarafındaki boş alana da elinizdeki JavaScript kodunu ekleyin. Daha sonra “Özel Alan Ekle” butonuna tıklayarak kaydedin. Oluşturduğunuz özel alan kısa kodunu kullanarak, JavaScript kodunu, bu yazı veya sayfanın herhangi bir yerine yapıştırarak kullanabilirsiniz. Aşağıdaki yerleştirme kodunu yazı içeriğinizin herhangi bir yerine kopyalayıp yapıştırmnız yeterlidir.

Eklemek için: {{CODEJavaScript}} şekilde eklemelisini.

Hazırlamış olduğum bu makale, daha önce başıma gelmişti  Bende sizler gibi araştırarak bulduğum sonuçlar doğrultusunda çalıştığım bir çok iş için kullandım. Faydalı bulup sizlerle paylaşmak istedim.

Teşekkürler

İyi çalışmalar.