bmat.pl

Domeną nowoczesnych stron internetowych staje się dynamiczne przetwarzanie i pobieranie treści, które mają być dostarczane użytkownikowi w najbardziej wygodny sposób. Nie ulega wątpliwości, że im mniej przeładowań strony, tym lepiej. Dobrodziejstwa technologii Ajax oraz występujące w parze z nią żądania asynchroniczne to rzeczy, których nie mogło zabraknąć także i w WordPressie. Czas przyjrzeć się temu zagadnieniu z bliska.

 

Trochę teorii

WordPress posiada wbudowany hook wp_ajax_(action), który umożliwia obsługę żądań Ajax z poziomu wnętrza wtyczki. Dla użytkowników niezalogowanych zostanie obsłużony bliźniaczy hook wp_ajax_nopriv_(action). W obu przypadkach (action) należy uzupełnić unikalną nazwą, którą będziemy identyfikować konkretny request, np. wp_ajax_do_backup oraz wp_ajax_nopriv_do_backup. Identyfikatorem żądania, z którego skorzystamy później będzie „do_backup”. Do tak stworzonych haków (hooks) podepniemy funkcję, która zwróci nam wszelkie potrzebne dane.

Do tak przygotowanej funkcji będziemy wysyłać żądania, odwołując się podczas ich inicjalizacji do pliku admin-ajax.php, w którym obsługiwane są wszystkie zapytania. W tym miejscu WordPress sprawdza dostępne funkcje, które zostały zarejestrowane do obsługi żądań. Odwołuje się do nich za pomocą identyfikatora, który jest przekazywany jako parametr action podczas tworzenia requestu.

Podsumowując, do stworzenia żądania Ajax będziemy potrzebować:

• funkcji, podpiętej do haków wp_ajax oraz wp_ajax_nopriv,
• skryptu, który wywoła żądanie do pliku admin-ajax.php.

 

Kod HTML

Na początku tworzymy kod HTML, za pomocą którego będziemy uruchamiać wysyłanie żądań. W przykładzie posłużą do tego przyciski, które po kliknięciu przekażą do żądania numer dnia tygodnia, aby uzyskać jego formę opisową. Rezultat zostanie następnie wyświetlony w elemencie #daylabel.

<button class="daynumber" data-number="1">1</button>
<button class="daynumber" data-number="2">2</button>
<button class="daynumber" data-number="3">3</button>
<button class="daynumber" data-number="4">4</button>
<button class="daynumber" data-number="5">5</button>
<button class="daynumber" data-number="6">6</button>
<button class="daynumber" data-number="0">7</button>

<span id="daylabel">Kliknij na nr dnia, by pobrać nazwę</span>

Powyższy kod oczywiście warto wygenerować za pomocą PHP, jednak umieściłem wynikowy HTML dla lepszego zrozumienia działania kodu.

 

Funkcja obsługująca żądania

Następnie pora na funkcję PHP, która obsłuży przychodzące żądanie Ajax. Funkcję oczywiście podpinamy do odpowiednich akcji.

add_action('wp_ajax_request_day_description', 'getDayDescription');
add_action('wp_ajax_nopriv_request_day_description', 'getDayDescription');

function getDayDescription() {
    $labels = array(
        'Niedziela',
        'Poniedziałek',
        'Wtorek',
        'Środa',
        'Czwartek',
        'Piątek',
        'Sobota'
    );

    $number = $_POST['number'];
    echo $labels[$number];

    exit;
}

 

Skrypt z żądaniem Ajax

Na końcu wystarczy napisać kawałek JavaScriptu, aby wywołać żądanie, przekazać argumenty oraz przechwycić i zaprezentować rezultat. Skrypt w przykładzie został umieszczony w stopce, jednak nie jest to wymagane. Warto zwrócić uwagę na uzupełnienie za pomocą PHP adresu URL do pliku, który obsłuży żądanie.

add_action('wp_footer', 'importAjaxScript');

function importAjaxScript() {
?>
    <script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery(".daynumber").click(function() {
            var number = jQuery(this).attr('data-number');
            jQuery.ajax({
                type: "POST",
                url: "<?php echo admin_url('admin-ajax.php'); ?>",
                data: {"action" : "request_day_description", "number": number},
                beforeSend: function() {
                    jQuery("#daylabel").html("Czekaj...");
                },
                success: function(description) {
                    jQuery("#daylabel").html(description);
                }
            });
            return false;
        });
    });
    </script>
<?php
}

 

Demo