Ajax, vagy Aszinkron Javascript és XML, a kiszolgálóoldali szkriptekkel való kommunikációra szolgál, és lehetővé teszi a dinamikus tartalom betöltését anélkül, hogy újra kellene töltenie az oldalt.

Tegyük fel például, hogy egy a weboldal egy helyi jótékonysági szervezetnek, és szeretnél pozitív hangulatot teremteni. Hozzáadhat egy "" feliratú gombotMutasd meg a szeretetet! »Számlálóval a kezdőlapon, és az AJAX jóvoltából a gomb minden egyes megnyomásakor (kattintott a látogató), a számláló az oldal újratöltése nélkül növekszik.

Ezt a példát építjük fel ebben az oktatóanyagban.

Ebben az oktatóanyagban többet megtudhat arról, hogy mi az AJAX, hogyan lehet használni, és hogyan lehet fantasztikus funkciókat létrehozni vele a WordPress-en.

Kezdjük.

Az AJAX alapjai

• Az AJAX feed általában a következő lépéseket követi:
• AJAX hívást kezdeményezzen a felhasználói műveletek miatt
• A kérelem fogadása és feldolgozása a kiszolgálón
• Ragadja meg a választ, és hajtsa végre az összes szükséges műveletet a JavaScript segítségével
• Új témakörnyezet beállítása

Vegyük ezt gyakorlatba a WordPress-en. Első példánk egyszerű felugró ablakot tartalmaz, amely tartalmazza a cikkhez fűzött megjegyzések számát, amikor a címre kattintunk. Gyermek témát fogunk használni a húsz tizenhat A WordPress-ből.

Íme, mit kell tennie:

Hozzon létre új mappát a Témák könyvtárban a WordPress telepítésében a " wp-tartalom "És nevezze el" ajax-test "-nek, hozza létre a két fájlt szükséges a WordPress által, nevezetesen " functions.php "," Styles.css ", és adjon hozzá egy új fájlt" script.js "néven. Adja hozzá a következő kódot a CSS stíluslap fejlécéhez (style.css).

/ * Téma neve: Ajax Theme Test Theme URI: http://premium.wpmudev.com Leírás: AJAX tudás tesztelésének témája Szerző: Daniel Pataki Szerző: URI: http://danielpataki.com Sablon: twentysixteen Verzió: 1.0.0 License : GNU Általános Nyilvános Licenc v2 vagy újabb Licenc URI: http://www.gnu.org/licenses/gpl-2.0.html * /

A szülő téma stíluslapját a gyermek témának kell betöltenie. Korábban ezt úgy tették, hogy a CSS fájlt importálták a gyermek témába, de ennek ajánlott módja az "enqueueing" használata. Ne feledje, megmutattuk, hogyan kell használni ezt a funkciót.

Ezért adjuk hozzá közvetlenül a szülői stíluslapot és a JavaScript-fájlunkat:

add_action ('wp_enqueue_scripts', 'ajax_test_scripts'); funkció ajax_test_scripts () {wp_enqueue_style ('szülő-stílus', get_template_directory_uri (). '/style.css'); wp_enqueue_script ('ajax-test-scripts', get_stylesheet_directory_uri (). '/scripts.js', tömb ('jquery'), '1.0.0', igaz); }

Ha úgy érzi, hogy van energiája egy lépéssel tovább lépni, keressen egy szép képet, vágja le 880 x 660 képpontra, helyezze a gyerek téma mappájába, majd nevezze át " screenshot.png ". A megjelenés részben jelenik meg, amikor aktiválni szeretné a témát.

Mivel a gyermeknek ez a témája húsz tizenhat És hogy még semmit sem változtattunk (még!), A webhelynek pontosan úgy kell kinéznie, mint egy klasszikus témának, amelynek a témája " húsz tizenhat ".

Gomb hozzáadása

A kezdéshez hozzáadjuk a " Mutass egy kis szeretetet! ". Remek hely a megjelenítéséhez a témájú cikkek oldalsávján lenne.

Néhány kutatás után kiderül, hogy az oldalsávot egy " twentysixteen_entry_meta () »Amely a« könyvtárban található inc / template-tags.php ".

Ez a függvény csatlakoztatható Ami azt jelenti, hogy módosíthatjuk úgy, hogy meghatározzuk a saját functions.php fájlunkban. Az első lépés az egész függvény másolása és beillesztése a saját functions.php fájlunkba:

function twentysixteen_entry_meta () {if ('post' === get_post_type ()) {$ author_avatar_size = Apply_filters ('húsz-tizenhat_author_avatar_size', 49); printf (' % 1 $ s % 2 $ s % 3 $ s ', get_avatar (get_the_author_meta ('user_email'), $ author_avatar_size), _x ('Szerző', 'Használt a szerző neve előtt.', 'húszszégy'), esc_url (get_author_posts_url (get_the_author_meta ('ID'))), get_the_author ()); } if (in_array (get_post_type (), tömb ('post', 'attachment'))) {húsz-tizenhat_entry_date (); } $ format = get_post_format (); if (current_theme_supports ('post-format', $ format)) {printf (' % 4 $ s % 1 $ s ', sprintf (' % s ', _x ('Formátum', 'A formátum előtt használt.', ' húsztizenöt ')), esc_url (get_post_format_link ($ format)), get_post_format_string ($ format)); } if ('post' === get_post_type ()) {húsz-tizenhat_entry_taxonomia (); } if (! is_singular () &&! post_password_required () && (comments_open () || get_comments_number ())) {echo ' '; comments_popup_link (sprintf (__ ('Hozzászólás küldése a következőhöz:% s ', 'húsz-tizenhat'), get_the_title ())); visszhang ' '; }}

Adjuk hozzá a kulcsot az összes metaadat aljára:

$ love = get_post_meta (get_the_ID (), 'show_some_love', igaz); $ love = (üres ($ love))? 0: $ szerelem; visszhang ". $ szerelem. ' ';

Magyarázzuk el ezt a kódot:

Az első sor beolvassa a cikk által megszerzett szerelmek számát. Bizonyos esetekben ezek az adatok nem léteznek, más szóval, ha a gombra még nem kattintottak. Ezért használjuk

a kód második sorában az értéket 0-re kell állítani, ha az érték üres.

A harmadik sor a gombot szállítja, amely egy képet és a szerelmek számát tartalmazó spanból áll. A képforrást üresen hagytam, mert SVG-t akarok benne használni. Képsor létrehozásához használhat base64 kódolású SVG-t. Ez megkíméli Önt a követelések elől, és meg fogja tenni a sajátját weboldal hatékonyabb.

Ezt a rendelkezésre álló kis ingyenes képet használtam Ez a kapcsolat. Másolja és illessze be a kapott kódot a képforrásba, így:

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

A gomb stílusához egy kis CSS-t is használtam, hogy lebegő hatást érjen el. Nem túl nyilvánvaló, hogy gombról van-e szó, de az egyszerű tesztünkhöz igen.

.love-gomb img {margin-right: 6px; opacitás: 0.7; kurzor: pont; } .love-gomb img: hover {opacitás: 1; }

Művelet kiváltása

Végül jön a JavaScript! Meg kell céloznunk az elemünket, és észlelnünk kell rákattintást. A következőképpen teheti meg:

(function ($) {$ (document) .on ('kattintás', '.love-button img', function () {figyelmeztetés ("a szeretet megosztva";})})) (jQuery);

Ha ekkor rákattint a gombra, látnia kell egy JavaScript figyelmeztetést, amely a "Szerelem megosztott" szöveget tartalmaz. "

Adatkövetelmények

E szöveg helyett AJAX hívást kell indítanunk. Kód írása előtt megértjük, mit kell küldenünk.

Az AJAX URL

Először is szükségünk van egy helyre az adatok küldéséhez. Az a hely, ahová elküldjük az adatokat, feldolgozza az adatokat és fogadja a hívást. A WordPress beépített helyen rendelkezik az AJAX hívások kezelésére, amelyeket felhasználhatunk: a " admin-ajax.php " belül " wp-admin ". Nem tudjuk hozzáadni ezt az URL-t a szkriptünkhöz (a "nyers" kódolás használata nem elfogadható), ezért néhány ravasz WordPress-ot fogunk használni.

A funkció wp_localize_script () Eredetileg sztringek lefordítására készült a JavaScript fájlokban, ami jól is megy. Használhatjuk azt is, hogy változókat továbbítsunk a JavaScript fájljainkhoz, ebben az esetben az AJAX fájlunk URL-jét. Adja hozzá a következő kódot a fájlunkhoz " funkciók Az alábbiak szerint:

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

Ennek az utolsó objektumnak az eredménye AjaxTest lesz, amelynek tulajdonságai az utolsó paraméterben egy adott tömböt tartalmaznak. Az érték megadásához használhatjuk ajaxTest.ajax_url a JavaScript kódunkban.

A cikk azonosítója

Tetszőleges adatokat küldünk a cikk azonosítójaként (amellyel azonosítani fogjuk azt a cikket, amelyhez szeretnénk "adni egy kis szerelmet"). Ez lekérhető a DOM-ból. Vessen egy pillantást az alábbi "Huszonhat tizenhat" témában használt szerkezetre:

Gombunk egyik "cikk", mint az egyik őse. Ennek az elemnek van osztálya, és tartalmazza a cikk numerikus azonosítóját. Bár ez nem a legelegánsabb megoldás, onnan ragadhatjuk meg az azonosítót.

$ (dokumentum) .on ('click', '.love-button img', funkció () {var post_id = parseInt ($ (ez) .parents ('article.post:first'). attr ('id') .replace ('post-', '')); console.log (id)})

A cselekedet

A WordPress azt is megköveteli, hogy küldjön egy művelet nevű paramétert. Mivel az összes műveletet elküldjük az admin-ajax-nak, szükségünk van arra, hogy megkülönböztessük ezeket a kéréseket, ezért ezt a paramétert kell használni.

