WordPress style ve script dosyalarını dinamik olarak çağırmak

WordPress Teması Geliştirmek

CSS kodlarını functions.php sayfasına  wp_enqueue_style ile header kısmına çağırmalıyız. Çünkü stil dosyalarını sıralamadığımız zaman ve eğer bir plugin yüklediğimizde o plugin’in CSS kodları ile kendi CSS kodlarımız karışır(çakışır). WordPress’te hangi css kodları önce geliyor bilemez. CSS’de altta kalan kod geçerlidir.(üstte kalanın canı çıksın mantığı). Bu şekilde WordPress’e hangi ilk, hangisi ikinci söylemiş oluruz.

header.php sayfasında <link rel="stylesheet" href="/wp-content/themes/myTheme/css/style.css" > ile temanın CSS kodlarını çağırabiliriz. Ama bu sadece test amaçlı olmalıdır. Bu iyi bir kod çağırma yöntemi değildir. WordPress’te buna hard coding denir.

O zaman functions.php sayfamızda ilk kodlarımızı yazalım. Fonksiyon adı herhangi bir isim olabilir.

İlk parametre isim, ikinci parametre URL, üçüncü parametre sürüm ve son parametre ise stil dosyasının ne için olduğunu belirtir, bunu eklemek isteğe bağlıdır. Yazdığımız fonksiyonu WordPress’e kabul ettirmek için add_action() ile kanca eklemeliyiz

function mytheme_enqueue_style() {
    wp_enqueue_style( 'theme-styles', get_template_directory_uri() . "/style.css"), array() '1.0', 'all');
}
add_action(wp_enqueue_scripts, 'mytheme_enqueue_style');

Bunun ardından temanın header.php sayfasına giderek dinamik olarak stil dosyasını çağırmak için kullanılan wp_head() hazır fonksiyonunu yazmalıyız, yani tam olarak şöyle:

<?php wp_head(); ?>
</head>

get_template_directory_uri()

get_template_directory_uri() ile tamanın(parent theme ise) bulunduğu adrese yol belirliyoruz.Yani şöyle bir URL elde ederiz:

wp-content/themes/mytheme/

Ama bu da URL atamak için doğru bir yöntem değildir. Bunun yerine sabit bir değişmez atamalıyız. Genelde bu sabit değişmez fonksiyon sayfasının ilk satırına veya bir wp-settings.php sayfası oluşturarak bu sayfanın içine yazılır. Diğer sabitler aşağıdakilerdir. İhtiyaç halinde bunları da kullanabilirsiniz.

//Define constants
define('SITE_URL', home_url().'/');
define('AJAX_URL', admin_url('admin-ajax.php'));
define('THEME_PATH', get_template_directory().'/');
define('CHILD_URI', get_stylesheet_directory_uri().'/');
define('MYTHEME_PATH', THEME_PATH.'framework/');
define('MYTHEME_URI', THEME_URI.'framework/');
define('MYTHEME_PREFIX', 'mytheme_');

Artık tema klasörü içinde bu kodu her hangi bir sayfada kullanabiliriz. Mesela index.php içinde aşağıdaki gibi bir resim çağıralım

<img src="<?php echo THEME_URI; ?>images/bgs/testimonial_bg.png" alt="" />

Öyleyse dinamik olarak temanın CSS dosyasını aşağıdaki gibi çağırmak en ideal yöntemdir.

function myTheme_enqueue_style() {
    wp_enqueue_style( 'mytheme', THEME_URI . 'css/style.css', array(), '1.0', 'all' );

eğer çağıracağımız CSS kodları tema klasörünün içinde değil uzak sunucuda ise:

function myTheme_enqueue_style() {
    wp_enqueue_style( 'mythem-style', THEME_URI . 'css/style.css', array(), '1.0' 'all' );

wp_enqueue_style( 'bootstrap-style', ' https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css
', array(), '4.3.1', 'all' );
}

Bu fonksiyonda temanın kendi CSS’si tamamen bağımsız olacağı için ve bootstrap kodlarının üzerine yazacağı için onu alta  eklemeliyiz

function myTheme_enqueue_style() {
    wp_enqueue_style( 'mytheme-style', THEME_URI . 'css/style.css',
    array('bootstrap-style'), '1.0', 'all' );
wp_enqueue_style( 'bootstrap-style', 
'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css', array(), '4.3.1', 'all' );
}

CSS sürümünü bir değişken ile dinamik olarak göstermek

function myTheme_enqueue_style() {
    $version = wp_get_theme() ->get(' Version ');
    wp_enqueue_style( 'mytheme-style', THEME_URI . 'css/style.css', 
   array('bootstrap-style'), '1.0', 'all' );
   wp_enqueue_style( 'bootstrap-style', 
'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css', array(), '4.3.1', 'all' );
}

Script dosyalarını çağırmak

Script dosyalarını çağırmak

false header’a, true footer’a çağırır

function syntax_enqueue_script() {
            // external path
wp_enqueue_script( 'mytheme-jquery', 
'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js', array('jquery'), '3.6.0', false);
wp_enqueue_script( 'sh_Brush_Php', get_template_directory_uri(). 
'/inc/syntax/scripts/shBrushPhp.js', array(''), '1.0',true);
}
add_action(' wp_enqueue_scripts', 'syntax_enqueue_script');

Bunun ardından footer.php sayfasına wp_footer() kodunu eklemeliyiz. Son parametre true ile script kodunun footer.php sayfasında </body> etiketinin üstüne ekleneceğini söylüyoruz. Eğer true yazmazsak varsayılan son parametre false döner ve bu script header.php sayfasına eklenir.