Nasıl Yapılır?

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

WordPress'te JavaScripts ve CSS stil sayfalarını düzgün bir şekilde nasıl ekleyeceğinizi öğrenmek ister misiniz?

WordPress’te JavaScripts ve CSS stil sayfalarını düzgün bir şekilde nasıl ekleyeceğinizi öğrenmek ister misiniz? Birçok DIY kullanıcısı genellikle komut dosyalarını ve stil sayfalarını eklenti ve temalarda doğrudan arama hatasını yapar. Bu makalede, WordPress’te JavaScripts ve stil sayfasını düzgün bir şekilde nasıl ekleyeceğinizi göstereceğiz. Bu, WordPress temasını ve eklenti geliştirmeyi yeni öğrenmeye başlayanlar için özellikle yararlı olacaktır.

WordPress’de Komut Dosyaları ve Stil Sayfaları Eklerken Genel Hata

Birçok yeni WordPress eklentisi ve tema geliştiricisi, kendi betiklerini veya satır içi CSS’lerini eklenti ve temalarına doğrudan ekleme hatasını yapar.

Bazıları wp_head, komut dosyalarını ve stil sayfalarını yüklemek için işlevi yanlışlıkla 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’e betik eklemenin yanlış yolu budur ve gelecekte daha fazla anlaşmazlığa yol açar.

Örneğin, jQuery’yi manuel olarak yüklerseniz ve başka bir eklenti jQuery’yi uygun yöntemle yüklerse, jQuery öğesinin iki kez yüklenmesi gerekir. Her sayfada yüklü ise, bu WordPress hızını ve performansını olumsuz etkileyecektir .

Ayrıca ikisinin de çatışmalara neden olabilecek farklı versiyonları olması da mümkündür.

Bu söylenecek olursa, komut dosyaları ve stil sayfalarını eklemenin doğru yoluna bakalım.

WordPress’de Yazı ve Stiller Enqueue?

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

Her şeyin düzgün bir şekilde çalıştığından ve kimsenin başka ayak parmaklarına basmadığından emin olmak için, WordPress’in bir gözetleme sistemi vardır. Bu sistem, JavaScripts ve CSS stil sayfalarını yüklemek için programlanabilir bir yol sağlar.

İlginizi Çekebilir

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

Bu Yazımızıda Okuyunuz:  WordPress'te Blog Yazıları için Ayrı Bir Sayfa Nasıl Oluşturulur

Bu sistem, geliştiricilerin, aynı üçüncü taraf komut dosyasını birden çok kez yüklemek yerine, WordPress ile birlikte gelen yerleşik JavaScript kitaplıklarını kullanmasına da olanak tanır. Bu, sayfa yükleme süresini azaltır ve diğer temalar ve eklentilerle çakışmaları önlemeye yardımcı olur.

WordPress’de Düzgünce Script Nasıl Yüklenir ?

Komut dosyalarını WordPress’te düzgün şekilde yüklemek çok kolaydır. Aşağıda, WordPress’te komut dosyalarını düzgün şekilde yüklemek için eklenti dosyanızda veya temanızın functions.php dosyasında yapıştırdığınız örnek kod yer almaktadı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:

Scriptimizi wp_register_script()fonksiyona kaydederek başladık . Bu işlev 5 parametreyi kabul eder:

  • $ handle – Handle, betiğinizin benzersiz adıdır. Bizimki “my_amazing_script” olarak adlandırılıyor
  • $ src – src, komut dosyasının yeridir. Eklentiler klasörümüzün uygun URL’sini almak için plugins_url işlevini kullanıyoruz. WordPress bunu bulduğunda, o klasördeki dosya adımızın amazing_script.js dosyasını arar.
  • $ deps – deps bağımlılık içindir. Komutumuz jQuery’yi kullandığından, bağımlılık alanına jQuery ekledik. WordPress, zaten siteye yüklenmiyorsa jQuery’yi otomatik olarak yükler.
  • $ ver – Bu, komut dosyasının sürüm numarasıdır. Bu parametre gerekli değildir.
  • $ in_footer – Komutumuzu altbilgiye yüklemek istiyoruz, bu yüzden değerin doğru olmasını sağladık . Komut dosyasını üstbilgiye yüklemek istiyorsanız, bunu yanlış yaparsınız.

Tüm parametreleri sağladıktan sonra , her şeyin gerçekleştiği wp_register_scriptsenaryoyu arayabiliriz wp_enqueue_script().

Son adım, betiği gerçekten yüklemek için wp_enqueue_scripts eylem kancasını kullanmaktır . Bu bir örnek kod olduğundan, bunu hemen her şeyin altına ekledik.

Bunu temanıza veya eklentinize ekliyorsanız, bu işlem kancasını komut dosyasının gerçekten gerekli olduğu yere yerleştirebilirsiniz. Bu, eklentinizin hafıza ayak izini azaltmanızı sağlar.

Şimdi biraz merak ediyorum, neden önce senaryoyu kaydettirmek ve daha sonra onu eklemek için fazladan bir adım atıyoruz? Bu, diğer site sahiplerinin, eklentinizin çekirdek kodunu değiştirmeden komut dosyanızı kaydetmesini sağlar.

WordPress’te Düzgün Stiller

Komut dosyaları gibi, stil sayfalarınızı da düzenleyebilirsiniz. Aşağıdaki örneğe bakın:

Bu Yazımızıda Okuyunuz:  WordPress'de Facebook Lightbox Popup Nasıl Açılır

<?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' );
?>

Kullanmak yerine, wp_enqueue_scriptşimdi wp_enqueue_stylestil sayfamızı eklemek için kullanıyoruz .

wp_enqueue_scriptsHem stiller hem de betikler için hareket kancası kullandığımıza dikkat edin . Adına rağmen, bu işlev her ikisi için de çalışır.

Yukarıdaki örneklerde, plugins_urlyerleştirmek istediğimiz komut dosyasının veya stilin yerini işaret etmek için işlev kullandık .

Ancak, temanızdaki en iyi komut dosyalarını kullanırsanız, sadece get_template_directory_uri()bunun yerine kullanın. Çocuk temasıyla çalışıyorsanız kullanın get_stylesheet_directory_uri().

Aşağıda bir örnek kod bulunmaktadır:

<?php

function wpb_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' );
?>

Bu makalenin, WordPress’te nasıl düzgün bir şekilde jakarinin ve stillerin ekleneceğini öğrenmenize yardımcı olduğunu umuyoruz.

Daha Fazla Göster

İlgili Makaleler

Bir cevap yazın

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

Başa dön tuşu
Kapalı
Kapalı