Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Kupası
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPress’te JavaScripts Alt veya Altbilgiye Nasıl Taşınır?

Geçtiğimiz günlerde okuyucularımızdan biri Google sayfa hızı puanını artırmak için WordPress’te JavaScripts’i nasıl en alta taşıyabileceklerini sordu. İyi ki sordular, çünkü açıkçası biz de bu konuda yazmak istiyorduk. Daha önce, WordPress’te JavaScripts ve CSS stillerinin nasıl düzgün bir şekilde ekleneceğinden bahsetmiştik. Bu makalede, sitenizin yüklenme süresini ve Google sayfa hızı puanınızı iyileştirebilmeniz için WordPress’te JavaScripts’i en alta nasıl taşıyacağınızı göstereceğiz.

JavaScripts’i En Alta Taşımanın Faydaları

JavaScript istemci taraflı bir programlama dilidir. Web sunucunuz tarafından değil, kullanıcının web tarayıcısı tarafından yürütülür ve çalıştırılır. JavaScript’i en üste koyduğunuzda, tarayıcılar sayfanızın geri kalanını yüklemeden önce JavaScript’i yürütebilir veya işleyebilir. JavaScripts en alta taşındığında, web sunucunuz sayfayı hızlı bir şekilde oluşturacak ve ardından kullanıcının tarayıcısı JavaScripts’i çalıştıracaktır. Tüm sunucu tarafı işleme zaten yapıldığından, JavaScript arka planda yüklenecek ve genel yüklemeyi daha hızlı hale getirecektir.

Bu, Google sayfa hızı veya Yslow ile test yaparken hız puanınızı artıracaktır. Google ve diğer arama motorları artık arama sonuçlarını görüntülerken sayfa hızını performans matrislerinden biri olarak değerlendiriyor. Bu, daha hızlı yüklenen web sitelerinin arama sonuçlarında daha belirgin bir şekilde görüneceği anlamına gelir.

WordPress’te Komut Dosyası Eklemenin Doğru Yolu

WordPress, tema ve eklenti geliştiricilerinin komut dosyalarını sıraya eklemelerine ve gerektiğinde yüklemelerine olanak tanıyan güçlü bir sıralama sistemine sahiptir. Komut dosyalarını ve stilleri düzgün bir şekilde sıraya koymak sayfa yükleme hızınızı önemli ölçüde artırabilir.

Size temel bir örnek göstermek için, bir WordPress temasına biraz JavaScript ekleyeceğiz. JavaScript’inizi bir .j s dosyasına kaydedin ve bu . js dosyasını temanızın js dizinine yerleştirin. Temanızda JavaScripts için bir dizin yoksa, bir tane oluşturun. Script dosyanızı yerleştirdikten sonra temanızın functions.php dosyasını düzenleyin ve bu kodu ekleyin:

function wpb_adding_scripts() {
wp_register_script('my-amazing-script', get_template_directory_uri() . '/js/my-amazing-script.js','','1.1', true);
wp_enqueue_script('my-amazing-script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );  

Bu kodda wp_register_script() fonksiyonunu kullandık. Bu fonksiyon aşağıdaki parametrelere sahiptir:

<?php
wp_register_script( $handle, $src, $deps, $ver, $in_footer );
?>

Komut dosyasını bir WordPress sayfasının altbilgisine veya altına eklemek için tek yapmanız gereken $in_footer parametresini true olarak ayarlamaktır.

Ayrıca şablon dizini için URL döndüren get_template_directory_uri() fonksiyonunu da kullandık. Bu fonksiyon, WordPress temalarındaki komut dosyalarını ve stilleri sıralamak ve kaydetmek için kullanılmalıdır. Eklentiler için plugins_url() fonksiyonunu kullanacağız.

Sorun:

Sorun şu ki, bazı zamanlarda WordPress eklentileri kendi JavaScript’lerini <head> veya sayfa gövdesi içindeki sayfalara ekler. Bu komut dosyalarını en alta taşımak için eklenti dosyalarınızı düzenlemeniz ve komut dosyalarını düzgün bir şekilde en alta taşımanız gerekir.

JavaScript Kaynağını Bulma

Sitenizi web tarayıcısında açın ve sayfa kaynağını görüntüleyin. Dosyanın konumunu ve kaynağını gösteren JavaScript dosyasının bağlantısını göreceksiniz. Örneğin, aşağıdaki ekran görüntüsü bize betiğimizin ‘test-plugin101’ adlı bir eklentiye ait olduğunu söyler. Script dosyası js dizininde yer almaktadır.

Finding source of a script in WordPress

Bazen JavaScript’in doğrudan sayfaya eklendiğini ve ayrı bir .js dosyası aracılığıyla bağlanmadığını görürsünüz. Bu durumda, tüm eklentilerinizi tek tek devre dışı bırakmanız gerekir. Her eklentiyi devre dışı bıraktıktan sonra sayfalarınıza komut dosyası ekleyeni bulana kadar sayfayı yenileyin. Tüm eklentileri devre dışı bıraktıktan sonra bile JavaScript kaybolmazsa, JavaScript’in temanız tarafından eklenip eklenmediğini görmek için başka bir temaya geçmeyi deneyin.

Komut Dosyalarını Kaydetme ve Enqueue Etme

Başlık bölümüne JavaScript ekleyen eklentiyi veya temayı bulduktan sonra, bir sonraki adım eklentinin dosya için nerede bir çağrı yaptığını bulmaktır. Temanızın veya eklentinizin PHP dosyalarından birinde söz konusu .js dosyasına bir çağrı göreceksiniz.

Eklenti veya tema JavaScript dosyası eklemek için zaten enqueuing kullanıyorsa, tek yapmanız gereken eklenti veya temanızdaki wp_register_script işlevini değiştirmek ve $in_footer parametresi için true eklemektir. Bunun gibi:


wp_register_script('script-handle', plugins_url('js/script.js'  , __FILE__ ),'','1.0',true);

Eklentinizin veya temanızın üstbilgiye veya içerik arasına ham JavaScript eklediğini varsayalım. Eklenti veya tema dosyalarında ham JavaScript kodunu bulun, JavaScript’i kopyalayın ve bir .js dosyasına kaydedin. Ardından JavaScript’i en alta taşımak için yukarıda gösterildiği gibi wp_register_script() işlevini kullanın.

Editörün notu: Çekirdek dosyalarda değişiklik yaptığınızda ve eklentiyi güncellediğinizde, değişikliklerinizin geçersiz kılınmayacağını anlamak önemlidir. Bunu yapmanın daha iyi bir yolu, betiğin kaydını kaldırmak ve temanızın functions.php dosyasından yeniden kaydetmek olacaktır. Bu eğiticiye bakın.

Komut dosyalarını altbilgiye taşımanın yanı sıra, daha hızlı bir sosyal medya eklentisi ve tembel yükleme görüntüleri kullanmayı da düşünmelisiniz. Bununla birlikte, site hızınızı artırmak için W3 Total Cache ve MaxCDN de kullanmalısınız.

Umarız bu makale WordPress’te JavaScripts’i en alta taşımanıza ve sayfa hızınızı artırmanıza yardımcı olmuştur. Sorularınız ve geri bildirimleriniz için lütfen aşağıya yorum bırakın.

Açıklama: İçeriğimiz okuyucu desteklidir. Bu, bazı bağlantılarımıza tıklarsanız komisyon kazanabileceğimiz anlamına gelir. WPBeginner'ın nasıl finanse edildiğini, neden önemli olduğunu ve nasıl destek olabileceğinizi görün. İşte editoryal sürecimiz.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Ultimate WordPress Araç Kiti

Araç setimize ÜCRETSİZ erişim sağlayın - her profesyonelin sahip olması gereken WordPress ile ilgili ürün ve kaynaklardan oluşan bir koleksiyon!

Reader Interactions

16 yorumBir Cevap Bırakın

  1. Ravi

    Will my plugins update normally when i move their js to single file? I am a newbie.

  2. WPBeginner Staff

    There are multiple ways to do it. One that is most common is to paste JavaScript files loaded by different sources into one single JS file and then enqueue it.

  3. Catharine

    Hi Syed, thanks for the tutorial. However I am a complete noob and have a very basic question. For that piece of code you posted (the entire function etc), do we need to add that in the functions.php file for every single bit of javascript we want to enqueue? I guess what I’m asking is, how would you format that code if you had more than one piece of javascript that was being loaded in the headers of more than one page?
    Your help would be greatly appreciated!

  4. Marc Jacobs

    hi, great tutorial. I have a question though. I ran my website through Google Page Speed Insights and got the warning that I had to eliminate render blocking Javascript (and css) to boost my page speed. I read the information on this website (great read!), but I cannot seem to find the php-files where the plugin “calls” for the js-files causing my website to lack speed. I have figured out what plug-in is causing most of the delay (Google-maps-ready), but I have no idea how to precoeed frpm there. I have searched every php-file in the plugin folder, but can’s find a js-file named remotely similar to the files mentioned in the google speed test:

    How do I figure out what php file to edit? Help wouldbe much appreciated!

    greeting,

    Marc.

  5. Basavaraj Tonagatti

    Hi, I recently moved to Genesis Framework+Eleven 40 Child Theme. I am also facing the same problem while I run the Google page speed test. But as I don’t know the exact way of doing, finding it difficult to make changes. Can anyone guide me what is the exact cause on my site and how to remove this Javascript issue? (I don’t know any styling languages and I am totally unware about these code languages.)

  6. Joseph Stanley-Hunt

    Thanks heaps, I have been wondering how to do this and some other tricks (which I have also found answers to on here).

    One question tho, I see there is no in-head in the paramaters. is that meaning that if the in_footer is set to false, it is registered in the head automatically?

    • WPBeginner Support

      Yes, the default value for in_footer is false. So you need to explicitly add in_footer to true otherwise it will appear in the head.

      Yönetici

  7. Mike

    The plugin update immediately came to my mind too. Look forward to more advice on this.

  8. Jason

    Great article! I have been asking this questions for a long time because so many themes get penalized in Googls speed test due to java scripts loading first. Maybe others have known how to put these scripts in the footer.

    Again, thanks and I will try this out and tell you how it works.

  9. Jeremy Myers

    Great tutorial.

    But once we update the plugin, we will have to do this again, right? And every time the plugin updates?

    Is it possible to deregister the js in functions.php and then simply reregister it in the footer somehow?

  10. adam

    Hi, thanks for this useful tips. But, how to move .js of W3 Total Cache minify on head?
    That’s js location on cache in wp content, not wp plugin.

  11. Lucca

    Thx for valueable knowledge – keep up excellent work.

  12. Raj

    Nice and Simple guide. Thanks for posting this article to increase the speed of WordPress :)

  13. Danyel Perales

    Nice tip. Thanks for share !

Bir Cevap Bırakın

Yorum bırakmayı seçtiğiniz için teşekkür ederiz. Lütfen tüm yorumların yorum poli̇ti̇kasi uyarınca denetlendiğini ve e-posta adresinizin yayımlanmayacağını unutmayın. Ad alanında anahtar kelime KULLANMAYIN. Kişisel ve anlamlı bir sohbet edelim.