js ve css dosyalarını WordPress içerisine gömmek

Çoğumuz çağıracağımız javascript ve/veya css dosyalarımızı header.php içerisine ekliyoruz yani gömüyoruz. Ama çoğu zaman bu kodları yazmak, daha doğru anlatımla doğru yerlere yerleştirmekte sıkıntı yaşıyabiliyoruz. jQuery’den önce çağrılan javascript dosyalarımız bazen sıkıntı yaşatabiliyor bize. Bundan kaçınmak ve bu işi de WordPress’in kendine bırakmak bizim elimizde. Aşağıda açıklamasını yapacağım kodları kullanarak daha düzgün bir ekleme işlemi yapabiliriz.

Kodlar

Bu kod ile birlikte temanızın içinde bulunan functions.php dosyasını düzenleyeceğiz. Bu temanızın ve WordPress sisteminin düzgün çalışabilmesi için gerekli olan bir dosya olduğundan, işlemden önce lütfen yedek alınız. functions.php, wp-content/themes/temanizin-adi/ klasöründe bulunur.

wp_enqueue_style(), wp_enqueue_script(), wp_register_script() ve wp_register_style() fonksiyonları bu işlemi yapmamız için yeterli olmakta. Bunları functions.php (temanızdaki) içerisine düzgün bir şekilde yerleştireceğiz. Fonksiyon isimlerine tıklarsanız sizi Codex referans sayfasına götürürler.

Gelelim Nasıl ekleyeceğimize

Bu kodları doğru yolla ve düzgün şekilde aşağıdaki gibi yazabiliriz. Aşağıdaki kodda bir adet js ve bir adet css dosyasını wp_register_script() ve wp_register_style() kullanarak kaydediyoruz. Ve bir aksiyonla bu işlemi uygulamaya koydurtuyoruz.

Yukarıdaki kodun yanına açıklamasını da yazdım. Bu işlemi hallettiğimizde kaydettik ama çağırma işlemini yapmadık. Bunu yapabilmek için tekrar bir fonksiyon ve aksiyona ihtiyacımız var. O da aşağıdaki gibi olmakta. Bu alanda da wp_enqueue_style() ve wp_enqueue_script() kullanıyoruz.

Bu kodları birleştirelim;

Yukarıdaki fonksiyon bütünlüğünü temanız içerisinde bulunan functions.php dosyasına koyduğunuz ve sunucunuza gönderdiğiniz andan sonra dosyalar sitenizin ilgili alanında çağırılacaklardır. Dosyayı kendinize uyarlarsanız istediğiniz javascript ve css dosyalarınızı siz de çağırabilirsiniz.

Selametle