Ajax, ose Javascript asinkron dhe XML, përdoret për të komunikuar me skriptet nga ana e serverit dhe ju lejon të ngarkoni përmbajtje dinamike pa pasur nevojë të rimbushni faqen.

Le të themi, për shembull, që po ndërtoni një Site Web për një bamirësi lokale dhe dëshironi të inkurajoni një atmosferë pozitive. Mund të shtoni një buton të etiketuar "Tregoni pak dashuri! »Me një sportel në faqen kryesore dhe, falë AJAX, sa herë që aktivizohet butoni (klikuar nga a vizitor), numëruesi rritet pa rimbushur faqen.

Ky është shembulli që do të ndërtojmë në këtë manual.

Në këtë manual, ju do të mësoni më shumë rreth asaj që është AJAX, si mund të përdoret dhe si të krijoni karakteristika të mrekullueshme me të në WordPress.

Le të fillojë.

Bazat e AJAX

• Rrjedha AJAX zakonisht ndjek hapat e mëposhtëm:
• Filloni një thirrje AJAX për shkak të veprimit të përdoruesit
• Merrni dhe përpunoni kërkesën në server
• Kapni përgjigjen dhe kryeni të gjitha veprimet e nevojshme përmes JavaScript
• Vendosja e një mjedisi të ri tematik

Le ta vëmë këtë në praktikë në WordPress. Shembulli ynë i parë tregon një dritare të thjeshtë që përmban numrin e komenteve për një artikull kur klikojmë në titull. Ne do të përdorim një temë për fëmijë bazuar në " Njëzet e gjashtëmbëdhjetë Nga WordPress.

Ja çfarë duhet të bëni:

Krijoni një dosje të re në drejtorinë e temave në instalimin tuaj WordPress në " wp-përmbajtjen "Dhe vendosi emrin" ajax-test ", krijo dy skedarët kërkohet nga WordPress, të dish " functions.php "," Styles.css "dhe shtoni një skedar të ri të quajtur" script.js ". Shtoni kodin e mëposhtëm në titullin e fletës tuaj të stileve CSS (Stili.css).

/ * Emri i Temës: Tematika e Ajax Test Theme URI: http://premium.wpmudev.com Përshkrimi: Një temë për testimin e njohurive tona AJAX Autori: Daniel Pataki Autori URI: http://danielpataki.com Shablloni: twentysixteen Version: 1.0.0. 2 Licencë: GNU Licencë e Përgjithshme Publike v2.0 ose më vonë Licenca URI: http://www.gnu.org/licenses/gpl-XNUMX.html * /

Stilet e temës prind duhet të ngarkohen nga tema për fëmijë. Në të kaluarën kjo bëhej duke importuar skedarin CSS në temën fëmijë, por mënyra e rekomanduar për ta bërë këtë është përdorimi i "enqueueing". Mos harroni, ne ju treguam se si ta përdorni këtë veçori.

Pra, le të shtojmë fletën e stileve të prindit dhe skedarin tonë JavaScript direkt:

