Ajax, of Asynchrone Javascript en XML, wordt gebruikt om te communiceren met server-side scripts en stelt u in staat dynamische inhoud te laden zonder de pagina opnieuw te hoeven laden.

Laten we bijvoorbeeld zeggen dat u een Site web voor een lokaal goed doel en je wilt een positieve vibe aanmoedigen. U kunt een knop toevoegen met het label "Toon wat liefde! »Met een teller op de homepage en, dankzij AJAX, elke keer dat de knop wordt geactiveerd (geklikt door een bezoeker), de teller wordt verhoogd zonder de pagina opnieuw te laden.

Dit is het voorbeeld dat we in deze tutorial zullen bouwen.

In deze zelfstudie leert u meer over wat AJAX is, hoe het kan worden gebruikt en hoe u er geweldige functies mee kunt maken op WordPress.

Laten we beginnen.

De basis van AJAX

  • De AJAX-feed volgt meestal de volgende stappen:
  • Start een AJAX-oproep vanwege gebruikersactie
  • Ontvangen en verwerken van het verzoek op de server
  • Leg het antwoord vast en voer alle nodige acties uit via JavaScript
  • Een nieuwe thema-omgeving opzetten

Laten we dit in de praktijk brengen op WordPress. Ons eerste voorbeeld toont een eenvoudige pop-up met het aantal commentaren voor een artikel wanneer we op de titel klikken. We gebruiken een child-thema op basis van de " Twintig zestien Van WordPress.

Hier is wat je moet doen:

Maak een nieuwe map in de map Thema's in uw WordPress-installatie in ' wp-content "En noem het" ajax-test ", maak de twee bestanden vereist door WordPressnamelijk " functions.php "," Styles.css "en voeg een nieuw bestand toe met de naam" script.js ". Voeg de volgende code toe aan de header van je CSS-stylesheet (style.css).

/ * Thema Naam: Ajax Testing Thema Thema URI: http://premium.wpmudev.com Beschrijving: Een thema voor het testen van onze kennis AJAX Auteur: Daniel Pataki Auteur URI: http://danielpataki.com Template: twentysixteen Versie: 1.0.0 License GNU General Public License of later v2 License URI: http://www.gnu.org/licenses/gpl-2.0.html * /

Het stylesheet van het bovenliggende thema moet worden geladen door het onderliggende thema. In het verleden werd dit gedaan door het CSS-bestand in het child-thema te importeren, maar de aanbevolen manier om dit te doen is door "enqueueing" te gebruiken. Onthoud dat we u hebben laten zien hoe u deze functie kunt gebruiken.

Laten we de ouders style sheet en onze JavaScript-bestand direct toe te voegen:

add_action (wp_enqueue_scripts ',' ajax_test_scripts); ajax_test_scripts function () {wp_enqueue_style (ouder-style 'get_template_directory_uri ()' /style.css '.); wp_enqueue_script (. get_stylesheet_directory_uri Ajax test-scripts '() '/scripts.js', array ( 'jquery'), 1.0.0', true); }

Als je het gevoel hebt dat je de energie hebt om nog een stap verder te gaan, zoek dan een mooie afbeelding, snijd deze bij tot 880 bij 660 pixels en plaats deze in de themamap van het kind, en hernoem hem " screenshot.png ". Het zal verschijnen in het uiterlijkgedeelte wanneer u het thema wilt activeren.

ajax WordPress voorbeeldthema

Omdat dit child-thema is gebaseerd op ' Twintig zestien En dat we (nog!) Niets hebben veranderd, de site moet er precies hetzelfde uitzien als een klassiek thema met het thema ' Twintig zestien .

Een knop toevoegen

Om te beginnen voegen we de knop ' Toon een kleine liefde! ". Een geweldige plek om het weer te geven is in de zijbalk voor thema-artikelen.

Na wat onderzoek blijkt dat de zijbalk is gemaakt door een functie met de naam ' twentysixteen_entry_meta () »Die zich in de map bevindt« inc / template-tags.php .

Deze functie is " aansluitbaar Wat betekent dat we het kunnen wijzigen door het in ons eigen functions.php-bestand te definiëren. De eerste stap hiervan is om de volledige functie te kopiëren en in ons eigen functions.php-bestand te plakken:

functie 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', 'Gebruikt vóór post auteur naam.', '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-formaten', $ format)) {printf (' % 4 $ s % 1 $ s ', sprintf (' % s ', _x ('Formaat', 'Gebruikt voor postformaat.', ' 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 (__ ('Laat een reactie achter op% s ', 'twentysixteen'), get_the_title ())); echo ' '; }}

