Ajax lub Asynchroniczny JavaScript i XML, służy do komunikowania się ze skryptami po stronie serwera i umożliwia ładowanie dynamicznej treści bez konieczności ponownego ładowania strony.

Powiedzmy na przykład, że budujesz Witryna internetowa dla lokalnej organizacji charytatywnej i chcesz zachęcić do pozytywnej atmosfery. Możesz dodać przycisk oznaczony „Pokaż trochę miłości! »Z licznikiem na stronie głównej, a dzięki AJAX, za każdym razem, gdy przycisk jest aktywowany (kliknięty przez A gość), licznik zwiększa się bez ponownego ładowania strony.

To jest przykład, który utworzymy w tym samouczku.

W tym samouczku dowiesz się więcej o tym, czym jest AJAX, jak go używać i jak tworzyć niesamowite funkcje za jego pomocą w WordPress.

Zacznijmy.

Podstawy AJAX

• Kanał AJAX zwykle wykonuje następujące kroki:
• Zainicjuj wywołanie AJAX w wyniku działania użytkownika
• Otrzymuj i przetwarzaj żądanie na serwerze
• Uchwyć odpowiedź i wykonaj wszystkie niezbędne działania za pomocą JavaScript
• Konfigurowanie nowego środowiska motywu

Zastosujmy to w praktyce na WordPress. Nasz pierwszy przykład wyświetla proste wyskakujące okienko zawierające liczbę komentarzy do artykułu po kliknięciu tytułu. Użyjemy motywu potomnego opartego na „ Dwadzieścia szesnaście Z WordPress.

Oto, co musisz zrobić:

Utwórz nowy folder w katalogu Themes w instalacji WordPress w „ wp-content "I nazwij to" ajax-test ", utwórz dwa pliki wymagane przez WordPress, a mianowicie „ functions.php ”,„ Styles.css ”i dodaj nowy plik o nazwie„ script.js ”. Dodaj następujący kod do nagłówka arkusza stylów CSS (style.css).

/ * Temat Nazwa: Ajax Testowanie Skórka URI: http://premium.wpmudev.com Opis: motyw do testowania naszej wiedzy AJAX Autor: Daniel Pataki Autor URI: http://danielpataki.com Szablon: twentysixteen Wersja: 1.0.0 License General Public Licence lub później v2 licencji URI: http://www.gnu.org/licenses/gpl-2.0.html * /

Arkusz stylów motywu nadrzędnego musi zostać załadowany przez motyw potomny. W przeszłości dokonywano tego poprzez importowanie pliku CSS do motywu potomnego, ale zalecanym sposobem jest użycie „kolejkowania”. Pamiętaj, pokazaliśmy Ci, jak korzystać z tej funkcji.

Dodajmy zatem bezpośrednio arkusz stylów rodzicielskich i nasz plik JavaScript:

