Hogyan lehet AJAX-ify a WordPress megjegyzéseket

Hirdetés

Alapértelmezés szerint a WordPress kommentáló rendszer sajnálatos módon elégtelen - az egyik legnagyobb kifogásom az, hogy egy komment megjegyzéséhez az oldalt frissíteni kell. Válthat egy harmadik fél rendszerére, például a Livefyre [Törött URL eltávolítva] vagy Disqus 3 módszer a Wordpress Blog megjegyzéseinek ösztönzéséreA blogodhoz fűzött megjegyzések nagy motivációt nyújtanak arra, hogy továbblépj a hosszú blogokkal, amelyek blogolják. Nagyon jól érzi magát, ha tudja, hogy valaki ott van, és értékeli munkáját, de nem ... Olvass tovább , de ha inkább szeretne mindent házban tartani, vagy bármilyen más testreszabási lehetőséget végez, akkor az AJAX megjegyzéseinek küldése a legkevesebb, amit meg kellene tennie.

Itt láthat példát erről a munkáról Kihasználni - kommentár küldésekor nem hagyja el az oldalt - ehelyett AJAX hívással küldjük el, majd küldünk egy gyors „köszönöm- jegyezze vissza. Olvassa el a teljes bemutatót.

Ha nem WordPress funkciókat használ AJAX-ként, kérjük, olvassa el az én oldalamat

előző bemutató Oktatóanyag az AJAX használatáról a WordPress-benAz AJAX egy figyelemre méltó webes technológia, amely túlment az egyszerű „kattintási link, menjen egy másik oldalra” túllépésén az Internet 1.0 felépítése. Ez lehetővé teszi a webhelyek számára a tartalom dinamikus letöltését és megjelenítését a felhasználói ... Olvass tovább , és feltétlenül olvassa el az összes WordPress-rel kapcsolatos cikket.

Bevezetés

Két külön alkatrészre van szükség ahhoz, hogy az AJAX WordPress megjegyzések működőképesek legyenek, ezért először magyarázzuk meg ezeket, hogy áttekintést kapjunk az egész folyamatról.

• Néhány Javascript az oldalon, amely elfogja a felhasználót a Megjegyzés hozzáadása beküldés gomb, amely szintén AJAX hívássá teszi, és kezeli a választ.
• PHP kezelő, amely bekapcsol a comment_post műveletbe

Javascript

Először is erre lesz szükség jQuery, csakúgy, mint a mai weboldalak fejlesztésében izgalmas módon. Ha nem biztos benne, hogy már betöltődött-e, ugorjon tovább, ugorjon le a Javascript-kódra, és mindegy, próbálja ki - ha van Firebug, és a konzol naplója azt mondja:A jQuery nincs meghatározva”Pontot, amikor frissíti az oldalt, majd adja hozzá ezt a sort a function.php fájlhoz annak ellenőrzése érdekében, hogy betöltődik-e.

funkció google_jquery () { if (! is_admin ()) {wp_deregister_script ('jquery'); wp_register_script ('jquery', (" http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"), hamis); wp_enqueue_script ( 'jQuery'); }} add_action ('wp_print_scripts', 'google_jquery');

Ne feledje, hogy ez a jQuery betöltésének bonyolult módja, mert a Google CDN-k legújabb verzióját fogjuk használni, amely gyorsabb és gyorsabb dátum, mint amelyet a WordPress alapértelmezés szerint tartalmaz - tehát érdemes lehet ezt hozzátenni még akkor is, ha a jQuery már betöltve van. máshol.

Most az a Javascript, amely kezeli a megjegyzés űrlapot, van néhány lehetőségünk. A legegyszerűbb, ha csak beillesztjük a kódot a mappába single.php sablon - ha feltételezzük, hogy nem engedélyezi a kommentálást az oldalakon sem.

Másik lehetőségként beillesztheti egy meglévőbe Js a témája által használt fájl, vagy hozzon létre egy új .js fájlt a témakönyvtárba. Ha úgy dönt, hogy elhelyezi a saját külön .js fájljában, és nem illeti be közvetlenül a témasablonba, akkor feltétlenül adja hozzá a következő sorokat a functions.php, és vegye figyelembe, hogy feltételezzük, hogy a fájlnév ajaxcomments.js a témamappa gyökerében.

add_action ('init', 'ajaxcomments_load_js', 10); ajaxcomments_load_js () {wp_enqueue_script függvény ('ajaxcomments', get_stylesheet_directory_uri (). '/ ajaxcomments.js'); }

Itt van a Javascript a megjegyzés űrlap kezeléséhez (vagy tudsz nézd meg a pastebin oldalon):

 // AJAXified kommentáló rendszer. jQuery ('dokumentum'). kész (funkció ($) { var commentform = $ ('# commentform'); // keresse meg a megjegyzés űrlapot. commentform.prepend ('
 
