Ajax ve WordPress

Ajax ile ilgili giriş yazımızda da açıkladığımız Ajax tekniği, web sayfası içeriğinin bir kısmını sayfayı yenilemeye gerek kalmadan güncellememizi sağladığı için popüler hale geldi. Bu, gelişmiş bir kullanıcı deneyimi sağlar.

WordPress siteleri elbette istisna değildir. Ajax'ı WordPress'te nasıl kullandığımız, ancak diğer web uygulamalarında kullanımdan farklıdır.

admin-ajax nedir ve nasıl çalışır?

WordPress, otomatik kaydetme, anında güncellemeler, yorum denetleme, gönderi ekleme/silme vb. gibi kendi yönetici özellikleri için Ajax'ı zaten uygulamıştır. Bu, yalnızca WordPress tarafından sağlanan ilgili işlevleri kullanarak kullanıma hazır olduğu anlamına gelir.

Bu amaca yönelik anahtar dosya, istemci ile sunucu arasında bağlantı oluşturmak için kullanılan wp-admin klasörünün altında bulunan admin-ajax.php dosyasıdır.

Bu dosyanın içinde, 159. satır civarında, tüm Ajax isteklerinin bazı eylem kancaları tarafından nasıl kaydedildiğini görebilirsiniz.

 if ( ! empty( $_GET['action'] ) && in_array( $_GET['action'], $core_actions_get, true ) ) { add_action( 'wp_ajax_' . $_GET['action'], 'wp_ajax_' . str_replace( '-', '_', $_GET['action'] ), 1 ); } if ( ! empty( $_POST['action'] ) && in_array( $_POST['action'], $core_actions_post, true ) ) { add_action( 'wp_ajax_' . $_POST['action'], 'wp_ajax_' . str_replace( '-', '_', $_POST['action'] ), 1 ); }

wp_ajax_{$action}, oturum açmış kullanıcılara ve wp_ajax_nopriv_{$_REQUEST['action']} site ziyaretçilerine atıfta bulunur. Tüm kullanıcıları içeren bir istek oluşturmak istiyorsanız, her iki kancayı da kullanmamız gerekecek.

Bu eylemlerin yardımıyla, özel bir işlevi bağlayabilir ve bir Ajax isteğinde bulunmak için verilerinizi WordPress'e iletebilirsiniz. Buna eylemde bir göz atalım.

WordPress Ajax Örneği

Ajax tanıtım makalemizde yaptığımız gibi aynı örneği kullanacağız ve kullanıcının makale başlıklarında arama yapmasına ve önerilen sonuçları anında görmesine olanak tanıyan bir form oluşturacağız.

Temamızın başlık alanına, arama formumuz için HTML çıktısını ekleyeceğiz. Twenty Twenty-One temasını kullandığımız için temanın ana klasörünün altında bulunan header.php dosyasını düzenledik ve <div id=”content” class=”site-content”> satırının önüne aşağıdaki satırları ekledik.

 <p><b>Search in articles:</b></p> <form> <input type="text" class="userInput"> </form> <p>Articles available: <span class="txtHint"></span></p>

Artık kullanıcının kullanabileceği form ön uçta görünmelidir.

NOT: Burada, bir alt tema oluşturmadan doğrudan temanın header.php dosyasını düzenleyeceğiz. Bu iyi bir uygulama değildir ve birçok dezavantajı vardır. Çocuk temalarının önemi hakkında daha fazla bilgi edinmek istiyorsanız lütfen ilgili yazımızı okuyunuz. Bu örneğin amaçları doğrultusunda kodu basit ve konuya uygun tuttuk. Bu nedenle, bu kodu bir üretim web sitesinde kullanmanız önerilmez.

Sonraki şey, isteği gönderecek JavaScript işlevini eklemektir. WordPress ile birlikte geldiği ve kullanıma hazır olduğu için bunun yerine jQuery kullanacağız. Elbette WordPress yolu ile bir script eklememiz gerekiyor.

Komut Dosyamızı Kuyruğa Alın

Temanın function.php dosyasını düzenleyerek WordPress'e JS dosyasının varlığından bahsedeceğiz ve betiği bu şekilde kuyruğa alacağız. Dosyamız oluşturmuş olduğumuz custom.js olacak ve temanın ana klasörünün altında yeni bir “js” klasörü içine koyacağız.

 function ajax_search_script() { wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true ); $script_data_array = array( 'url' => admin_url( 'admin-ajax.php' ), 'nonce' => wp_create_nonce( 'search_titles_nonce' ), ); wp_localize_script( 'custom-script', 'ajax_object', $script_data_array ); wp_enqueue_script( 'custom-script' ); } add_action( 'wp_enqueue_scripts', 'ajax_search_script' );

ajax_search_script() işlevinde, betiği kaydettik ve yerelleştirdik ve ardından yerelleştirilmiş verileri yerleşik wp_enqueue_script() işleviyle kuyruğa aldık. Ardından ajax_search_script() işlevini bağladık, bu da WordPress'te komut dosyalarını sıralarken kullanmak için uygun eylemdir.

wp_localize_script kullanımı burada kafa karıştırıcı olabilir, çünkü bir WordPress işlevi olarak başlangıçta komut dosyanızda kullanılan dizeleri çevirmek için tasarlanmıştır. Bununla birlikte, genel verileri PHP'den JavaScript'e geçirmek için de sıklıkla kullanılır. Bizim durumumuzda, Ajax URL'sini ve nonce nesnesini iletmek için.

jQuery Ajax isteğinin web sitesinden gelen bir istek olarak doğrulanabilmesi için nonce kullanımı gereklidir. WordPress'te nonces kullanımına aşina değilseniz, ilgili makalemizde daha fazlasını okuyabilirsiniz.

ajax_object , wp_localize_script() işlevinin gerekli $object_name parametresinin değeridir ve daha sonra jQuery kodunda kullanılacaktır.

Harika! Şimdi fonksiyonumuzu doğru içerikle dolduralım.

JavaScript

custom.js dosyasının içine jQuery'mizi ekledik.

 jQuery(function($) { $('.userInput').on('keyup', function() { var input = $(this).val(); if(input != '') { var data = { 'action': 'get_articles_titles', 'search_text': input, 'nonce': ajax_object.nonce } $.post(ajax_object.url, data, function(response) { $('#txtHint').html(response); }); } }); });

Bu sefer istenen veriyi, eylemi, arama_metini, nonce'yi sunucu tarafı komut dosyasına geçirmek için jQuery ve JSON kullandık. Geri çağırma get_articles_titles() işlevi, arka uçtaki verilerin işlenmesinden, sonuçların hazırlanmasından ve bir yanıtın geri gönderilmesinden sorumlu olacaktır.

Ayrıca, gördüğünüz gibi, wp_localize_script'ten wp_localize_script iki dizi değeri olan nonce ve url ile kullanıyoruz.

Kancalar

Şimdi kimliği doğrulanmış Ajax eylemlerini daha önce bahsettiğimiz gerekli kancalarla bağlamamız gerekiyor. Hem oturum açmış hem de oturum açmamış kullanıcıları dahil etmek için her iki kancayı da kullanmanız gerektiğini hatırlatırız. functions.php dosyanızda, betiği kuyruğa almak için daha önce eklenen kodun altına bu iki satırı ekleyin.

 add_action('wp_ajax_get_articles_titles', 'get_articles_titles'); add_action('wp_ajax_nopriv_get_articles_titles', 'get_articles_titles');

Daha önce fark etmiş olabileceğiniz gibi, kanca adı aslında eylem adımızın ardından gelen bir önektir. get_articles_titles çengel işlevi, makalelerin başlıklarını gerçekten alacağımız yerdir. Bu functions.php da function.php içinde tanımlayacağız.

 function get_articles_titles() { check_ajax_referer('ajax_nonce', 'nonce'); $input = $_POST['search_text']; $args = array( 'posts_per_page' => -1, 'post_type' => 'post', ); $the_query = new WP_Query( $args ); $autocomplete = "<br>"; if ( $the_query->have_posts() ) { while ( $the_query->have_posts() ) { $the_query->the_post(); $title = get_the_title( get_the_ID() ); if ( strpos( strtolower($title), strtolower($input) ) !== false ) { $autocomplete .= $title . "<br>" ; } } wp_reset_postdata(); } echo $autocomplete; wp_die(); }

check_ajax_referer, Ajax isteğinin harici olarak işlenmediğini doğrulamaktan sorumludur.

Buradaki gerekli parametreler, ajax_search_script() işlevinizdeki 'nonce' => wp_create_nonce( 'ajax_nonce' ) ile ilgili eylem ve nonce ile ilgili değerdir.

Ve bu kadar! Az önce çok basit bir Ajax-PHP örneği oluşturduk. Bu noktada kodu bir test WordPress ortamında denerseniz, bu şekilde çalışıyor olmalıdır.

Hizmet 1-5, test gönderilerimizin başlıklarıdır.

Çözüm

Bu, Ajax avantajlarından yararlanarak bir WordPress web sitesinde yanıt verebilirliği ve performansı nasıl artırabileceğimize ilişkin bir makaleydi. Umarım, artık benzer teknikleri kendi web sitenizde kullanmaya ve kullanıcı deneyimini geliştirmenin keyfini çıkarmaya hazırsınızdır!