WordPress’te baş ve altbilgiye JavaScript ve CSS dosyası ekleyin

Bir hackleme olarak, bazen haardcode olan bir bağlantıyla javascript veya css dosyalarını doğrudan header.php veya footer.php şablon dosyasına WordPress temasından ekliyorum.Bu gerçekten hayır hayır!Bu, komut dosyalarının çatışmasına veya çoğaltılmasına neden olabileceğinden veya gerçekten kötü olduğu için, tüm JavaScript ve CSS dosyalarını eklemek için mantıklı bir yöntem vardır ve böylece WordPress tarafından doğru bir şekilde tanınırlar ve sayfanın başlıklarında veya pegementinde güvenli bir şekilde yayınlanır ve Çatışma olmadan da yüklenen diğer bağımlı senaryolar.JavaScript ve CSS dosyalarını yüklemek için WordPress üzerindeki yöntemin doğru listesi ve girişi, komut dosyalarını ve ardından komut dosyalarını kaydetmektir.Kayıt süreci;JavaScript için wp_register_script () veya css için wp_register_style () temel olarak WordPress’e komut dosyaları ve enqueue süreci hakkında bilgi verir;CSS için wp_enqueue_script () veya wp_enqueue_style () için WordPress’e komut dosyalarını çalıştırmasını/yüklemesini söyleyin.
Kayıt ve enqueue arasındaki fark açık değildir ve gerçekte, sadece enqueue adımlarını kullanarak hayatta kalabilirsiniz, ancak bunu doğru şekilde yapmak uğruna, bu işlemlerin her ikisini de kullanalım. Function and function.php Peki komut dosyaları ve CSS nereye ekliyorsunuz? Peki, hepsi function.php dosyasında yapılır. Tema klasöründe bulunan ve benzersiz bir işlev olarak eklenir. Functions.php dosyasını görmesi ve görememesi gereken bir alt tema kullanıyorsanız, sadece oluşturun ve dosyanın açılış php etiketiyle başladığından emin olun. <? PHP Tüm JavaScript ve CSS dosyalarımızı kullanmak için depolayacak bir işlev oluşturalım.
// JS ve CSS dosyalarını buraya yükleyin
}
Add_action ('wp_enqueue_scripts', 'mythemename_all_scriptSandstyles'); Dolayısıyla, tema adlarının kısaltmasından başlayarak ve tanımlayıcı kelimeler, tüm komut dosyalarını ve stilleri yüklemek için düzenlenmiş bir kıvırcık işlevini çevreleyen mythemename_all_scriptSandSandStyles iyi bir fikirdir. Eylem; Add_action, tüm komut dosyalarını ve stilleri ve yeni işlevimi yüklemek için WordPress php wp_enqueue_scripts işlevini kullanır; mythemename_all_scriptSandstyles
Bu nedenle, her bir komut dosyası için ve daha sonra toplu olarak eylemde wp_enqueue_script kullanılır. Javascript dosyası ekle Javascript dosyalarını yükleyelim, birçoğu seçilebilir, eski tarayıcılar için çok fazla yer tutucu.js kullanıyorum, giriş formları alanında varsayılan metin görüntülemek ve ayrıca tema klasör fonksiyonunuzdaki JS klasörüne javascript ekleyin mythemename_all_scriptsandstyles ekleyin () { /) / JS ve CSS dosyalarını buradan yükle
wp_register_script ('yer tutucu', get_stylesheet_directory_uri (). '/js/placeholder.js', dizi ('jQuery'), '1.0.0', true);
wp_enqueue_script ('kap');
}
Add_action ('wp_enqueue_scripts', 'mythemename_all_scriptSandstyles'); Bu nedenle, wp_register_script () ile bir komut dosyası kaydederek, 2'si çalışması gereken virgülle ayrılmış 5 argümana devam edersiniz:
İsimler – Ne istersen, bir senaryoya benzer en iyisi – zorunlu
Konum – Zorunlu El Yazması Depolama
herhangi bir komut dosyasının bağımlılıkları – bir şeye ihtiyaç duyulursa başka hangi komut dosyaları – isteğe bağlı
Sürüm – Bunu istediğiniz her şeyi adlandırabilirsiniz, gerçek sürüm – isteğe bağlı – varsayılan WordPress sürüm numarasını adlandırmalısınız
Üstbilgi veya altbilgi konumu – altbilgi için doğru, başlık için false – isteğe bağlı – varsayılan başlığa
Komut Dosyasının Bağımlılığı Komut dosyanız diğer komut dosyalarına bağlısa, ne olduğunu öğrendiğinizden emin olun ve ayrıca kaydolun ve sıraya girin, WordPress birçok komut dosyası ile donatılmıştır, bu nedenle kullanılabilir olabileceğinden emin olmak için, tam listenin WordPress'teki olduğunu kontrol edin Kodeks burada.
Komut dosyanız diğer kayıtlı komut dosyalarına bağlıysa, bunu yukarıdaki gibi bir dizi formatına () ekleyin, diziler dizideki koma ile ayrılmış birkaç bağımlı komut dosyası içerebilir. CSS dosyasını şimdi ekleyin, CSS dosyasını ekleyelim ve örneğin Google yazı tipini kullanalım. İşlev mythemename_all_scriptSandstyles () {// js ve css dosyalarını buradan yükle
wp_register_script ('yer tutucu', get_stylesheet_directory_uri (). '/js/placeholder.js', dizi ('jQuery'), '1.0.0', true);

wp_register_style (‘googlefonts’, ‘http://fonts.googleapis.com/css?family=shammersmith+one’, Array (), ‘1.0.0’, ‘All’);
wp_enqueue_script (‘kap’);
wp_enqueue_style (‘GoogleFonts’);
}
Add_action (‘wp_enqueue_scripts’, ‘mythemename_all_scriptSandstyles’); Hatırlanması gereken ilk şey, WordPress PHP işlevinin adını bir senaryo tarzına dönüştürmektir; wp_register_style () ve wp_enqueue_style ()
wp_register_style () ayrıca 5 parametre vardır;
İsimler – Ne istersen, stile benzer en iyisi – zorunlu
Saklanan Stil Konumları – Zorunlu
Her bağımlı stil sayfası – başka bir stil gerekiyorsa – isteğe bağlı
Sürüm – Bunu istediğiniz her şeyi adlandırabilirsiniz, gerçek sürüm – isteğe bağlı – varsayılan WordPress sürüm numarasını adlandırmalısınız
Medya türleri – örneğin, ‘hepsi’, ‘baskı’, ‘el tipi’ – isteğe bağlı – varsayılan herkese
Bu, yalnızca CSS dosyaları için ilk 2 parametreyi geçmek daha olasıdır. Yukarıdaki örnekte GoogleFonts stilinin adına devam ederek WP_ENQUEUE_STYLE işlevini daha sonra bildirmeyi unutmayın.
Yalnızca ana sayfanıza bir komut dosyası eklemek, yalnızca komut dosyası stilinin yalnızca belirli sayfalara yüklenmesini istiyorsanız seçici olarak bildirilebilir. Bu örnek, js yalnızca ana sayfada olmak için düz kaydırma komut dosyasını kullanacaktır. İşlev mythemename_all_scriptSandstyles () {// js ve css dosyalarını buradan yükle
wp_register_script (‘yer tutucu’, get_stylesheet_directory_uri (). ‘/js/placeholder.js’, dizi (‘jQuery’), ‘1’, true);
wp_register_style (‘GoogleFonts’, ‘http://fonts.googleis.com/css?family==Hammersmith+one’, Array (), ‘2’, ‘All’);
wp_register_script (‘smoothScroll’, get_stylesheet_directory_uri (). ‘/js/smooth-scroll.js’, dizi (‘jQuery’), ‘1’, true);
wp_enqueue_script (‘kap’);
wp_enqueue_style (‘GoogleFonts’);
if (is_front_page ()) {
wp_enqueue_script (‘smoothScroll’);
}
}
Add_action (‘wp_enqueue_scripts’, ‘mythemename_all_scriptSandstyles’); Yani burada smooth-scrol.js dosyası normalde wp_register_script ile kaydedilir, ancak wp_enqueue_script’in işlevinde sadece ana sayfaya şartlı olarak yüklenir. Bu, bir çift kıvırcık parantezle wp_enqueue_script işlevini çevreleyen koşullu bir etiket içeren bir IF deyimi ekleyerek yapılır.
Bu kadar, tüm komut dosyalarını ve stilleri tek bir işlev altında saklayarak yönetimi daha basit ve kullanımı daha kolay hale getirir.