add_action ( '', 'wp_enqueue_scripts ajax_test_scripts'); ajax_test_scripts function () {wp_enqueue_style (rodzic-style ', get_template_directory_uri ()' /style.css. "); wp_enqueue_script (. get_stylesheet_directory_uri 'ajax-test-skryptów' () '/scripts.js', array ( 'jquery "), 1.0.0', true); }

Jeśli czujesz, że masz dość energii, by pójść o krok dalej, znajdź ładny obraz, przytnij go do rozmiaru 880 na 660 pikseli i umieść w folderze z motywami dziecka, a następnie zmień jego nazwę ” screenshot.png ”. Pojawi się w sekcji wyglądu, gdy chcesz aktywować motyw.

Ponieważ ten motyw potomny jest oparty na „ Dwadzieścia szesnaście I że niczego jeszcze nie zmieniliśmy! Witryna powinna wyglądać dokładnie jak klasyczny motyw z motywem „ Dwadzieścia szesnaście ".

Dodawanie przycisku

Na początek dodamy przycisk „ Pokaż trochę miłości! ”. Świetnym miejscem do wyświetlenia byłby pasek boczny artykułów tematycznych.

Po kilku badaniach okazuje się, że pasek boczny jest tworzony przez funkcję o nazwie „ twentysixteen_entry_meta () »Który znajduje się w katalogu« inc / szablon tags.php ".

Ta funkcja to „ podłączenia Co oznacza, że ​​możemy go zmodyfikować, definiując go w naszym własnym pliku functions.php. Pierwszym krokiem jest skopiowanie i wklejenie całej funkcji do naszego własnego pliku functions.php:

funkcja twentysixteen_entry_meta () {if ('post' === get_post_type ()) {$ author_avatar_size = apply_filters ('twentysixteen_author_avatar_size', 49); printf (' % 1 $ s % 2 $ s % 3 $ s ', get_avatar (get_the_author_meta ('user_email'), $ author_avatar_size), _x ('Autor', 'Używany przed nazwiskiem autora postu.', 'twentysixteen'), esc_url (get_author_posts_url (get_the_author_meta ('ID'))), get_the_author ()); } if (in_array (get_post_type (), array ('post', 'załącznik'))) {twentysixteen_entry_date (); } $ format = get_post_format (); if (current_theme_supports ('post-formaty', $ format)) {printf (' % 4 $ s % 1 $ s ', sprintf (' % s ', _x ('Format', 'Używany przed formatowaniem wiadomości.', ' twentysixteen ')), esc_url (get_post_format_link (format $)), get_post_format_string (format $)); } if ('post' === get_post_type ()) {twentysixteen_entry_taxonomies (); } if (! is_singular () &&! post_password_required () && (comments_open () || get_comments_number ())) {echo ' '; comments_popup_link (sprintf (__ ('Zostaw komentarz na% s ', 'twentysixteen'), get_the_title ())); echo ' '; }}

Dodajmy nasz klucz do dolnej części wszystkich metadanych:

$ love = get_post_meta (get_the_ID (), 'show_some_love', true); $ miłość = (puste ($ miłość))? 0: $ miłość; Echo ' ”. $ miłość. ' ';

Wyjaśnić wszystko ten kod:

Pierwsza linia podaje liczbę miłości otrzymanych przez artykuł. W niektórych przypadkach dane te nie będą istniały, innymi słowy, gdy przycisk nie został jeszcze kliknięty. Z tego powodu używamy

drugi wiersz w kodzie, aby ustawić wartość na 0, jeśli wartość jest pusta.

Trzecia linia dostarcza przycisk, który składa się z przęsła zawierającego obraz i liczbę miłości. Zostawiłem źródło obrazu puste, ponieważ chcę tam użyć SVG. Do utworzenia linii obrazu można użyć formatu SVG zakodowanego w base64. Dzięki temu nie będziesz musiał stawiać wymagań i sprawisz, że strona internetowa bardziej wydajny.

Użyłem tego małego darmowego obrazu ten link. Skopiuj i wklej otrzymany kod do źródła obrazu w następujący sposób:

$love = get_post_meta( get_the_ID(), 'show_some_love', true );
$love = ( empty( $love ) ) ? 0 : $love;
echo '<span class="love-button"> <img width="28" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI0MHB4IiBpZD0iTGF5ZXJfMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAgNDA7IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA0MCA0MCIgd2lkdGg9IjQwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik0xOS45NzkwMDAxLDkuMTk1MzAwMSAgQzI1LjYzOTIwMDItMS44ODY3LDM4LjUxMTY5OTcsMy4zOTU5OTk5LDM3Ljk0OTE5OTcsMTMuMzAyN0MzNy4zNjM4LDIzLjYxNjE5OTUsMjIuODc0NTAwMywyNy4xNzM3OTk1LDE5Ljk3OTAwMDEsMzQuOTgxODk5MyAgQzE3LjA4MzAwMDIsMjYuOTc5MDAwMSwyLjc4OTU5OTksMjMuODExNTAwNSwyLjAwODMwMDEsMTMuMzAyN0MxLjI3MzksMy40MDc3MDAxLDE0LjkzNTk5OTktMS45MzEyLDE5Ljk3OTAwMDEsOS4xOTUzMDAxeiIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6I0ZGNTk0RjsiLz48L3N2Zz4="><span class="number">' . $love . '</span></span>';

Użyłem również trochę CSS do stylizacji przycisku, aby nadać mu efekt najechania. Nie jest oczywiste, czy to przycisk, ale tak będzie w naszym prostym teście.

.love-button img {margin-right: 6px; nieprzezroczystość: 0.7; kursor: punkt; } .love-button img: hover {krycie: 1; }

Wyzwalanie akcji

Wreszcie dochodzimy do naszego JavaScript! Musimy celować w nasz przedmiot i wykryć kliknięcie. Oto jak to zrobić:

(function ($) {$ (document) .on ('click', '.love-button img', function () {alert („miłość jest wspólna”);})}) (jQuery);

Jeśli w tym momencie klikniesz przycisk, powinieneś zobaczyć alert JavaScript z tekstem „Miłość jest udostępniana”. "

Wymagania dotyczące danych

Zamiast tego tekstu musimy uruchomić połączenie AJAX. Przed napisaniem naszego kodu zrozumiemy, co musimy wysłać.

Adres URL AJAX

Przede wszystkim potrzebujemy miejsca do przesyłania danych. Miejsce, do którego wyślemy dane, będzie przetwarzało dane i odbierze telefon. WordPress ma wbudowane miejsce do obsługi połączeń AJAX, którego możemy używać: admin-ajax.php " wewnątrz " wp-admin ”. Nie możemy dodać tego adresu URL do naszego skryptu (używanie „surowego” kodowania jest niedopuszczalne), więc użyjemy trochę przebiegłej wordpress.

Funkcja wp_localize_script () Pierwotnie miał tłumaczyć ciągi znaków w plikach JavaScript, co robi dobrze. Możemy również użyć go do przekazania zmiennych do naszych plików JavaScript, w tym przypadku adresu URL naszego pliku AJAX. Dodaj następujący kod do naszego pliku " Funkcje W następujący sposób:

wp_localize_script ('ajax-test-scripts', 'ajaxTest', array ('ajax_url' => admin_url ('admin-ajax.php')));

Wynik tego ostatniego obiektu zostanie nazwany ajaxTest, który będzie zawierał podaną tablicę w ostatnim parametrze jako właściwości. Aby wprowadzić wartość, której możemy użyć ajaxTest.ajax_url w naszym kodzie JavaScript.

Identyfikator artykułu

Prześlemy dowolne dane jako identyfikator artykułu (którego użyjemy do zidentyfikowania artykułu, do którego chcemy „dodać trochę miłości”). Można to pobrać z DOM. Spójrz na strukturę używaną w motywie „Dwadzieścia szesnaście” poniżej:

Nasz przycisk ma „artykuł” jako jeden z jego przodków. Ten element ma klasę i zawiera numeryczny identyfikator artykułu. Chociaż nie jest to najbardziej eleganckie rozwiązanie, możemy stąd pobrać identyfikator.

$ (Document) .Na ( 'click', 'img .love przycisku', function () {var = parseInt post_id ($ (this) .parents ( 'article.post:first'). Attr ( 'id') .replace ('post-', '')); console.log (id)})

akcja

WordPress wymaga również wysłania parametru o nazwie action. Ponieważ wszystkie akcje będą wysyłane do admin-ajax, potrzebujemy sposobu na rozróżnienie tych żądań, stąd użycie tego parametru.

Wysyłanie żądania AJAX

Możemy teraz wszystko połączyć. Musimy utworzyć wywołanie AJAX dla „ wp-admin / admin-ajax.php Który zawiera identyfikator artykułu i akcję. Oto jak to powinno wyglądać.

(Function ($) {$ (document) .Na ( 'click', 'img .love przycisku', function () {var = parseInt post_id ($ (this) .parents ( 'article.post:first'). . attr ( 'id') zastąpić ( 'post', '')); $ .ajax ({url: typ ajaxTest.ajax_url 'post', data: {akcja: 'add_love' post_id: post_id} , success: function (response) {alert ("sukces, nowa liczba to" + odpowiedź)}})})}) (jQuery);

$ .ajax () to używana funkcja, która pobiera kilka parametrów. Adres URL zawiera cel, który jest obecnie naszym plikiem ajax-url.php ”. Typ jest ustawiony na „ pisać » polubić wszystkie prośby przesłane przez a forma. Parametr danych to obiekt zawierający „ klucz-wartość Które chcemy wysłać na serwer. Później będziemy mogli je przeczytać za pomocą $ _POST ['action'] i $ _POST ['post_id'].

Przetwarzanie wniosku

Zwykle musisz edytować plik „ admin-ajax.php », Bo tam żądanie jest wysyłane. To plik systemowy, więc nie będziemy go modyfikować. WordPress umożliwia przekazywanie żądań AJAX za pomocą nawiasów kwadratowych z parametrem akcji. Model wygląda następująco:

Jeśli nazwałeś swoje działanie add_love Musisz dołączyć funkcję do haka o nazwie „ wp_ajax_add_love I / lub wp_ajax_nopriv_add_love ”. Działania NoPriv ”Działa dla wylogowanych użytkowników, jeden działa tylko dla zalogowanych użytkowników. W naszym przypadku chcielibyśmy użyć obu. W ramach szybkiego testu ustawimy domyślną wartość zwracaną:

Parametr sukcesu to funkcja, która zostanie uruchomiona po zakończeniu wywołania AJAX. Pokażemy proste ostrzeżenie o treści „Dobra robota! Nowe konto jest ”z naszą odpowiedzią dodaną na końcu.

add_action ('wp_ajax_add_love', 'ajax_test_add_love'); add_action ('wp_ajax_nopriv_add_love', 'ajax_test_add_love'); function ajax_test_add_love () {echo 4; die (); }

Dołączyliśmy naszą funkcję do obu nawiasów, jeden gotowy przegapić 4, a następnie użył funkcji „ die () ”. Jest to konieczne w WordPress, w przeciwnym razie otrzymasz 0 na końcu każdej odpowiedzi. Jeśli teraz klikniesz przycisk, powinieneś zobaczyć:

Aby uzyskać rzeczywistą liczbę polubień, wszystko, co musimy zrobić, to pobrać bieżącą liczbę, zwiększyć ją o jeden, zapisać w bazie danych i wyświetlić nową liczbę.

Funkcja ajax_test_add_love () {$ miłość = get_post_meta ($ _ POST [ 'post_id'] 'show_some_love' prawda); $ love = (pusty ($ love))? 0: $ love; $ Miłość ++; update_post_meta ($ _POST ['post_id'], 'show_some_love', $ love); echo $ love; die (); }

Jeśli teraz klikniesz przycisk, zobaczysz wyskakujące okno „1”. Po odświeżeniu strony powinien zostać wyświetlony nowy numer. Ponowne kliknięcie przycisku spowoduje to 2 ”. Wszystko, co musimy teraz zrobić, to upewnić się, że liczba jest odzwierciedlona bezpośrednio w interfejsie użytkownika.

Wprowadź zmiany w interfejsie użytkownika, korzystając z odpowiedzi

Ta część wydaje się prosta (ponieważ tak jest), ale na ogół jest najtrudniejszy do złożenia. Na razie jedyne co musimy zrobić to zlokalizować element zawierający aktualny numer i zmodyfikować jego zawartość w odpowiedzi.

(Function ($) {$ (document) .Na ( 'click', 'img .love przycisku', function () {var = parseInt post_id ($ (this) .parents ( "article.post:first"). . attr ( 'id') zastąpić ( 'post', '')); var $ liczba = $ (this) .parent () znaleźć (. 'number') $ .ajax ({url :. ajaxTest.ajax_url, Typ: 'post', data: {akcja: "add_love 'post_id: post_id,}, sukces: function (odpowiedź) {$ number.text (odpowiedź);}})})}) (jQuery);

Dodałem tylko dwie linie do naszego poprzedniego kodu JS. W linii 5. przechowuję element, który zawiera liczbę w zmiennej $ numer, W wierszu 14 modyfikuję tekst tego elementu, aby wyświetlić odpowiedź, czyli nowy numer.

To wszystko, w zasadzie powinieneś być w stanie zobaczyć tę nową funkcję w akcji na swoim niestandardowym motywie. Jeśli masz jakiś problem, daj nam znać. Czy masz kolejną wskazówkę, którą chcesz się podzielić? Zrób to w sekcji komentarzy.