AJAX kullanarak WordPress Eklentinizi Duyarlı hale getirme

WordPress, web siteleri oluşturmak için mükemmel bir platformdur; ancak içerik yöneticisi aracının dezavantajları da vardır. Web sitenizi WordPress üzerine kurduysanız, yavaş yükleme hızı sorunuyla karşılaşmanız nadir değildir. Veritabanlarının ve kod tabanlarının akışıyla birlikte eklenen çok sayıda eklenti nedeniyle, aslında nadir değildir. Ancak, çözüme odaklanmak önemlidir. Seyircinizin yavaş hız nedeniyle sabırsızlanıp ayrılmasını ve potansiyel işi kaybetmesini istemezsiniz!

Eklentilerinize AJAX olarak bilinen basit bir özelliği entegre ederek WordPress web sitenizin hızını optimize edebileceğinizi söylesek? AJAX terimi, Asenkron JavaScript ve XML'in kısaltmasıdır. AJAX, web sitenizin hızını artırmanıza yardımcı olur. Sayfanın yalnızca belirli bir bölümünü yükler ve kalan sayfayı statik tutar, böylece yükleme süresini iyileştirir. Birkaç eklenti ve uygulama, bugün bile web sayfalarının hızını artırmaya yardımcı olmak için bu özelliği kullanıyor.

Kısa bir süre içinde AJAX, Dijital Pazarlama dünyasında mükemmel bir itibar kazandı ve web sitesi sahiplerinin çoğunluğu tarafından kullanılıyor. Neyse ki WordPress, AJAX için mükemmel destek sağlayarak AJAX'a entegre edilmiş eklentilerin yazılmasını kolaylaştırır. WordPress desteği ve makalemiz sayesinde, AJAX'ı eklentilerinize çok kısa sürede entegre edebilirsiniz.

Aşağıda, süreç boyunca size yol gösterecek adım adım bir kılavuz bulunmaktadır.

Adım #1 – Eklentinizi oluşturun

İlk adım, daha duyarlı olan ve web sayfanızın yükleme süresini azaltan daha gelişmiş bir ürün geliştirmek için kullanabileceğiniz basit bir eklenti oluşturmaktır. İyi haber şu ki, eklentiyi oluştururken herhangi bir zorluk yaşamayacaksınız çünkü tek yapmanız gereken tek satırlık veri içeren bir dosya oluşturmak.

Bunu, “wp-content/plugins” dosyasını aratarak yapabilir ve size uygun olan adla bir klasör oluşturabilirsiniz. Bunu yaptıktan sonra, şimdi klasörü açmanız ve “name_of_the_plugin.php” adında bir dosya oluşturmanız gerekiyor. Bu dosyayı metin düzenleyicide açtıktan sonra, metin düzenleyiciye aşağıdaki kodu yazın.

<?php
/*
Plugin Name: Your choice
Plugin URI: http://yout-choice.com
Description: This loads post via ajax
Author: Your name
Author URI: http://yourname.com
Version: 1
*/

Adım #2 – JavaScript Kitaplığını Ekleyin

Bu adıma bir “ajaxloadpost” dizini oluşturarak başlarsınız. Nasıl yapılır? WordPress eklentisi ile birlikte kurabileceğiniz için oldukça basittir. Bu adım tamamlandıktan sonra artık kodladığınız eklentiyi oluşturabilir ve çalıştırabilirsiniz. Daha sonra aşağıdaki kodu ajaxloadpost'unuza eklemeniz gerekir:

define('AJAXLOADPOSTURL', WP_PLUGIN_URL."/".dirname( plugin_basename( __FILE__ ) ) );
function ajaxloadpost_enqueuescripts() {
wp_enqueue_script('ajaxloadpost', AJAXLOADPOSTURL.'/js/ajaxloadpost.js', array('jquery'));
wp_localize_script( 'ajaxloadpost', 'ajaxloadpostajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}
add_action('wp_enqueue_scripts', ajaxloadpost_enqueuescripts);

WordPress'i oluşturulan eklentinin URL'si üzerinden yönlendirmeniz gerekir; bu yüzden değişkeni AJAXLOADPOSTURL adıyla tanımlamanız gerekiyor.

AJAX her zaman programlama dillerinin bir kombinasyonu ile kullanılır, kalan makalemizde JavaScript ile çalışacağız. \wp-content\plugins\ajaxloadpost\js\klasöründe ajaxloadpost.js'yi arayın ve ona JavaScript ekleyin. Artık JavaScript değişkenini betiğinize ekleyebilirsiniz.

Adım #3 – AJAX İşleyicisini Entegre Etme

Yukarıdakilerin tümü sıralandıktan sonra, nihayet AJAX işleyicisini eklentinize entegre etmeye geçebilirsiniz. AJAX işleyicinizin kodu aşağıdadır:

function ajaxloadpost_ajaxhandler() {
if ( !wp_verify_nonce( $_POST['nonce'], "ajaxloadpost_nonce")) {
exit("Wrong nonce");
}

$results = '';
$content_post = get_post($_POST['postid']);
$results = $content_post->post_content;

die($results);
}

Yukarıdaki kod temel olarak iki görevi yerine getirecektir. Önce kullanıcının ihtiyaç duyduğu gönderiler için bir kimlik geliştirecektir. İkinci görev “nonce” yaratmaktır. İkinci unsur için şimdilik endişelenmenize gerek yok (Yazının sonunda detaylı olarak anlatılmıştır).

Bunun yerine, AJAX işleyicinizi WordPress dizinine kaydettirmek olan ikinci adıma geçmelisiniz. Bu, AJAX işlevinin istendiğinde çağrılmasını sağlayacaktır. Bu eylem, aşağıda belirtilen kod aracılığıyla gerçekleştirilebilir:

add_action( 'wp_ajax_nopriv_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler' );
add_action( 'wp_ajax_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler' );

JavaScript hakkında arka plan bilgisine sahip olmak sizin için büyük bir artı, eğer bu programlama diline hakim değilseniz, tüm süreç boyunca size rehberlik etmesi için bir uzmandan yardım alın. Ayrıca bir web öğretmeni aracılığıyla veya buradaki makaleleri okuyarak JavaScript becerilerinizi geliştirebilirsiniz .

Adım #4 – AJAX için JavaScript Kullanımı

İhtiyacınız olan bir sonraki şey, AJAX'ın AJAX işleyicisi aracılığıyla döndürülen verileri aramasını ve güncellemesini sağlayacak bir işlev yazmaktır. İşlev genellikle ajacloadpost.js'dir. Yukarıda açıklanan eylemi belirlemek için aşağıdaki kod kullanılabilir.

function ajaxloadpost_loadpost(postid,nonce) {
jQuery.ajax({
type: 'POST',
url: ajaxloadpostajax.ajaxurl,
data: {
action: 'ajaxloadpost_ajaxhandler',
postid: postid,
nonce: nonce
},
success: function(data, textStatus, XMLHttpRequest) {
var loadpostresult = '#loadpostresult';
jQuery(loadpostresult).html('');
jQuery(loadpostresult).append(data);
},
error: function(MLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});

Yukarıdaki işlev iki girdi alacaktır, bunlardan biri gönderinin kimliği, ikincisi ise nonce. Sunucuya çağrı yapmak için jQuery.ajax işlevini kullanabilirsiniz. Başarılı olduğunda, #loadpostresult kimliğinin <div> değerini AJAX işleyicisi aracılığıyla döndürülen verilerle güncelleyin. Kodun son biti, bir hata olması durumunda bir koşuldur. Bir hata oluşursa, sistem bir açılır pencere ile uyarılır.

Adım #5 – Listelerin Görüntülenmesi

Tüm işlevler sıralandıktan sonra, yazı başlığını görüntülemek için son adıma geçebilirsiniz. Her tıklamanın farklı bir gönderi başlığına yönelik olabileceğini ve kodunuzun çağrılan kodu alabilmesi gerektiğini unutmayın. Aşağıdaki kod bunu başarmanıza yardımcı olabilir:

function ajaxloadpost_show_latest_posts($number = '5'){  

$results ='';
$the_query = new WP_Query( 'posts_per_page='.$number );  

while ( $the_query->have_posts() ) :
$the_query->the_post();
$nonce = wp_create_nonce("ajaxloadpost_nonce");  

$arguments = get_the_ID().",'".$nonce."'";  

$link = ' <a>'. get_the_title().'</a>';  

$result.= '<li>' . $link . '</li>';
endwhile;
wp_reset_postdata();  

$result.= '<div></div>';  

return $result;
}  

function ajaxloadpost_shortcode_function( $atts ){
return ajaxloadpost_show_latest_posts();
}
add_shortcode( 'AJAXLOADPOST', 'ajaxloadpost_shortcode_function' );

"nonce" nedir?

İsteğin gerçek bir kaynaktan gelip gelmediğini kontrol etmek için bir nonce kullanılır. Basit bir WordPress işlevi kullanılarak bir nonce oluşturulabilir: “wp_create_nonce”. "wp_verify_nonce" işlevi kullanılarak bir AJAX işleyicisi aracılığıyla ayrıca kontrol edilebilir. WordPress'inizde hassas bir görev yapıyorsanız bu özelliği kullanmak son derece önemlidir.

  Çözüm

  AJAX'ı eklentilerinizle entegre etmek, sayfalarınızın yanıt verme hızını gözle görülür şekilde iyileştirmeye yardımcı olabilir. JavaScript konusunda rahat değilseniz, kodlamayı daha kolay bulduğunuz bir programlama dilini seçebilir veya eklentiniz için kodlamanıza yardımcı olabilecek bir uzman bulabilirsiniz. AJAX'ı eklentilerinize entegre etmeye çalışın, hayal kırıklığına uğramayacaksınız!