veprimi i shtimit ('wp_enqueue_scripts', 'ajax_test_script)'; funksioni ajax_test_scripts () {wp_enqueue_style ('stili prind', get_template_directory_uri (). '/style.css'); wp_enqueue_script ('ajax-test-scripts', get_stylesheet_directory_uri (). '/scripts.js', array ('jquery'), '1.0.0', true); }

Nëse ndiheni sikur keni energji për ta çuar një hap më tej, gjeni një imazh të këndshëm, prerë atë në 880px nga 660px dhe vendoseni në dosjen e temës së fëmijës, pastaj riemërtoni " screenshot.png ". Do të shfaqet në pjesën e paraqitjes, kur dëshironi të aktivizoni temën.

Meqenëse kjo temë e fëmijës bazohet në “ Njëzet e gjashtëmbëdhjetë "Dhe ne nuk kemi ndryshuar asgjë (akoma!), Faqja duhet të duket saktësisht si një temë klasike me temë" Njëzet e gjashtëmbëdhjetë '.

Shtimi i një butoni

Për të filluar, ne do të shtojmë butonin " Tregoni pak dashuri! ". Një vend i shkëlqyeshëm për ta shfaqur do të ishte në shiritin anësor për artikuj me temë.

Pas disa hulumtimesh, rezulton se shiriti anësor krijohet nga një funksion i quajtur " twentysixteen_entry_meta () "E cila banon në" inc / shabllon-etiketat.php '.

Ky funksion është " i lidhur Që do të thotë se ne mund ta modifikojmë atë duke e përcaktuar në skedarin tonë Funksionet.php. Hapi i parë i kësaj është që të kopjoni dhe ngjisni të gjithë funksionin në skedarin tonë funksionalitetet.php:

funksioni twentysixteen_entry_meta () {if ('postimi' === get_post_type ()) {$ author_avatar_size = zbato_filtrat ('twentysixteen_author_avatar_size', 49); printf (' % 1 $ s % 2 $ s % 3 $ s ', get_avatar (get_the_author_meta ('user_email'), $ author_avatar_size), _x ('Autori', 'Përdoret para emrit të autorit të postimit', 'twentysixteen'), esc_url (get_author_posts_url (get_the_author_meta ('ID')))), get_the_author ()); } if (in_array (get_post_type (), array ('postimi', 'bashkëngjitje'))) {twentysixteen_entry_date (); } $ format = get_post_format (); if (aktuale_theme_supports ('formatet post', $ format)) {printf (' % 4 $ s % 1 $ s ', sprintf (' % s ', _x ('Formati', 'Përdoret para formatit të postimit', ') njëzetgjashtëmbëdhjetë ')), esc_url (get_post_format_link ($ format)), get_post_format_string ($ format)); } if ('postimi' === get_post_type ()) {twentysixteen_entry_taxonomies (); } if (! is_singular () &&! post_password_required () && (comments_open () || get_comments_number ())) {echo ' '; comments_popup_link (sprintf (__ ('Lini një koment në% s ', 'njëzet e gjashtëmbëdhjetë'), get_the_title ())); jehonë ' '; }}

Le të shtojmë kthesën tonë në fund të të gjitha meta të dhënave:

$ love = get_post_meta (get_the_ID (), 'show_some_love', e vërtetë); $ dashuri = (bosh ($ dashuri))? 0: $ dashuri; jehonë ' ' $ dashuri. ' ';

Le të shpjegojmë të gjithë këtë kod:

Rreshti i parë tërheq numrin e dashurive që artikulli ka marrë. Në disa raste, këto të dhëna nuk do të ekzistojnë, me fjalë të tjera kur butoni nuk është klikuar ende. Për këtë arsye, ne përdorim

rreshti i dytë në kod për të vendosur vlerën në 0 nëse vlera është e zbrazët.

Rreshti i tretë jep butonin, i cili përbëhet nga një hapësirë ​​që përmban një imazh dhe numrin e dashurive. E lashë bosh burimin e imazhit sepse dua të përdor një SVG atje. Ju mund të përdorni një SVG të koduar me bazë 64 për të krijuar një linjë imazhi. Kjo ju kursen nga kërkesa dhe do t'ju bëjë Faqja e internetit më efikase.

Kam përdorur këtë imazh të lirë në dispozicion kjo lidhje. Kopjoni dhe ngjisni kodin që merrni në burimin e imazhit si kjo:

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

Kam përdorur gjithashtu pak CSS për stilimin e butonit për t'i dhënë asaj një efekt rri pezull. Nuk është shumë e qartë nëse është një buton, por do të jetë për provën tonë të thjeshtë.

butoni i dashur img {kufiri-djathtas: 6px; perde: 0.7; kursori: pika; }. butoni i dashur img: rri pezull {opacity: 1; }

Shkaktimi i një veprimi

Më në fund, kemi ardhur në JavaScript tonë! Ne kemi nevojë për të synuar elementin tonë dhe për të zbuluar një klikim mbi të. Ja se si ta bëni:

(funksioni ($) {$ (dokumenti) .on ('kliko', '. butoni i dashur img', funksioni () {alarm ("dashuria ndahet");})}) (jQuery);

