Przejdź do głównej treści

JavaScript w WordPress: przypadek użycia AJAX

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 701.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

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.

Powiedz na przykład, że budujesz stronę internetową 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 użytkownika), 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.

ajax Przykładowy motyw WordPress

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 ".

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

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 zawiera przycisk, który składa się z rozpiętości zawierającej obrazek i liczbę miłości. Pozostawiłem źródło obrazu puste, ponieważ chcę tam użyć SVG. Do utworzenia linii obrazu można użyć pliku SVG z kodowaniem base64. Dzięki temu nie musisz wysyłać żądań, a Twoja witryna będzie bardziej wydajna.

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

przycisk samouczek miłości WordPress

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ć.

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

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:

Artykuł struktura Dwadzieścia Szesnaście

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ć Jak każde żądanie wysłane przez formularz. 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ć:

przykład ajax jquery

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

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.

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twoj adres e-mail nie bedzie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
7 akcji
udział2
ćwierkanie1
Enregistrer4