WordPress Javascript: Başlangıç ​​Kılavuzu

Bir milyon web geliştiricisine JavaScript'in ne olduğunu sorarsanız, bir milyon farklı yanıt alırsınız. Web'de etkileşimli olan hemen hemen her şey JavaScript kullanılarak yapılır.

Modern bir içerik yönetim sistemi (CMS) olarak WordPress ve eklentilerinin çoğu, işi halletmek için kısmen JavaScript'e güvenir. Göründüğünün aksine JavaScript'in Java programlama diliyle hiçbir ilişkisi yoktur. Buna sadece pazarlama amaçlı denir.

JavaScript ve WordPress'in birleşik gücünden yararlanmak için bilmeniz gereken her şeye dalalım.

JavaScript Nedir?

Uzun zaman önce, İnternet yalnızca HTML ve CSS'ye güveniyordu. Bu kombinasyon, içeriğin çok basit bir şekilde şekillendirilmesine izin verir. Ancak içeriği dinamik hale getirmek için çok az şey yapılabiliyordu ve web uygulamaları oluşturmak söz konusu bile değildi.

Sunucuların bakımı çok daha pahalı olduğundan, geliştiriciler istemci makinede çalışmak için JavaScript yazmaya karar verdiler. Diğer işlevsel programlama dillerine benzer şekilde yazılan JavaScript, verileri işlevlere alabilir, işleyebilir ve verileri çıkarabilir.

Web tarayıcıları, JavaScript kodunun nasıl yürütüleceğini bilen bir JavaScript motoruna sahiptir. Örneğin, Chrome'daki JavaScript motoru v8 iken, FireFox JavaScript motoru SpiderMonkey'dir. Bu nedenle Javascript, verilerin nasıl yorumlanacağını, yönetileceğini ve görüntüleneceğini "anlamak" için tarayıcılara güvenir.

JavaScript'in Teknik Yönleri

JavaScript'in arkasındaki teknoloji hakkında daha fazla bilgi edinmek ister misiniz? Diğer geliştirme türlerinde deneyime sahip olanlar için bilmesi gereken birkaç önemli farklılaştırıcı vardır. İlk olarak, JavaScript, PHP gibi tipten bağımsızdır. Bu, değişkenlerinin tanımlanmış bir türü olmadığı ve verilen herhangi bir değişkenin hemen hemen her tür değere atanabileceği anlamına gelir.

Modern dillerin çoğu "nesne yönelimlidir", yani gerçek bir nesneyi temsil eden yeniden kullanılabilir "sınıflara" dayanırlar. JavaScript'in buna en yakın olduğu şey “prototipler”dir. Bu veri yapıları yeniden kullanılabilir ve belirli değerleri tutabilir, ancak işlevsellikleri ve kullanılabilirlikleri Java gibi nesne yönelimli kavram etrafında oluşturulmuş dillerden çok daha sınırlıdır.

JavaScript Ne Yapar?

Facebook ve hatta Netflix gibi büyük şirketlerin devasa topluluk desteği ve yatırımları nedeniyle JavaScript, web tarayıcılarında çalışmaktan çok daha fazlasını yapabilir. JavaScript, bir web sitesindeki telif hakkı simgesinin yanında görüntülemek için geçerli yılı almak kadar basit bir şey yapabilir ve çevrimiçi bir resim düzenleyici için işlemenin büyük kısmını yapmak gibi daha karmaşık işleri yapabilir.

Özetle, JavaScript, geliştiricinin müşterinin makinesinde yapmasını istediği hemen hemen her şeyi yapar. İstemci, onu kullanan bir siteyi ziyaret ettiğinde JavaScript, istemci makinesinde yerel olarak önbelleğe alınır.

Hassas verilerin sunucuda işlenmesi gerekirken, birçok web tabanlı uygulama, istemci makinenin işlem gücünden yararlanmak için yoğun bir şekilde JavaScript'i kullanır. Artık çeşitli içerik türlerini geliştirmeyi çok daha hızlı hale getiren sonsuz “çerçeveler” çağında olduğumuza göre, olasılıklar sonsuzdur.

JavaScript Güvenli mi?

