WordPress’e özel javascript’i doğru şekilde nasıl ekleyeceğinizi öğrenin
WordPress’te JavaScript’in nasıl kullanılacağını öğrenmek için zaman ayırdınız. Ayrıca, kodlamayı düzenlemek için yararlı olan bir dizi JavaScript kütüphanesi ve kaynak aldınız. Ama şimdi elde ettiğiniz becerilerle ne yapıyorsunuz? WordPress sitenize özel JavaScript eklemek istemenizin birkaç nedeni vardır ve bunu uygulayabileceğiniz birkaç yol vardır. Ama bunu nasıl yaptığınız konusunda çok dikkatli olmalısınız. Yanlış JavaScript uygulaması, iyilikten daha fazla kayıplara neden olabilir.
Bugünün JavaScript öğretici kılavuzunda, sitenize neden özel JavaScript eklemek isteyebileceğiniz ve bunu nasıl güvenli ve hassas bir şekilde (WordPress eklentisini kullanma dahil) nasıl yapacağınız hakkında konuşacağım. WordPress sitesiyle karşılaşırken neden WordPress’e özel javascript eklemek isteyebilirsiniz, ihtiyacınız olan üç unsur var:
HTML
CSS
Javascript
HTML ve CSS çok iyidir. WordPress siteniz için güçlü bir temel oluşturuyorlar. Ancak, sitenizin “davranışını” değiştirmek istiyorsanız çok yardımcı olamazlar. Örneğin, aşağıdakileri yapmak için JavaScript’i kullanmanız gerekebilir:
HTML öğelerini değiştirin, gizleyin veya görüntüleyin.
CSS değişkenine değeri ekleyin ve değişkeni birleştirme veya eylem gerçekleştirildikten sonra (tıklamalar gibi) yanıt verme gibi karmaşık işlemi değişkene çalıştırın.
WordPress tema düzeninizi ve tasarımınızı değiştirin (belirli öğeleri kontrol etmeniz yasaklanıyorsa).
WordPress eklentisi işlevselliğini değiştirin veya artırın.
Sitenizi kayar bıçaklar, animasyon, video oynatıcılar, römorkör efektleri veya doğrudan imleçler, hesap makineleri ve diğer etkileşimli öğeler gibi dinamik içerikle artırın. Sitenize Google Analytics veya üçüncü taraf gibi kaynakları veya harici öğeleri ekleyin. API.
JavaScript burada yardımcı olabilir.
Bununla birlikte, JavaScript HTML ve CSS gibi uygulanacak kadar basit değildir. Sadece kodu nasıl yazdığınız konusunda dikkatli olmakla kalmaz, aynı zamanda WordPress’e nasıl ve nerede eklediğiniz konusunda da dikkatli olmanız gerekir. HTML ve CSS’ye uzmanlaştıktan sonra WordPress’e özel javascript nasıl eklenir ve gerçekten WordPress sitenizi yayınlamak istiyorsunuz, buna özel JavaScript ekleme zamanı. Ama bunu nasıl yapıyorsun ve nereye koyuyorsunuz? Ve daha da önemlisi, bu önemli mi? Temel bir kural olarak, JavaScript iki konumdan birine dahildir:
Site genelinde senaryo uygulamaları için temanızın başında.
Özel bir sayfa uygulaması için web sayfasının içinde.
Ve her zaman o konuma eksiksiz bir etiket yerleştirmeniz gerekmez. Web sayfanızın daha hızlı çalışmasını sağlamak istiyorsanız ve kodunuzun okunması daha kolaydır, ayrı bir JavaScript dosyası (.js) oluşturabilir ve şöyle referanslar kullanarak çağırabilirsiniz: http: //namafile.js oldukça basit geliyor, değil mi? Evet, yani, JavaScript’in bir programlama dili olduğunu hatırlamanız gerekir. Bu, HTML veya CSS gibi web sayfanıza kolayca enjekte edebileceğiniz bir şey değildir. Yani, WordPress sitenize özel JavaScript eklediğinizde izlenmesi gereken bazı kurallar:
Kurallar #1: Bir sayfaya çok küçük komut dosyaları eklemeniz veya ondan dosyaları çağırmanız dışında WordPress Düzenleyicisi kullanmayın, sayfanız için metin editörleri ve WordPress’inizi gönderin JavaScript’inizi yazmak için bir yer değildir. Bu, web sayfalarınızın yüklenmesini yavaşlatır ve dağınık bir kod oluşturabilir. Kurallar #2: Dosyalarınızı doğrudan değiştirmeyin
Bu kural tema dosyalarınız ve eklentilerinizle ilgilidir. JavaScript, WordPress entegrasyonunuza işlevselliği eklemenize veya değiştirmenize yardımcı olsa da, başlık dosyasına özel JavaScript eklemek kötü bir uygulamadır.
Bahsettiğim gibi, doğrudan WordPress’e özel JavaScript eklemek, birçok dağınık şey yapabilir ve potansiyel olarak Beyaz Ölüm Ekranı gibi ciddi sorunlara neden olabilir. Ancak komut dosyasını yalnızca bir sayfaya uygulamak istiyorsanız, kodu eklemek yerine yere girmenin bir yoluna ihtiyacınız vardır ve sitenizin geri kalanını gereksiz HTTPS istekleriyle engeller. Bu nedenle, ayrı bir JavaScript dosyası oluşturmanız gerekir. Codex WordPress, bir sonraki dosyanızla ne yapacağınız hakkında birkaç adım içerir. Kolay referanslar için önerilen budur:
Ya bir komut dosyası veya birkaç komut dosyası var, dosyadaki her komut dosyası için işlevi belirlediğinizden emin olun. Örnek olarak:
Ardından, böyle bir komut dosyası kullanarak web siteniz başlığınızdan dosyayı arayın (bunu bir eklenti kullanarak başlığa ekleyebilirsiniz):
Son olarak, dosyada ayarladığınız gerçek JavaScript işlevini çağırmalısınız. Orada yalnızca bir komut dosyası olsa bile, komut dosyasının kodunuzda tanımlanması gerekir. JavaScript tüm sayfalar veya siteler için geçerlise, başlığa aşağıdaki JavaScript çağrısını ekleyebilirsiniz. JavaScript’in sayfada bir yerde yürütülmesi gerekiyorsa, sitenizin gövdesini girmelidir: Kurallar #4: WordPress eklentisini WordPress eklentisi için minnetle kullanın. JavaScript’e gelirken, aşağıdaki eklenti, JavaScript doğrudan WordPress dosyanıza yerleştirildiğinde ortaya çıkan sorunlardan kaçınmanıza yardımcı olacaktır. Bunun yerine, bu eklenti sunucunuza komut dosyasını yalnızca eylem “etkinleştirildiğinde” çağırmasını söyler, bu da doğrudan kendilerine uygulandığınız değişiklikleri silecek WordPress temasının ve eklenti güncellemesinin üstesinden gelmenize yardımcı olur. Üstbilgi ve Footer eklentisini girin
WordPress eklentisi, geliştiricilerin özel kodlarını başlıklarına ve altbilgi temalarına daha kolay girmelerine yardımcı olmak için WP Aregner tarafından geliştirilmiştir. Temel olarak, tüm özel komut dosyalarınızı ekleyebileceğiniz Header.php dosyasının dışında rahat bir araç vermektir. Bu eklentinin yalnızca JavaScript ile Site genelinde değişiklik yapmaya çalışırsanız ideal olduğunu lütfen unutmayın. WordPress depolarında bulunan başka birkaç başlık ve ayaklı eklenti olmasına rağmen, şimdiye kadar WP Başlangıç eklentisi en popüler ve güvenilir. Daha fazla bilgi için kısa kod üreticisi eklentisi
