• Anasayfa
  • Nesne
  • Kılavuz
  • Bir WordPress sayfasına JavaScript nasıl eklenir (+ hata ayıklama ipuçları)

Bir WordPress sayfasına JavaScript nasıl eklenir (+ hata ayıklama ipuçları)

Yayınlanan: 2025-06-20

Bir WordPress sayfasına JavaScript eklemek ister misiniz, ancak bunu yanlış yaptığınızı mı yoksa nereden başlayacağınızı bile bilmiyorsunuz? Yoksa zaten yaptınız mı ve nasıl sorun gidereceğinizi bilmediğiniz hata mesajları ve/veya performans sorunları görüyor musunuz?

Her iki durumda da, doğru yerdesiniz.

Bu yazı JavaScript ve WordPress her şeyde birinci sıralı, all-out eğitim olacak. Sonunda, WordPress'te JavaScript kullanmanın neden iyi bir fikir olduğunu, sayfalarınıza nasıl ekleneceğinizi ve düzgün çalışmadığında veya sitenizi yavaşlattığında ne yapacağınızı bileceksiniz.

Tl; dr

Tüm gönderiyi okumak için çok meşgul mısınız ve hızlı bir özet ister misiniz? Tamam, ama sadece sen olduğun için.

WordPress sayfalarına JavaScript eklemek, sitenizi daha etkileşimli hale getirebilir ve bunu birçok üçüncü taraf aracı ile entegre etmenizi sağlar. Aynı zamanda, sitenizi kırmaktan kaçınmak için dikkatli bir şekilde değerlendirilmesini gerektirir.

Güvenilir kaynaklardan JavaScript kullanmak, web sitenizi yedeklemek, bir alt temayı kullanarak ve önce bir evreleme veya geliştirme ortamındaki değişiklikleri test etmek gibi güvenlik önlemleri alın. Ayrıca, sitenize eklediğiniz herhangi bir kodun performans etkisine dikkat edin.

Sitenize JavaScript eklemenin birkaç yolu vardır - WordPress kancaları, functions.php , ayrı dosyalar, WordPress düzenleyicisi veya eklentilerle.

Tarayıcı geliştirme araçları, eklenti ve tema çatışmaları ve WordPress hata ayıklama modu aracılığıyla sorunları gidermek.

Komut dosyalarını birleştirerek, mayınlaştırarak, erteleyerek veya geciktirerek JavaScript performansını geliştirin. WP Rocket gibi bir eklenti kullanarak işlemi de otomatikleştirebilirsiniz.

WordPress sayfalarınıza neden JavaScript ekliyorsunuz?

Genellikle JS'ye kısaltılan JavaScript, popüler bir programlama dilidir. Web sayfaları oluşturmak için kullanılan üç ana teknolojiden biridir. Diğer ikisi, sayfa yapısını ve içeriğini ve stilden sorumlu olan CSS'yi tanımlayan HTML'dir.

JavaScript, istemci tarafı bir dilidir, yani sunucuda değil, tarayıcıda çalışır. Bu nedenle, bir sayfa yüklemeyi bitirdikten sonra bile mevcut CSS ve HTML'yi değiştirmek ve güncellemek için kullanabilirsiniz.

Bu yüzden ana kullanımlarından biri web sayfalarını daha etkileşimli hale getirmektir. Örneğin, JavaScript genellikle sayfa öğelerini şöyle güçlendirir:

  • Kayma menüleri
  • Pop -up
  • Animasyonlar

WordPress Block Düzenleyicisi de çoğunlukla JavaScript'te yazılmıştır.

JavaScript tabanlı WordPress Block Düzenleyicisi

Etkileşime ek olarak, JavaScript aynı zamanda üçüncü taraf hizmetlerini sitenize web analizi için izleme gibi sitenize entegre etmenin ortak bir yoludur. Diğer örnekler şunları içerir:

  • Canlı sohbet
  • E-posta Gönderme ve İletişim Formları
  • Gömülü videolar
  • Etkileşimli Haritalar
  • Sosyal Medya Beslemeleri

Önemli düşünceler