Protokollerin ve eski dillerin çoğu gibi, JavaScript de başlangıçta güvenlik düşünülerek oluşturulmamıştı. Siber saldırıların ne kadar yaygın hale geldiği göz önüne alındığında, bu merak etmek için tamamen makul bir şey.

Tüm JavaScript kodlarının yürütülmesini engelleyen “NoScript” gibi tarayıcı uzantıları vardır. Web'in genel kuralına uyduğunuz ve güvenilmeyen siteleri ziyaret etmediğiniz sürece JavaScript'in çalışmasına izin vermekte bir sakınca yoktur.

Bu bir programlama dili olduğu için, elbette kötü niyetli kullanıcılar, bilgisayarınıza saldırmak için onu kötüye kullanabilir. Modern tarayıcılar bu saldırıların çoğunu otomatik olarak algılar. WordPress JavaScript ile güvenlik konusunda endişeleriniz varsa, web sitesi güvenliğinin birçok yönünü otomatik pilota yerleştiren bir WordPress güvenlik eklentisiyle içiniz biraz rahat olabilir.

İki Ana JavaScript Saldırı Türü

"Dostlarını yakın, düşmanlarını daha yakın tut" atasözü, gelişme ve güvenlik söz konusu olduğunda geçerlidir. Kötü adamların JavaScript'ten nasıl yararlandığını anlamak, onların çabalarını boşa çıkarmak için çok önemlidir!

Siteler Arası Komut Dosyası Çalıştırma (XSS)

Siteler arası komut dosyası çalıştırma (XSS), herhangi bir WordPress sitesinde siteler arası güvenlik açıklarından yararlanarak yürütülen bir tür kötü amaçlı yazılım saldırısıdır. Aslında, XSS güvenlik açıklarına sahip çok sayıda WordPress eklentisi olduğundan, WordPress sitelerinin saldırıya uğramasının en yaygın yolu budur.

Bir sayfa, üzerinde veri gönderilmesine izin veriyorsa, siteler arası komut dosyası çalıştırma saldırısı kullanılır. Bu saldırıda, kötü niyetli kullanıcı, kamuya açık bir sayfaya gönderilecek verilere JavaScript kodu yerleştirir.

Herhangi bir azaltma önlemi yoksa, bu kötü amaçlı kod aslında JavaScript kodunu o sayfayı ziyaret eden herkesin bilgisayarında çalıştırır. Bu nedenle girdiyi “temizlemek” önemlidir. Bu, gönderilmeden önce, kodu işe yaramaz hale getirecek köşeli parantezler ve tırnak işaretleri gibi şeyleri kaldırdığınız anlamına gelir.

Siteler Arası İstek Sahteciliği (CSRF)

Bu tür bir saldırı, daha önce oturum açmış olabileceğiniz web sayfalarından yararlanır. En yaygın senaryo, bankanıza giriş yapmanızı içerir.

Diyelim ki banka hesabınıza giriş yaptınız, ancak ardından CSRF'nin kullanıma hazır olduğu bir torrent web sitesine gitmeye karar verin. CSRF, tarayıcı azaltmalarının yokluğunda, her büyük banka için banka havaleleri gibi şeyler yapmak için bağlantı modelini benimser ve ardından bunları makinenizde arka planda çalıştırır.

Büyük bir sitede ve büyük bir bankada gerçekleşen bir senaryo, bankanın para transferi bağlantısının şuna benzemesiydi: www.bankwithbadsecurity.com/transfer&amount=1000&toAccount=12345 12345 numaralı bir hesaba 1000$ transfer etmek.

Bankaya göre bunu siz talep etmişsiniz gibi görünüyor ve talep IP adresinizden geleceği için sizin başlatmadığınızı kanıtlamak zor. Neyse ki, çoğu modern tarayıcı bunu otomatik olarak algılayacak ve önleyecektir.

WordPress İçinde JavaScript Kullanabilir miyim?

Evet, WordPress için geliştirme yaparken JavaScript kullanabilirsiniz. WordPress'in iki düzenleme moduna sahip esnek bir içerik yönetim sistemi olduğunu unutmayın. Bunlardan biri doğrudan kodu düzenlemenize izin verir ve diğeri, “WYSIWYG” düzenleyicisi olarak da bilinen bir kelime işlemcide görebileceğinize benzer bir düzenleyici kullanmanıza izin verir. WordPress'in en son sürümünde, WYSIWYG düzenleyicisinin adı Gutenberg'dir.