Nëse klikoni në butonin në këtë pikë, duhet të shihni një alarm JavaScript me tekstin "Dashuria ndahet". "

Kërkesat e të dhënave

Në vend të këtij teksti, ne duhet të shkaktojmë një thirrje AJAX. Para se të shkruani kodin tonë, le të kuptojmë se çfarë të dërgojmë.

URL-ja AJAX

Para së gjithash, na duhet një vend për të dërguar të dhëna. Vendi ku dërgojmë të dhënat do të përpunojë të dhënat dhe do t'i përgjigjet thirrjes. WordPress ka një vend të integruar për të trajtuar thirrjet AJAX, të cilat mund t'i përdorim: " admin-ajax.php "brenda" wp-admin ". Ne nuk mund ta shtojmë këtë URL në skenarin tonë (përdorimi i kodimit "të papërpunuar" nuk është i pranueshëm), kështu që ne do të përdorim disa hile të WordPress-it.

Functon " wp_localize_script () Fillimisht ishte menduar për të përkthyer vargjet në skedarët JavaScript, gjë që bën mirë. Ne gjithashtu mund ta përdorim atë për të kaluar variabla në skedarët tanë JavaScript, në këtë rast URL e skedarit tonë AJAX. Shtoni kodin e mëposhtëm në skedarin tonë " Funksionet Si më poshtë:

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

Rezultati i këtij objekti të fundit do të quhet ajaxTest, i cili do të përmbajë një grup të dhënë në parametrin e fundit si veti. Për të futur vlerën që mund të përdorim ajaxTest.ajax_url në kodin tonë JavaScript.

ID e sendit

Ne do të dërgojmë të dhëna arbitrare si id e artikullit (që do ta përdorim për të identifikuar artikullin mbi të cilin duam të "shtojmë pak dashuri") Kjo mund të merret nga DOM. Shikoni strukturën e përdorur në temën "Njëzet e gjashtëmbëdhjetë" më poshtë:

Butoni ynë ka një "artikull" si një nga paraardhësit e tij. Ky element ka klasën dhe përmban identifikuesin numerik të artikullit. Edhe pse nuk është zgjidhja më elegante, ne mund ta marrim ID-në që andej.

$ (dokument) .on ('kliko', '. butoni i dashur img', funksioni () {var post_id = parseInt ($ (kjo) .parents ('Article.post:first'). Attr ('id') zëvendësimi ('post-', '')); console.log (id)})

Veprimi

WordPress gjithashtu kërkon që të dërgojmë një parametër të quajtur veprim. Meqenëse të gjitha veprimet do të dërgohen në admin-ajax, ne kemi nevojë për një mënyrë për t'i dalluar ato kërkesa, pra përdorimi i këtij parametri.

Dërgimi i një kërkese AJAX

Tani mund t'i bashkojmë të gjitha. Ne kemi nevojë për të krijuar një thirrje AJAX për " wp-admin / admin-ajax.php E cila përmban artikullin ID dhe një veprim. Ja se si duhet të duket.

(funksioni ($) {$ (dokumenti) .on ('kliko', '. butoni i dashur img', funksioni () {var post_id = parseInt ($ (kjo) .parents ('Article.post:first'). attr ('id'). zëvendësoj ('post-', '')); $ .ajax ({url: ajaxTest.ajax_url, lloji: 'post', të dhëna: {veprim: 'add_love', post_id: post_id,} , suksesi: funksioni (përgjigja) {gatishmëria ('suksesi, numërimi i ri është' + përgjigje)}})})})) (jQuery);

$ .ajax () është funksioni i përdorur i cili merr një bandë parametrash. URL përmban objektivin i cili aktualisht është skedari ynë " ajax-url.php ". Lloji është vendosur në " post » si të gjitha kërkesat e dërguara nga a formë. Parametri i të dhënave është një objekt që përmban " vlera kryesore Që duam ta dërgojmë në server. Më vonë do të mund t'i lexojmë me $ _POST ['veprim'] dhe $ _POST ['post_id'].

Përpunimi i kërkesës

