Ajax, eller Asynchronous JavaScript och XML, används för att kommunicera med skript på serversidan och låter dig ladda dynamiskt innehåll utan att behöva ladda om sidan igen.

Låt oss till exempel säga att du bygger en webbplats för en lokal välgörenhetsorganisation och du vill uppmuntra en positiv atmosfär. Du kan lägga till en knapp märkt "Visa lite kärlek! »Med en räknare på hemsidan och tack vare AJAX varje gång knappen aktiveras (klickat av en besökaren), räknaren stegvis utan att ladda om sidan.

Detta är exemplet som vi kommer att bygga i denna handledning.

I den här handledning kommer du att lära dig mer om vad AJAX är, hur det kan användas och hur man skapar fantastiska funktioner med det på WordPress.

Låt oss börja.

Grunderna i AJAX

• AJAX-flödet följer vanligtvis följande steg:
• Starta ett AJAX-samtal på grund av användaråtgärder
• Ta emot och bearbeta begäran på servern
• Fånga svaret och utför alla nödvändiga åtgärder via JavaScript
• Ställa in en ny temamiljö

Låt oss omsätta detta i WordPress. Vårt första exempel visar en enkel popup som innehåller antalet kommentarer för en artikel när vi klickar på titeln. Vi kommer att använda ett barns tema baserat på " tjugo sexton Från WordPress.

Här är vad du behöver göra:

Skapa en ny mapp i temakatalogen i din WordPress-installation i " wp-innehåll "Och namnge det" ajax-test ", skapa de två filerna krävs av WordPress, nämligen " functions.php "," Styles.css "och lägg till en ny fil som heter" script.js ". Lägg till följande kod i rubriken i ditt CSS-formatmall (style.css).

/ * Tema Namn: Ajax Testing Tema Tema URI: http://premium.wpmudev.com Beskrivning: Ett tema för att testa vår kunskap AJAX Författare: Daniel Pataki Författare URI: http://danielpataki.com Mall: twentysixteen Version: 1.0.0 License GNU General Public License eller senare v2 License URI: http://www.gnu.org/licenses/gpl-2.0.html * /

Det överordnade temat stilformat måste laddas av det underordnade temat. Tidigare gjordes detta genom att importera CSS-filen till underordnat tema, men det rekommenderade sättet att göra detta är att använda "enqueueing". Kom ihåg att vi visade dig hur du använder den här funktionen.

Så låt oss lägga till moderplattformen och vår JavaScript-fil direkt:

add_action ( 'wp_enqueue_scripts', 'ajax_test_scripts'); ajax_test_scripts function () {wp_enqueue_style (förälder-stil ", get_template_directory_uri () /style.css".); wp_enqueue_script (. "ajax sprängningar skript" get_stylesheet_directory_uri () "/scripts.js", array ( 'jquery), 1.0.0 ", true); }

Om du känner att du har energi att ta det ett steg längre, hitta en fin bild, beskära den till 880 pixlar 660 pixlar och placera den i barnets temamapp och byt namn på den " screenshot.png ". Det kommer att visas i utseendeavdelningen när du vill aktivera temat.

Eftersom detta tema för barnet bygger på ” tjugo sexton Och att vi inte har ändrat någonting (ännu!), Sajten ska se ut precis som ett klassiskt tema med temat " tjugo sexton ".

Lägga till en knapp

Till att börja med lägger vi till knappen " Visa lite kärlek! ". Ett bra ställe att visa det skulle vara i sidofältet för tematiklar.

Efter en del undersökningar visar det sig att sidofältet skapas av en funktion som heter " twentysixteen_entry_meta () »Som finns i katalogen« inc / mall-tags.php ".

Denna funktion är " anslutbar Vilket innebär att vi kan ändra det genom att definiera det i vår egen function.php-fil. Det första steget är att kopiera och klistra in hela funktionen i våra egna funktioner.php-fil:

funktion 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 ('Author', 'Used before post author author.', 'twentysixteen'), esc_url (get_author_posts_url (get_the_author_meta ('ID'))), get_the_author ()); } if (in_array (get_post_type (), array ('post', 'attachment'))) {twentysixteen_entry_date (); } $ format = get_post_format (); if (current_theme_supports ('post-formats', $ format)) {printf (' % 4 $ s % 1 $ s ', sprintf (' % s ', _x ('Format', 'Used before post format.', ' twentysixteen ')), esc_url (get_post_format_link ($ format)), get_post_format_string ($ format)); } if ('post' === get_post_type ()) {twentysixteen_entry_taxonomies (); } om (! is_singular () &&! post_password_required () && (comments_open () || get_comments_number ())) {echo ' '; comments_popup_link (sprintf (__ ('Lämna en kommentar till% s ', 'twentysixteen'), get_the_title ())); eko ' '; }}

