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.

// 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

6 thoughts on “js ve css dosyalarını WordPress içerisine gömmek”

  1. Serkan Bey teşekkür ediyorum. Sorun yaşadığım bir konuydu. Oldukça açıklayıcı bir yazı oldu. Emeğinize sağlık.

  2. Kardeşim cok teşekkür ederim lakin bir sorum olacaktı bu uygulamayı ilk defa yapacam denemek için ama functions.php içinemi ekliyecez bütün kodları yoksa functions.php & header.php de ekliyeceğimiz kod varmı ?

    1. Süleyman,

      Basit mantıkta tüm temalarda wp_head() fonksiyonu desteklendiğinden (istersen header.php dosyanı kontrol edebilirsin) sadece functions.php içerisinde bu kodları kullanman yeterli olacaktır. functions.php içerisinde wp_register_style ve wp_register_script ile bu stil/javascript dosyalarını kaydediyoruz ve wp_enqueue_script ve wp_enqueue_style ile bunların wp_head() fonksiyonu içerisinde çağırılmasını sağlıyoruz. Temanda header.php içerisinde wp_head() fonksiyonu yer alacağından kodları sadece functions.php içerisine eklemen yeterli olacaktır.

      1. function wpfme_jquery_enqueue() {
        wp_deregister_script('jquery');
        wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", false, null);
        wp_enqueue_script('jquery');
        }
        if (!is_admin()) add_action("wp_enqueue_scripts", "wpfme_jquery_enqueue", 11);

        bu şekilde değilmi kardeşim ? ve benim functions.php dosyasında wp_register_style yok malesef

        1. Süleyman evet o şekilde olacak. wp_register_style zaten bir stil dosyası ekleyeceksen gerekli. Onun haricinde kullanmazsan da olur :D

Comments are closed.