WordPress'te JavaScript'leri ve Stilleri Düzgün Bir Şekilde Ekleme

Bu yazıda WordPress'e JavaScript'lerin ve Stillerin nasıl düzgün şekilde ekleneceğini göreceğiz.

Yalnızca kendi web siteleri için kod yazmayı ve eklentiler geliştirmeyi veya bunları çeşitli pazarlarda satıp güzel bir getiri elde etmeyi seven birçok yeni WordPress geliştiricisi var.

Kod yazmanın çeşitli yolları vardır, ancak kodu verimli bir şekilde yazmanın yalnızca seçilmiş yolları vardır.

Bir kodu on yerine iki satırda yazabiliyorsanız, hafızanın yanı sıra çok fazla işlemden tasarruf edersiniz.

Küçük ve hafif bir web sitesi için önemli olmasa da, ağır bir web sitesi için bu çok şey ifade edebilir.

Net kod yazmaz ve mevcut kaynakları verimli kullanmazsanız, diğer programlar için çok fazla çakışma yaratacaksınız.

Örneğin, eklentiniz için WordPress'e harici hazır Javascript yüklemenin çeşitli yolları vardır.

Ancak uygun standardı izlemezseniz, etkinleştirilmiş tüm eklentiler kötü bir şekilde sıkışabilir.

Bu makale esas olarak WordPress temaları ve eklentileri geliştirmeye istekli yeni WordPress geliştiricileri içindir.

Doğru kodlamazsanız, kodunuz profesyonellikten uzak olacak ve yaptığınız herhangi bir ürün, konsept ne kadar iyi olursa olsun, asla kabul edilmeyeceksiniz.

Bu nedenle, WordPress'te JavaScript'lerin ve Stillerin nasıl düzgün şekilde ekleneceğini bilmek daha iyidir.

JavaScript Ekleme Hataları

Bazılarınız WordPress'in web sitesinin başlık bölümüne herhangi bir şey yüklemenize yardımcı olan wp_head adlı bir işlevi olduğunu biliyor olabilir.

Yapmanız gereken tek şey, aşağıdaki kod satırlarını komut dosyanıza eklemektir ve her şey ve her şey başlıkta görünecektir.

add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo 'jQuery buraya gidiyor';
}

Bu, bir şeyler eklemek için oldukça kısa bir yoldur, ancak en iyi yol değildir. Kısayolları bırakarak uygun standardı izlemelisiniz ve bu çizimin bütün amacı budur.

Örneğin, JQuery'yi eklentinize manuel olarak yüklersiniz ve başka bir geliştirici de aynı JQuery'yi manuel olarak veya uygun standart aracılığıyla yükler. Bir kişi her iki eklentinizi de etkinleştirdiyse, JQuery belleğe iki kez yüklenir ve bu bir israftır.

Ayrıca, yüklenen JQuery sürümde farklılık gösteriyorsa, eklentilerde çakışmalardan dolayı çok fazla hata olacaktır. Herhangi bir kod yazmadan önce WordPress'e JavaScript'leri ve Stilleri nasıl düzgün bir şekilde ekleyeceğinizi bilmeniz gerekir.

Bu Hatalardan Nasıl Kaçınılır – Enqueue Fonksiyonu Kavramı?

Bildiğiniz gibi, WordPress geliştirici topluluğu büyük ve güçlü bir topluluktur. Kelimenin tam anlamıyla her gün yeni temalar ve eklentiler geliştiren binlerce geliştirici var.

Ancak birbirlerinin kodlama yöntemiyle hiçbir zaman çakışma olmadığından emin olmak için yaptıkları şey, enqueue script işlevidir.

Bu, hiçbir zaman çakışma ve gereksiz bellek blokajı olmaması için JavaScript'leri ve Stilleri WordPress'e düzgün bir şekilde eklemekten sorumlu olan işlevdir.

