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

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.

// dosyalarımızı kaydedelim.
add_action('init', 'kaydetme_fonksiyonu');
function kaydetme_fonksiyonu(){
    wp_register_script( 'javascriptim', (get_template_directory_uri()."/js/benim_js_dosyam.js"), array('jquery'), '1.0' ); // ilk alan script adınız, ikinci alan temanızdaki yolu, üçüncü alan jqueryden sonra çağrılması komutu, son alan da versiyon bilgisi. son alan olduğu gibi kalabilir.
    
    wp_register_style( 'stil_dosyam', (get_template_directory_uri()."/css/kendi_css_dosyam.css"), false, '1.0.0', 'all'); // ilk alan css adınız, ikinci alan temanızdaki yolu, üçüncü alan neyden sonra yer alacağı (false kalsın), dördüncü alan versiyon (olduğu gibi kalabilir), beşinci alan türü. all kalabilir.
}

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.

// kaydettiğimiz dosyaları çağıralım
add_action('wp_enqueue_scripts', 'cagirma_fonksiyonu');
function cagirma_fonksiyonu(){
    wp_enqueue_script('javascriptim'); // yukarıda kaydettiğimiz javascript dosyamızın ismi "javascriptim"
    
    wp_enqueue_style( 'stil_dosyam' ); // yukarıda kaydettiğimiz stil dosyamızın ismi "stil_dosyam"
}

Bu kodları birleştirelim;

// dosyalarımızı kaydedelim.
add_action('init', 'kaydetme_fonksiyonu');
function kaydetme_fonksiyonu(){
    wp_register_script( 'javascriptim', (get_template_directory_uri()."/js/benim_js_dosyam.js"), array('jquery'), '1.0' ); // ilk alan script adınız, ikinci alan temanızdaki yolu, üçüncü alan jqueryden sonra çağrılması komutu, son alan da versiyon bilgisi. son alan olduğu gibi kalabilir.
    
    wp_register_style( 'stil_dosyam', (get_template_directory_uri()."/css/kendi_css_dosyam.css"), false, '1.0.0', 'all'); // ilk alan css adınız, ikinci alan temanızdaki yolu, üçüncü alan neyden sonra yer alacağı (false kalsın), dördüncü alan versiyon (olduğu gibi kalabilir), beşinci alan türü. all kalabilir.
}

// kaydettiğimiz dosyaları çağıralım
add_action('wp_enqueue_scripts', 'cagirma_fonksiyonu');
function cagirma_fonksiyonu(){
    wp_enqueue_script('javascriptim'); // yukarıda kaydettiğimiz javascript dosyamızın ismi "javascriptim"
    
    wp_enqueue_style( 'stil_dosyam' ); // yukarıda kaydettiğimiz stil dosyamızın ismi "stil_dosyam"
}

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