Ajax i WordPress

Technika Ajax, jak wyjaśniliśmy w naszym artykule wprowadzającym na temat Ajax, stała się popularna, ponieważ pozwala nam aktualizować część zawartości strony internetowej bez konieczności jej odświeżania. Zapewnia to lepsze wrażenia użytkownika.

Witryny WordPress nie są oczywiście wyjątkiem. Sposób, w jaki używamy Ajax w WordPress, różni się jednak w porównaniu z innymi aplikacjami internetowymi.

Co to jest admin-ajax i jak to działa?

WordPress zaimplementował już Ajax dla swoich własnych funkcji administracyjnych, takich jak automatyczne zapisywanie, natychmiastowe aktualizacje, moderowanie komentarzy, dodawanie/usuwanie postów itp. Oznacza to, że jest on gotowy do użycia przez nas po prostu korzystając z powiązanych funkcji dostarczanych przez WordPress.

Kluczowym plikiem do tego celu jest plik admin-ajax.php , znajdujący się w folderze wp-admin, który służy do tworzenia połączenia między klientem a serwerem.

Wewnątrz tego pliku, w okolicach linii 159, możesz zobaczyć, jak wszystkie żądania Ajax są rejestrowane przez niektóre podpięcia akcji.

 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_{$akcja} odnosi się do zalogowanych użytkowników, a wp_ajax_nopriv_{$_REQUEST['action']} do odwiedzających witrynę. Jeśli chcesz utworzyć żądanie, które obejmuje wszystkich użytkowników, będziemy musieli użyć obu haków.

Tak więc za pomocą tych działań możesz podłączyć niestandardową funkcję i przekazać swoje dane do WordPressa, aby wykonać żądanie Ajax. Przyjrzyjmy się temu w akcji.

Przykład WordPress Ajax

Wykorzystamy ten sam przykład, co w naszym artykule wprowadzającym do Ajaksu i stworzymy formularz, który pozwoli użytkownikowi przeszukiwać tytuły artykułów i zobaczyć sugerowane wyniki w locie.

W przestrzeni nagłówka naszego motywu wstawimy wynik HTML dla naszego formularza wyszukiwania. Używamy motywu Twenty Twenty-One, więc wyedytowaliśmy plik header.php znajdujący się w głównym folderze motywu i wstawiliśmy następujące wiersze przed wierszem <div id=”content” class=”site-content”>.

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

Teraz formularz, z którego może skorzystać użytkownik, powinien być widoczny na froncie.

UWAGA: Tutaj będziemy bezpośrednio edytować plik header.php motywu bez tworzenia motywu podrzędnego. Nie jest to dobra praktyka i ma wiele wad. Jeśli chcesz dowiedzieć się więcej o znaczeniu motywów potomnych, przeczytaj nasz powiązany artykuł. Na potrzeby tego przykładu zachowaliśmy prosty i tematyczny kod. W związku z tym nie zaleca się używania tego kodu w witrynie produkcyjnej.

Następną rzeczą jest dołączenie funkcji JavaScript, która wyśle ​​żądanie. Zamiast tego użyjemy jQuery, ponieważ jest już dostarczane z WordPress i jest gotowe do użycia. Oczywiście musimy dołączyć skrypt na sposób WordPressa.

Umieść nasz skrypt w kolejce

Powiemy WordPressowi o istnieniu pliku JS, edytując plik function.php motywu i umieszczając skrypt w kolejce w ten sposób. Naszym plikiem będzie custom.js , który stworzyliśmy i umieściliśmy w nowym folderze „js” w głównym folderze motywu.

 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' );

W funkcji ajax_search_script() zarejestrowaliśmy i zlokalizowaliśmy skrypt, a następnie umieściliśmy zlokalizowane dane w kolejce za pomocą wbudowanej funkcji wp_enqueue_script(). Następnie podłączyliśmy funkcję ajax_search_script() do wp_enqueue_scripts, która jest właściwą akcją do użycia podczas kolejkowania skryptów w WordPressie.

Użycie wp_localize_script może być tutaj mylące, ponieważ jako funkcja WordPressa została pierwotnie zaprojektowana do tłumaczenia dowolnych ciągów znaków używanych w skrypcie. Jednak jest również często używany do przekazywania ogólnych danych z PHP do JavaScript. W naszym przypadku do przekazania adresu URL Ajax i obiektu nonce.

Użycie jednorazowych jest konieczne, aby żądanie jQuery Ajax mogło zostać zweryfikowane jako żądanie pochodzące ze strony internetowej. Jeśli nie jesteś zaznajomiony z używaniem nonces w WordPress, możesz przeczytać więcej w naszym powiązanym artykule.

ajax_object jest wartością wymaganego parametru $object_name object_name funkcji wp_localize_script() i będzie później używana w kodzie jQuery.

Świetny! Teraz wypełnijmy naszą funkcję odpowiednią treścią.

JavaScript

Wewnątrz pliku custom.js umieściliśmy nasze jQuery.

 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); }); } }); });

Tym razem użyliśmy jQuery i JSON w celu przekazania żądanych danych, akcji, search_text, nonce do skryptu po stronie serwera. Funkcja callback get_articles_titles() będzie odpowiedzialna za przetwarzanie danych w zapleczu, przygotowanie wyników i odesłanie odpowiedzi.

Ponadto, jak widać, używamy ajax_object z wp_localize_script z jego dwiema wartościami tablicy, nonce i url.

Haki

Teraz musimy powiązać uwierzytelnione akcje Ajax z niezbędnymi hakami, o których wspomnieliśmy wcześniej. Przypominamy, że aby uwzględnić zarówno zalogowanych, jak i niezalogowanych użytkowników, musisz użyć obu hooków. W swoim pliku functions.php dodaj te dwie linie pod dodanym wcześniej kodem do kolejkowania skryptu.

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

Jak być może już zauważyłeś, nazwa haka jest w rzeczywistości prefiksem, po którym następuje nazwa naszej akcji. get_articles_titles funkcja get_articles_titles jest miejscem, w którym faktycznie pobieramy tytuły artykułów. Zdefiniujemy tę funkcję również wewnątrz functions.php .

 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 jest odpowiedzialny za weryfikację, czy żądanie Ajax nie jest przetwarzane zewnętrznie.

Niezbędnymi parametrami są tutaj akcja, która jest powiązana z 'nonce' => wp_create_nonce( 'ajax_nonce' ) wewnątrz funkcji ajax_search_script() , wraz z wartością związaną z nonce.

I to wszystko! Właśnie stworzyliśmy bardzo prosty przykład Ajax-PHP. W tym momencie, jeśli wypróbujesz kod w testowym środowisku WordPress, powinien działać w ten sposób.

Gdzie Usługa 1-5 to tytuły naszych postów testowych.

Wniosek

To był artykuł o tym, jak możemy zwiększyć responsywność i wydajność w witrynie WordPress, korzystając z zalet Ajax. Mamy nadzieję, że jesteś już gotowy, aby użyć podobnych technik na swojej własnej stronie internetowej i cieszyć się poprawą komfortu użytkowania!