WordPress’te JavaScripts ve Stiller Nasıl Doğru Şekilde Eklenir

WordPress’e 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ı eklentilerde ve temalarda doğrudan çağırma hatasını yapar. Bu makalede, JavaScripts ve stil sayfalarını WordPress’e nasıl düzgün şekilde ekleyeceğinizi göstereceğiz. Bu, özellikle WordPress temasını ve eklenti geliştirmeyi öğrenmeye yeni başlayanlar için faydalı olacaktır.

WordPress’e Komut Dosyaları ve Stil Sayfaları Eklerken Yaygın Hata

Birçok yeni WordPress eklentisi 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ı komut dosyalarını ve stil sayfalarını yüklemek için yanlışlıkla 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’e komut dosyası eklemenin yanlış yoludur ve gelecekte daha fazla çatışmaya yol açar.

Örneğin, jQuery’yi manuel olarak yüklerseniz ve başka bir eklenti jQuery’yi uygun yöntemle yüklerse, jQuery iki kez yüklenir. Her sayfaya yüklenirse, bu WordPress hızını ve performansını olumsuz yönde etkileyecektir.

İkisinin de çatışmalara neden olabilecek farklı versiyonlar olması da mümkündür.

Bununla birlikte, komut dosyaları ve stil sayfaları eklemenin doğru yoluna bir göz atalım.

WordPress’te Neden Komut Dosyalarını ve Stilleri Sırala?

WordPress’in güçlü bir geliştirici topluluğu vardır. Dünyanın her yerinden binlerce insan WordPress için temalar ve eklentiler geliştiriyor.

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

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

Bu sistem aynı zamanda geliştiricilerin aynı üçüncü taraf komut dosyasını birden çok kez yüklemek yerine WordPress ile birlikte gelen yerleşik JavaScript kitaplıklarını kullanmaları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’te Komut Dosyalarını Nasıl Doğru Şekilde Sıralayabilirim?

WordPress’te komut dosyalarını düzgün şekilde yüklemek çok kolaydır. Aşağıda, WordPress’te komut dosyalarını düzgün bir şekilde yüklemek için eklentiler dosyanıza veya temanızın functions.php dosyasına yapıştıracağı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 wp_register_script() işlevi aracılığıyla kaydetmeye başladık. Bu işlev 5 parametreyi kabul eder:

$ tutamaç – Tutamaç, betiğinizin benzersiz adıdır. Bizimkinin adı “my_amazing_script”

$ src – src, komut dosyanızın konumudur. Eklentiler klasörümüzün doğru URL’sini almak için plugins_url işlevini kullanıyoruz. WordPress bunu bulduğunda, o klasörde amazing_script.js dosya adımızı arayacaktır.

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

$ ver – Bu, betiğimizin 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ı başlığa yüklemek istiyorsanız, bunu yanlış yaparsınız.

wp_register_script içindeki tüm parametreleri sağladıktan sonra, her şeyin gerçekleşmesini sağlayan wp_enqueue_script() içindeki betiği çağırabiliriz.

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

Bunu temanıza veya eklentinize ekliyorsanız, bu eylem kancasını betiğin gerçekten gerekli olduğu yere yerleştirebilirsiniz. Bu, eklentinizin bellek ayak izini azaltmanıza olanak tanır.

Şimdi bazıları, önce senaryoyu kaydetmek ve sonra onu sıralamak için neden fazladan bir adım attığımızı merak edebilir. Bu, diğer site sahiplerinin eklentinizin çekirdek kodunu değiştirmeden komut dosyanızı silmelerine olanak tanır.

WordPress’te Stilleri Doğru Şekilde Sırala

Senaryolarda olduğu gibi, stil sayfalarınızı da sıraya koyabilirsiniz. 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 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ı kullandığımıza dikkat edin. İsme rağmen, bu işlev her ikisi için de çalışır.

Yukarıdaki örneklerde, plugins_url istediğimiz komut dosyası veya stilin konumuna işaret etmek için plugins_url işlevini kullandık.

Bununla birlikte, get_template_directory_uri() enqueue betikleri işlevini kullanıyorsanız, bunun yerine get_template_directory_uri() kullanın. Bir alt tema üzerinde çalışıyorsanız, get_stylesheet_directory_uri() kullanın.

Aşağıda örnek bir kod verilmiştir:

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

Umarız bu makale, WordPress’e jacvascript ve stilleri doğru şekilde eklemeyi öğrenmenize yardımcı olmuştur. Bazı gerçek hayat kod örnekleri için en iyi WordPress eklentilerinin kaynak kodunu da incelemek isteyebilirsiniz.