WordPress'te Javascript ve CSS Stilleri Nasıl Eklenir?
PHP , öğrenmesi en kolay programlama dillerinden biridir. Facebook , Wikipedia,WordPress ve Drupal gibi popüler içerik yönetim sistemleri gibi çok sayıda trafiğe karışmış web sitesine güç veriyor. PHP'nin çok az bilgisi ile, herkes, standart ve en iyi uygulamalara bağlı kalmamakla birlikte WordPress'i öğrenebilir ve eklenti geliştirici olabilir. Şaşırtıcı dizinde çok az yazılı ve kaynak yoğun eklentileri var. Doğrudan JavaScript ve CSS stil sayfalarını içeren birçok eklentiyi görüyoruz.
Bu Yaklaşımla İlgili Problemler
Bu yaklaşımda kodla ilgili bir takım sorunlar var.
-
Bileşenlerin nereye ekleneceğini kontrol edememe, stil sayfası ve JavaScript sitenin tüm sayfalarına dahil edilir. Örneğin, bir eklentinin yönetici sayfasını tasarlayacak CSS, WordPress'e bu şekilde eklenir. Bu, sonuç olarak sitenin tüm sayfalarında CSS dosyasının da bulunacağı anlamına gelir. Tarayıcı, gerekmediğinde bile dosyayı her zaman alır.
-
WordPress'de JavaScript ve CSS bileşenlerini dahil etmenin standart veya önerilen bir yolu vardır. Kendi yolunu yapmak kötü bir uygulama olarak kabul edilir .
-
JQuery'ye bağlı olan her eklentinin kendi örneklerini WordPress'e eklediğini ve bu tür eklentilerin bir WP sitesine kurulduğunu varsayarsak, bunun sonucu jQuery'nin birden çok örneğinin varlığıdır. Bu uygulama gereksizdir, çünkü bir jQuery örneği eklentilere iyi hizmet ederdi.
Doğru Yolu Yapmak
WordPress, JavaScript ve CSS'yi doğru şekilde dahil etmek (enqueuing) için bir dizi fonksiyonla “gönderir”. Bu böyle yapılır.
JavaScript'i En İyileştirme
Aşağıdaki işlevler, WordPress'te JavaScript'in düzenlenmesi için kullanılabilir:
-
wp_enqueue_script() - Komut dosyası bağımlılıklarına göre doğru zamanda oluşturulan sayfaya bir komut dosyası dosyası (bağımlılık hakkında daha sonra bilgi).
-
wp_register_script() - Daha sonra kullanmak için WordPress'de bir komut dosyası kaydeder.
wp_enqueue_script()İşlev aşağıdaki parametreleri gerektirir.
$handle: İhtiyacınız olabilecek senaryoya başvurmak için kullanacağınız şey.
$src: Yüklenecek komut dosyasının URL'si, yani eklentinizdeki kaynak dosyaya giden yol.
$deps: Bu betiğin çalışmasına bağlı olduğu herhangi bir komut dosyasının tanıtıcısını içeren bir dizidir. Bu parametre isteğe bağlıdır. Bu parametreyi belirtmemek, komut dosyasının bağımlı olmaması anlamına gelir.
$ver: Komut dosyanızın sürümü, komut dizesi URL'sinin sonuna bir sorgu dizesi olarak eklendi.
Ayarlanmışsa true, sürüm numarası komut dosyası URL'sine eklenmez. Bu parametreyi kullanmazsanız, WordPress sürümü varsayılan olarak kullanılır.
$in_footer: Normalde, komut dosyaları WordPress'in başlığına yerleştirilir. Bu parametre ise true, komut dosyası kapanış etiketinden önce yerleştirilir .
Bir komut dosyasını yüklemek için temel bir örnek:
Komut dosyasının jQuery ve jquery-ui-datepicker kütüphanelerine bağlı olduğunu varsayarsak, bağımlılık dizisini işlevin dördüncü bağımsız değişkeni olarak geçirir.
Komut dosyası URL'sine bir sürüm numarası eklemek için, 1.0 aşağıdaki kod bölümüne bakın.
Komut dosyasını WordPress'in altbilgisine yerleştirmek istiyorsanız, dördüncü parametreyi true ayarlayın.
Not: wp_enqueue_script ve wp_register_scriptonlar aynı işlevi parametrelere sahip olduğundan benzerdir. Tek fark, eski komut hemen yüklenirken, ikincisi betiği daha sonra yeniden kullanmak için yükler.
WordPress, web geliştiricileri tarafından WordPress'in kendi içinde kullanılanlar dışında yaygın olarak kullanılan birçok popüler betiği içerir .
Kayıtlı kütüphanelerin kendi versiyonunu dahil etmek yerine, bunlardan herhangi birini almanız yeterlidir ve WordPress herhangi bir fazlalığı kaldıracak ve sadece komut dosyasının bir örneğinin yüklenmesini sağlayacaktır.
Örneğin, eklentiniz Jcrop kütüphanesine ihtiyaç duyuyorsa , kendi script sürümünüzü eklemeyin, bunun yerine kayıtlı olanı girin.
Not: Başka bir betiğe (jQuery) bağlı kayıtlı bir komut dosyasını (jcrop) işaretlediğinizde, WordPress otomatik olarak bağımlılık sıkıntılarını giderir.
Enquant CSS Stil Sayfası
wp_enqueue_style () ve wp_register_style () CSS ne wp_enqueue_script () ve wp_register_script () JavaScript için.
İşlev özeti
$handle Stil sayfası tanıtıcı adı.
$src - Stil sayfasının URL'si.
$deps - Stil sayfası, stil sayfasının bağımlı olduğunu belirtir.
$ver - Stil sayfası sürüm numarası.
$media- Bu stil sayfasının tanımlandığı ortam. Örnekler: 'hepsi', 'ekran', 'el tipi', 'baskı'.
İşte bir CSS dosyasını WordPress'e güvenli bir şekilde ekleme.
Daha sonra için CSS stil dosyasını nasıl kaydedeceğiniz aşağıda açıklanmıştır wp_register_style().
Her Yerde Enquue Durdur
Şimdiye kadar gördüğümüz kod örnekleri , ön uçta yüklenmesi gereken öğeleri seçmek için wp_enqueue_scripts eylemini kullanır .
Tüm yönetici sayfalarına bir CSSveya JavaScript belgesi seti yüklemek için admin_enqueue_scripts eylemini aşağıdaki gibi kullanın.
Giriş sayfasında görünmesi gereken öğeleri düzenlemek için login_enqueue_scripts kullanın .
Eğer bir şey yapmak için bir standart mevcutsa, bunlara bağlı kalmanız tavsiye edilir, çünkü muhtemelen sizden daha iyi anlayabilen insanlar tarafından çok düşünülmüş olarak yaratılmışlardır.
Bu öğreticinin, WordPress'te En İyi Komut Dosyalarını düzgün bir şekilde nasıl kullanacağınızı daha iyi anlamanıza yardımcı olacağını umuyoruz.