Låt oss lägga till vår nyckel till botten av alla metadata:

$ love = get_post_meta (get_the_ID (), 'show_some_love', true); $ love = (tom ($ love))? 0: $ kärlek; eko ' '. $ kärlek. ' ';

Förklara allt denna kod:

Den första raden hämtar antalet kärlekar som artikeln har fått. I vissa fall kommer dessa data inte att finnas, med andra ord när knappen ännu inte har klickats. Av den anledningen använder vi

den andra raden i koden för att ställa in värdet till 0 om värdet är tomt.

Den tredje raden levererar knappen, som består av ett spann som innehåller en bild och antalet kärlekar. Jag lämnade bildkällan tom eftersom jag vill använda en SVG där. Du kan använda en base64-kodad SVG för att skapa en bildlinje. Detta räddar dig från att ställa krav och kommer att göra ditt webbplats mer effektiv.

Jag använde den här lilla kostnadsfria bilden denna länk. Kopiera och klistra in koden du får i bildkällan så här:

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

Jag använde också lite CSS för styling av knappen för att ge den en svävande effekt. Det är inte så uppenbart om det är en knapp, men det gör det för vårt enkla test.

.love-knappen img {margin-right: 6px; opacitet: 0.7; markör: pekare; } .love-knapp img: sväva {opacity: 1; }

Utlöser en åtgärd

Slutligen kommer vi till vår JavaScript! Vi måste rikta in vårt objekt och upptäcka ett klick på det. Så här gör du:

(funktion ($) {$ (dokument) .on ('klicka', '.älsk-knapp img', funktion () {varning ("kärlek delas");})}) (jQuery);

Om du klickar på knappen just nu bör du se en JavaScript-varning med texten "Kärlek delas." "

Datakrav

Istället för den här texten måste vi utlösa ett AJAX-samtal. Innan vi skriver vår kod kommer vi att förstå vad vi behöver skicka.

AJAX URL

Först och främst behöver vi en plats för att skicka data. Platsen där vi skickar data kommer att behandla uppgifterna och svara på samtalet. WordPress har en inbyggd plats för att hantera AJAX-samtal, som vi kan använda: " admin-ajax.php " inuti " wp-admin ". Vi kan inte lägga till denna URL i vårt skript (att använda "rå" kodning är inte acceptabelt), så vi kommer att använda något WordPress-trick.

Funktionen wp_localize_script () Var ursprungligen avsedd att översätta strängar i JavaScript-filer, vilket det fungerar bra. Vi kan också använda den för att skicka variabler till våra JavaScript-filer, i detta fall webbadressen till vår AJAX-fil. Lägg till följande kod i vår fil " funktioner Följande:

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

Resultatet av det sista objektet kommer att kallas ajaxTest, som kommer att innehålla en given grupp i den sista parametern som egenskaper. För att ange det värde vi kan använda ajaxTest.ajax_url i vår JavaScript-kod.

Artikelns identifierare

Vi skickar godtyckliga data som identifierare av artikeln (som vi kommer att använda för att identifiera artikeln som vi vill "lägga till lite kärlek till"). Detta kan hämtas från DOM. Ta en titt på strukturen som används i temat "Tjugo sexton" nedan:

Vår knapp har en "artikel" som en av dess förfäder. Detta element har klassen och innehåller artikelns numeriska identifierare. Även om det inte är den mest eleganta lösningen kan vi ta ID-kortet därifrån.

$ (Document) .På ( 'klick', 'img .love-knappen', function () {var = parseInt post_id ($ (detta) .parents ( 'article.post:first'). Attr ( 'id') .replace ('post-', '')) console.log (id)})

Handlingen

WordPress kräver också att vi skickar en parameter med namnet action. Eftersom alla åtgärder kommer att skickas till admin-ajax behöver vi ett sätt att differentiera dessa förfrågningar, därav användningen av denna parameter.

Skicka en AJAX-begäran

