WordPress’te özel yazılan CSS ve JS dosyalarını functions.php dosyası üzerinden wp_enqueue_script()
, wp_enqueue_style()
ve wp_enqueue_block_style()
fonksiyonları ile eklenir.
Stil dosyalarını temaya dahil etmek için wp_enqueue_style()
fonksiyonu kullanılır.
WordPress’in ana stil dosyası olan style.css‘i sayfalara dahil etmek için functions.php içerisinde aşağıdaki kodu kullanın.
wp_enqueue_style( 'style', get_stylesheet_uri() );
style.css dışında özel oluşturulan CSS dosyalarının sayfalara eklemek için aşağıdaki temel yapı kullanılır.
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
<link>
etiketinin media=""
özelliğine yansır.)Örnek olarak temanın kök dizinindeki “css-files” dosyasının içerisindeki footer.css stil dosyasının sayfalara yüklenmesi için functions.php içerisinde aşağıdaki kod kullanılır. (Burada footer.css stil dosyasının bağımlı olduğu başka bir stil dosyası olmadığında “false” değeri verilmiştir.)
wp_enqueue_style( 'footer', get_template_directory_uri() . '/css-files/footer.css', false, '1.1', 'all');
Script dosyalarını temaya dahil etmek için functions.php içerisinde wp_enqueue_script()
fonksiyonu kullanılır. wp_enqueue_script()
fonksiyonu wp_enqueue_script()
ile benzer syxtax’a sahiptir.
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);
Örnek olarak kök dizininde bulunan “js” isimli bir klasör içerisinde “script-file.js” isimli bir dosyanın sayfalara eklenmesi için functions.php içerisinde aşağıdaki fonksiyon kullanılır. (array( 'jquery' )
“jquery” scriptlerinden sonra “script-file.js” dosyasının yükleneceğini gösteriyor.)
wp_enqueue_script( 'script-file', get_template_directory_uri() . '/js/script-file.js', array( 'jquery' ), 1.1, true);
Tek fonksiyon altında script ve css kodlarını temaya dahil etmek için functions.php içerisinde aşağıdaki kod yapısını kullanılır. wp_enqueue_scripts
add_action yapısı kullanılarak çağırılır.
function add_theme_scripts() {
wp_enqueue_style( 'style', get_stylesheet_uri() );
wp_enqueue_style( 'footer', get_template_directory_uri() . '/css-files/footer.css', false, '1.1', 'all');
wp_enqueue_script( 'script-file', get_template_directory_uri() . '/js/script-file.js', array( 'jquery' ), 1.1, true);
}
add_action ( 'wp_enqueue_scripts', 'add_theme_scripts' );
Kaynak:
https://developer.wordpress.org/themes/basics/including-css-javascript/#enqueuing-scripts-and-styles