AJAX kullanarak WordPress Eklentinizi Duyarlı hale getirme
Yayınlanan: 2020-06-02
Son güncelleme - 8 Temmuz 2021
AJAX, en son geliştirme metodolojisidir ve geliştiricilerine sağladığı kullanım kolaylığı nedeniyle yavaş yavaş ivme kazanandır. AJAX'ı WordPress eklentilerinize entegre ederek, esasen tüm web sayfasını sürekli olarak yeniden yükleme ihtiyacını azaltıyorsunuz. Başka bir deyişle, AJAX, WordPress Eklentinizi Duyarlı hale getirecek ve sayfanın geri kalanını statik tutarken yalnızca belirli kısmı yeniden yükleyerek kullanıcıların yeni bilgiler almasını sağlayacaktır.
Bu, yalnızca web sayfalarını veya eklentileri duyarlı hale getirmekle kalmaz, aynı zamanda bekleme süresini yarıya indirir. Kullanıcılar için daha iyi deneyimler oluşturmak için Ajax kullanan birkaç eklenti ve uygulama vardır. Örneğin, WooCommerce, Sepete Ekle davranışını iyileştirmek için Ajax özelliğini kullanır.
Avantajlarını göz önünde bulundurarak, WordPress eklentilerinizi AJAX aracılığıyla nasıl duyarlı hale getireceğinizi öğreteceğiz.
Eklenti Oluşturma
AJAX ile sihrinizi gerçekleştirmeden önce, gelişmiş ve duyarlı bir ürün oluşturmak için kullanabileceğiniz temel bir eklenti temeline sahip olmanız gerekir.
Bir eklenti oluşturmak zor değildir, çünkü tek ihtiyacınız olan tek satırlık içerik içeren bir dosyanın oluşturulmasıdır. Bunun için ilk adım wp-content/plugins dosyasına gitmek ve istediğiniz isimle yepyeni bir klasör oluşturmaktır. Klasörü açın ve name_of_the_plugin.php adlı yeni bir dosya oluşturun. Şimdi dosyayı herhangi bir metin düzenleyicide görüntüleyin ve aşağıdaki bilgileri yazın:
<?php
/*
Eklenti Adı: Coolness Inducer
Eklenti URI'si: http://coolness-inducer.com
açıklama: >-
web sitenizi ekstra havalı hale getirmek için mükemmel bir eklenti.
Sürüm: 1.3
Yazar: Bayan Vader
Yazar URI'si: http://msvader.com
Lisans: GPL2
*/
?>
Bunu yapmadan önce, WordPress' eklenti kurulumunuzda bir ajaxloadpost dizini oluşturun. Bunu yaptıktan sonra eklentiyi oluşturun ve etkinleştirin. Bundan sonra, ajaxloadpost'unuza aşağıdaki bilgileri ekleyin.
define('AJAXLOADPOSTURL', WP_PLUGIN_URL.”/”.dirname( plugin_basename( __FILE__ ) ) );
işlev ajaxloadpost_enqueuescripts() {
wp_enqueue_script('ajaxloadpost', AJAXLOADPOSTURL.'/js/ajaxloadpost.js', dizi('jquery'));
wp_localize_script( 'ajaxloadpost', 'ajaxloadpostajax', dizi( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}
add_action('wp_enqueue_scripts', ajaxloadpost_enqueuescripts);
Ardından, AJAXLOADPOSTURL değişkenini tanımlayın çünkü WordPress'i eklentinizin URL'sine yönlendirmek için buna ihtiyacınız olacak. Şimdi, WordPress'in wp_enqueue_scripts'ine ajaxloadpost_enqueuescripts ekleyerek yapabileceğiniz komut dosyalarınızı sıraya koymanız gerekiyor.
AJAX'ın asla ham haliyle kullanılamayacağını unutmayın. Her zaman diğer programlama dilleriyle, yani jQuery veya JavaScript ile birlikte kullanılacaktır. Bu durumda, JavaScript ile çalışacağız, bu yüzden onun hakkında bazı temel bilgilere sahip olmanız gerekir.
Devam ederek, \wp-content\plugins\ajaxloadpost\js\klasöründe bulacağınız ajaxloadpost.js dosyasına JavaScript ekleyin. Bir JS klasörü oluşturarak bu işlemi takip edin ve ajaxloadpost.js dosyasını içine yerleştirin.
Şimdi, gerekli JS değişkenini eklemek için WordPress wp_localize_script'i kullanın. Bu eylem, dizininize bir yapı sağlayacak ve komut dosyalarınızı sıraya koyacaktır.
AJAX İşleyicisi Yazma
AJAX işleyicisini yazmak için aşağıdaki kodlara ihtiyacınız olacak:
function ajaxloadpost_ajaxhandler() {
if ( !wp_verify_nonce( $_POST['nonce'], “ajaxloadpost_nonce”)) {
çıkış ("Yanlış nonce");
}
$sonuçlar = ”;
$content_post = get_post($_POST['postid']);
$results = $content_post->post_content;
öl($sonuç);
}
add_action('wp_ajax_nopriv_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler');
add_action('wp_ajax_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler');
Bu eylemi tamamlamak iki sonuçla sonuçlanacaktır. İlk olarak, kullanıcıların ihtiyaç duyduğu gönderilerin kimliğini oluşturacak ve ikincisi, nonce oluşturacak. Ama bu noktanın yanı sıra! AJAX işleyicisinin kodları yerleştirildikten sonra, AJAX işleyicisini WordPress dizinine kaydetmek için bir sonraki adıma geçmeniz gerekir. Bunu yapmak, WordPress eklentisini AJAX çağrılarına duyarlı hale getirecektir. Bunu şu kodlar aracılığıyla başarabilirsiniz:
add_action('wp_ajax_nopriv_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler');
add_action('wp_ajax_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler');
JavaScript Temelleri ve AJAX
AJAX çağrısı ve AJAX işleyicisi yerindeyken, iki noktayı birleştirecek bir JS işlevi oluşturmanız gerekir. Aşağıdaki JavaScript, ajaxloadpost.js'nize koyacağınız bu eylemi gerçekleştirmenize yardımcı olacaktır:
function ajaxloadpost_loadpost(postid,nonce) {
jQuery.ajax({
tür: 'POST',
url: ajaxloadpostajax.ajaxurl,
veri: {
eylem: 'ajaxloadpost_ajaxhandler',
postid: postid,
nonce: nonce
},
başarı: function(veri, textStatus, XMLHttpRequest) {
var loadpostresult = '#loadpostresult';
jQuery(loadpostresult).html(”);
jQuery(loadpostresult).append(veri);
},
hata: function(MLHttpRequest, textStatus, errorThown) {
uyarı(errorThown);
}
});
}
Tıpkı yukarıda bahsedilen adım gibi, bu eylem de iki sonuç yaratacaktır, yani nonce ve post ID.
Bir sonraki adım, jQuery'de de yeterlilik gerektirir. Bu nedenle, becerileriniz biraz rustik ise, bu makaleyi faydalı bulacaksınız!
Devam ederek, uygun sunuculara AJAX çağrısı yapmak için jQuery.ajax işlevini kullanın. Yukarıdaki kodlarda, URL, komut dosyalarını sıraya koyarken kaydettiğimiz JavaScript değişkeninde bulunabilen admin-ajax.php URL'sidir. Ek olarak, bu eylemi, WordPress'e kayıtlı eylem işleyicisinin adıyla belirtin ve ayrıca nonce ve posta kimliğini de gönderin.
Her şey yolunda giderse, #loadpostresult kimliğinin <div> öğesini güncelleyebilir ve alınan içeriği AJAX işleyicisiyle değiştirebilirsiniz.
Kodunuza Bir Yüz Koymak
Şimdi sıra, uygun gönderilerin başlıklarını gösterecek ve kullanıcıların bir AJAX çağrısı ile istediği bilgileri getirecek kodlar oluşturma zamanı. İşte aşağıdaki kodlar:
function ajaxloadpost_show_latest_posts($number = '5'){
$sonuçlar =”;
$the_query = new WP_Query( 'posts_per_page='.$number );
while ( $the_query->have_posts() ):
$the_query->the_post();
$nonce = wp_create_nonce(“ajaxloadpost_nonce”);
$argümanlar = get_the_ID().”,'”.$nonce.”'”;
$link = ' <a onclick=”ajaxloadpost_loadpost('.$arguments.');”>'. get_the_title().'</a>';
$sonuç.= '<li>' . $bağlantı. '</li>';
son zaman;
wp_reset_postdata();
$result.= '<div id=”loadpostresult”></div>';
$sonucu döndür;
}
function ajaxloadpost_shortcode_function( $atts ){
ajaxloadpost_show_latest_posts();
}
add_shortcode('AJAXLOADPOST', 'ajaxloadpost_shortcode_function');
Umarım, bu makale WordPress Eklentinizi Duyarlı hale getirmenize yardımcı olmuştur. Bir sorunuz varsa bize bir yorum bırakın.
daha fazla okuma
- Duyarlı tasarım, dönüşüm oranlarını artırmanıza yardımcı olur.
- En iyi duyarlı WooCommerce temaları