ev borcu WordPress sitesi
WordPress'te Head ve Footer'a Javascript ve CSS dosyaları ekleyin
Doğru kafaya almak
Ara sıra bir hack olarak, doğrudan bir WordPress temasının header.php veya footer.php şablon dosyalarına sabit kodlanmış bağlantılar içeren javascript veya CSS dosyaları eklerdim.
Bu gerçekten bir hayır hayır! bu, komut dosyası çakışmalarına veya yinelemelerine veya düpedüz kötülüğe neden olabileceğinden, tüm javascript ve CSS dosyalarını eklemenin ve bunların WordPress tarafından düzgün bir şekilde tanınması ve sayfanın üstbilgisine veya altbilgisine güvenli bir şekilde yüklenmesi için mantıklı bir yöntem vardır. diğer bağımlı komut dosyaları da çakışma olmadan yüklenir.
Kaydolun ve Sıraya Alın
WordPress'te javascript ve CSS dosyalarını yüklemek için doğru yöntem, komut dosyalarını kaydetmek ve ardından komut dosyasını kuyruğa almaktır . Kayıt işlemi; Javascript için wp_register_script( ) veya CSS için wp_register_style() , WordPress'e temel olarak komut dosyası ve kuyruğa alma süreci hakkında bilgi verir; Javascript için wp_enqueue_script( ) veya CSS için wp_enqueue_style() , WordPress'e betiği çalıştırmasını/yüklemesini söyler.
Kayıt ve kuyruğa alma arasındaki fark incedir ve aslında, kuyruğa alma adımını tek başına kullanarak idare edebilirsiniz, ancak bunu doğru şekilde yapmak uğruna her iki işlemi de kullanmamıza izin verir.
İşlev ve işlevler.php
Peki komut dosyalarını ve CSS'yi nereye ekliyorsunuz? Peki, tüm bunlar tema klasöründe bulunan ve benzersiz bir işlev olarak eklenen temanızın functions.php dosyasında yapılır.
Eğer olması gereken bir alt tema kullanıyorsanız ve bir function.php dosyası göremiyorsanız, o zaman sadece bir tane oluşturun ve dosyanın açılış PHP etiketi ile başladığından emin olun.
<?php
Fonksiyonlar.php içinde kullanmak için tüm javascript ve CSS dosyalarımızı saklayacak bir fonksiyon oluşturalım ve bu fonksiyon ile WordPress'e bir action ekleyerek fonksiyonu yüklemesi için talimat vermemiz gerekiyor.
function mythemename_all_scriptsandstyles() {
// JS ve CSS dosyalarını buraya yükleyin
}
add_action('wp_enqueue_scripts', 'mythemename_all_scriptsandstyles');
Bu nedenle adımlar, benzersiz bir işlev adı oluşturmaktır, önüne bir tema adı kısaltması ve açıklayıcı sözcükler eklemek, bu durumda mythemename_all_scriptsandstyles işlevi iyi bir fikirdir, işlevi daha sonra komut dosyalarına koymak ve ardından eklemek için küme paranteziyle çevreler. tüm komut dosyalarını ve stilleri yüklemek için işlevi çağırmak için bir eylem .
Eylem; add_action , yeni işlevimde tüm komut dosyalarını ve stilleri bir kerede yüklemek için wp_enqueue_scripts WordPress PHP işlevini kullanıyor; mythemename_all_scriptsandstyles
Böylece wp_enqueue_script , her bir komut dosyası için ve ardından toplu olarak eylemde kullanılır.
Javascript Dosyasına Ekleme
Tamam, hadi bir Javascript dosyası yükleyelim, aralarından seçim yapabileceğiniz çok şey var, eski tarayıcıların giriş form alanlarında varsayılan metni görüntülemesi için placeholder.js'yi çok kullanıyorum ve ayrıca javascript'i temanızın klasöründeki bir js klasörüne ekliyorum
function mythemename_all_scriptsandstyles() {
// JS ve CSS dosyalarını buraya yükleyin
wp_register_script ('yer tutucu', get_stylesheet_directory_uri() .'/js/placeholder.js', dizi('jquery'),'1.0.0',true);
wp_enqueue_script('yer tutucu');
}
add_action('wp_enqueue_scripts', 'mythemename_all_scriptsandstyles');
Bu nedenle, komut dosyasını wp_register_script() ile kaydederek, virgülle ayrılmış 5 argüman iletmiş olursunuz, bunlardan 2'si çalışması için zorunludur:
- isim – ne isterseniz, en iyisi senaryoya benzemesi – zorunlu
- konum – betiğin saklandığı yer – zorunlu
- herhangi bir komut dosyası bağımlılığı – varsa başka hangi komut dosyaları gerekli – isteğe bağlı
- sürüm – buna istediğiniz gibi ad verebilirsiniz, en iyisi sürümün gerçekte ne olduğunu adlandırmak – isteğe bağlı – varsayılan olarak WordPress sürüm numarasıdır
- üst bilgi veya alt bilgi konumu – alt bilgi için true , üst bilgi için false – isteğe bağlı – varsayılan olarak üst bilgidir
Komut Dosyası Bağımlılıkları
Komut dosyanız diğer komut dosyalarına bağlıysa, bunların ne olduğunu öğrendiğinizden emin olun ve bunları da kaydedip sıraya alın, WordPress bir dizi komut dosyasıyla birlikte gelir, bu nedenle zaten kullanılabilir olduğundan emin olmak için kontrol edin, tam liste WordPress'te Kodeks burada.
Bu nedenle, komut dosyalarınız zaten kayıtlı olan diğer komut dosyalarına bağımlıysa, bunları yukarıdaki gibi dizi() biçiminde ekleyin, dizi, dizide yalnızca virgülle ayrılmış birden çok bağımlı komut dosyası içerebilir.
CSS Dosyasına Ekleme
Şimdi bir CSS dosyası ekleyelim ve örnek olarak bir Google yazı tipi kullanalım.
function mythemename_all_scriptsandstyles() {
// JS ve CSS dosyalarını buraya yükleyin
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=Hammersmith+One', array(),'1.0.0','all');
wp_enqueue_script('yer tutucu');
wp_enqueue_style('googlefonts');
}
add_action('wp_enqueue_scripts', 'mythemename_all_scriptsandstyles');
İlk şey, WordPress PHP işlev adlarını komut dosyası yerine stil olarak değiştirmeyi unutmayın; wp_register_style() ve wp_enqueue_style()
wp_register_style() ayrıca 5 parametreye sahiptir;
- isim – ne istersen, en iyisi stile benzemek – zorunlu
- konum – stilin saklandığı – zorunlu
- herhangi bir bağımlı stil sayfası – varsa başka hangi stiller gerekli – isteğe bağlı
- sürüm – buna istediğiniz gibi ad verebilirsiniz, en iyisi sürümün gerçekte ne olduğunu adlandırmak – isteğe bağlı – varsayılan olarak WordPress sürüm numarasıdır
- ortam türü – örneğin, 'tümü', 'yazdır', 'elde' – isteğe bağlı – varsayılan olarak tümü
CSS dosyaları için yalnızca ilk 2 parametreyi iletmek daha olasıdır. Yukarıdaki örnekte stil googlefonts adını geçtikten sonra wp_enqueue_style işlevini de bildirmeyi unutmayın.
Yalnızca Ana Sayfaya Komut Dosyası Ekleme
Ayrıca, yalnızca belirli bir sayfaya yalnızca bir komut dosyası stilinin yüklenmesini isteyip istemediğinizi seçici olarak bildirebilirsiniz. Bu örnek, yalnızca ana sayfada olmak için düzgün kaydırma, js komut dosyasını kullanacaktır.
function mythemename_all_scriptsandstyles() {
// JS ve CSS dosyalarını buraya yükleyin
wp_register_script ('yer tutucu', get_stylesheet_directory_uri() .'/js/placeholder.js', dizi('jquery'),'1',true);
wp_register_style ('googlefonts', 'http://fonts.googleapis.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('yer tutucu');
wp_enqueue_style('googlefonts');
if ( is_front_page() ) {
wp_enqueue_script('smoothscroll');
}
}
add_action('wp_enqueue_scripts', 'mythemename_all_scriptsandstyles');
Yani burada smooth-scroll.js dosyası normal olarak wp_register_script ile kaydedilir, ancak wp_enqueue_script işlevinde yalnızca ana sayfaya koşullu olarak yüklenir. Bu, wp_enqueue_script işlevinin etrafına bir çift kaşlı ayraçla sarılmış bir koşullu etiket içeren bir if ifadesinin eklenmesiyle yapılır .
İşte tüm komut dosyalarını ve stilleri tek bir genel işlev altında tutmak, her şeyi yönetmeyi çok daha basit ve kullanımı kolay hale getirir.