'); // információs panelt adjon hozzá az űrlap elé, hogy visszajelzést vagy hibákat adjon. var statusdiv = $ ('# megjegyzés-állapot'); // definiálja az infopanel commentform.submit (function () { // az űrlapadatok sorosítása és tárolása egy változóban. var formdata = commentform.serialize (); // Állapotüzenet hozzáadása. statusdiv.html ( '
 Feldolgozás...  p>'); // A művelet URL-jének kibontása a kommentrlapból. var formurl = commentform.attr ('művelet'); // Űrlap feladása az adatokkal. $ .Ajax ({ típus: 'post', URL: formurl, adatok: formdata, hiba: funkció (XMLHttpRequest, textStatus, errorThrown) { statusdiv.html ('
 Lehet, hogy az egyik mezőt üresen hagyta, vagy túl gyorsan küld be 
'); }, siker: függvény (data, textStatus) { if (adatok == "siker") statusdiv.html ('
 Köszönjük megjegyzését. Nagyra értékeljük a válaszát. 
 '); más. statusdiv.html ('
 Kérjük, várjon egy ideig, mielőtt elküldi a következő hozzászólást 
'); commentform.find ( 'textarea [name = megjegyzést]'). Val ( ''); } }); hamis visszaadást; }); });

A kód lebontása érdekében először jQuery objektumokat hozunk létre a megjegyzés űrlapon (amely feltételezi, hogy a megjegyzésed formátumának alapértelmezett css-azonosítója a „commentform”), és hozzáad egy üres információs panelt fölé, amelyet később üzenetek megjelenítésére használunk a felhasználónak a megjegyzésük közzétételének előrehaladásáról.

commentform.submit arra használják, hogy "eltérítsék" a beküldés gombot. Ezután sorba rendezzük az űrlapadatokat (egy hosszú adatsorrá alakítjuk), és adunk egy „Feldolgozás”Üzenet a felhasználónak az információs panelen, és folytassa az AJAX kéréssel. Az AJAX kérés a szabványos formátum, de manapság nem igazán az oktatóprogram keretein belül - elegendő azt mondani, hogy vagy sikerre, vagy hibát, és kitölti az űrlapot, ha sikeres, hogy megakadályozzák ugyanazon megjegyzés véletlen elküldését kétszer. Ha szükséges, módosítsa az üzeneteket és a hibákat, vagy adjon hozzá megfelelő stílust a téma stíluslapjához, ha azt szeretné, hogy a hibaüzenetek valamilyen módon kitűnjön. Az utolsó sor - hamis visszaadást - megakadályozza, hogy az űrlap kitöltse az alapértelmezett műveletet.

PHP kezelő

Végül valamire szükségünk van az oldal frissítésének megakadályozására, és a megfelelő válasz visszaküldésére a felhasználó számára valamint értesíti a rendszergazdát, ha a megjegyzés moderálásra szorul, vagy értesíti az új megjegyzés szerzőjét. Ehhez bekapcsolunk a comment_post művelet, amely közvetlenül azután történik, hogy hozzáadódott az adatbázishoz, és észlelje, hogy AJAX kérés volt-e. Adja hozzá ezt a functions.php file:

(Is kapható ezen a pastebin)

add_action ('comment_post', 'ajaxify_comments', 20, 2); ajaxify_comments funkció ($ comment_ID, $ comment_status) { if (! üres ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) && strtolower ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { // Ha az AJAX kér, akkor. kapcsolót ($ comment_status) { '0' eset: // értesítse a moderátort a jóvá nem hagyott megjegyzésről. wp_notify_moderator ($ comment_ID); '1' eset: // Jóváhagyott megjegyzés. visszhang "siker"; $ commentdata = & get_comment ($ comment_ID, ARRAY_A); $ Post = & get_post ($ commentdata [ 'comment_post_ID']); wp_notify_postauthor ($ comment_ID, $ commentdata ['comment_type']); szünet; alapértelmezett: visszhang "hiba"; } kijárat; } }

Helyi problémák

Ha az oldal továbbra is frissül, nem pedig az AJAX-en keresztül történő feladás, akkor ez valószínűleg a két probléma egyike. Egy - lehet, hogy nincs betöltve a jQuery. Telepítés Szentjánosbogár A Firebug telepítése az IE, Safari, Chrome és Opera operációs rendszerekre Olvass tovább , vagy engedélyezze a Chrome fejlesztői eszközöket, és ellenőrizze a konzol naplójában hibákat. Ha a jQuery nem található, menjen vissza a JavaScript szakaszhoz, és olvassa el az első bit a jQuery hozzáadásához a témához. A második lehetőség az, hogy a témád valami különlegeset tesz a megjegyzés űrlaphoz, és az azonosítója már nem „kommentform”. Ellenőrizze a forráskódot, majd állítsa be a var commentform = $ ('# kommentform') sora a JavaScript-ben, hogy helyes azonosító legyen - ez működhet.

Mint mindig, arra törekszem, hogy amennyire csak tudok segíteni, de kérlek, tegyen közzé egy linket egy példa URL-re, ahol gyorsan átnézhetem.