Vi kan nu sätta ihop allt. Vi måste skapa ett AJAX-samtal för " wp-admin / admin-ajax.php Som innehåller artikel-ID och en åtgärd. Så här ska det se ut.

(Function ($) {$ (dokument) .På ( 'klick', 'img .love-knapp', function () {var = parseInt post_id ($ (this) .parents (article.post:first). . attr ( 'id') ersätter ( 'post', '')); $ .ajax ({url: ajaxTest.ajax_url typ 'post', data: {åtgärder: 'add_love' post_id: post_id} , framgång: funktion (svar) {alert ('framgång, det nya talet är' + svar)}})})}) (jQuery);

$ .ajax () är den använda funktionen som tar en massa parametrar. URL-adressen innehåller målet som för närvarande är vår fil ajax-url.php ". Typen är inställd på " inlägg » som alla förfrågningar som skickas av en formen. Dataparametern är ett objekt som innehåller " nyckel-värde Det vill vi skicka till servern. Senare kommer vi att kunna läsa dem med $ _POST ['action'] och $ _POST ['post_id'].

Bearbetar ansökan

Normalt måste du redigera filen " admin-ajax.php », Eftersom begäran skickas dit. Det är en systemfil, så vi kommer inte att ändra den. WordPress låter dig skicka AJAX-förfrågningar med hakparenteser med åtgärdsparametern. Modellen är som följer:

Om du namngav din handling add_love Du måste koppla en funktion till en krok med namnet " wp_ajax_add_love Och / eller wp_ajax_nopriv_add_love ". Åtgärderna NoPriv ”Körs för utloggade användare, en körs endast för inloggade användare. I vårt fall vill vi använda båda. Som ett snabbtest ställer vi in ​​ett standard returvärde:

Framgångsparametern är en funktion som körs när AJAX-samtalet har slutförts. Vi visar en enkel varning som visar “Bra gjort! Det nya kontot är ”med vårt svar tillagt i slutet.

add_action ('wp_ajax_add_love', 'ajax_test_add_love'); add_action ('wp_ajax_nopriv_add_love', 'ajax_test_add_love'); funktion ajax_test_add_love () {echo 4; dö (); }

Vi kopplade vår funktion till båda parenteserna, en gjort missar 4 och använde sedan funktionen " dö () ". Detta är nödvändigt för WordPress, annars får du en 0 i slutet av varje svar. Om du klickar på knappen nu ska du se följande:

För att få de faktiska "gillanden" räkna allt vi behöver göra är att hämta det aktuella numret, öka det med ett, spara det i databasen och visa det nya numret.

funktion ajax_test_add_love () {$ love = get_post_meta ($ _POST ['post_id'], 'show_some_love', true); $ love = (tomt ($ kärlek))? 0: $ love; $ Kärlek ++; update_post_meta ($ _POST ['post_id'], 'show_some_love', $ love); echo $ love; dö (); }

Om du klickar på knappen nu ska du se popup-fönstret som visar "1". Om du uppdaterar sidan bör du se det nya numret som visas. Att klicka på knappen igen gör det 2 ". Allt vi behöver göra nu är att se till att numret återspeglas direkt i användargränssnittet.

Gör ändringar i användargränssnittet med hjälp av svaret

Denna del verkar lätt (för det är det), men det är i allmänhet det svåraste att sätta ihop. För närvarande är allt vi behöver göra att hitta elementet som innehåller det aktuella numret och ändra dess innehåll genom svaret.

(Funktion ($) {$ (dokument) .På ( "klick", "img .love-knapp", function () {var = parseInt post_id ($ (this) .parents (article.post:first). . attr ( "id") ersätta ( "post", " ')); var $ nummer = $ (this) .parent () hitta (." nummer ") $ .ajax ({url :. ajaxTest.ajax_url, typ: "post", data: {handling: "add_love 'post_id: post_id,}, framgång: funktion (svar) {$ number.text (svar);}})})}) (jQuery);

Jag lade bara till två rader i vår tidigare JS-kod. På rad 5 lagrar jag elementet som innehåller numret på variabeln $ nummer. På 14-raden ändrar jag texten till detta element för att visa svaret, som är det nya numret.

Det är det, i princip borde du kunna se den här nya funktionen i aktion på ditt anpassade tema. Vänligen meddela oss om du har några problem. Har du ett annat tips som du vill dela med dig av? Gör det i kommentarfältet.