WordPress’de Javascript JS Dosyalarını Footer’a Almak!

Wordpress'de Javascript JS Dosyalarını Footer'a Almak!

WordPress scriptli bir siteniz var ve sitenizin performansını yükseltmek için js dosyalarını header’dan footer’a almak istiyorsunuz.. Bunun için ne yaparsınız? Normal şartlarda tema dizininde header.php’ye girer, js dosyalarını çağıran kodları buradan alır, footer.php’ye yerleştirirsiniz. Peki ya js dosyalarının çoğu tema şablonuna statik işlenmiyorsa?

Yani js dosyaları onları kullanan eklentiler tarafından dinamik işleniyorlarsa ne yaparsınız?

JS Dosyalarını Eklenti veya Functions Kodları ile Footer’a Alırsınız!

Önünüzde iki seçenek var;

  • WordPress.org’dan bir eklenti kullanacaksınız,
  • Yada sitenizdeki tüm js dosyalarını footer’a kaydıran bir functions kodu kullanacaksınız.

Bana sorarsanız basit şeyler için eklenti kullanmayın, functions kodlarından yararlanın. Fakat bazı durumlarda bu komutlar işe yaramıyor yada eklentinin daha cazip özellikleri, katkıları oluyor, öyle olunca mecbur eklenti kullanıyoruz.

Mesela hemen aşağıda paylaşacağım eklenti onlardan birisi..

Eklentinin Adı: Autoptimize

Bu eklenti hem js dosyalarınızı footer’a alır, hem de birçok js dosyasını birleştirerek Google Pagespeed puanınızın yükselmesine, sitenizin daha performanslı çalışmasına katkı sağlar. Bu eklenti, Pagespeed Ninja gibi sitenize zarar vermez, gerçekten gözle görülür bir performans artışı sağlar.

Eklentiyi paylaştığım bağlantıdan yada WordPress Eklentiler panelinde Yeni eklenti olarak yüklersiniz, ardından etkinleştirip ayarlarını yaparsınız.

Autoptimize ayarlar sayfasında 5 sekmeli bir ekran gelir karşınıza. Fakat başlangıç için şu şekilde ayarlama yapmanız işinizi görür;

  • JS, CSS & HTML Sekmesi: Javascript kodunu optimize et, Js dosyalarını toparla, Css kodunu optimize et, Css dosyalarını toparla, Satıriçi Css’i toparla, Çıktı script ve stilleri statik dosyalar olarak kaydet ve son 3 seçenekte aktif.
  • Görseller Sekmesi: Görselleri lazy load ile yükle aktif.
  • Ekstra Sekmesi: Google yazıtipleri kullanıyorsanız Combine ve link deferred aktif, sitede emoji kullanmıyorsanız Emojileri kaldır aktif.

Bu 3 sekmedeki ayarlamalar size gözle görülür bir hız ve puan artışı sağlar. Bunlar yetmiyorsa, daha fazla seçenek yine Autoptimize sekmeleri altında sizi bekliyor olacak.

Tabi bu eklentiyi kullandığınızda başka bir eklenti altında js, css dosyalarını birleştirmiyor, sıkıştırmıyor olmanız gerekiyor. Örneğin Autoptimize kullanırken Wp-Fastest Cache eklentisi altındaki js ve css sıkıştırma/birleştirme seçeneklerini kapatmalısınız.

Eklentiye gerek yok mu dediniz? Yada şimdilik ufak bir kod yığını işinizi görecek mi? O zaman geçelim diğer seçeneğe..

Js Dosyalarını Taşıyan Functions Kodları!

Aşağıdaki kodları kopyalayın, kendinize göre düzenleyin ve temanızın funcstions.php dosyasında en alta, en uygun konuma yerleştirin.

function defer_parsing_of_js ( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'haric-tutulacak-javascript.js' ) ) return $url;
return "$url' defer ";
}
if( !is_admin() ){
add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );
}

Diyelim ki bunu yaptıktan sonra Fancybox gibi bir eklentiniz çalışmayı durdurdu, o zaman o eklentinin ihtiyaç duyduğu js dosyasını functions koduna ekleyerek o js dosyasını header’da, eski konumunda bırakın.

Not: Birden fazla js dosyasını hariç tutacaksanız if ( strpos( $url, ‘haric-tutulacak-javascript.js’ ) ) return $url; komutunu alt alta çoğaltın.

Hepsi bu.