AJAX kérés küldése

Most mindent összerakhatunk. Ki kell hoznunk egy AJAX hívást a " wp-admin / admin-ajax.php Ami tartalmazza a cikk azonosítóját és egy műveletet. Így kell kinéznie.

($) {$ (dokumentum) .on ('click', '.love-button img', függvény () {var post_id = parseInt ($ (ez) .parents ('article.post:first'). attr ('id'). cserélje ki ('post-', '')); $ .ajax ({url: ajaxTest.ajax_url, írja be: "post", adatok: {action: 'add_love', post_id: post_id,} , siker: funkció (válasz) {riasztás („siker, az új szám '+ válasz)}})})}) (jQuery);

A $ .ajax () a használt függvény, amely egy csomó paramétert vesz fel. Az URL a célt tartalmazza, amely jelenleg a fájlunk ajax-url.php ”. A típus " Hozzászólás » mint az a. által küldött összes kérés forma. Az adatparaméter egy objektum, amely tartalmazza a " kulcs-érték Hogy el akarjuk küldeni a szervernek. Később a $ _POST ['action'] és a $ _POST ['post_id'] segítségével olvashatjuk őket.

A kérelem feldolgozása

Általában szerkesztenie kell a fájlt " admin-ajax.php », Mert a kérést odaküldik. Rendszerfájl, ezért nem fogjuk módosítani. A WordPress lehetővé teszi az AJAX kérések átadását szögletes zárójelben, a műveletparaméterrel. A modell a következő:

Ha megnevezted a műveletedet add_love A "" kampóhoz csatolnia kell egy funkciót wp_ajax_add_love És / vagy wp_ajax_nopriv_add_love ”. A tevékenységek NoPriv ”Kijelentkezett felhasználókra fut, egy csak bejelentkezett felhasználókra fut. Esetünkben mindkettőt szeretnénk használni. Gyors tesztként beállítunk egy alapértelmezett visszatérési értéket:

A siker paraméter egy olyan függvény, amely az AJAX hívás befejezésekor fog futni. Mutatunk egy egyszerű figyelmeztetést, amely a következőt mutatja: „Jól sikerült! Az új fiók a válaszunkkal egészül ki a végén.

add_action ('wp_ajax_add_love', 'ajax_test_add_love'); add_action ('wp_ajax_nopriv_add_love', 'ajax_test_add_love'); funkció ajax_test_add_love () {echo 4; die (); }

A funkciót mindkét zárójelhez csatoltuk, az egyik kész visszhang 4, majd használta a " die () ”. Erre a WordPress programban szükség van, különben minden válasz végén kap egy 0-et. Ha most rákattint a gombra, a következőket kell látnia:

Ahhoz, hogy a tényleges lájkokat megszámoljuk, csak annyit kell tennünk, hogy lekérjük az aktuális számot, eggyel növeljük, elmentjük az adatbázisba, és megjelenítjük az új számot.

funkció ajax_test_add_love () {$ love = get_post_meta ($ _POST ['post_id'], 'show_some_love', igaz); $ love = (üres ($ love))? 0: $ szerelem; $ Szerelem ++; update_post_meta ($ _POST ['post_id'], 'show_some_love', $ love); echo $ love; die (); }

Ha most rákattint a gombra, látnia kell a felbukkanó ablakot, amelyen "1”. Ha frissíti az oldalt, akkor látnia kell az új számot. Ha ismét rákattint a gombra, az megtörténik 2 ". Most csak annyit kell tennünk, hogy megbizonyosodjon arról, hogy a szám közvetlenül megjelenik-e a felhasználói felületen.

A válasz használatával végezzen módosításokat a felhasználói felületen

Ez a rész könnyűnek tűnik (mert az az), de általában a legnehezebb összerakni. Most csak annyit kell tennünk, hogy megkeresjük az aktuális számot tartalmazó elemet, és a válasz segítségével módosítsuk annak tartalmát.

($) {$ (dokumentum) .on ('click', '.love-button img', függvény () {var post_id = parseInt ($ (ez) .parents ('article.post:first'). attr ('id'). cserélje ki ('post-', '')); var $ number = $ (ez) .parent () find ('. szám') $ .ajax ({url: ajaxTest.ajax_url, típus: 'bejegyzés', adat: {action: 'add_love', post_id: post_id,}, siker: funkció (válasz) {$ number.text (response);}})})}) (jQuery);

Csak két sort adtam az előző JS kódunkhoz. Az 5. sorban a számot tartalmazó elemet tárolom a változóban $ number. Az 14 sorban módosítom az elem szövegét, hogy megjelenjen a válasz, amely az új szám.

Ez az, alapvetően képesnek kell lennie arra, hogy ezt az új funkciót működés közben láthassa az egyéni témában. Ha bármilyen problémája van, kérjük ossza meg velünk. Van még egy tipp, amelyet meg szeretne osztani? Tedd a megjegyzések részben.