Yanlış yapılırsa, WordPress sayfalarınıza JavaScript eklemek hatalara ve sorunlara yol açabilir. Başlangıçtan itibaren önlem almak size daha sonra zaman ve hayal kırıklığı kazandırabilir:

  • Sitenizi güvenli ve sabit tutmak için yalnızca güvenilir kaynaklardan JavaScript kullanın.
  • Bir şeylerin ters gitmesi durumunda değişiklik yapmadan önce web sitesi dosyalarınızın ve veritabanınızın tam bir yedeğini alın.
  • JavaScript'i doğrudan tema dosyalarına eklediğinizde, her zaman bir çocuk teması kullanın. Ana temayı değiştirirseniz, güncellediğinizde değişikliklerinizi kaybedersiniz.
  • Canlı sitenize uygulanmadan önce bir evreleme veya geliştirme ortamındaki değişiklikleri test edin.
  • JavaScript, WordPress sayfalarınıza ekstra kod ekler, bu da bunları yavaşlatabilir. Sitenize yeni özellikler sunarken performansı takip edin.

WordPress'teki bir sayfaya javascript eklemenin 6 yolu

Teoriye yeterince. Aşağıda, WordPress'e JavaScript eklemenin altı yolunu en az teknikten en az teknik olarak gösteriyoruz.

1. WordPress kancalarını ve işlevlerini kullanın

Kancalar, özel kod (“işlevler” olarak adlandırılan) ekleyebileceğiniz WordPress yükleme işleminin içine yerleştirilen kod parçalarıdır, böylece belirli bir zamanda veya yerde yürütülür.