Normalisht duhet të redaktoni skedarin " admin-ajax.php », Për shkak se kërkesa dërgohet atje. Shtë një skedar sistemi, kështu që ne nuk do ta modifikojmë atë. WordPress ju lejon të kaloni kërkesat AJAX duke përdorur kllapa katrore me parametrin e veprimit. Modeli është si më poshtë:

Nëse e keni emëruar veprimin tuaj " shto_dashuri ", Ju duhet të bashkëngjitni një funksion në një kllapa të emrit" wp_ajax_add_love Dhe / ose wp_ajax_nopriv_add_love ". Veprimet " JoPriv ”Ekzekutohet për përdoruesit e regjistruar, një ekzekutohet vetëm për përdoruesit e regjistruar. Në rastin tonë, ne do të dëshironim t'i përdorim të dyja. Si një provë e shpejtë, ne do të vendosim një vlerë kthyese të paracaktuar:

Parametri i suksesit është një funksion, i cili do të ekzekutohet kur të përfundojë thirrja AJAX. Ne do të tregojmë një alarm të thjeshtë që tregon “Bravo! Llogaria e re është ”me përgjigjen tonë të shtuar në fund.

add_action ('wp_ajax_add_love', 'ajax_test_add_love'); add_action ('wp_ajax_nopriv_add_love', 'ajax_test_add_love'); funksioni ajax_test_add_love () {jehona 4; vdes (); }

Ne e kemi bashkangjitur funksionin tonë në të dy grepa, thotë një " humbas "4 dhe më pas përdori" vdes () ". Kjo kërkohet në WordPress, përndryshe ju do të merrni një 0 në fund të secilës përgjigje. Nëse klikoni në butonin tani duhet të shihni sa vijon:

Për të marrë numrin aktual të "pëlqimeve", gjithçka që duhet të bëjmë është të marrim numrin aktual, ta rritim atë me një, ta ruajmë në bazën e të dhënave dhe të shfaqim numrin e ri.

funksioni ajax_test_add_love () {$ love = get_post_meta ($ _POST ['post_id'], 'show_some_love', e vërtetë); $ dashuri = (bosh ($ dashuri))? 0: $ dashuri; $ dashuri ++; update_post_meta ($ _POST ['post_id'], 'show_some_love', $ love); jehonë $ dashuri; vdes (); }

Nëse klikoni në butonin tani duhet të shihni dritaren që shfaqet duke shfaqur "1". Nëse rifreskoni faqen, duhet të shihni numrin e ri të shfaqur. Duke klikuar përsëri në butonin, do të jetë " 2 ". E tëra çfarë duhet të bëjmë tani është të sigurohemi që numri të pasqyrohet direkt në UI.

Bëni ndryshime në ndërfaqen e përdoruesit duke përdorur përgjigjen

Kjo pjesë duket e lehtë (sepse është), por në përgjithësi është më e vështira për tu bashkuar. Tani për tani gjithçka që duhet të bëjmë është të lokalizojmë elementin që përmban numrin aktual dhe të modifikojmë përmbajtjen e tij nga përgjigja.

(funksioni ($) {$ (dokumenti) .on ('kliko', '. butoni i dashur img', funksioni () {var post_id = parseInt ($ (kjo) .parents ('Article.post:first'). attr ('id'). zëvendësoj ('post-', '')); var $ number = $ (this). prind (). find ('. number') $ .ajax ({url: ajaxTest.ajax_url, lloji: 'postimi', të dhënat: {veprim: 'add_love', post_id: post_id,}, suksesi: funksioni (përgjigja) {$ number.text (përgjigja);}})})}}) (jQuery);

Unë vetëm shtova dy rreshta në kodin tonë të mëparshëm JS. Në rreshtin 5, unë ruaj elementin që përmban numrin në ndryshore numri $. Në rreshtin 14, unë redaktoj tekstin për këtë element për të treguar përgjigjen, që është numri i ri.

Kjo është gjithçka, në thelb duhet të jeni në gjendje ta shihni këtë veçori të re në veprim mbi temën tuaj të personalizuar. Nëse keni ndonjë problem, ju lutemi na tregoni. A keni një këshillë tjetër që dëshironi të ndani? Bëni atë në seksionin e komenteve.