JavaScript'leri ve Stilleri yüklemek için sistematik bir yol sağlar. qp_enquque_function işlevi, Wordless'a bu JavaScript'leri ve Stilleri ne zaman yükleyeceğini, nereye ve özellikle hangi koşullar altında yükleyeceğini söyler.

Bunların yardımıyla JQuery ve benzeri şeyleri manuel olarak yüklemek zorunda kalmazsınız ve dolayısıyla aynı dosyaların tekrar tekrar yüklenmesi nedeniyle asla bir bellek tıkanması durumu olmaz.

Bunun nedeni, Enqueue işlevinin WordPress ile birlikte gelen yerleşik kitaplıkları kullanmanıza izin vermesidir. Ayrıca, JavaScript'lerin manuel olarak yüklenmesinin olmaması nedeniyle yavaş sayfa yükleme süresinin yükünü de azaltacaktır.

WordPress'te JavaScript'leri ve Stilleri düzgün bir şekilde ekleme adımları-

1. WordPress'te Komut Dosyalarını Sıraya Alın

Aşağıdaki kod satırları, WordPress ile birlikte gelen yerleşik JavaScript paketini yükler. Eklenti oluştururken bu satırları plugins dosyasına yerleştirmeniz veya bir tema oluşturuyorsanız bunları function.php içine yerleştirmeniz gerekir.

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

Kodun Açıklaması

Komut dosyası, beş farklı parametreye sahip wp_register_script() işlevi aracılığıyla kaydedilir.

1. $handle – Komut dosyası için benzersiz bir addır. İşte 'my_amazing_script'.

2. $src – Komut dosyanızın konumunu tanımlar. Kitaplık işlevi plugins_url, eklenti klasörünüzün uygun URL'sini getirir. Alındığında, içinde amazing_script.js dosyasını aramaya başlayacaktır.

3. $deps – Bağımlılığı tanımlar. WordPress'ten Jquery gibi kitaplık komut dosyası yüklemesini istediğinizde eklemeniz gerekir.

Komut dosyaları zaten belleğe yüklenmişse, tekrar yüklenmez ve yeni yükleme gerçekleşir. Bu, hiçbir çakışma, bellek tıkanması ve zaman kaybı olmamasını sağlar.

4. $ver – Komut dosyasının sürüm numarasını tanımlar. Zorunlu değildir.

5. $in_footer – Altbilgiye betiği yüklemek için kullanılır. Komut dosyasını başlığa yüklemek istiyorsanız, onu false olarak tutmalısınız.

Her şey tanımlandıktan sonra, komut dosyasını wp_enqueue_script() ile çağırmanız yeterlidir.

2. WordPress'te Enqueue Stilleri

Tıpkı JavaScript gibi, stil sayfalarını sıraya koymanız gerekir. Tema oluşturmak için eklenti dosyanızda veya function.php dosyanızda aşağıdaki kod parçasını kullanın.

function wpb_adding_styles() {
wp_register_script('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_script('my_stylesheet');
}
add_action('wp_enqueue_scripts', 'wpb_adding_styles'); 

Bir eklenti oluştururken yukarıdaki kodlar uygundur. Bir tema oluştururken, plugins_url() öğesini get_template_directory_uri() olarak değiştirmelisiniz. Geri kalan şeyler tamamen aynı kalacak.

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

Bir alt tema oluşturuyorsanız, get_template_directory_uri() yerine get_stylesheet_direcroy_uri() kullanmanız gerekir.

Bu, WordPress'e JavaScript'leri ve Stilleri düzgün bir şekilde eklemenin standart yoludur.

Eklentiniz veya temanız herhangi bir aksaklıkla karşı karşıyaysa, bunların kodunu yukarıda belirtilen kod satırları ile değiştirmelisiniz ve belki aksaklıklar çözülür.

Diğer başarılı geliştiricilerle aynı sayfada olmak için her zaman dünya çapında takip edilen kodlama standartlarını takip edin.