WordPress’teki sayfaya javascript ve özel stilleri doğru ekleyin
Bu makalede JavaScript ve CSS’nin WordPress dosyalarına nasıl girileceği tartışılmaktadır. Bu, olağanüstü, yukarı ve çalışan WordPress kursumuzun bir bölümüdür. Bilgili olan bir WordPress geliştiricisi olmak istiyorsanız, yukarı ve koşu en iyi yoldur ve bunu başarmak için ziyaret edilir.
WordPress’in gelişimini öğrenmenin en iyi yolu uyan ve bugün koş!
Bunlardan birinin söylemesi gereken şey:
“Bence WordPress’in gelişimini öğrenmek isteyen herkes bu kursu gerektiriyor. Videoyu izlemek açılan bir grup ışık gibi.” -Jason, WordPress geliştiricisi
Uyan ve şimdi koş
Şimdi okumaya devam edin.
Ana paketler:
JavaScript dosyaları ve stil sayfası CSS’yi WordPress’e girmek için doğru yöntem Enqueue ile ilgilidir. Bu, bu dosyaları doğrudan site başlığınıza ekleyerek yapılamayan esneklik ve ayarlama özelliklerine izin verir.
Stil sayfasını bekleme işlevine enqueue wp_enqueue_style () denir. JavaScript dosyasını kuyruklama işlevine enqueue wp_enqueue_script () denir. İki işlev çoğunlukla wp_enqueue_scripts adlı WordPress eylemine bağlanır.
Komut dosyalarının ve stillerin doğru şekilde enqueue – ve genel olarak eklentilerin temasına ve kaynaklarına bağlantılar – bu bölümde tartışılan WordPress URL menüsünün işlevi hakkında uygun bilgi gerektirir.
Bu bölümde, en yaygın kullanılan WordPress işlevlerinden birini tartışacağız: WordPress sitesine girilecek enqueue dosyası işlevi.
JavaScript Dosyası: Bu, kullanıcının tarayıcısına gönderildikten sonra WordPress sitesine özel işlevler ekler. JavaScript, etkileşimli görüntü kaymaları, esnek akıllı stil ızgaralar veya “taş” düzenler gibi dinamik görsel efektler oluşturmak için çok yaygın olarak kullanılır. Bunun da çok, çok daha fazla kullanımı var.
CSS Stylesheet: CSS Styles sayfası web sitesine nasıl görüntüleneceğini anlatıyor. Her WordPress teması style.css vardır ve birçoğunun ek stil sayfaları vardır. Birçok eklenti ayrıca, eklentiye Siteye eklenen belirli öğelere kuvvet veren kendi CSS stil sayfalarından bir veya daha fazlasına sahiptir.
CSS dosyaları iyi web siteleri için çok önemlidir ve JS dosyaları da sıktır. Bu bölüm, WordPress sitenize özel JS veya CSS eklemeyi içerir.
Önce ilk şey başlığınıza CSS ve JavaScript doğrudan başlığınıza eklemeyin: Bu durumda doğrudan header.php dosyalarına veya diğer şablon dosyalarına CSS ve JavaScript eklemeyin. DD komut dosyasını WordPress’in (ve aynı zamanda stil sayfasına) komut dosyasına yönlendirmenin doğru yolunu tartışacağız ve bu doğrudan dosyaya yerleştirmek değildir.
Neden olmasın? Çünkü “WordPress Yöntemi” nde WordPress sayfasına JavaScript ve Style eklemek, daha sonra birçok yararlı şey yapmanızı sağlar. Örneğin, yalnızca sayfalarda yeni bir stil sayfası eklemek istersiniz. WordPress’te, bu bölümde tartışacağımız WP_ENQUEUE_ () işleviyle ve biraz koşullu mucize ile yapmak oldukça kolaydır.
Ancak, stil sayfanızı doğrudan tema başlığınıza atmaya alışkınsanız, WordPress styles sayfası hiç “konuşamaz”. Onlar tamamen WordPress “fabrika” süreci dışında – sadece orada kalmak. Bu nedenle, “Bu stili sadece sayfa için yükleme” mantığını iletmenin iyi bir yolu yoktur ve koşullu stil sayfanızın amacı çok daha zor hale gelir. JS ve CSS dosyalarını doğrudan Header.php’ye eklemenin neden kötü bir fikir olduğunu tartışmanın birçok yolu vardır, ancak gerçek sonuç şudur: Bunu yapma.
Eklenti temalarına ve kaynaklarına bağlantı vermenin doğru yolu, WordPress’teki dosya yolu hakkında hiçbir şey varsaymaz – sabit kod URL’si yapmayın.
Diyelim ki temamızın kök dizininde depolanmış özel bir stil sayfamız, new.css. Nasıl bağlarız? Başka bir deyişle, WordPress’e stil sayfası dizininin yapısında tam olarak nerede olduğunu nasıl anlatabiliriz? Bu soru, wp_enqueue_ () işlevini kullanmada en hızlı ortaya çıkar, ancak cevabı bilmek diğer durumlarda da çok yararlıdır. Bilmeniz gereken ilk şey: WordPress’teki dosya yolu hakkında hiçbir şey varsaymayın. Başka bir deyişle, hardcood URL’sini yapmayın. Asla http://yourdomain.com/wp-content/themes/my-theme/new.css-do gibi bir dizin yazmayın, wp_enqueue_ () işlevini doğru veya kullanmayın. Siteniz artık bir gün olmayabilir. Benzer şekilde, wp-content, temalar ve benim-tema dizinin adı tüm değişebilir ve bir şey değişirse, sabit kod bağlantınız hasar görür.
WordPress işlevini kullanın WordPress, dosya adı dışında her URL öğesi için bir sihirli işlev vardır.
Yukarıdaki URL’de, yalnızca dosyanın kendisi, new.css, nispeten kararlıdır. Neyse ki, WordPress, yazdığınız URL’nin diğer her kısmı için kullanılabilecek bir sihirli işlevi vardır. Bu konuda ustalaşın ve asla ellerinizle URL’ler yazmak bile istemeyeceksiniz.
Temanın bir parçası olan kaynaklara bağlantı kurmak için tema kaynaklarına nasıl bağlantı verilir, önemli olan kök tema klasörünü veya kök dizini açmaktır:
Bunu yapmak için, aktif WordPress ortamına doğru mutlak URL’yi döndüren ve temayı çalıştıran Get_Stylesheet_Directory_uri () adlı WordPress işlevini kullanacaksınız. Aktif temanın kök dizinine, daha sonra /photo.jpg-> <div class = " <div class =" <? php echo get_stylesheet_directory_uri ();
Tema kaynaklarına bağlantı vermenin yeni ve harika bir yolu: get_theme_file_uri () WordPress 4.7’den beri, get_theme_file_uri (), çocuğun temasını ana temanın varlıklarını önemli ölçüde daha basit bir şekilde bir kenara bıraktı. WordPress 4.7’den beri, çocuğun temasının herhangi bir tema varlığının ana tema sürümünü değiştirmesine izin vermeyi çok daha basit hale getiren yeni bir işlev olmuştur: get_theme_file_uri (). Aşağıdakiler aşağıdakileri kullanmanın bir örneğidir: <div class = "”> Ve işte böyle çalışır: Bu ilk olarak kaynak kaynakları için bir çocuk teması arıyor. Bu örnekte, photo.jpg için çocuk temasının resim klasöründe arama yapacak. Ne aranan bulursanız, geri döndüğü Uri budur.
Ne aranan bulamazsa, ana temayı aynı kaynak için kontrol ederek Photo.jpg için ana temanın klasör görüntüsünde arama yapar.
Get_theme_file_uri () Üst tema için olağanüstü! Anlamı: “Bunu buraya koydum, ama çocuğumun başına gelmesi kolay olacak” – bu çocuğun temasının özü.
Bu işlevi serbestçe kullanmak, temanızı genişleten insanları, Dequeue CSS ve JS Resources gibi değiştirmeleri gereken ve varsayılan olarak üzerine yazılamayan şeyler yapan çok fazla iş yapan çok fazla iş ile kurtarabilir. Bu çok kullanışlı işlevi önümüzdeki bölümde birkaç kez kullanacağız. Açıklamak için tema kaynaklarına bağlı özet işlevleri, tema kaynaklarına bağlantı vermek için adlandırdığımız üç işlevin kısa bir özeti ve nasıl davrandıkları:
get_stylesheet_directory_uri (): Birisi yürüyorsa her zaman çocuğun temasından kök URL’yi geri yükleyin. (Türev temasının ana temasının kök URL’sini geri yükleme.) Türev temasının kaynağına atıfta bulunmak için yararlıdır. Çocuk teması tarafından kolayca yazılmak istemediğiniz ana temanın bir kısmını yapmak için kullanışlıdır.
get_theme_file_uri (): Üst tema dosyasına bağlantı ve alt temada özdeş adlandırılmış bir dosya varsa, dosyaya otomatik olarak bağlanır. WordPress 4.7’de tanıtıldı. Çocuk temasıyla kolay miras elde etmek için çok kullanışlıdır.
Tüm bunlar, CSS eklemek veya javascript eklemek istediğinizde yararlıdır. Ama küçük bir silah atladım.
Eklenti Kaynaklarına Nasıl Bağlanır Bir eklenti yazıyorsanız ve içindeki bir şeyle bağlantı kurmak istiyorsanız, Plugin_dir_url () adlı bir WordPress işlevi kullanacaksınız. Bu işlev, eklentiden gelen kök dizini döndürür. Sözdizimi biraz sıradışı, ancak alışkın olacaksınız:
<div class = " “> <div class =" “>
Yukarıdaki koddan üretilen iki resim bağlantısı şöyle görünecektir:
WordPress’te Stil Sayfası ve Komut Dosyaları Nasıl Yüklenir: WP_ENQUEUE_ () işlevini tanıtmak Tema ve eklenti kaynaklarına nasıl bağlanacağımızı bildiğimize göre, komut dosyalarının ve stillerin eklenmesini doğru şekilde ele alacağız. Bu senaryo ve stil eklemeye enqueueing denir. Bu aşağıdaki gibi çalışır:
Her komut dosyası veya enqueuee kuvvet işlemi, wp_enqueue_scripts kancalarını kullanır.
JavaScript dosyasını kuyruklama işlevine wp_enqueue_script () denir.
Stil sayfası CSS için kuyruk işlevine wp_enqueue_style () denir.
Bu, aşağıdaki örnekle daha net olacaktır.
İlk örnek: Style.css the for for for for for for for style.css teması için style.css temasını beklemek. Bu kod olmadan, bir temanın hiç tarzı olmayacak!
/ * Çevre: Function.php */ function wspout_theme_script_and_style_inclouder () {wp_enqueue_style (‘wspout style’, get_stylesheet_uri ()); } Add_action (‘wp_enqueue_scripts’, ‘wspspout_theme_script_and_style_includer’);
Olan şey bu:
İşlev wspout_theme_script_and_style_includer () {} işlevimizin adını seçebiliriz ve wpshout_theme_script_and_style_incuder adını verdiğimiz bu. Bir argümanı yok, bu yüzden () boş.
wp_enqueue_style (); Bu çizgiyi birkaç bölüme ayıracağız. İlk olarak, iki bağımsız değişkenle wp_enqueue_style () işlevini dediğimizi bilin. Bu, başka WordPress tarafından stil sayfasına atıfta bulunmak için kullanılabilen bu stil sayfası için seçtiğimiz metnin metni – çağrının adı -.
get_stylesheet_uri () iki wp_enqueue_style () bağımsız değişkeninin ikincisidir. Bu çok önemli: WordPress’e, enque etmek istediğimiz stil sayfasını nerede bulduğumuzu anlatıyoruz. Bu durum için, amacı sadece URL’yi stil.css olarak mevcut temadan geri yüklemek olan çok özel bir WordPress işlevi olan get_stylesheet_uri () kullanıyoruz.
Add_action (‘wp_enqueue_scripts’, ‘wphout_theme_script_and_style_includer’); Bu bölüm, kancalar, eylemler ve filtrelerden gelen standart eylemlerimizin sözdizimidir: WordPress: ne yaptıkları ve nasıl çalıştıkları. WP_enqueue_scripts () çalıştığında (başlık başlığı kendini oluştururken), wspout_theme_script_and_style_includer () de çalışır ve style.css dosyası enqueue d’dir ve html’imize çekilir.
Nihai sonuç
Görmek? Veranda wpsout’ta, style.css temamız görünür, çünkü yukarıdaki kod function.php.
Bu örnek yalnızca ana betiğin teması için gereklidir Çocuk temasında gerekli değildir, bu da style.css otomatik olarak enqueue d’dir. Çocuğun temasını daha sonra tartışacağız (WordPress Childrens’ın temasını anlayarak ve kullanarak), ancak yukarıdaki senaryoyu sadece ana tema için olduğunu biliriz.
İkinci örnek: Komut dosyası ve diğer tema function.php/ * ortamından çıkın: functions.php */ function wspout_theme_script_and_style_includer () {wp_enqueue_style (‘wpshout-dother sty’ style.css ‘),); wp_enqueue_script (‘wpshout-need-js’, get_theme_file_uri (‘js/wpshout-needed -js.js’), dizi (‘jQuery’)); } Add_action (‘wp_enqueue_scripts’, ‘wspspout_theme_script_and_style_includer’); ilk örneği zaten anlıyorsanız, bu örnekte öğrenilmesi gereken birkaç şey vardır:
Bu kez, tema kökünden almak için get_theme_file_uri () kullandık. Bu, ana temamızdaki dosyaya bağlanır veya çocuk temasında aynı ada sahip bir dosya varsa, çocuğun temasıyla çok kolay değiştirilmesi için otomatik olarak ona bağlanır.
Bu sefer JS dosyaları da ekledik, wpShout-Iteded -js.js. Bağlı bir işlevdeki tüm komut dosyalarından ve stillerinden nasıl enqueue verebileceğimize dikkat edin – yalnızca wp_enqueue_style () ve ne zaman wp_enqueue_script () çağıracağınızı hatırladığınızdan emin olmalıyız.
Bu kez, komut dosyamız ve stilimiz temamızdaki alt dizinde: Styles sayfası CSS / css / klasördedir ve JS dosyamız / js / klasördedir. Bu alt dizine atıfta bulunmanın ne kadar kolay olduğuna dikkat edin, ancak tek bir argüman olarak belirttiğimiz yola ekleyerek Get_theme_file_uri ().
Üçüncü örnek: Eklenti dosyasının komut dosyasının ve stilinin enqueue, bir eklentideki PHP dosyasından yapılan CSS stil sayfası ve iki JavaScript dosyası içeren ekrandır:
/ * Çevre: bir php dosyasındayız */ işlev wpsout_plugin_script_and_style_includer () {/ * eklenti kök dizinindeki stiller ve komut dosyaları */ wp_enqueue_style (bizim-plugin-example-style.css ‘); wp_enqueue_script (‘bizim-plugin-example-js’, eklenti_dir_url (__file__). / * Alt dizindeki bir komut dosyası */wp_enqueue_script (‘bizim-plugin-more-js’, eklenti_dir_url (__file__). } Add_action (‘wp_enqueue_scripts’, ‘wspout_plugin_script_and_style_includer’); burada öğrenilmesi gereken tek yeni şey, plugin_dir_url () işlevinin nasıl işlevidir. Büyülü bir sabit __file__ php alamazsanız, bu konuda çok fazla düşünmemenizi ve yukarıdakilerin başarılı olacağını bilmemizi öneririz.
Kuvvet tabakasının başka bir stil sayfasından sonra yüklenmesini istiyorsanız, çünkü daha yeni kuvvet bir öncekine aittir.
JavaScript dosyanız, özellikle JQuery’de – özellikle JQuery’de çalışacak diğer JS dosyalarına bağlıysa.
Bu ikinci durum en yaygın olanıdır ve tam bir bağımlılık getirmemizin nedeni budur. JavaScript dosyanız bir jQuery sözdizimi kullanıyorsa, jQuery’yi bir bağımlılık olarak bildirmelisiniz: wp_enqueue_script (‘örnek-js’, get_theme_file_uri (‘örnek-js.js’), array (‘jQuery’)); Burada, wp_enqueue_script () ‘in üçüncü argümanını doldurduk: bağımlılıkları. Bu argümanın bir dizi olması gerekiyor ve bu, yeni dosyamızın bağlı olduğu JavaScript dosyasının “Salyangoz” dizisi (takma adı). Bizim durumumuzda, dizinin içinde tek bir şey var: ‘JQuery’, jquery.js dosyaları için salyangoz. WordPress’i otomatik olarak içeren dosyalar. Bir kez daha, aynı şeyi WP_ENQUEUE_STYLE () üzerindeki stil sayfası için, slug CSS dizisiyle bağımlılık olarak yapabilirsiniz. Bunu yapmanın temel nedeni, stil sayfanızın diğer CSS dosyalarından daha fazla (ve dolayısıyla var) yüklenmesini sağlamaktır. Bununla birlikte, çoğu zaman, bununla uğraşmanıza gerek yoktur, çünkü çocuğun tema stili sayfası genellikle varsayılan olarak ne yapmaları gerektiğidir. Enqueue işlevini öğrendiğimiz şey WordPress’te en yararlı ve kullanışlıdır. Bu bilgi kilitli olduğunda, WordPress sayfa başlığını güvenle ekleyebilir, CSS’yi değiştirebilir ve tamamlayabilir ve daha fazlasını yapabilirsiniz. WordPress üstbilgisine komut dosyaları ve stilleri eklemek yerine bu işlevleri kullanmak için yeterince bilmek, WordPress’teki çalışmanızın kalitesini önemli ölçüde artıracaktır.
Limerick’in bir özeti ne yaptığınızı gerçekten biliyorsanız, enqueue ing ile komut dosyaları ve stiller ekleyeceksiniz. Mektuba, kullanıcının gördüğü her sayfanın başlığına (altbilgi veya) geri çekilecekler. Zaman sınavı!
Sitenizin gölgeliklerine doğrudan bir komut dosyası ve stil eklememelisiniz, çünkü:
Bu, komut dosyasını ve stili “fabrika” WordPress’i ayarlama esnekliğinden ve yeteneğinden kaldırır
Bu eski tarayıcıda işe yaramayacak
Bu, sayfanın wp_enqueue_ () ‘den daha yavaş yüklenmesine neden olur
Bir eklentinin kök dizinindeki eklenti-example-style.css dosyasına erişmek için şunları kullanın:
get_stylesheet_directory_uri (). ‘/Plugin-example-style.css’
Plugin_dir_url (__file__). ‘Plugin-example-style.css’
Plugin_dir_url (__file__). ‘/Plugin-example-style.css’
Aktif temanın kök dizininde / js / klasörde wpshout ihtiyaç duyulan -js.js’ye erişmek için şunları kullanın:
get_stylesheet_directory_uri (). ‘/Js/wpshout-needed-js.js’ get_template_directory_uri (). ‘/Js/wpshout-needed-js.js’
get_template_directory_uri (). ‘JS/WPSHOUT DEĞİL-JS.JS’
Cevaplar ve Açıklamalar
A. Komut dosyalarını ve stilleri, örneğin Dequeue komut dosyalarını ve stillerini manuel olarak önleme, koşullu olarak yükleme veya yükleme süresini azaltmak için programlanan altbilgiye programlanan komut dosyalarını taşıyın.
B. Plugin_dir_url doğru işlevdir ve /gerektirmez.
A. get_stylesheet_directory_uri (), bir çocuk teması olmasına rağmen her zaman etkin tema dizini ifade eder; get_template_directory_uri () Mevcut tema bir çocuk temasıysa, üst temanın dizini başvurun. İhtiyaç / JS’den önce dikkat edin.
Kredi resmi: startbloggingonline.com
