WordPress'te Ajax Nasıl Kullanılır?

Yayınlanan: 2023-02-12

Web siteniz için meşgul ve aktif bir müşteri tabanınız varsa, onlar için gerçekten etkileşimli ve zenginleştirilmiş bir web deneyimini nasıl sağlayabileceğinizi merak edebilirsiniz. Gerçek zamanlı etkileşim sunmak, hedef kitleniz için büyük bir kazanç olabilir.

Neyse ki, Eşzamansız JavaScript ve XML (Ajax), web sitenize etkileşimli özellikler eklemek için ulaşılabilir bir yöntemdir. WordPress söz konusu olduğunda, Ajax tabanlı bir eklenti kullanarak süreci basitleştirebilirsiniz.

Bu yazıda size Ajax'ı ve nasıl çalıştığını tanıtacağız. Ayrıca WordPress'te Ajax'ı kullanmaya başlamanız için size yol göstereceğiz. Hemen içeri girelim!

Ajax Nedir ve Nasıl Çalışır?

Ajax, HTML, CSS, JavaScript ve daha fazlası gibi bir dizi farklı programlama dilini bir araya getirir. Uygulamada, bir web tarayıcısından istekleri almak, bunları sunucuya göndermek ve sonuçları tarayıcıya geri aktarmak için perde arkasında çalışır.

Bir web kullanıcısı olarak, Ajax'ın iş başında olduğunu bilemezsiniz. Oldukça etkileşimli bir deneyim yaşayacaksınız. Örneğin, kendi sitenizde, giriş yapmış kullanıcıların gönderilerine beğeni kabul etmek ve gerçek zamanlı bir çetele görüntülemek için Ajax'ı kullanabilirsiniz.

Ajax Neden Yararlıdır?

Ajax ile, kullanıcıların belirli değişiklikleri görmek için bir sayfayı yeniden yüklemeleri gerekmez. Bu, sitenizin hızlı kalacağı ve daha sorunsuz bir kullanıcı deneyimi sunacağı anlamına gelir. Ajax verimli olduğundan, yalnızca ihtiyaç duyduğu verileri ileri geri göndererek, bant genişliğini en üst düzeye çıkarabilir ve daha ağır veri aktarımlarını önleyebilir.

Web kullanıcıları olarak Ajax'ın avantajlarından her zaman yararlanırız. Bir örnek, Google'ın otomatik tamamlama arama işlevidir.

Aşina olabileceğiniz diğer örnekler arasında Facebook yorumları ve Instagram beğenileri sayılabilir. Ajax, bir web sayfasıyla etkileşim kurabildiğiniz ve karşılığında anında bilgi alabileceğiniz her yerde çalışıyor olabilir.

WordPress'te Ajax'a Başlarken

WordPress söz konusu olduğunda, Ajax'ın kullanışlı olmasının birkaç yolu vardır. İlk olarak, Ajax URL'sine ve bunun WordPress işlev kancalarıyla birlikte nasıl kullanılacağına bir göz atacağız.

WordPress'teki Ajax URL'si

WordPress, yönetici panosunda varsayılan olarak Ajax kullandığından, oraya daha fazla Ajax işlevi eklemek zor değildir. Bununla birlikte, sitenizin ön ucunda Ajax kullanmak istiyorsanız, Ajax URL'sinin nasıl çalıştığını anlamanız gerekir.

WordPress'te admin-ajax.php dosyanızın bir URL'si vardır. Bu, işlenmek üzere veri göndermek için gereken bilgileri sağlar ve Ajax'ın ön uç geliştirmesi için hayati önem taşır. WordPress, JavaScript ve PHP işlevlerini bağlamak için Ajax URL'sini kullanmak üzere bir wp_localize_script() çağrısı kullanır, çünkü PHP bunları biraz yardım almadan doğrudan yansıtamaz.

WordPress'te Ajax Eylem Kancası Nasıl Kullanılır?

WordPress, eklentilerin ve temaların WordPress Çekirdeği ile etkileşime girmesinin bir yolu olarak programlamasında kancalar kullanır. Kancalar iki çeşittir: "eylemler" ve "filtreler". Ajax ile, işlevleri yürütmek için eylem kancalarını kullanıyor olacaksınız.

Eylemler, WordPress'e veri eklemenizi veya çalışma şeklini değiştirmenizi sağlar. Ajax ile wp_ajax_(action) eylemini kullanacaksınız. Daha sonra, bir Ajax çağrısı sırasında yürütülmek üzere özel bir işlev buna bağlanabilir.

Örneğin, bu WordPress örnek kodu, bir eylemi yürütmek için bir Ajax çağrısının ve bir JavaScript nesnesinin aynı dosyada nasıl birleştirilebileceğini gösterir:

<?php

add_action('wp_ajax_my_action', 'my_action');

işlev my_action() {
küresel $wpdb; // veritabanına bu şekilde erişirsiniz

$neyse = intval( $_POST['neyse'] );

$neyse += 10;

yankı $her neyse;

wp_die(); // bu, derhal sonlandırmak ve uygun bir yanıt döndürmek için gereklidir
}

Ajax işlemleriniz için ayrı JavaScript dosyaları da oluşturabilirsiniz. Aramaların kaybolmaması için Ajax URL'sini kullandığınızdan emin olmanız yeterlidir.

Örnek Bir Eklenti İle Çalışarak Ajax Nasıl Kullanılır (3 Adım)

Ajax ile denemek istiyorsanız, en iyi yol onunla bir eklenti oluşturmaktır. Neyse ki, başlayabileceğiniz pek çok örnek kod parçası veya basit eklenti var. Bu örnek için, bazı indirilebilir WordPress Eklentisi Boilerplate örnek kodunu kullanacağız.

1. Adım: Uygun Dosya Yapılarını Oluşturun

Öncelikle, eklentinizi adlandırmanız ve onun için uygun dosya yapılarını oluşturmanız gerekir. Ad benzersiz olmalı ve WordPress Eklenti Dizinindeki diğer araçlarla çakışmamalıdır. Bunun nedeni, bir kullanıcı eklentinizi yüklediğinde, eklentinin wp-content/plugins/ dizinine gitmesidir.

Bir isme karar verdikten sonra, kendi wp-content/plugins/ dizininizde en az aşağıdaki üç dosyayı oluşturmanız gerekir:

  • eklenti-adı.php
  • eklenti-adı.js
  • eklenti-adı.css

.php dosyasını yeni eklentinizin klasörüne koymak ve JavaScript ve CSS dosyalarının içinde yaşaması için ayrı alt klasörler oluşturmak isteyeceksiniz. Eklentinizin çalışması için gerekli tüm dosyaların aynı ana klasörde bulunması gerekir.

Bir sonraki adımda, kullandığımız örnek kodun önceden oluşturulmuş dosya yapılarıyla birlikte geldiğini göreceksiniz. Bununla birlikte, nasıl sıfırdan başlayacağınızı ve dosyalarınızın neden belirli bir şekilde yapılandırılması gerektiğini anlamanın önemli olduğunu düşünüyoruz.

2. Adım: Başlamak İçin Bazı Örnek Kodlar Seçin

İlk eklentinizde Ajax'ı denerken başlamak için bir örnek kod dosyası kullanmak iyi bir yerdir. Bununla birlikte, güvenli olduğundan ve hata içermediğinden emin olmak için örnek kodunuzu her zaman iki kez kontrol etmek istersiniz.

Daha önce de belirttiğimiz gibi, örneğimiz için WordPress Plugin Boilerplate'i kullanacağız. Bu örnek kod, eklentinizi tamamlamak için ihtiyaç duyacağınız dosyalarla birlikte gelir.

Bu örnek eklenti ayrıca WordPress'in kodlama ve dokümantasyon standartlarına uygundur. Başlamak için eklentinin .zip dosyasını standart web sitesinden indirebilirsiniz.

3. Adım: Eylemleri Kodunuza Bağlayın

Kullandığımız eklenti örnek kodu, Nesne Yönelimli Programlama (OOP) ile oluşturulmuştur. Bu, programcıların kodlarını düzenlemelerine yardımcı olur ve kolayca paylaşılabilir ve yeniden kullanılabilir bir geliştirme modeli oluşturur.

Ayrıca kod, /includes/ dizinindeki etkinleştirme ve devre dışı bırakma dosyaları da dahil olmak üzere eklenti geliştirme için gerekli tüm dosyalarla birlikte gelir. Ayrıca gerektiğinde kamuya açık ve yöneticiye yönelik dosyaları bulmayı kolay bulacaksınız.

Plugin-name.php dosyasının başlangıcını görüntüleyerek örnek eklentimize bir göz atalım:

<?php

