WordPress Stil ve jQuery Dosyalarını functions.php’den Çağırmak

wordpress

Merhaba arkadaşlar, geçen wordpress tema hazırlarken bilgisiz bir kullanıcı temadaki stil ve jquery çağırma kodlarını silemesin diye başka yöntemler araştırdım. Ve cevabımı buldum. Temamızda ki functions.php’ye birkaç kod ekleyerek stil ve jquery dosyalarımızı başka bir yerde çağırmadan direkt sayfamıza entegre edebiliyoruz. Özellike tema piyasası içinde olanlar için çok gerekli bir kod olduğu kanaatindeyim.

Hemen kodlarımıza geçelim. Css ve jquery dosyalarınızın nerede olduğu önemli değil. Herhangi bir klasörde olabilir. functions.php dosyamızı açıp ?> kodunu aratıp bu kodun üst satırına aşağıdaki kod yapımızı ekliyoruz ;

/* ##### Tema jQuery Tanımlaması ve Css Tanımlaması ##### */
add_action('init', 'stil_js_tanimlama');
function stil_js_tanimlama(){
    wp_register_script( 'temaismi-js', (get_template_directory_uri()."/js/jquerydosyasi.js"), array('jquery'), '1.0' ); 
    wp_register_style( 'temaismi-css', (get_template_directory_uri()."/css/style.css"), false, '1.0.0', 'all');
}

add_action('wp_enqueue_scripts', 'stil_js_cagirma');
function stil_js_cagirma(){
    wp_enqueue_script('temaismi-js');
	 wp_enqueue_style( 'temaismi-css' );
}
/* ##### End Tema jQuery Tanımlaması ve Css Tanımlaması ##### */

Yukarıdaki kodlarda “temaismi-js” ve “temaismi-css” kısımlarını değiştirdiğinizde ” wp_enqueue_script” ve “wp_enqueue_style” kod yapısının içindeki değişken isimlerini de değiştirmeniz gerek. Yani değiştirdiğiniz ismi bu iki yere yazmanız gerek. Yoksa tanımlamalar çalışmayacaktır. Diğer alanları kendinize göre düzenlemeniz yeterli olacaktır. Ayrıca “get_template_directory_uri()” kodu tema klasörünüzün yolunu çekmektedir.


2 yorum

  1. ilker ercan Yanıtla

    Merhabalar, güzel bir yazı olmuş teşekkürler. Şöyle bir sorunum var benim, bir tane js (searchwidget.min.js) ve iki tanede css (style.css ve searchwidget.css) dosyam var. her iki css dosyasıda js ile ilgili. yukardaki kodlama mantığına göre nasıl bir kod yazabiriz, sonuçta 2 tane css var ?

    • Atakan Yasin Uludağ YazarYanıtla
      add_action('init', 'stil_js_tanimlama');
      function stil_js_tanimlama(){
          wp_register_script( 'searchwidget-js', (get_template_directory_uri()."/js/searchwidget.min.js"), array('jquery'), '1.0' );
          wp_register_style( 'searchwidget-css', (get_template_directory_uri()."/css/searchwidget.css"), false, '1.0.0', 'all');
          wp_register_style( 'searchwidget-style', (get_template_directory_uri()."/css/style.css"), false, '1.0.0', 'all');
      }
       
      add_action('wp_enqueue_scripts', 'stil_js_cagirma');
      function stil_js_cagirma(){
          wp_enqueue_script('searchwidget-js');
          wp_enqueue_style( 'searchwidget-css' );
          wp_enqueue_style( 'searchwidget-style' );
      }
      

      Bu şekilde kullanırsanız işinizi görecektir. Yalnız dosya yollarını kontrol edin 🙂 Kolay gelsin.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir