15 09 10 AJAX w Wordpresie

Jak zawsze dodany przez : Sylwek, komentarze: ( 0 )

AJAX to użyteczna i bardzo popularna technologia webowa. W Wordpresie AJAX jest wykorzystywany głównie w panelu administracyjny, nie mniej nic nie stoi na przeszkodzie aby skorzystać z dobrodziejst tej technologii także na stronach bloga. Niniejszy wpis ma na celu przedstawić działania i użycie AJAXa w Wordpresie.

Niniejszy wpis zakłada, że wiesz co to jest AJAX i znacz javaScript oraz PHP w stopniu co najmniej podstawowym.

Zanim przedstawię funkcjonalny przykład, omówię kilka technicznych szczegółów.

Po pierwsze, WordPress ma wbudowaną obsługę AJAXa. Programiście pozostaje zdefiniować funkcję wyświetlającą zawartość odpowiedzi na asynchroniczne zapytanie i podłączyć ją pod właściwą akcję. Dokonać tego można w functions.php lub pliku wtyczki. W tym wpisie korzystam z tej pierwszej opcji.

Po drugie, akcja, do której ma być podłączona funkcja zwracająca dane przez serwer nosi specyficzną nazwę i zależy od parametru action przesyłanego do serwera podczas asynchronicznego zapytania.

Po trzecie, w Wordpresie, jako rezultat asynchronicznego zapytania, wywoływane są odmienne akcje w zależności od tego czy użytkownik jest zalogowany czy też nie. Dla zalogowanego użytkownika akcja będzie mieć prefix wp_ajax_ z dołączonym parametrem action przesłanym do serwera. Dla przykładu załóżmy że parametr action ma nazwę fetch_comments. W takiej sytaucji akcja dla zalogowanego użytkownika będzie mieć nazwę wp_ajax_fetch_comments.

Dla niezalogowanego użytkonika prefixem akcji będzie wp_ajax_nopriv_, czyli w przypadku akcji o nazwie fetch_comments pełna nazwa akcji będzie wyglądała jak następuje: wp_ajax_nopriv_fetch_comments.

Do tak zdefiniowanej akcji należy podłączyć funkcję zwracającą dane jako wynik asynchronicznego zapytania. Robi się to standardowo za pomocą add_action.

Praktyczne zastosowanie technologii AJAX w Wordpresie

Załóżmy, że jesteśmy na stronie pełnego wpisu bloga. Na wielu blogach zaraz za wpisem następuje pełna lista komentarzy, załóżmy jednak, że aby oszczędzić nieco na transferze danych i cyklach procesora serwera, komentarze będą ściągane nie razem z wpisem jak to ma normalnie miejsce, ale po dopiero wówczas gdy osoba czytająca wpis kliknie na “Pokaż komentarze”. W tym momencie zakładam, że nie każdy zainteresowany jest komentarzami do wpisu.

Aby osiągnąć zamierzony cel należy umieścić kod jak poniżej w pliku functions.php. Kod rozbiłem na fragmenty aby ułatwić jego omawianie i zrozumienie. Zaczynamy.

add_action("wp_ajax_nopriv_fetch_comments", "fetch_comments_ajax_call");
add_action("wp_ajax_fetch_comments","fetch_comments_ajax_call");

Jak już wspomniałem wyżej, nazwa akcji jaka zostanie wykonana podczas zapytania via AJAX, zależy od tego czy użytkownik jest zalogowany czy też nie. W tym przykładzie nie robię rozdziału na zalogowanych i wylogowanych użytkowników, obie grupy dostaną ten sam rezultat w postaci komentarzy wygenerowanych przez funkcję fetch_comments_ajax_call. Funkcja,jak można zauważyć została podłączona do dwóch akcji. Pierwsza z nich obsługuje aktualnie wylogowanych użytkowników, druga natomiast tych zalogowanych.

function fetch_comments_ajax_call(){
  $post_id = 0;
  global $wpdb;

  $post_id = isset($_POST['post_id']) ? intval($_POST['post_id']) : $post_id ;
  if(!$post_id){
    $output = json_encode(array());
    die();
  }

  $sql = "SELECT comment_ID,comment_author,comment_author_url,comment_date,comment_content FROM {$wpdb -> comments} WHERE comment_post_ID = $post_id AND comment_approved = 1 ORDER BY comment_date DESC";
  $comments = $wpdb -> get_results($sql,ARRAY_A);

  if(!$comments){
    $output = json_encode(array());
    die();
  }

  echo json_encode( $comments );
  die();
}

Powyższa funkcja generuje odpowiedź na asynchroniczne zapytania. Jej serce to zapytanie do bazy danych, którego rezultatem jest tablica PHP z asocjacyjnymi tablicami, gdzie każda odpowiada jednemu komentarzowi dla wpisu. Wartość zmiennej post_id jest przekazywana jako drugi parametr zapytania (zaraz po action). Komentarze ściągane są na podstawie numeru wpisu. Rezultat wyświetlany jest w notacji JSON, skrypt kończy swoje działanie z pomocą instrukcji die (jeżeli zostanie pominięta, do wyświetlonego rezlutatu zostanie dodane “-1″ ).

Sktypt javaScript, który służy do wysłania asynchronicznego zapytanie, wykorzystuje biblioteki jQuery i wygląda jak następuje:

jQuery(document).ready(function($){
  var handle = $(document.getElementById('show_comments'));
  if(!handle){
    return;
  }

Handle to element HTML o atrybucie id "show_comments", który gdy kliknięty, uruchomi zapytanie.

  var post_id = handle.attr('class').replace('comments_for-','');

Numer wpisu przechowywany jest w atrybucie class, który przyjmuje wartość “comments_for-numer_wpisu”. Prefix zostaje usunięty tak aby otrzymać wyłącznie numer wpisu, dla którego mają być ściągnięte komentarze.

  handle.click(function(){
    handle.hide('fast');
    $.post('/wp-admin/admin-ajax.php',{action:'fetch_comments',post_id:post_id},function(comments){
      var comments_container = $(document.getElementById('comments_container'));

      if(!comments_container){
        return;
      }

      var html = '';

      if(comments.length < 1){
        comments_container.append("<p>Ten wpis nie ma jeszcze komentarzy !</p>");
        return;
      }

Po kliknięciu na element z id handle następuje uruchomienie asynchronicznego zapytania do do pliku /wp-admin/admin-ajax.php z parametrami: action : fetch_comments i post_id : post_id.

Zmienna comments_container wskazuje na adres elementu HTML do którego zostaną doczepione ściągnięte komentarze.

      for(var i in comments){
        var c = comments[i];
        html += '<h3>Najnowsze komentarze</h3>';
        html += '<p id = "comment_id#'+c['comment_ID']+'">';
        html += '<a href = "'+c['comment_author_url']+'">'+c['comment_author']+'</a>';
        html += '</p><p>';
        html += c['comment_content'];
        html += '</p><p>';
        html += c['comment_date'];
        html += '</p>';
        html += '<hr />'
      }
      comments_container.append(html);
    },"json");
    return false;
  });
})

Fragment kodu javaScript powyżej ma za zadanie połączyć ściągnięte dane w jedną całość i dołączyć je kontenera id dołączyć je do kontenera.

Aby wszystko mogło zadziałać konieczne jest dołączenie skryptów javaScript do nagłówka dokumentu, co wykonuje się z pomocą akcji wp_print_scripts do której w tym przypadku dodana została funkcja preview_comments_js_scripts. W funkcji zarejestrowany został skrypt display_comments_ajax_call.js ( znajduje się w katalogu js/aktywnego motywu ), gdzie znajduje się cały przedstawiony wyżej kod javaScript.

add_action('wp_print_scripts','preview_comments_js_scripts');
function preview_comments_js_scripts(){
  if(is_single()){
    wp_register_script('display_comments_ajax_call',
      get_bloginfo('template_directory') . '/js/display_comments_ajax_call.js',
      array('jquery')
    );
    wp_enqueue_script('display_comments_ajax_call');
  }
}

Ostatnią brakującą rzeczą jest fragment kodu HTML, który należy umieścić w pliku single.php. Wygląda on jak następuje:

<p id = "show_comments" class = "comments_for-<?php echo $post -> ID ?>">Pokaż komentarze</p>
<div id = "comments_container">
</div>

Normalnie powyższe znacznik HTML byłyby tworzone dynamicznie, jednakże na potrzeby tego ćwiczenia zrezygnowałem z tego.

Po kliknięciu na paragraf o id show_comments odpalona zostaje anonimowa funkcja javaScript, której zadaniem jest wykonanie asynchronicznego zapytania do serwera. Kod do wykonania po stronie serwera zdefiniowany jest w funkcji PHP o nazwie fetch_comments_ajax_call, która znajduje się w pliku functions.php. Funkcja ta zwraca tablicę wyników w notacji JSON. Wynik jest przesyłany na powrót do funkcji javaScript, gdzie zostało rozpoczęte zapytanie, formatowany i dołączany do kontenera HTML.

Przykład, chodź funkcjonalny, ma na celu jedynie przedstawić użycie AJAXu w Wordpresie, z uwagi na braki w walidacji danych i zastosowane uproszczenia nie powinien on być stosowany na produkcyjnej stronie.

Mam nadzieję, że powyższy przykład okazał się przydatny w zrozumieniu pewnych zależności jakie zachodzą przy użyciu AJAXa w Wordpresie.

Więcej informacji na temat AJAXa i jego użycie w Wordpresie można znaleźć na tej stonie kodeksu Wordpresa.

Kategorie: wordpress, wordpress - administracja
Tagi: ajax, wordpress