WordPress için uzantılar geliştirirken JavaScript'i de kullanabileceğinizi unutmayın. WordPress'in sunucu tarafı PHP iken, istemci tarafı zamanın neredeyse %100'ü JavaScript'tir.

WordPress İçin JavaScript Öğrenmeli miyim?

Bu soruların cevabı, WordPress ile ne yapmak istediğinize bağlıdır. Platformu kullanarak oluşturduğunuz birkaç statik sayfa istiyorsanız, JavaScript öğrenmenize gerek kalmaz.

Öte yandan, JavaScript'i kullanmaya başlamak oldukça kolaydır ve ayrıca HTML ve CSS'nin nasıl çalıştığı hakkında çok şey öğreneceksiniz. Ancak, dinamik ve akılda kalıcı bir site yapmak istiyorsanız, WordPress eğitimine ek olarak JavaScript öğrenmeye çalışmak isteyeceksiniz.

Hızlı bir uyarı: Yeni başlayan bir web geliştiricisiyseniz, JavaScript'te birkaç gün içinde ustalaşmayı beklemeyin. JavaScript, çok belirsiz hata mesajlarına sahip olmasıyla ünlüdür ve genellikle “spagetti kodu” olduğu için eleştirilir. Bu, geliştiricilerin yıllar içinde düzgün bir şekilde düzenlemeden çok sayıda kod biriktirdiği anlamına gelir. Bunun da ötesinde, çoğu geliştirici JavaScript kullanan ancak sözdizimsel olarak biraz farklı olan çerçevelerde nasıl programlanacağını öğrenir.

Müşterilerin sitelerini yöneten bir serbest çalışan veya ajanssanız, özellikle JavaScript öğrenmeye zaman ayırmalısınız. Birden fazla WordPress sitesini yönetmenize izin veren birinci sınıf araçlar olsa da, hiçbir eklenti siteleri sizin yerinize yapamaz!

Ayrıca, bir web geliştiricisi olmak gibi bir hedefiniz varsa, JavaScript öğrenmek şu kariyerler için faydalıdır:

• Ön Uç Geliştirici
• Arka Uç Geliştirici
• Tam Yığın Geliştirici

Ek olarak, JavaScript öğrenmek, daha gelişmiş HTML, CSS ve PHP ile birlikte, sizin için genel masrafları azaltacak sağlam bir WP temeli görevi görür. Gerçekte tamamlanması dakikalar alabilecek görevleri gerçekleştirmek için artık dış yüklenicilere ödeme yapmanıza gerek kalmayacak, böylece kârlılığınızı azaltacaksınız. JavaScript'te uzmanlaştıktan sonra, WordPress içinde gerçekten benzersiz, duyarlı uygulamalar yapmak için React ve Angular gibi popüler çerçevelere geçebilirsiniz.

WordPress'te Kodlarken JavaScript Nasıl Yazabilirim?

Bir WordPress sitesine JavaScript eklemek, CSS ve HTML eklemek kadar kolay olmasa da, başlamanız uzun sürmez. Yaklaşmanın iki farklı yolu vardır ve her birinin farklı bir amacı vardır.

Yöntem 1: Her Sayfada

WordPress sitenizin her sayfasında aynı komut dosyasını çalıştırmak istiyorsanız, kodu her sayfaya manuel olarak eklemek, en azından söylemek gerekirse, oldukça sıkıcı olacaktır. JavaScript'i HTML'ye eklemek için doğru yer, sayfanın üstbilgi ve altbilgisidir.

Özelleştirilmiş JavaScript'inizi alıp WordPress sitenizdeki her sayfanın üstbilgisine ve/veya altbilgisine bırakacak birkaç ücretsiz eklenti vardır. WordPress yöneticileri, Google Analytics ile mükemmel bir şekilde çalıştıkları için bu eklentileri sever, her sayfa isabetinin sayılmasını sağlar ve SEO sıralamasını daha hızlı yükseltmeye yardımcı olur.

Yöntem 2: Her Sayfada Farklı JavaScript