Laten we onze sleutel onderaan alle metadata toevoegen:

$ love = get_post_meta (get_the_ID (), 'show_some_love', true); $ love = (leeg ($ love))? 0: $ liefde; echo ' '. $ liefde. ' ';
Leg al deze code:

De eerste regel geeft het aantal liefdes op dat het artikel heeft ontvangen. In sommige gevallen zullen deze gegevens niet bestaan, met andere woorden wanneer er nog niet op de knop is geklikt. Om deze reden gebruiken we

de tweede regel in de code om de waarde in te stellen op 0 als de waarde leeg is.

De derde regel levert de knop, die bestaat uit een span met daarin een afbeelding en het aantal liefdes. Ik heb de afbeeldingsbron leeg gelaten omdat ik daar een SVG wil gebruiken. U kunt een met base64 gecodeerde SVG gebruiken om een ​​afbeeldingslijn te maken. Dit voorkomt dat u eisen stelt en maakt uw website efficiënter.

Ik heb deze kleine gratis afbeelding gebruikt deze link. Kopieer en plak de code die u ontvangt als volgt in de afbeeldingsbron:

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

Ik heb ook een beetje CSS gebruikt voor de styling van de knop om het een hover-effect te geven. Het is niet erg duidelijk of het een knop is, maar voor onze eenvoudige test wel.

.Love-button img {margin-right: 6px; ondoorzichtigheid: 0.7; cursor: wijzer; } .Love-button img: hover {ondoorzichtigheid: 1; }

knop liefde WordPress handleiding

Een actie triggeren

Eindelijk komen we bij ons JavaScript! We moeten ons item targeten en erop klikken. Hier is hoe het te doen:

(function ($) {$ (document) .on ('klik', '.love-button img', function () {alert ("love is shared");})}) (jQuery);

Als je op dit punt op de knop klikt, zou je een JavaScript-waarschuwing moeten zien met de tekst "Liefde wordt gedeeld." "

Gegevensvereisten

In plaats van deze tekst moeten we een AJAX-oproep activeren. Voordat we onze code schrijven, begrijpen we wat we moeten verzenden.

De AJAX-URL

Allereerst hebben we een plek nodig om gegevens te verzenden. De plaats waar we de gegevens naartoe sturen, verwerkt de gegevens en beantwoordt de oproep. WordPress heeft een ingebouwde plek om AJAX-oproepen af ​​te handelen, die we kunnen gebruiken: de " admin-ajax.php " binnen " wp-admin ". We kunnen deze URL niet toevoegen aan ons script (het gebruik van "ruwe" codering is niet acceptabel), Dus laten we gebruik wat sluwe WordPress.

De functie wp_localize_script () Was oorspronkelijk bedoeld om strings in JavaScript-bestanden te vertalen, wat het goed doet. We kunnen het ook gebruiken om variabelen door te geven aan onze JavaScript-bestanden, in dit geval de URL van ons AJAX-bestand. Voeg de volgende code toe aan ons bestand " functies Als volgt:

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

Het resultaat van dit laatste object krijgt de naam ajaxTest, die een bepaalde array in de laatste parameter als eigenschappen zal bevatten. Om de waarde in te voeren die we kunnen gebruiken ajaxTest.ajax_url in onze JavaScript-code.

De identifier van het artikel

We zullen willekeurige gegevens verzenden als de identificatie van het artikel (die we zullen gebruiken om het artikel te identificeren waaraan we 'een beetje liefde willen toevoegen'). Dit kan worden opgevraagd bij de DOM. Bekijk de structuur die wordt gebruikt in het "Twenty Sixteen" -thema hieronder:

Structuur van het product Twintig Zestien

Onze knop heeft een "artikel" als een van zijn voorouders. Dit element heeft de klasse en bevat de numerieke identificatie van het artikel. Hoewel het niet de meest elegante oplossing is, kunnen we de ID daar vandaan halen.

$ (Document) .Op ( 'klik', 'img .Love-knop', function () {var = parseInt post_id ($ (this) .parents ( 'article.post:first'). Attr ( 'id') .Plaats ( 'post', '')); console.log (id)})

De actie

WordPress vereist ook dat we een parameter sturen met de naam action. Aangezien alle acties naar admin-ajax worden gestuurd, hebben we een manier nodig om die verzoeken te onderscheiden, vandaar het gebruik van deze parameter.

Een AJAX-verzoek verzenden

We kunnen nu alles samenbrengen. We moeten een AJAX-oproep maken voor ' wp-admin / admin-ajax.php Die bevat de artikel-ID en een actie. Hier is hoe het eruit zou moeten zien.

