Gå till innehållet

Javascript på WordPress: AJAX användningsfall

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

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.

Säg till exempel att du bygger en webbplats för en lokal välgörenhet och att du vill uppmuntra till 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ökare), 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.

ajax WordPress exempel tema

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

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

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 inne. Du kan använda en bas64-kodad SVG för att skapa en bildlinje. Detta sparar dig från att göra förfrågningar och gör din 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; }

älska handledning WordPress

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.

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

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:

Artikeln struktur Tjugo Sixteen

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 med ett formulär 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:

Exempel ajax knapp jquery

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

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.

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
7 aktier
del2
tweet1
Enregistrer4