/**
* Eklenti önyükleme dosyası
*
* Bu dosya, eklentide eklenti bilgilerini oluşturmak için WordPress tarafından okunur.
* yönetici alanı. Bu dosya ayrıca eklenti tarafından kullanılan tüm bağımlılıkları da içerir.
* etkinleştirme ve devre dışı bırakma işlevlerini kaydeder ve bir işlevi tanımlar
* etkinleştirme ve devre dışı bırakma işlevlerini kaydeder ve bir işlevi tanımlar
* bu eklentiyi başlatır.
*
* @bağlantı http://example.com
* @1.0.0'dan beri
* @paket Eklenti_Adı
*
* @wordpress eklentisi
* Eklenti Adı: WordPress Plugin Boilerplate
* Eklenti URI'si: http://example.com/plugin-name-uri/
* Açıklama: Bu, eklentinin ne yaptığının kısa bir açıklamasıdır. WordPress yönetici alanında görüntülenir.
* Sürüm: 1.0.0
* Yazar: Adınız veya Şirketiniz
* Yazar URI'si: http://example.com/
* Lisans: GPL-2.0+
* Lisans URI'si: http://www.gnu.org/licenses/gpl-2.0.txt
* Metin Etki Alanı: eklenti adı
* Etki Alanı Yolu: /languages
*/

Kodun bu bölümünde yer alan tüm bilgiler, eklentinizi WordPress'e kaydettirmek için önemlidir. Eklenti dizini, eklentiniz için neyin görüntüleneceğini bu şekilde bilecektir.

Şimdi tüm noktaları birleştirmek için aşağıdakiler dahil birkaç şey yapmanız gerekecek:

  • Ajax URL'nizin betiğiniz için kullanılabilir olduğundan emin olun. Bunu gerçekleştirmek için wp_localize_script() kullanabilirsiniz.
  • plugin -name.php dosyanızda Plugin-Name{} sınıfıyla bir eklenti-adı sınıfı oluşturun. Eylem kancalarınızı tanımlayacağınız yer burasıdır.
  • plugin-name.js dosyanızda karşılık gelen bir JavaScript işlevi oluşturun.

Ajax yaklaşımının önemli bir unsuru, özellikle ön uç etkileşimi oluştururken her bir işlevi kimlerin kullanabileceğini tanımlamaktır. WordPress'ten bazı örnek kodlarla bir ön uç eylemi bağlayacağız:

eğer ( is_admin() ) {
add_action('wp_ajax_my_frontend_action', 'my_frontend_action');
add_action('wp_ajax_nopriv_my_frontend_action', 'my_frontend_action');
add_action('wp_ajax_my_backend_action', 'my_backend_action');
// Diğer arka uç işlem kancalarını buraya ekleyin
} başka {
// Ajax dışı ön uç işlem kancalarını buraya ekleyin
}

Bu örnekte birkaç noktaya dikkat edelim. İlk olarak, bu işlemler, bir hesapta oturum açmış olsun ya da olmasın, sitedeki herkes tarafından kullanılabilir olacaktır. Bu, 'wp_ajax_nonpriv_()' çağrısıyla belirtilir. İkinci olarak, ön uç eylemler sırasında arka uç, idari işlemlerin de devreye girdiğini görebilirsiniz.

Bu eylemler dizisinde yer alan süreci anlamak için, my_frontend_action'ın PHP işlevini my_frontend_action_callback() tetikleyeceğini bilmek de önemlidir.

4. Adım: Eklentinizi Test Edin ve Hata Ayıklayın

İhtiyacınız olan tüm eylem kancalarını ve ilgili işlevleri kurduktan sonra, eklentinizi test etmek ve potansiyel olarak hata ayıklamak isteyeceksiniz (herhangi bir sorun varsa). Web barındırıcınız, barındırma paketinin bir parçası olarak bir hata ayıklama aracı sunabilir.

WP Engine'de, sorunlu noktaları bulmanıza yardımcı olmak için WP Engine Hata Günlüğünü sağlıyoruz.

Hata günlüğümüz, sitenizin kodundaki herhangi bir hatanın ve bunların sunucularımızla veya sitenizin diğer bölümleriyle nerede etkileşime girdiğinin renk kodlu bir incelemesini sağlar. Bu, ister Ajax ister tamamen başka bir şeyle çalışıyor olun, sorun gidermeyi çok daha kolay hale getirir.

Diğer WP Motor Kaynaklarını ve Araçlarını Keşfedin

Artık Ajax ile harika WordPress eklentileri oluşturma yolunda olduğunuza göre, başka hangi araçlara ihtiyacınız olacağını değerlendirmek isteyebilirsiniz. WP Engine, eksiksiz bir Dijital Deneyim Platformu (DXP) sunar ve WordPress için yeni eklentiler oluşturmanıza yardımcı olmak için buradadır.

İster hatasız bir eklenti çalıştırabilmeniz için WP Engine Hata Günlüğümüzle ilgilenin, ister yalnızca sağlam ve güvenli WordPress barındırmaya ihtiyacınız olsun, kullanmanız için çok çeşitli planlar ve kaynaklar sunuyoruz!