Diyelim ki, her sayfasında en az bir “kütüphaneye” dayanan farklı bir araca sahip bir WordPress sitesi işletiyorsunuz. Tüm JavaScript'lerinizi, özellikle de gerekmediğinde, her bir sayfaya yüklenmeye zorlamak, sitenize erişimi yavaşlatacaktır. Sağduyu, ziyaretçilerinizin deneyimini yavaşlatmanın, işinizi kazanmanın en iyi yolu olmadığını söylüyor!

Web'de bu işlemi gerçekleştirmek için delicesine karmaşık yöntemlere sahip birçok öğretici var. Bunun function.php dosyanızda karmaşık düzenlemeler yaparak yapılabileceği doğru olsa da, baş ağrısından hoşlanmadığınız sürece bu yaklaşımı benimsemenize gerek yoktur.

Bunun yerine, sitenize Code Embed eklentisini yükleyin. Bu, JavaScript eklemenizi ve sayfa içinde istediğiniz yere yerleştirmenizi sağlar.

CodeEmbed Eklentisini Kullanma

Code Embed eklentisini yükledikten sonra Ekran Seçeneklerine gidin ve “Özel Alanlar” yazan onay kutusuna tıklayın. Bu, JavaScript'inizi sayfaya eklemenizi sağlar.

Düzenleme sayfasında, "Yeni Gir" özel alanları seçeneği ile "Özel Alanlar" yazan bir kutu göreceksiniz. Buna tıklayın ve JavaScript kodunuzun adını ve kodun kendisini girmek için boş metin kutularınız olacak.

Varolan WordPress kodları ile çatışmaları önlemek için, büyük harfli mektuplar, “CODE” JavaScript kodunun adını başlamalıdır. “CODEtimer” gibi bir şey iyi olurdu. Ardından, gerçek JavaScript'i diğer kutuya ekleyeceksiniz. Komut dosyasının açılış ve kapanış etiketlerini eklediğinizden emin olun!

İşiniz bittiğinde, "Özel Alan Ekle" yazan düğmeyi tıklamanız yeterlidir. Son olarak, JavaScript kodunun sayfanın neresinde yürütülmesini istediğinizi belirleyin. Örneğin, kod bir zamanlayıcı yüklerse, o zamanlayıcıyı sayfanızda nereye eklemek istediğinizi bulun. Ardından, WordPress'in JavaScript'inizi buraya eklemesini sağlamak için tam sözdizimini [[CODEtimer]] kullanacaksınız ve işiniz bitti!

JavaScript ve CSS Dosyalarımı WordPress'e Nasıl Eklerim?

WordPress'in yerleşik temaları olmasına rağmen, birçok web geliştiricisi daha benzersiz bir tasarıma sahip olmayı tercih eder ve kendi CSS'lerini kullanır. Ayrıca bu JavaScript dosyalarını saklamanın bir yoluna ihtiyacınız olacak.

Bu bölümde, Dosya Yöneticinize gitmeniz ve “functions.php” adlı dosyayı bulmanız gerekecek. Bunun, sitenizin temel temasının bulunduğu klasörde olacağını unutmayın.

Functions.php'ye CSS Eklemek

Functions.php dosyasına girdikten sonra şu adımları izleyin:

1. Yeni bir satırda, kod işlevini ekleyerek boş bir işlev oluşturun.
   addMyCSS() { #Bunu Daha Sonra Doldurun}
2. Sonraki adımda wp_register_style adlı yerleşik işlevi kullanarak CSS dosyanızı WordPress'e "kaydedin"
3. Kodun içine koyduğumuz dolguyu kaldırıp onun yerine wp_register_style('name_of_css_style',plugins_url('file-location.css',__FILE__));
4. Artık WordPress'e CSS stilimizi nasıl adlandıracağımızı ve nerede olduğunu anlattık. Şimdi stili "sıraya alma" veya WordPress'e onu kullanmaya hazır olduğumuzu söyleme zamanı.
5. addMyCSS fonksiyon bloğu içinde kalarak , wp_enqueue_style('name_of_css_style'); kodunu ekleyin. son adımda girdiğimiz kodun hemen altında.
6. Son bir adım var, ama önce, oluşturduğumuz tüm işlevin DIŞINDA ve PHP dosyasının genel bölümünde olduğunuzdan emin olun.
7. addMyCSS dışında , aşağıdaki satırı eklemeniz yeterlidir: add_action('wp_enqueue_scripts','name_of_css_style'); . Bu, WordPress'e bu dosyanın sayfa yüklendiğinde yüklenmesini tetiklemesini söyler.

Bir stil sayfası için add_action işlevinde neden wp_enqueue_scripts olduğunu merak ediyor olabilirsiniz. Bu, WordPress'in her zaman özelliği uyguladığı yoldur.

WordPress'e JavaScript dosyaları ekleme

Artık bir fonksiyon oluşturma, bir dosya kaydetme ve bir eylem ekleme sürecini gözden geçirdiğimize göre, bu kısım çocuk oyuncağı olmalı!

1. addMyCSS ile yaptığımız gibi, function.php'de addMyJS adında bir işlev yapın .
2. wp_register_script işlevini kullanacağız , ancak bu biraz daha karmaşık. Beş “parametresi” vardır (parantez içine alınan öğeler). Her parametrenin ne olduğunu görmek için aşağıya bakın.
3. wp_register_script(1. Komut Dosyanızın Adı, 2. plugins_url(location_of_script.js, __FILE__), 3. JS bağımlılıkları dizisi, genellikle dizi(jquery), 4. JS dosyanızın tek tırnak içinde (İsteğe bağlı) sürümü, 5. olmalıdır JS'yi alt bilginizde istiyorsanız true, üst bilgide istiyorsanız false);
4. İşte bir temanın alt bilgisinde çalıştırılacak bazı JavaScript'lerin pratik bir örneği: wp_register_script('timer_js', plugins_url('timer_file.js', __FILE__), array('jquery'),'1.0', true);
5. Yine, addMyJS fonksiyonumuzun DIŞINDA , bunu PHP'nin genel alanınıza koyarak betiğinizi “sıkıştırın” : add_action( 'wp_enqueue_scripts', 'addMyJS' );

Karmaşık görünebilir, ancak bir kez alıştığınızda, bir dakikadan az sürecek, bu yüzden korkmayın!

WordPress'e JavaScript Eklemek için Hangi Eklentileri Kullanabilirim?

Sadece bu amaç için tamamen ücretsiz birçok eklenti var. Her biri biraz farklı çalışır, bu nedenle taahhütte bulunmadan önce birkaç deneme yaparsınız. İşte denemek için beş ana şey.

• ASync – Benzersiz bir şekilde, bu eklenti hem JS hem de CSS dosyalarınızı sayfanızın geri kalanından ayrı olarak yükler. Bu, özellikle sayfanızın yüklenmesini süresiz olarak durduracak bir kodlama hatası varsa yararlı olabilir.

• Widget'larda JS – Google Analytics gibi bir şey için birkaç satır kod eklemeniz mi gerekiyor? Bu eklenti, sorunları ortadan kaldırır ve WordPress sitelerinize küçük snippet'lerin eklenmesine izin verir.

• Zia CSS/JS Helper – Bu, klasik HTML/CSS/JS web geliştirme konusunda deneyimli olanlar için açık ara en iyisidir. WordPress düzenleme işlevinizi, tıpkı bir siteyi cPanel'in dosya yöneticisi aracılığıyla düzenlemek gibi yapar. Hızlıca kod parçaları eklemek, harici dosyalar oluşturmak ve yönetmek ve daha fazlası için satır içi CSS ve JavaScript'i kullanabilirsiniz.

Her Zaman Önce Sitenizi Yedekleyin!

WordPress eklentilerinin büyük çoğunluğu sitenize zarar vermeyecek olsa da, her zaman sorun yaşama ihtimaliniz vardır. Herhangi bir ek eklenti yüklemeden veya sitenizi değiştirmeden önce, BackupBuddy gibi WordPress kurulumunuzun tam yedeklemesini gerçekleştirebilen bir WordPress yedekleme eklentisi kullanarak sitenizin yedeğini alın. Kendinizi saatlerce olası yeniden çalışmadan kurtarın ve tüm sıkı çalışmanızın boşa gitmemesini sağlayın.

JavaScript Kullanarak WordPress API'lerini Kullanabilir miyim?

Bildiğiniz gibi, WordPress'in kapsamlı bir API serisi veya Uygulama Programlama Arayüzleri vardır. API'ler, esasen JavaScript gibi dillerde kullanabileceğiniz sunucu taraflı işlevlerdir. Geliştiricilerin WordPress API işlevselliğini öğrenmeleri için daha yeni, daha modern yöntem, WordPress WordPress API'leri Kod Referans sayfasıdır.

Daha önce kullandığımız "yerleşik işlevleri" burada aldık. API'lerdeki her bir işlev ve bunların JavaScript ile nasıl birlikte çalıştıkları hakkında günlerce konuşabiliriz. Ancak bu, öğrenmek için bireysel zaman ve özveri gerektiren ileri düzey bir konudur.

WordPress için Uyarlanmış JavaScript Kitaplıkları Var mı?

Evet! Pek çok geliştiricinin WordPress API içeriğinin tamamında uzmanlaşmadığını kabul eden birçok programcı, daha önce tartıştığımız eklentilerden herhangi birini kullanarak kolayca yerleştirilebilen JavaScript kitaplıkları oluşturdu.

Çoğu JavaScript kitaplığı GitHub'da bulunur ve tamamen ücretsizdir. WordPress ile uyumlu, WordPress'e eğlenceli efektler ekleyenlerden Pinterest'e çok benzer bir düzende bir site yapmanıza izin verene kadar, yüz binlerce kullanılabilir JavaScript kitaplığı vardır!

WordPress (ve çoğu site) ile kullanılan en iyi bilinen kitaplığa jQuery adı verilir. jQuery, JavaScript'in karmaşıklığını ortadan kaldırır ve bir kez alıştığınızda, işlevleri hızlı ve kolay bir şekilde yazıyor olacaksınız.

Yardım! WordPress JavaScript'im Çalışmıyor!

JavaScript'in daha az şanslı kısımlarından biri, hataların bariz olmamasıdır. Ve bunun üzerine WordPress eklemek onu oldukça kafa karıştırıcı hale getirebilir.

Bazı hatalara, unutulmuş bir tırnak işareti kadar kolaylıkla neden olunabilir. Diğerleri, kolayca tanımlanamayan büyük kodlama hatalarından kaynaklanabilir. Peki, profesyonel geliştiriciler farkı nasıl anlıyor?

Sorun gidermenin iki ana anahtarı vardır: console.log JavaScript işlevi ve tarayıcı hata ayıklama konsolu. Özellikle Chrome'un konsolu bunun için harika.

konsol.log

Bu, bir fonksiyondaki belirli bir noktada bir değişkenin değerinin ne olduğunu görmek ve fonksiyonların bölümlerine gerçekten ulaşıldığından emin olmak için kullanılabilir. Bir JavaScript dosyasına, basitçe şöyle bir şey koyarsınız: console.log("test"); .

Hata Ayıklama Konsolu

Kullanılan tarayıcıya bağlı olarak konsolun kurulumu farklı olacaktır. Genellikle, açmak için F12'ye basmanız ve ardından “Konsol” sekmesine tıklamanız yeterlidir.

Konsol, hangi JavaScript dosyasının hangi satırında bir hata olduğunu gösterecektir. Genellikle tam "yığın izini" veya suçluya ulaşana kadar geçmesi gereken dosya dizisini gösterir. Burası ayrıca console.log mesajlarınızın yazdırıldığı yerdir.

Özet: JavaScript + WordPress

Size çok daha fazla bilgi verecek profesyonel araçlar var, ancak bunlar genellikle oldukça pahalıya mal oluyor. İyi haber şu ki, dünyanın bir sonraki en büyük WordPress JavaScript geliştiricisi olarak büyüdükçe, araçlar da sizinle birlikte ölçeklenecek!

Kristen Wright

Kristen, 2011'den beri WordPress kullanıcılarına yardımcı olmak için eğitimler yazıyor. Onu genellikle iThemes blogu için yeni makaleler üzerinde çalışırken veya #WPprosper için kaynaklar geliştirirken bulabilirsiniz. Kristen iş dışında günlük tutmaktan (iki kitap yazdı!), doğa yürüyüşü yapmaktan ve kamp yapmaktan, yemek pişirmekten ve daha güncel bir hayat yaşamayı umarak ailesiyle günlük maceralardan hoşlanıyor.