WordPress’e JavaScript ve Stiller Uygun Şekilde Nasıl Eklenir?

409

WordPress’te JavaScript’leri ve CSS stil sayfalarını nasıl düzgün bir şekilde ekleyeceğinizi öğrenmek ister misiniz? Çoğu DIY kullanıcısı, komut dosyalarını ve stil sayfalarını doğrudan eklentilerde ve temalarda çağırma hatasına düşerler. Bu makalede, WordPress uygulamasına JavaScript’leri ve stil sayfalarını nasıl düzgün ekleyebileceğinizi göstereceğiz. Bu, WordPress temasını ve eklenti geliştirmeyi yeni başlayanlar için özellikle yararlı olacaktır.

WordPress’de Komut Dosyaları ve Stil Sayfaları Eklerken Ortak Hatalar

Birçok yeni eklenti ve tema geliştiricisi, komut dosyalarını veya satır içi CSS’yi eklentilerine ve temalarına doğrudan ekleme hatasına düşüyor.

Bazıları yanlışlıkla komut dosyalarını ve stil sayfalarını yüklemek için wp_head işlevini kullanır.

<?php
add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo 'jQuery goes here';
}
?>
Yukarıdaki kod daha kolay görünse de, WordPress’te komut dosyaları eklemenin yanlış bir yoludur ve ileride daha fazla çakışma oluşturacaktır.
Örneğin, jQuery’yi manuel olarak yüklerseniz ve başka bir eklenti jQuery’ı uygun yöntemle yüklerse, jQuery öğesi iki kez yüklenir. Her sayfada yüklü ise, o zaman WordPress hızını ve performansını olumsuz etkileyecektir.
Ayrıca ikisinin de çatışmalara neden olabilecek farklı versiyonları olması mümkündür. Bu söyleniyor, komut dosyaları ve stil sayfaları ekleme doğru yolu bir göz atalım.

WordPress’te Komut Dosyalarını ve Stilleri Neden Artırırsınız?

WordPress güçlü bir geliştirici topluluğuna sahiptir. Dünyanın dört bir yanından gelen binlerce kişi için temalar ve eklentiler geliştiriyor.

Her şeyin düzgün çalıştığından ve kimsenin başkalarının ayak parmaklarına basmadığından emin olmak için WordPress’in enqueuing sistemi vardır. Bu sistem JavaScript’leri ve CSS stil sayfalarını programlı bir şekilde yüklemeyi sağlar.

Wp_enqueue_script ve wp_enqueue_style işlevlerini kullanarak, WordPress’e ne zaman bir dosyayı yükleneceğini, nereye yükleneceğini ve bağımlılıkları ne olduğunu söylersiniz.

Bu sistem ayrıca, geliştiricilerin, aynı üçüncü taraf betiğini birden çok kez yüklemek yerine, WordPress ile birlikte verilen yerleşik JavaScript kütüphanelerini kullanmalarına izin verir. Bu, sayfa yükleme süresini azaltır ve diğer temalar ve eklentilerle çakışmaları önlemeye yardımcı olur.

WordPress’de Doğruca Komut Dosyalarını Nasıl Sıkıştırırız?

WordPress’e düzgün betik yükleme çok kolaydır. Aşağıda, komut dosyalarını düzgün şekilde yüklemek için eklentiler dosyanıza veya temanızın functions.php dosyasına yapıştırdığınız örnek bir kod bulunmaktadır.

<?php
function wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
 
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); 
?>

Açıklama:

Komut dosyamızı wp_register_script () işleviyle kaydettirerek başladık. Bu fonksiyon 5 parametreyi kabul eder:

$handle – Handle, komut dosyanızın benzersiz adıdır. Bizimki “my_amazing_script”

$src – src, komut dosyanızın bulunduğu yerdir. Eklentiler klasörümüzün doğru URL’sini almak için plugins_url işlevini kullanıyoruz. WordPress bunu bulduktan sonra o klasördeki amazing_script.js dosyamızı arayacaktır.

$deps – deps bağımlılık içindir. Komut dosyam jQuery’yi kullandığından bağımlılık alanına jQuery ekledik. WordPress, jQuery zaten sitede yüklenmediyse otomatik olarak yükleyecektir.

$ver – Bu, senaryonuzun sürüm numarasıdır. Bu parametre gerekli değildir.
$in_footer – Komut dosyamızı altbilgiye yüklemek istiyoruz, bu nedenle değeri true olarak ayarladık. Komut dosyasını üstbilgiye yüklemek isterseniz, yanlış yapın.
Wp_register_script içindeki tüm parametreleri sağladıktan sonra, herşeyin gerçekleşmesini sağlayan wp_enqueue_script () içindeki komut dosyasını arayabiliriz.
Son adım, betiği gerçekten yüklemek için wp_enqueue_scripts eylem kancasını kullanmaktır. Bu örnek bir kod olduğundan, bunu herşeyin altında ekledik.
Bunu temanıza veya eklentinize ekliyorsanız, bu eylem kancasını komut dosyasının gerçekten gerekli olduğu yere yerleştirebilirsiniz. Bu, eklentinizin bellek ayak izini azaltmanıza olanak tanır.
Şimdi bazıları, neden önce senaryoyu kaydettirmek ve ardından enqueuing yapmak için fazladan bir adıma gidiyoruz merak edebiliriz? Bu, diğer site sahiplerinin eklentinizin çekirdek kodunu değiştirmeden senaryonuzu kaydını silmelerini sağlar.

WordPress’te Düzgün Enqueue Stilleri

Komut dizileri gibi, stil sayfalarınızı da sıkıştırabilirsiniz. Aşağıdaki örneğe bakın:

<?php
function wpb_adding_styles() {
wp_register_style('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_style('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' ); 
?>
Wp_enqueue_script’i kullanmak yerine stil sayfamızı eklemek için şimdi wp_enqueue_style kullanıyoruz.
Hem stiller hem de betikler için wp_enqueue_scripts eylem kancasını kullandığımıza dikkat edin. Adına rağmen, bu işlev her ikisi için de işe yarar.
Yukarıdaki örneklerde, kodlamak istediğimiz betik veya stilin yerini göstermek için plugins_url işlevini kullandık.
Bununla birlikte, temanızdaki komut dizelerini işleci kullanıyorsanız bunun yerine bunun yerine get_template_directory_uri () kullanın. Bir alt öğe temasıyla çalışıyorsanız, get_stylesheet_directory_uri () işlevini kullanın.
Aşağıda bir örnek kod bulunmaktadır:
<?php
 
functionwpb_adding_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
 
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts'); 
?>