WordPress Temalarına Doğru Şekilde Javascript Ekleme

Eklentiler veya üst WordPress Temaları ile çakışmaları önlemek için WordPress temanıza Javascript eklemenin belirli bir yolu vardır. Sorun, birçok “geliştiricinin” javascript dosyalarını doğrudan header.php veya footer.php dosyasında çağırmasıdır..


Bu kılavuzda, javascript dosyalarınızı function.php dosyanızı kullanarak doğru şekilde nasıl arayacağınızı göstereceğim, böylece doğrudan sitenizin head veya footer etiketine yüklenecekler. Bu şekilde dağıtım için bir tema geliştiriyorsanız ve son kullanıcınız komut dosyalarını alt temasıyla değiştirmek isterse veya küçültme / önbelleğe alma veya diğer optimizasyon eklentilerini kullanıyorsa doğru şekilde çalışacaktır. Ve bir alt tema ile çalışıyorsanız, komut dosyalarınız header.php veya footer.php dosyalarını hiçbir zaman gerekli olmaması gereken alt temanıza kopyalamadan doğru şekilde eklenirsiniz (iyi kodlanmış bir tema ile çalışırken)

WordPress Temalarına Javascript Eklemek İçin Yanlış Yol

Aşağıda gösterildiği gibi header.php dosyanızdaki veya footer.php dosyanızdaki javascript’i çağırmak doğru bir yol değildir ve buna karşı kesinlikle tavsiye ederim, çoğu zaman diğer eklentilerle çakışmalara neden olur ve bir CMS ile çalışırken işleri manuel olarak yapmak asla iyi bir fikir.

WordPress Temalarına Javascript Eklemenin Doğru Yolu

WordPress temanıza javascript eklemek için daha iyisi, bunu function.php dosyası aracılığıyla yapmaktır. wp_enqueue_script. Javascript’inizi yüklemek için wp_enqueue_scripts eylemini kullanmak, temanızın beladan uzak kalmasına yardımcı olacaktır.

Misal

wp_enqueue_script ('betiğim', get_template_directory_uri (). '/js/my-script.js', dizi (), true);

Yukarıdaki kod sitenize my-script.js dosyasını yükleyecektir. Gördüğünüz gibi ben sadece $ tanıtıcı dahil ettik ama senaryonuz için bağımlılıklar ekleyebilirsiniz, sürüm numarası ve üstbilgi veya altbilgi yüklenip yüklenmeyeceği (varsayılan üstbilgidir).

Wp_enqueue_script () işlevi teknik olarak herhangi bir tema veya eklenti şablon dosyasında kullanılabilir, ancak global komut dosyaları yüklüyorsanız, bunu temanızın function.php dosyasına veya özellikle komut dosyalarını yüklemeyi amaçlayan ayrı bir dosyaya yerleştirmek istersiniz. bir site. Ancak yalnızca belirli bir şablon dosyasına (örneğin galeri yayınlarına) bir komut dosyası yüklemek istiyorsanız, işlevi doğrudan şablon dosyasına yerleştirebilirsiniz, ancak kişisel olarak tüm komut dosyalarını tek bir yerde tutmanızı ve yüklemek için koşullu kullanmanızı öneririm gerektiğinde komut dosyaları.

WordPress Barındırılan Komut Dosyaları

WordPress ile ilgili harika bir şey, tema geliştirmenizde kullanabileceğiniz ve barındırdığı bir dizi komut dosyası olmasıdır. Örneğin, hemen hemen her projede kullanılan jQuery, HER ZAMAN WordPress’ten yüklenmeli ve asla Google gibi üçüncü taraf bir sitede barındırılmamalıdır. Bu nedenle, projenize özel bir komut dosyası eklemeden önce kayıtlı komut dosyaları zaten WordPress’e dahil olmadığından emin olmak için ve eğer kendi hesabınızı kaydetmenin aksine bunu yüklemelisiniz.

WordPress Enqueue Hook’u Kullanma

