Mainos

ajax wordpress kommentitOletusarvoisesti WordPress-kommenttijärjestelmä on valitettavasti riittämätön - yksi suurimmista vastaväitteistäni on, että kommentin lähettämiseksi sivu on päivitettävä. Voit siirtyä kolmannen osapuolen järjestelmään, kuten Livefyre [Broken URL Poistettu] tai Disqus 3 tapaa kommentoida Wordpress-blogiasiKommenttien saaminen blogiisi on suuri motivaatio pitää sinut jatkamassa pitkää matkaa, joka blogoi. Pelkästään tietäen, että joku on siellä, arvostaa työtäsi tuntuu hyvältä, mutta ei ... Lue lisää , mutta jos haluat pitää kaiken talossa tai tehdä muunlaisia ​​mukautuksia, AJAX: n kommenttien lähettäminen on vähiten mitä sinun pitäisi tehdä.

Voit nähdä esimerkin tästä työstä täällä Hyödyntää - Kun lähetät kommentin, et poistu sivulta - sen sijaan lähetämme sen AJAX-puhelun kautta ja lähetämme sitten nopean “Kiitos”Huomata takaisin. Lue koko opas.

Jos käytät muita kuin WordPress-toimintoja AJAX: na, lue oma edellinen opetusohjelma Opetusohjelma AJAX: n käytöstä WordPressissäAJAX on merkittävä verkkotekniikka, joka on siirtänyt meidät pelkän "napsauta linkkiä, mene toiselle sivulle" Internet 1.0: n rakenne. Sen avulla verkkosivustot voivat dynaamisesti hakea ja näyttää sisältöä ilman käyttäjä ...

instagram viewer
Lue lisää , ja muista tarkistaa kaikki WordPressiin liittyvät artikkelit.

esittely

AJAX WordPress -kommenttien toimivuuteen tarvitaan kaksi erillistä osaa, joten selitämme ensin ne, jotta saat yleiskuvan koko prosessista.

  • Jotkut Javascript sivulta, jotka sieppaavat käyttäjän napsauttamalla Lisää kommentti lähetä-painike, joka tekee siitä myös AJAX-puhelun ja käsittelee myös vastauksen.
  • PHP-käsittelijä, joka kiinnittyy kommenttiviestin toimintaan

javascript

Ensinnäkin tämä tarvitaan jQuery, samoin kuin mikä tahansa kaukana jännittävästä kehityksestä nykyään. Jos et ole varma, onko sitä jo ladattu, mene eteenpäin ja siirry alas Javascript-koodiin ja kokeile sitä joka tapauksessa - jos sinulla on Firebug ja konsolilokissa lukee “jQuery on määrittelemätön"Kun päivität sivun, lisää tämä rivi function.php-tiedostoosi varmistaaksesi, että se ladataan.

toiminto 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"), väärä); wp_enqueue_script (jquery '); }} add_action ('wp_print_scripts', 'google_jquery');

Huomaa, että tämä on monimutkainen tapa ladata jQuery, koska käytämme Google CDN: ien uusinta versiota, joka on nopeampi ja enemmän päivämäärä kuin WordPressin oletusarvoisesti sisällytetty - joten voi olla hyvä idea lisätä se joka tapauksessa, vaikka jQuery on jo ladattu muualla.

Nyt varsinaiselle JavaScriptille, joka käsittelee kommenttilomakkeen, meillä on muutama vaihtoehto. Helpoin on vain liittää koodi omaan single.php malli - olettaen, että et ole myöskään kommentoinut sivuja.

Voit vaihtoehtoisesti liittää olemassa olevaan Js tiedosto, jota teema käyttää, tai luoda uusi .js tiedosto teemahakemistossasi. Jos päätät laittaa sen omaan erilliseen .js-tiedostoosi etkä liitä sitä suoraan teemapohjaasi, lisää seuraavat rivit functions.php, ja huomaa, että tiedostonimen oletetaan olevan ajaxcomments.js teemakansion juuressa.

add_action ('init', 'ajaxcomments_load_js', 10); toiminto ajaxcomments_load_js () {wp_enqueue_script ('ajaxcomments', get_stylesheet_directory_uri (). '/ ajaxcomments.js'); }

Tässä on Javascript kommentoidaksesi lomaketta (tai voit katso sitä pastebinilla):

 // AJAXified kommentointijärjestelmä. jQuery ('asiakirja'). valmis (toiminto ($) { var commentform = $ ('# commentform'); // Etsi kommenttilomake. commentform.prepend ('
 
'); // lisää tietopaneeli ennen lomaketta palautteen tai virheiden lähettämiseksi. var statusdiv = $ ('# kommentti-tila'); // määrittele infopanel commentform.submit (function () { // sarjaa ja tallenna lomaketiedot muuttujaan. var formdata = commentform.serialize (); // Lisää tilaviesti. statusdiv.html ( '
 Processing...  p>'); // Pura toiminnan URL kommenttilomakkeesta. var formurl = commentform.attr ('toiminta'); // Lähetä lomake tiedoilla. $ .Ajax ({ tyyppi: 'post', url: formurl, data: formdata, virhe: toiminto (XMLHttpRequest, textStatus, errorThrown) { statusdiv.html ('
 Olet ehkä jättänyt yhden kentistä tyhjiksi tai lähettämättä liian nopeasti 