(Function ($) {$ (document) .Op ( 'klik', 'img .Love-knop', function () {var = parseInt post_id ($ (this) .parents ( 'article.post:first'). . attr ( 'id') vervangen ( 'post', '')); $ .ajax ({url: ajaxTest.ajax_url soort 'post', data: {actie: 'add_love' post_id: post_id} , succes: function (respons) {alert ( 'succes, de nieuwe telling' + reactie)}})})}) (jQuery);

$ .ajax () is de gebruikte functie waarvoor een aantal parameters nodig is. De url bevat het doel dat momenteel ons bestand is ajax-url.php ". Het type is ingesteld op " post » like alle verzoeken verzonden door een formulier. De gegevensparameter is een object dat " key-waarde Dat willen we naar de server sturen. Later zullen we ze kunnen lezen met $ _POST ['action'] en $ _POST ['post_id'].

Application processing

Normaal moet u het bestand bewerken " admin-ajax.php », Omdat het verzoek daar naartoe wordt gestuurd. Het is een systeembestand, dus we gaan het niet wijzigen. Met WordPress kun je AJAX-verzoeken doorgeven met vierkante haken met de actieparameter. Het model is als volgt:

Als je je actie een naam hebt gegeven add_love Je moet een functie koppelen aan een haak met de naam ' wp_ajax_add_love En / of wp_ajax_nopriv_add_love ". De acties NoPriv ”Draait voor afgemelde gebruikers, één werkt alleen voor ingelogde gebruikers. In ons geval willen we beide gebruiken. Als snelle test stellen we een standaard retourwaarde in:

De succesparameter is een functie die wordt uitgevoerd wanneer de AJAX-aanroep is voltooid. We laten een eenvoudige waarschuwing zien met "Goed gedaan! Het nieuwe account is ”met ons antwoord aan het eind toegevoegd.

add_action (wp_ajax_add_love ',' ajax_test_add_love); add_action (wp_ajax_nopriv_add_love ',' ajax_test_add_love); ajax_test_add_love functie () {echo 4; sterven (); }

We hebben onze functie aan beide haakjes bevestigd, één klaar echo 4 en gebruikte vervolgens de functie " sterven () ". Dit is nodig op WordPress, anders ontvang je een 0 aan het einde van elk antwoord. Als u nu op de knop klikt, ziet u het volgende:

jquery ajax voorbeeld knop

Om het daadwerkelijke 'vind-ik-leuk'-nummer te krijgen, hoeven we alleen het huidige nummer op te halen, het met één te verhogen, het op te slaan in de database en het nieuwe nummer weer te geven.

Functie ajax_test_add_love () {$ love = get_post_meta ($ _POST ['post_id'], 'show_some_love', true); Liefde = $ (empty ($ liefde))? 0: $ liefde; $ Liefde ++; Update_post_meta ($ _POST ['post_id'], 'show_some_love', $ love); Echo $ love; sterven (); }

Als u nu op de knop klikt, ziet u het pop-upvenster met '1". Als u de pagina vernieuwt, zou het nieuwe nummer moeten verschijnen. Klik opnieuw op de knop om het te maken 2 ". Het enige dat we nu hoeven te doen, is ervoor te zorgen dat het nummer rechtstreeks in de gebruikersinterface wordt weergegeven.

Breng wijzigingen aan in de gebruikersinterface met behulp van het antwoord

Dit onderdeel lijkt makkelijk (omdat het zo is), maar het is over het algemeen het moeilijkst in elkaar te zetten. Voorlopig hoeven we alleen maar het element te lokaliseren dat het huidige nummer bevat en de inhoud ervan te wijzigen door het antwoord.

(Function ($) {$ (document) .Op ( 'klik', 'img .Love-knop', function () {var = parseInt post_id ($ (this) .parents ( 'article.post:first'). . attr ( 'id') vervangen ( 'post', '')); var $ number = $ (this) .parent () vinden (. 'number') $ .ajax ({url ajaxTest.ajax_url,. Type: 'post', data: {actie: 'add_love' post_id: post_id}, succes: function (respons) {$ number.text (response);}})})}) (jQuery);

Ik heb slechts twee regels toegevoegd aan onze vorige JS-code. Op regel 5 bewaar ik het element dat het nummer bevat op de variabele $ number. Op de 14-regel wijzig ik de tekst van dit element om het antwoord weer te geven, wat het nieuwe nummer is.

Dat is alles, eigenlijk zou je deze nieuwe functie in actie moeten kunnen zien op je aangepaste thema. Laat het ons weten als u een probleem heeft. Heb je nog een tip die je wilt delen? Doe het in het opmerkingengedeelte.