Daha önce sitenize bir komut dosyası yüklemek için gereken işlevden bahsetmiştik, ancak function.php dosyanız gibi şablon olmayan dosyalarla çalışırken, bu işlevi uygun WordPress kancalarına takılan başka bir işlevin içine eklemelisiniz, bu şekilde komut dosyalarınız olsun alt tema kullanırken WordPress, 3. taraf eklentileri ve ana temanız tarafından kaydedilen diğer tüm komut dosyalarıyla kaydedildi.

WordPress’in komut dosyalarınızı çağırmak için kullanabileceğiniz iki farklı eylem kancası vardır.

  1. wp_enqueue_scripts – ön uçta komut dosyaları yüklemek için kullanılan eylem
  2. admin_enqueue_scripts – WP yöneticisine komut dosyaları yüklemek için kullanılan eylem

Aşağıda, bir işlevin nasıl oluşturulacağına ve komut dosyalarınızı çağırmak için WordPress kancasının nasıl kullanılacağına ilişkin bir örnek (function.php dosyanıza eklenecektir).

/ **
* Bir komut dosyasını enqueque
* /
işlev myprefix_enqueue_scripts () {
wp_enqueue_script ('betiğim', get_template_directory_uri (). '/js/my-script.js', dizi (), true);
}
add_action ('wp_enqueue_scripts', 'myprefix_enqueue_scripts');

Not: Komut dosyanızın konumunu tanımlarken “get_template_directory_uri” işlevini nasıl kullandığımızı görüyor musunuz? Bu işlev tema klasörünüze bir URL oluşturur. Bir alt temayla çalışıyorsanız, ana temayı değil alt temanızı gösterecek şekilde “get_stylesheet_directory_uri” kullanmak istersiniz..

Satır İçi Javascript Kodu Ekleme

Satır içi javascript’i komut dosyası etiketi aracılığıyla kolayca herhangi bir şablon dosyasına yapıştırabilirsiniz, ancak özellikle çekirdek bir eklenti veya tema kodu olduğunda satır içi kodunuzu eklemek için WordPress kancalarını kullanmak iyi bir fikir olabilir. Aşağıda sitenize satır içi komut dosyaları ekleme örneği verilmiştir:

işlev myprefix_add_inline_script () {
wp_add_inline_script ('komut dizim', 'uyarı ("merhaba dünya");', 'sonra');
}
add_action ('wp_enqueue_scripts', 'myprefix_add_inline_script');

Bunun yapacağı şey, daha önce kaydedilmiş olan “betiğim” betiğinden sonra satır içi javascript’inizi eklemektir. Wp_add_inline_script kullanırken, yalnızca önceden kaydedilmiş bir komut dosyasından önce veya sonra satır içi kod ekleyebilirsiniz, böylece belirli bir komut dosyasının kodunu değiştirmeye çalışıyorsanız, kodun bundan sonra yüklendiğinden emin olun veya yalnızca bazı özel kodlar eklemeniz gerekiyorsa genellikle çoğu WordPress teması tarafından yüklenen jquery komut dosyasına ve eğer değilse jQuery’nin WordPress barındırılan sürümünü yüklemek için wp_enqueue_script’i kullanabilirsiniz..

Bu yöntemi kullanarak, kullanıcılar bir alt tema veya eklenti eklentisi aracılığıyla satır içi komut dosyalarınızı kolayca kaldırabilir, tüm özel javascriptinizi düzgün bir şekilde düzenler ve daha güvenli olabilecek WordPress tarafından ayrıştırılır. Bir alt tema kullanıyorsanız, betiklerinizi header.php veya footer.php dosyalarını alt temanıza kopyalamak yerine function.php dosyanız aracılığıyla yükleyebilirsiniz..

Bununla birlikte, bir çocuk temasında çalışıyorsanız, bunu yapmanız gerekmez, wp_head’i veya aşağıdaki örnek gibi wp_footer kancalarını kullanarak kodunuzu başlığınıza dökebilirsiniz:

add_action ('wp_footer', işlev () {?>  
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Like this post? Please share to your friends:
    Adblock
    detector
    map