Kişiler için JavaScript WordPress: Bilmeniz Gerekiyor
Aralık ayında WordCamp Us’ta, WordPress Matt Mullenweg’in kurucularından biri, “JavaScript’i derinlemesine öğrenmemizi” tavsiye etmek için konuşmasının durumunu kullandı. Peki bu ne anlama geliyor ve WordPress geliştiricilerin JavaScript hakkında ne bilmesi gerekiyor? JavaScript, geleneksel olarak web sayfalarında animasyonlar ve efektler oluşturmak için kullanılan yerleşik ve gelişen bir ön uç dilidir. Olasılık, sitenizde kayma, sosyal medya bağlantıları veya duyarlı gezinme menüleri için bir eklentiniz varsa, efektlerini oluşturmak için JavaScript kullanmasıdır.
PHP ile çalışmaya alışkın olan bir WordPress geliştiriciyseniz, JavaScript hattına asla dokunmamış olabilirsiniz ve öğrenme ihtimaliyle biraz korkmuş hissedebilirsiniz. Ancak iyi haber şu ki, PHP ve JavaScript’in benzerlikleri var. Farklı şekillerde ve farklı bağlamlarda çalışırlar, ancak yazdığınız kod her zaman farklı değildir. Bu yazıda, WordPress geliştiricileri tarafından onunla çalışmaya başlamak için anlaşılması gereken bazı JavaScript temel kavramlarını açıklayacağım. Ben tartışıcağım:
JavaScript ve WordPress – Nasıl Etkileşim, Benzerlikler ve Farklılıklar
Tem ve eklentinizde JavaScript kullanma – JavaScript’i öğrenmeye başlamanın en kolay yolu
WP-Rest API-General resim ile etkileşim kurun.
Ancak JavaScript’e kısa bir giriş ve neden çok popüler hale gelelim.
JavaScript nedir? JavaScript ön uç programlama dilidir (istemci tarafı olarak da adlandırılır), yani sitenizi ziyaret ederken kullanıcının web tarayıcısıyla iletişim kurar. Bu, arka uç dil (veya sunucu tarafı) olan JavaScript ve PHP arasındaki ana farktır, bu da sunucu ile iletişim kurmak anlamına gelir. Bu, JavaScript tarafından güçlendirilen sitenin daha hızlı ve daha duyarlı bir şekilde çalışma potansiyeline sahip olduğu anlamına gelir: Siteniz, kullanıcınızın yaptığı bir şeye yanıt vermek için PHP kullanıyorsa, talebi değiştirme için sunucuya girecek ve daha sonra sayfa ile yenilenecektir. etkin değişiklikler.
JavaScript kullanıyorsanız, tarayıcı işler değişir, yani talebin sunucuya girmek zorunda olmadığı ve sayfa yenilenmez.
Taşınabilecek avantajları hayal edebilirsiniz: Tüm sunucu isteklerini kesmek, sitenizi daha hızlı çalıştırabilir ve masaüstü programlarına çok benzer Web tabanlı bir uygulama oluşturma esnekliği sağlayabilir.
Aslında, bir WordPress kullanıcısı olarak, bunlardan birini kullandınız, çünkü WordPress yazılımı arka uç yönetici ekranında güç sağlamak için JavaScript kullanır. Öğeleri menünüze sürükledip bıraktıysanız, bir widget oluşturduysanız veya bir özelleştirici kullandıysanız, WordPress yöneticisini destekleyen JavaScript’ten yararlanırsınız.
Ancak bu, JavaScript kullanmanın her zaman PHP’den daha iyi olduğu anlamına gelmez. Bazen bir sunucunun sayfayı yenilemesini isteyebilirsiniz, örneğin SEO amaçları için yeni bir sayfa ve URL oluşturmak istiyorsanız (JavaScript’te bunların üstesinden gelmenin yolları olsa da).
JavaScript’i kullanmanın bir başka potansiyel zayıflığı, kullanıcınız tarayıcılarında JavaScript’i etkinleştirmezse işe yaramayacağıdır. Modern tarayıcılar (masaüstü ve hücresel) JavaScript ile iyi işlev görür, ancak kullanıcınızın daha uzun bir tarayıcısı varsa veya JavaScript’iniz İnternet Explorer sürümleriyle düzgün çalışmazsa veya JavaScript’in kapatılmasını gerektiren erişilebilirlik kullanmaz, daha sonra JavaScript aracılığıyla eklediğiniz hiçbir şey kullanmazlar. Bu işlev görecek. Bu nedenle, sunucunun yedek bir tarafına sahip olmak daha iyidir, her ihtimale karşı, sayfa yüklendikten sonra JavaScript kullanılarak yapılan işaretlemenin arama motorları tarafından her zaman taranmayacağını hatırlamak önemlidir. Bu nedenle, arama motoru sıralamanız için önemli bir şey varsa, sunucu yan dilini kullanarak ekleyin veya arama motorları tarafından okunabilen JavaScript yöntemini kullanın. JavaScript ve WordPress WordPress geliştiricileri olarak, JavaScript hakkında her şeyi bilmenize gerek yok, yalnızca WordPress ile çalışırken neyin alakalı olduğunu bilmeniz gerekir. Öyleyse JavaScript’in WordPress ile kullanımına ve her ikisinin de birbirleriyle nasıl etkileşime girdiğine bakalım.
1. JavaScript WordPress’in bir parçası haline geldi JavaScript, JQuery, JSON, Backbone.js ve Hatterscore.js gibi birçok JavaScript kütüphanesi şeklinde WordPress ile birlikte toplandı. Bu listeyi görmek ve nereden başlayacağınızı merak etmek korkutucu olabilir, bu yüzden önce JQuery’ye odaklanmanızı öneririm. JQuery, JavaScript ile programlamayı daha kolay ve daha güvenilir hale getiren büyük bir kitaplıktır (örneğin, tarayıcı desteğini artırır) ve sitenize temalar veya eklentiler aracılığıyla animasyon veya efekt eklerseniz, JQuery kullandığınız araç olabilir. Bunu yapmak için kullanılacak. JQuery kullanarak JavaScript ile biraz deneyiminiz olduktan sonra, komut dosyasının nasıl çalıştığını bileceksiniz ve WP-Rest API ile etkileşim kurmak için JSON kullanmaya hazır olacaksınız. Bundan daha sonra bu yazı. 2. JavaScript birçok eklentidedir ve temalarınız, efekt ve animasyon oluşturmak için JavaScript kullanan veya belki de verileri işlemek veya dinamik olarak eklemek için JavaScript kullanan eklentiler yüklemiş olabilir. Bu, hem ön uç üzerindeki etkiyi açmak hem de yönetici ekranında daha dinamik bir tema ile etkileşiminizi yapmak için birçok temada. 3. JavaScript Güçlendirme JavaScript WordPress yöneticisi, en son sürümde WordPress yöneticisi için giderek daha basit hale geldi ve gelecekte, özellikle JavaScript tarafından tamamen desteklenen WordPress yönetici sürümü olan Calypso’nun yayınlanmasıyla daha önemli olacak.
JavaScript kullanan ayarlamalar, doğrudan değişiklikler üreten yönetici ekranında yaptığınız her şey JavaScript kullanır:
Menüler oluşturun ve düzenleyin
Widget’lar oluşturun ve düzenleyin
Yalnızca yayın düğmesine tıkladığınızda, güncelleme veya kaydetme değişikliklerini tıkladığınızda, PHP başlayacak, veritabanına kalıcı depolama yapılır ve yönetici ekranı yenilenir, bu yüzden düğmelere tıklamak çok önemlidir. 4. JavaScript ve WP-Rest API Geçtiğimiz yıl için JavaScript, WordPress’e geldiğinde liderliğe daha yakın olacak şekilde destekleyici rolden mezun oldu ve bunların hepsi WordPress API dinlenmesinden kaynaklanıyor.
Burada yaptığımız gibi yangının ne olduğu hakkında çok fazla ayrıntı tartışmayacağım, ancak bu WordPress’in JavaScript ile nasıl etkileşime girdiğinin bir örneği. API’nın kendisi PHP’de yazılmıştır, çünkü veritabanıyla etkileşim kurmak için sunucu yan dilini kullanmak gerekir. Ancak fark, özellikle JSON nesnelerini kullanarak JavaScript kullanarak onunla etkileşime girebilmenizdir. Size bu yazıda nasıl yapılacağına dair genel bir resim vereceğim, ancak önce çoğu insanın WordPress ile JavaScript kullanmaya başladığı bir yer göreceğim: eklentilere ve temalara ekleyeceğim.
Eklentilerinizde ve temalarınızda javascript kullanma JavaScript efektleri eklerseniz, bunu nasıl yapılır eklentileriniz ve temalarınızda. Bir yangın dinlenme kullanıyorsanız, bunu eklentilerde veya temalarda (isteğe bağlı JavaScript ile PHP kullanarak) veya harici uygulamalar aracılığıyla (JavaScript kullanarak) yapabilirsiniz. Bence, bir veya iki etkileşim eklemek için jQuery kullanmaya başlamak iyidir, çünkü JavaScript kullanmaya alışmanıza yardımcı olacaktır. Ama hemen bir yangın dinlenme kullanmak istiyorsanız, lütfen! Komut dosyasını temanıza ve eklentinize nasıl girdiğinize ve harici kütüphaneyi nasıl aradığınıza bakalım. 1. Eklentilere ve temalara bir komut dosyası ekleyin – Matt tavsiyelerini dinlerseniz ve Noel tatillerini geçirirseniz, javascript hakkında her şeyi öğrenin, sayfalarınızı nasıl çağıracağınıza dair talimatlar bulabilirsiniz. Statik HTML ile çalışıyorsanız, bunu yapmanın doğru yolu budur. Ama dur! WordPress’te, komut dosyasını bölümünden çağırmamalısınız, cazip olmalısınız, çünkü header.php dosyanıza ekleyebilir veya eklentinizdeki wp_head ile ilişkilendirebilirsiniz. WordPress’e enqueueing adı verilen komut dosyaları eklemenin doğru bir yolu var. Enqueeing komut dosyaları iki ana nedenden ötürü daha iyidir: Bu, bir kereden fazla eklenmeyi önler, çünkü WordPress iki kez teslim edilirse aynı komut dosyasını iki kez yüklemez.
Sizin için komut dosyalarının eklenmesinin bağımlılığını ve sırasını düzenler: Yani bir komut dosyası (örneğin jQuery kullanarak yazıyorsanız) yüklemek için başka bir komut dosyası (örn. JQuery) gerekirse, doğru sırada yapar.
JQuery’nin (diğerlerinin yanı sıra) WordPress’te karşılıksız olduğunu unutmayın, bu yüzden sadece kendi komut dosyasını yapmanız ve JQuery’yi bir bağımlılık olarak ayarlamanıza gerek yok. komut dosyaları, daha sonra wp_enqueue_scripts kancasıyla ilişkilendirdiğiniz kendi işlevinize yerleştirerek wp_enqueue_script () işlevini kullanırsınız.Komut dosyasını yönetici ekranına yüklemek istiyorsanız, wp_enqueue_scripts () işlevini aynı şekilde kullanın, ancak işlevlerinizi admin_enqueue_styles ile ilişkilendirin.
Komut dosyasını temanıza yüklemek için şu kodu kullanacaksınız:
Yükleme Çekirdeği B215307Bacb005482FFA
Bu, temanızdaki komut dosyası filtresinde depolanan my-bip.js adlı bir komut dosyası ekler. Her zaman ayrı bir klasöre komut dosyası ekliyorum, böylece her şey düzenli kalıyor ve birden fazla komut dosyası eklemeniz gerekiyorsa çok kullanışlı. Bu komut dosyası jQuery’ye bağlıdır ve her sayfaya yüklenecektir. Bazen komut dosyasını her sayfaya kaydetmek istemeyebilirsiniz, bu durumda iki ayrı işlev kullanırsınız: wp_register_script ve wp_enqueue_script (). Daha fazla ayrıntı için Daniel Pataki’nin senaryoyu doğru şekilde ele alma konusundaki eğitimine bakın. 2. JavaScript: JavaScript ve PHP bilinen bazı kavramlar aynı mirasa sahiptir: her ikisi de C programlama dilinden dağıtılır. Bu, PHP ile çalışma deneyiminiz varsa sizin için oldukça tanıdık olan bazı JavaScript kavramları olduğu anlamına gelir. O kadar iyi olmayan haberler, sizin için tamamen yeni olacak başka kavramlar ve PHP’ye benzeyen ancak biraz farklı olan diğer kavramlar olmasıdır (yani bu PHP gibi javascript yazmamaya dikkat etmelisiniz: biraz benzer İtalyanca öğrenmek daha önce İspanyolca öğrendikten sonra benim içindir!). PHP ile deneyimliyseniz size aşina olacak bazı JavaScript kavramları şunları içerir:
Yorum . JavaScript ve PHP’deki metin hakkında yorum yapmak için aynı sözdizimini kullanırsınız. Tabii ki benim gibi PHP tarzı yorumları CSS dosyasında kullanmaya çalışan insanlar için bonuslar.
Sözdizimi. JavaScript ve PHP, her ikisi de hattın sonunda noktalı virgül kullanan benzer bir sözdizimine sahiptir. JavaScript, yöntemden önce bir noktanın nasıl kullanılacağı konusunda farklıdır, ancak braketleri ve tırnak işaretlerini olağan şekilde kullanır. Değişken. JavaScript’teki değişkenleri neredeyse PHP’deki gibi tanımlayabilirsiniz, ana farkı değişkenin adından önce VAR ekleyin. JavaScript ve PHP’de küresel ve yerel değişkenleri de kullanabilirsiniz. Dize, dizi, boolean ve sayısal değer. Bunun çalışma şekli ve her biri için kullanılan sözdizimi JavaScript ve PHP’de çok benzerdir. Temel fark, JavaScript’te diziyi değil, diziyi göstermek için sözdizimini kullanmanızdır.
Şebeke . JavaScript, aritmetik ve karşılaştırma için aynı operatörü kullanır (örneğin + ve> = = = =), yalnızca bir farkla: JavaScript’in bir modül operatörü ( %) vardır, bu da geri kalan bir sayıyı başka bir sayıya bölünür. Hem JavaScript hem de PHP kullanımı = denklem için değeri belirlemek için ==.
İşlev . PHP’de olabildiğince JavaScript’te işlevler oluşturabilirsiniz. Temel sözdizimi PHP ile aynıdır.
Şart . JavaScript’te, kullandığınız gibi, başka ve elsef’de PHP’de else ve elsef kullanabilirsiniz.
Ancak JavaScript’in PHP’den ve bazı yeni kavramlardan farklı olmasının birkaç yolu vardır. İşte en önemli şeylerden bazıları:
Sözdizimi. JavaScript sözdizimi açısından daha affedicidir. Dolayısıyla, bir noktalı virgül kaçırırsanız, kodunuz yine de çalışır.
Yöntem . Yöntem bir nesneye olan bir şeydir. Bu, PHP’deki işleve benzer – bir işlev yaptığınızda, onu yöntemi kullanarak ararsınız veya varsayılan yöntemi çağırabilirsiniz. Yöntemi, adı takip eden parantez ile tanıyabilirsiniz. JavaScript’teki nesne, sayfada öğe gibi bir şeydir. Değişkenler de bir tür nesnedir. PHP’deki nesneler çok farklıdır ve PHP kiralama nesnelerindeki sınıflarla birlikte kullanılır.
Mülk. Özellikler, bir nesne ile ilişkili bir değerdir. Mülk ayrıca PHP’de (sınıfla) kullanılır, ancak farklı çalışır.
Yöntem, nesne ve mülk, JavaScript yazarken kullanacağınız temel kavramlardır. Bir örnek gösterelim:
Yükleme Çekirdeği B215307Bacb005482FFA
Yukarıdaki kodda, hayvan adı verilen bir değişken (nesne) yaptım. Her biri bir değeri olan bir özellik dizisi, türü ve renk vardır. Daha sonra Web sayfalarına tür özellik değerlerini görüntülemek için Document.write () yöntemini kullanıyorum. 3. JQuery Kütüphanesi’nin efektlerini ve animasyonlarını eklemek için jQuery kullanmak, temalarınızda ve eklentilerinizde kullanabileceğiniz ve WordPress’e dahil edebileceğiniz çeşitli efektler sunmak için JavaScript’te mevcut olanları ekler, bu yüzden başlamak için iyi bir yerdir. Bu aynı zamanda JavaScript: Bonus ile çalışmaya başlamanın en kolay yoludur!
JQuery ile çalışırken, bir JavaScript sözdizimi kullanacaksınız ve JavaScript vanilyasında kullanacağınız nesneyi, özelliği ve yöntemi kullanmaya devam edebilirsiniz, ancak JQuery tarafından sağlananları da kullanabilirsiniz. JQuery Seçmenleri JQuery’nin güçlü yönleri, CSS’yi kullanarak öğeleri seçmenize nasıl izin vereceğinizdir. Örneğin, şöyle bir afiş kimliğine sahip bir öğe seçeceksiniz: B215307Bacb005482ffa’nın çekirdeğini içerir
Daha sonra seçmenleri alıp yöntemi ona uygulayabilirsiniz, örneğin:
Yükleme Çekirdeği B215307Bacb005482FFA
Ek öğeyi afiş kimliği ile alır ve ek () yöntemini kullanarak içerikle
