Breadcrumb Home Icon Junior to Expert > Wordpress > WordPress CSS ve JS Dosyalarını Ekleme

WordPress CSS ve JS Dosyalarını Ekleme

13/03/2023
Wordpress Enqueue Script & CSS

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.

Stylesheets wp_enqueue_style() (CSS Dosyaları)

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 );
  • $handle: Eklenecek CSS dosyasının ismi.
  • $src: Stil dosyasının bulunduğu konumu belirtir.
  • $deps: Stil dosyasının başka bir stil dosyasına bağlı olup olmadığını belirtir. Eğer bu ayarlanırsa bağımlı olan stil dosyasından önce bu stil dosyası sayfaya yüklenmez.
  • $ver: Stil dosyasının versiyon numarasını belirtir.
  • $media: Stil dosyasının “all”, “screen”, “print” veya “handheld” gibi hangi medya türüne yükleneceğini belirtir. (Yapılan seçim <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');

Scripts wp_enqueue_script() (JS Dosyaları)

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);
  • $handle: Eklenecek script dosyasının ismi.
  • $src: Script dosyasının bulunduğu konumu gösterir.
  • $deps: Bağlı olduğu başka bir script’i belirtir, örnek olarak JQuery.
  • $ver: Script dosyasının versiyonunu belirtir.

  • $in_footer: Boolen (true/false) parametresi olarak kullanılır. Script dosyasının header alanı yerine footer alanında konumlanmasını belirtir. DOM yüklenmesinde gecikmeyi önlemek içi kullanılır.
    Not: Sayfanın ilk yükleme anında script dosyasının çalışması mecbur değilse script dosyasını sayfanın altında kullanmak sayfanın ilk yüklenme esnasındaki gecikmesinin önüne geçer.

Ö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);

CSS ve Script Dosyalarını Tek Fonksiyon Altında Birleştirerek Ekleme

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

Son Paylaşılanlar