Örneğin, wp_head (), sitenizin üst kısmındaki <Head> bölümünde çalışır. Bir WordPress sayfasına JavaScript eklemek için kullanmak istiyorsanız, bunu (Child) temasının functions.php dosyasında yapmanız gerekir:

 function add_custom_script() { ?> <script> // Place your JavaScript code here </script> <?php } add_action('wp_head', 'add_custom_script');

JavaScript kodunuzu, “JavaScript kodunuzu buraya yerleştirin” dediği yere girin. İşlev adını “add_custom_script” den daha açıklayıcı bir şeye de değiştirebilirsiniz.

Bu yöntem, basit analitik izleme kodu veya temel etkileşimli öğeler gibi çok açık bir şekilde tanımlanmış amaçlara sahip daha küçük komut dosyaları için mükemmeldir. Ayrıca, sayfa performansını artırmak için popüler bir çözüm olan altbilgiye JavaScript'i yüklemek için çalışır. WP_head () yerine wp_footer () kullanmanız yeterlidir.

Sayfa başı ve altbilgisi, genellikle bir web sitesinde her yerde göründüğü için komut dosyalarını yüklemek için popüler yerlerdir. Bu, bir WordPress sitesinin tüm sayfalarına JavaScript eklemek için harika bir yol sağlar.

JavaScript'i yalnızca belirli sayfalara yüklemek istiyorsanız, bu yöntemi koşullu bir ifade ile birleştirebilirsiniz:

 function add_custom_script() { if (is_page(123)) { ?> <script> // Place your JavaScript code here </script> <?php } } add_action('wp_head', 'add_custom_script');

Bunu tek bir sayfayla sınırlayan kısım IS_PAGE (123). “123”, bu kodu kullanmak istiyorsanız sayfanızın kimliğine güncellenmeniz gereken sayfa kimliğidir. WordPress düzenleyicisinde sayfanızı açtığınızda tarayıcı çubuğunda görünür. IS_PAGE () adını, ad veya url slug ile hedeflemek için de kullanabilirsiniz.

tarayıcı çubuğunda wordpress sayfa kimliği
Blog yayınları için IS_Single (), blog sayfası için IS_HOME (), arşiv sayfaları için IS_ARCHIVE () ve kategori arşivleri için IS_CATEGORY () gibi birçok koşullu etiket vardır.

2. JavaScript'i ayrı bir dosyaya yükleyin

Başka bir seçenek de JavaScript'inizi kendi dosyasına koymaktır. Bu, özellikle büyük komut dosyaları için iyi bir fikirdir, ancak genellikle mantıklıdır, çünkü dosyalarınızı wp_register_script () ve wp_enqueue_script () işlevleriyle yüklemenize izin verir.

Bu tercih edilen yöntemdir, çünkü çatışmaları önlemeye, komut dosyalarını doğru sırayla yüklemeye ve bağımlılıkları yönetmeye yardımcı olur. İşte böyle görünüyor:

 function enqueue_custom_script() { wp_register_script( 'my-custom-script', get_template_directory_uri() . '/js/custom-script.js', array('jquery'), '1.0.0', true ); wp_enqueue_script('my-custom-script'); } add_action('wp_enqueue_scripts', 'enqueue_custom_script');

Bu örnekte, komut dosyası get_template_directory_uri () ile hedeflediğimiz tema dizinine yerleştirilir (çocuk temaları için bunun yerine get_stylesheet_directory_uri () kullanın). Dizi ('JQuery') bu komut dosyasının jQuery'ye bağlı olduğunu ve ondan sonra yüklenmesi gerektiğini gösterir. '1.0.0' sürüm numarasıdır ve 'True', WordPress'in komut dosyasını altbilgiye yüklemesi gerektiği anlamına gelir.

Bu aynı zamanda işe yarar ve izleme kodları gibi üçüncü taraf JavaScript'i yüklemenin doğru yoludur. Sitenize koymadan önce kodu kullanım durumunuza güncellediğinizden emin olun.

3. Tema dosyalarına kod ekleyin

Kancalar, tüm JS komut dosyalarınızı tek bir yerden çıkarmanın harika bir yoludur, ancak bunları temanıza yüklemenin tek yolu bunlar değildir.

Kafa bölümüne bir şey yüklemek için wp_head () kullanmak yerine, komut dosyalamanızı veya bir bağlantıyı doğrudan tema tema dosyanıza tema dosyasına göndererek aynı şeyi başarabilirsiniz.

Klasik temalarda, bu genellikle header.php . Temanızda bulun, bir kopya yapın ve çocuk temasına yerleştirin, ardından komut dosyasını doğrudan <Head> bölümünde bir yere ekleyin.

Yalnızca belirli bir sayfaya yüklemek istiyorsanız, daha önce olduğu gibi koşullu bir ifade kullanabilirsiniz. Alternatif olarak, şablon hiyerarşisi sayesinde, yalnızca bu sayfa için özel bir dosya oluşturmak da mümkündür, örneğin sayfa-contact.php .

WordPress blok temaları artık bu tema dosyalarını kullanmıyor. Temanız bir blok temasıysa, burada belirtilen diğer yöntemlerden birini seçmeniz daha iyi tavsiye edilir.

4. Özel bir eklenti oluşturun

Tema dosyalarını kullanarak WordPress sayfalarına JavaScript eklemenin sorunu, kodu temaya bağlı hale getirmesidir. Temaları değiştirdiğinizde, JavaScript'iniz de ortadan kalkar.

Özel bir eklenti kullanarak bundan kaçınabilirsiniz. Bu, kodun temasından bağımsız hale getirir ve ayrıca WordPress eklentileri menüsünde etkinleştirmenizi ve devre dışı bırakmanızı sağlar.

WordPress sayfalarınıza JavaScript eklemek için basit bir eklentinin işaretlemesi:

 <?php /* Plugin Name: Custom JavaScript Loader Plugin URI: https://yourwebsite.com Description: A simple plugin to add custom JavaScript to WordPress pages. Author: Your Name Author URI: https://yourwebsite.com Version: 1.0 */ function add_custom_script() { ?> <script> // Place your JavaScript code here </script> <?php } add_action('wp_head', 'add_custom_script');

Bu kodu bir PHP dosyasına yerleştirin ve eklenti adı , eklenti uri , açıklama , yazar ve yazar uri'yi WordPress eklentileri menüsünde göründüğü gibi kendi bilgilerinize ayarladığınızdan emin olun.

Dosyayı anlamlı bir şey adlandırın, örneğin özel izleme kodu-plugin.php , ardından WordPress kurulumunuzdaki WP-Content/Eklentiler içindeki aynı adlı bir dizine yükleyin. Bundan sonra, eklentiler menüsünde görünmelidir.

5. WordPress Editor'a JavaScript Ekle

Bu en çok önerilen yöntem olmasa da, JavaScript'i doğrudan WordPress düzenleyicisini kullanarak bir sayfaya eklemek de mümkündür. Bunu yapmak için yeni bir blok ekleyin (artı düğmesini tıklayın veya ileri eğik çizgi kullanın) ve özel HTML bloğunu seçin.

Doğrudan sayfaya yüklenecek şekilde JavaScript kodunu ekleyin.

Sadece <cript> ve kapatma </script> etiketlerini kullandığınızdan emin olun ve yürürlüğe girmeleri için düzenleyicideki değişikliklerinizi kaydedin.

Kod sekmesini kullanarak klasik düzenleyiciye JavaScript de ekleyebilirsiniz.

6. Kod snippet eklentisi kullanın

Sitenize JavaScript eklemek için bir eklenti çözümü olmasaydı WordPress olmaz. Aslında, aşağıdakiler dahil birkaç tane var:

  • WPCODE
  • Üstbilgi altbilgisi kodu yöneticisi
  • Basit özel CSS ve JS
  • CSS ve JavaScript Araç Kutusu

Eklentiler, JavaScript'inizi daha iyi yönetmenizi sağlar. Snippet'lerinizi adlandırabilir, bunları kategoriler halinde düzenleyebilir, seçici olarak açıp kapatabilir ve şartlı kurallar ayarlayabilirsiniz. Ayrıca, özel eklenti çözümü gibi, JavaScript'inizi temadan bağımsız hale getirir.

Bu eklentileri kullanmak da basittir. Genellikle sitenize JavaScript snippet'lerinizi yönetebileceğiniz yeni bir menü eklerler.

Sadece yeni bir snippet oluşturun, kodunuzu ekleyin, ardından görünmesini istediğiniz yerde yapılandırın.

Hemen hemen bu.

WordPress'teki JavaScript sorunlarını giderme

Artık WordPress web sitenize ve sayfalarınıza JavaScript'i nasıl ekleyeceğinizi biliyorsunuz. Peki ya bir şey olması gerektiği gibi çalışmıyorsa? Bu makalenin son bölümünü, karşılaşabileceğiniz JavaScript sorunlarını nasıl tanımlayacağınız ve çözeceğiniz hakkında konuşarak geçireceğiz.

1. Tarayıcı Geliştirici Araçlarını Kontrol Edin

JavaScript hatalarını kontrol etmenin bir yolu, tarayıcınızın geliştirici araçlarını kullanmaktır. Herhangi bir komut dosyası da dahil olmak üzere temel site kodunu incelemenize izin verir.

Bunları herhangi bir web sayfasına sağ tıklayarak ve incelemeyi seçerek açabilirsiniz.

Alternatif olarak, bunlara tarayıcı menüsü üzerinden erişin, örneğin Chrome'da daha fazla araç> geliştirici araçları altında bulunurlar.

Bunları açmak için klavye kısayolları da vardır, Chrome, Edge ve Firefox'ta Safari CMD +OPT+ C'de CTRL/CMD+SHIFT+I'dir.

Sitenizdeki geliştirici araçlarını açın ve ardından Konsol sekmesine gidin. JavaScript'in neden olduğu hataları burada görmelisiniz.

Göstermeleri için sayfayı yeniden yüklemeniz gerekebileceğini unutmayın. En yaygın JavaScript hataları:

  • ReferenceError: Eksik veya tanımsız bir değişken veya işlevi gösterir.
  • TypeError: Bir işlemle ilgili bir sorun olduğunu, örneğin, uygunsuz bir tür değeri kullanmaya çalıştığını öne sürüyor.
  • SynTaxError: Koddaki bir yazım hatası veya yanlış biçimlendirme nedeniyle, eksik parantez, noktalı virgül veya tırnak gibi meydana gelir.

Hangi komut dosyasının, dosya veya işlevin hataya neden olduğunu bulmak istersiniz, böylece düzeltebilirsiniz. JavaScript yürütmeyi duraklatmanıza ve neler olduğunu incelemenize olanak tanıyan Kaynaklar sekmesinde kesme noktalarının kullanılmasına yardımcı olur.

Bulduğunuz herhangi bir hata mesajı hakkında daha fazla bilgi edinmek için en sevdiğiniz arama motorunu veya AI'nı kullanın. Ayrıca, komut dosyalarınızın düzgün yüklenip yüklenmediğini görmek için ağ sekmesini de kontrol etmek isteyebilirsiniz.

2. Tema ve eklenti çatışmalarını çözün

JavaScript hataları, örneğin uyumsuz kütüphaneler veya yinelenen işlevler kullanırken tema ve eklenti çatışmaları nedeniyle de olabilir.

Bu JavaScript sorunlarını nasıl gidereceğiniz aşağıda açıklanmıştır:

  • Temaları ve eklentileri güncelleyin: Temanız veya eklenti geliştiriciniz sorunu zaten biliyor ve bunları en son sürümde düzeltmiş olabilir.
  • Geçici olarak varsayılan temaya geçin: Yirmi Yirmi Beş gibi bir WordPress varsayılan temasını etkinleştirin. Sorun kaybolursa, temanızın hatalı olması muhtemeldir.
  • Eklentilerinizi devre dışı bırakın: Sitenizdeki tüm eklentileri kapatın ve sorunun ne zaman yeniden ortaya çıktığını görmek için bunları tek tek açın. Buna neden olan eklentiyi güncelleyin veya değiştirin.

Sağlık kontrol eklentisi, yukarıda belirtilen her şeyi WordPress kontrol panelinden ( sorun giderme sekmesine gidin) simüle etmenizi ve tek bir tıklamayla geri dönmenizi sağlar.

Ayrıca web sitenizin durumu hakkında çok daha fazla ek bilgiye sahiptir. Bu testleri canlı sitenizde değil, bir geliştirme veya sahneleme web sitesinde yapmanız önerilir.

3. Hata ayıklama modunu kullanın

WordPress, site sorunlarını tespit etmenize ve çözmenize yardımcı olacak yerleşik bir hata ayıklama moduna sahiptir. JavaScript ile ilgili sorunları doğrudan göstermese de, sitenizdeki komut dosyalarına müdahale edebilecek PHP, eklenti ve tema hatalarını bulmayı kolaylaştırır.

Hata ayıklama modunu etkinleştirmek için WP-Config.php dosyanızı (FTP veya barındırma dosya yöneticiniz aracılığıyla) açın ve aşağıdaki satırları ekleyin:

 define('WP_DEBUG', true); define('WP_DEBUG_LOG', true); define('SCRIPT_DEBUG', true);

Zaten tanım bulabilirsiniz ('Script_debug', false); dosyada. Eğer öyleyse, basitçe “doğru” olarak değiştirin. Dosyayı kaydedin ve yeniden yükleyin.

Yukarıdaki ayarlar hata ayıklama modunu, hata günlüğünü (hatalar wp-content/debug.log'da görünecektir) etkinleştirir ve sorunları daha kolay izlemek için çekirdek CSS ve JavaScript dosyalarının sınırlandırılmamış sürümlerini yükler.

Yine, bunu ziyaretçilerinizin gözünden uzakta bir geliştirme sitesinde yapın. Ayrıca, daha sonra normale dönmesi için bu kodu kaldırmayı unutmayın.

WordPress hata ayıklama modunu etkinleştirmek için WP hata ayıklama eklentisini de kullanabilirsiniz.

4. Performans sorunlarını adresle

Diğer tüm kodlar gibi, WordPress sayfalarınıza JavaScript eklemek web sitenizi daha yavaş hale getirebilir. Sık sık web sitenizi hızla test ettiğinizde ve “kullanılmayan JavaScript'i azalt” diyen bir uyarı aldığını fark edersiniz.

JavaScript'in neden olduğu performans sorunlarından kaçınmak için şu en iyi uygulamaları izleyin:

  • İhtiyacınız olmayan komut dosyalarını kaldırın: Hepsine gerçekten ihtiyacınız olup olmadığını, özellikle de üçüncü taraf hizmetlerine, Sitenizdeki JavaScript Yüklemesini düzenli olarak denetleyin.
  • Aşağıdaki komut dosyalarını yükleyin: JavaScript dosyalarını erken yüklemesi gerektiğinde kafa bölümüne yerleştirin.
  • Komut dosyalarını birleştirin: Birkaç komut dosyasını tek bir dosyada birleştirin (buna “Birleştirme” denir). Tek bir büyük dosya genellikle birkaç küçük dosyadan daha hızlı yüklenir.
  • Minify JavaScript Dosyaları : Bu, kodu yürütmesi gereksiz okunabilirlik için harika olan gereksiz biçimlendirme ve beyaz alanları kaldırır.
  • JavaScript'i eşzamansız olarak yükleyin: yani tarayıcı, JavaScript dosyalarını yüklerken siteyi işlemeyi durdurmaz, ancak arka plana yükler ve indirildikten sonra yürütür.
  • Büyük komut dosyalarını erteleyin: Burada, dosyalarınız arka planda da indirilir, ancak yalnızca yükleme işleminin geri kalanı bittikten sonra yürütülür, bu nedenle kesintiye uğramaz.
  • Gecikme JavaScript Yürütme : Bu, bir kullanıcı etkileşimi olana kadar tüm JavaScript dosyalarının ve satır içi komut dosyalarının yüklenmesini erteliyor. Görüntüler için tembel yükleme gibi ancak JavaScript dosyaları için.

WP Roket ile JavaScript Performans Optimizasyonunu Basitleştirin

Bunu elle yapmak yerine, WP roketini kullanarak çok daha kolay uygulama seçeneğiniz var. Sitenizde etkinken, eklenti varsayılan olarak JavaScript'i minifiye eder ve dosya optimizasyonu menüsündeki birkaç kutuyu kontrol ederek WordPress sitenizdeki komut dosyalarını birleştirebilir, geciktirebilir, erteleyebilir ve eşzamansız olarak yükleyebilirsiniz.

WP Roketinde JavaScript Optimizasyon Ayarları

Gerekirse, sayfa öğelerinizin yanıt verebilirliğine müdahale etmesi durumunda, tek tek komut dosyalarını, eklentileri ve dosyaları optimize edilmesini hariç tutma seçeneğiniz vardır.

Bunun yanı sıra, WP Rocket, arka planda otomatik olarak bir dizi performans iyileştirmesi uygular: örneğin:

  • Ayrı bir mobil önbellek dahil önbellekleme
  • GZIP Sıkıştırma
  • Ön yükleme önbelleği ve bağlantılar
  • Kritik Görüntü Optimizasyonu (katlanmanın üzerindeki görüntüleri tembel yüklemeden hariç tutmak için) en büyük içerikli boyayı geliştirmek için
  • Sayfadaki yüksek öğeleri daha hızlı yüklemek için otomatik tembel oluşturma

Nitekim, eklentiyi yüklemek ve etkinleştirmek, sitenizdeki performans en iyi uygulamalarının% 80'ini uygular ve hemen daha hızlı hale getirir. Ve bu yeterli değilse, site hızınızı artırmak için etkinleştirebileceğiniz birçok özellik var:

  • CSS arka planları, videolar ve iframes dahil görüntüler için tembel yükleme
  • Harici dosyaları ve yazı tiplerini önceden yükleme
  • Kendi kendine barındıran Google Yazı Tipleri
  • Veritabanı optimizasyonu
  • Rocketcdn dahil bir CDN'ye kolayca bağlanma seçenekleri

WordPress sayfalarınıza JavaScript eklemeye hazır mısınız?

JavaScript, üçüncü taraf yazılımlarla etkileşim veya entegrasyon eklemek için WordPress web siteleri için birçok heyecan verici olasılık sunar. Beceri seviyenize ve tercihlerinize bağlı olarak sayfalarınıza eklemenin birçok yolu vardır.

Aynı zamanda, JavaScript hatalar getirebilir ve sayfa performansında büyük bir faktör olabilir. Bu nedenle, WordPress sayfalarınıza özenle JavaScript eklemeniz zorunludur.

JavaScript ile ilgili performans sorunlarıyla mücadele ediyorsanız, WP Rocket bunları kolayca ve etkili bir şekilde ele almanıza yardımcı olur. Ayrıca, sitenizi hızlandırmak için birçok başka işlev sunar. Bugün WP roketini alın ve 14 gün boyunca risksiz deneyin!