'); }, menestys: toiminto (data, textStatus) { if (data == "menestys") statusdiv.html ('
 Kiitos kommentistasi. Arvostamme vastaustasi. 
 '); muuta. statusdiv.html ('
 Odota hetki ennen seuraavan kommentin lähettämistä 
'); commentform.find ( 'textarea [name = comment]'). val ( ''); } }); palauta väärä; }); });

Koodin hajottamiseksi luomme ensin kommenttilomakkeen jQuery-objektit (joka olettaa, että kommenttilomakkeellasi on oletusarvoinen css-tunnus ”commentform”)ja lisäämällä sen yläpuolelle tyhjän tietopaneelin, jota käytämme myöhemmin käyttäjille viestien lähettämiseen kommentoinnin edistymisestä.

commentform.submit käytetään "kaappaamaan" lähetä-painike. Sen jälkeen sarjoitamme lomaketiedot (muuntamme ne yhdeksi pitkäksi riviksi), annamme ”käsittely”-Viesti käyttäjälle kyseisessä tietopaneelissa, ja jatka AJAX-pyyntöä. AJAX-pyyntö on vakiomuoto, mutta ei oikeastaan ​​tämän opetusohjelman puitteissa tänään - riittää, kun sanotaan, että se reagoi joko menestykseen tai virhe, ja tyhjentää lomakkeen, jos onnistunut estämään saman kommentin vahingossa lähettämisen kahdesti. Säädä viestit ja virheet tarpeen mukaan tai lisää sopiva muotoilu teema-tyylitaulukkoon, jos haluat, että virhesanomat erottuvat jollain tavalla. Viimeinen rivi - palauta väärä - estää lomaketta täyttämästä oletustoimintoa.

PHP-käsittelijä

Viimeiseksi tarvitsemme jotain estääksesi sivun päivittämisen ja lähettämällä asianmukaisen vastauksen takaisin käyttäjälle sekä ilmoittamalla järjestelmänvalvojalle, jos kommenttia on tarpeen moderoida, tai ilmoittamalla uuden kommentin kirjoittajalle. Tätä varten me koukku comment_post toiminto, joka tapahtuu heti sen jälkeen, kun se on lisätty tietokantaan, ja selvitä, oliko kyseessä AJAX-pyyntö. Lisää tämä omaan functions.php file:

(Myös saatavilla tässä pastebin)

add_action ('comment_post', 'ajaxify_comments', 20, 2); toiminto ajaxify_comments ($ comment_ID, $ comment_status) { if (! tyhjä ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) && strtolower ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { // Jos AJAX-pyyntö sitten. kytkin ($ comment_status) { tapaus '0': // ilmoita moderaattorille hyväksymättömästä kommentista. wp_notify_moderator ($ comment_ID); tapaus '1': // Hyväksytty kommentti. kaiku "menestys"; $ commentdata = & get_comment ($ comment_ID, ARRAY_A); $ Post = & get_post ($ commentdata [ 'comment_post_ID']); wp_notify_postauthor ($ comment_ID, $ commentdata ['comment_type']); tauko; oletus: kaiku "virhe"; } poistua; } }

Pisteongelmat

Jos sivu edelleen päivittyy AJAX: n kautta lähettämisen sijaan, se on todennäköisesti yksi kahdesta ongelmasta. Yksi - jQueryä ei ehkä ole ladattu. Asentaa pyromaani Firebugin asentaminen IE: hen, Safariin, Chromeen ja Operaan Lue lisää , tai ota Chromen kehittäjätyökalut käyttöön ja tarkista konsolilokissa virheiden varalta. Jos jQueryä ei löydy, palaa takaisin JavaScript-osioon ja lue ensimmäinen bitti, kun lisäät jQueryn teemaasi. Toinen mahdollisuus on, että teemasi tekee jotain erityistä kommenttilomakkeelle ja sen tunnus ei ole enää ”kommentti”. Tarkista lähdekoodi ja säädä sitten var commentform = $ ('# kommenttimuoto') rivin JavaScript olla oikea tunnus - se saattaa toimia.

Kuten aina, olen noin auttamassa edelleen niin paljon kuin mahdollista, mutta lähetä linkit esimerkki-URL-osoitteeseen, josta voin katsoa nopeasti.

Jamesilla on teknisen älykunnan kandidaatin tutkinto ja hän on CompTIA A + ja Network + -sertifioitu. Hän on MakeUseOfin johtava kehittäjä ja viettää vapaa-aikansa pelaamalla VR-paintballia ja lautapelejä. Hän on rakennettu tietokoneita lapsuudestaan ​​asti.