WordPress Javascript Dosyalarını Footer’a Taşıma

tarihinde gönderilmiş tarafından

WordPress alt yapılı bir siteniz varsa geliştirirken takıldığınız noktalardan birisinin de <head> etiketleri arasında yer alan javascript dosyalarının otomatik olarak footer’a taşınmamasıdır. Malesef bunu elinizle yapmanız gerekiyor.

Bu noktada devreye WordPress tarafından geliştirilmiş ve çok güzel şekilde çalışan bir fonksiyon giriyor. wp_enqueue_scripts() fonksiyonu içerisine girdiğiniz dosyaları otomatik olarak footer’a taşıma işlemini yapıyor. Ben bunu kendi kullandığım yöntem ile anlatacağım. Öncelikle bir fonksiyon oluşturarak içerisine bazı veriler girmem gerekiyor. Bu veriler ilk olarak daha önceden tanımlı bir dosya için geçerliyse onu iptal etmek ve yeniden footer’da gösterilmek üzere tanıtmak oluyor. Functions.php dosyamızı açarak aşağıdaki gibi kodlarımızı giriyoruz.

https://gist.github.com/316c7c74623c458df3338bcb7def4d88

Bu kodu kullanarak WordPress tarafından default olarak gelen ve eklentilerden kaynaklanan javascript dosyalarınızı footer’a taşıyabilirsiniz. Burda kullandığımız wp_register_script() fonksiyonu içerisine 5 parametre alır. Bunlar sırayla, (‘dosya-ismi’, ‘dosya-yolu’, ‘dizisi – default olarak array() alır – ‘, ‘versiyonu’, ‘footera taşınsın mı?’) şeklinde olmalıdır. Biz kodumuzda dosya adı ve dosya yolunu girdikten sonra 3. ve 4. parametrelerimizi boş bırakarak default değerlerini almasını sağladık ama 5. parametremize true değerini vererek kodlarımızı footer’a gönderdik.

wp_register_script() fonksiyonunun Codex’te yer alan sayfasına göz atarsanız WordPress’in içerisinde otomatik olarak tanımlı olan javascript dosyalarının isimlerini görebilirsiniz.

Bunun dışında bu kod nerede işimize yarar diye soracak olursanız, benim oldukça fazla kullandığım yapılar arasında yer alır. Bu kod sayesinde istediğimiz javascript kodunu istediğimiz sayfa veya yazıda aktif edebiliriz. Mesela ben eğer Jetpack eklentisini ve ya Contact Form eklentisini anasayfa içerisinde hiçbir yer kullanmıyor, sadece bir sayfada veya yazı içerisinde kullanıyorsam, bunların anasayfa için yüklenmesi benim sitemi yavaşlatacaktır ki bu hiç istemediğimiz bir durum. Bunun önüne geçmek için aşağıdaki gibi bir yapı kullanabiliriz.

https://gist.github.com/53599dc86815b427e17290af83bd0cc3

WordPress Tarafından Eklenen Javascript’ler

Son olarak, sitemizde yer alan eklentiler veya WordPress tarafından otomatik olarak eklenen javascript dosyalarının neler olduğunu veya adını bilmiyorsanız görünmesini istediğiniz yere

<?php global $wp_scripts; var_dump($wp_scripts); ?>

yazarak sitenizde bulunan bütün javascript dosyalarını ayrıntılı olarak görebilirsiniz. Sizin kullandığınız dosyalar ise en alt taraflarda bulunan dosyalar olacaktır. Buradan dosyanıza tanımlı kısa isimi öğrenip onu önce o ismi kullanarak tanımsız hale getirip daha sonra istediğiniz şekilde aktif edebilirsiniz. Eklentilerden kaynak dosyaları tekrar aynı isimle aktif ederseniz eklenti ile ilgili problemlerin önüne geçmiş olursunuz.

Önümüzdeki yazılarımda <head> etiketleri arasında yer alan gereksiz CSS dosyalarını kaldırmayı ve yeni dosyalar eklemeyi anlatacağım.