Jak AJAX-ify Twoje komentarze WordPress

Domyślnie system komentowania WordPress jest żałośnie nieodpowiedni - jednym z moich największych zastrzeżeń jest to, że aby opublikować komentarz, strona musi się odświeżyć. Możesz przełączyć się na system innej firmy, taki jak Livefyre lub Disqus 3 sposoby zachęcania do komentowania na blogu Wordpress 3 sposoby zachęcania do komentowania na blogu Wordpress Otrzymywanie komentarzy na blogu jest świetną motywacją do kontynuowania długiej podróży, która jest blogowanie. Świadomość, że ktoś tam jest, docenienie twojej pracy, jest świetna, ale nie…, ale jeśli wolisz zachować wszystko w domu lub zrobić coś innego, dostosowując, to publikowanie komentarzy przez AJAX jest co najmniej powinieneś zrobić.

Tutaj możesz zobaczyć przykład tego działania Zrobić użytek z - gdy opublikujesz komentarz, nie opuścisz strony - zamiast tego wyślemy go przez połączenie AJAX, a następnie wyślemy szybką “Dziękuję Ci” notka z powrotem. Czytaj dalej, aby uzyskać pełny samouczek.

Aby korzystać z funkcji innych niż WordPress jako AJAX, przeczytaj mój poprzedni samouczek Samouczek na temat korzystania z AJAX w WordPress Samouczek na temat korzystania z AJAX w WordPress AJAX to niezwykła technologia internetowa, która wyszła poza proste “kliknij link, przejdź do innej strony” struktura Internetu 1.0. Umożliwia stronom internetowym dynamiczne pobieranie i wyświetlanie treści bez użytkownika ... i koniecznie sprawdź wszystkie artykuły związane z WordPress.

Wprowadzenie

Aby działały komentarze AJAX WordPress, potrzebne są dwie oddzielne części, więc wyjaśnijmy je jako pierwsze, aby uzyskać przegląd całego procesu.

• Niektóre Javascript na stronie, który przechwytuje kliknięcie przez użytkownika Dodaj komentarz przycisk Prześlij, który powoduje, że jest to wywołanie AJAX i obsługuje również odpowiedź.
• Program obsługi PHP, który włącza się do akcji comment_post

JavaScript

Po pierwsze, będzie to wymagało jQuery, podobnie jak wszystko, co jest obecnie zdalnie ekscytujące w tworzeniu stron internetowych. Jeśli nie masz pewności, czy jest już ładowany, przejdź do kodu JavaScript i wypróbuj go mimo to - jeśli masz Firebug, a dziennik konsoli mówi: “jQuery jest niezdefiniowany” po odświeżeniu strony dodaj ten wiersz do pliku functions.php, aby upewnić się, że jest ładowany.

funkcja 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”), false); wp_enqueue_script ('jquery');  add działań („wp_print_scripts”, „google_jquery”);

Uwaga: jest to skomplikowany sposób ładowania jQuery, ponieważ będziemy używać najnowszej wersji z CDN Google, która jest szybsza i bardziej aktualna niż ta domyślnie dołączona do WordPress - więc dobrym pomysłem może być dodanie i tak nawet jeśli jQuery jest już załadowany gdzie indziej.

Teraz, dla faktycznego Javascript, który obsłuży formularz komentarza, mamy kilka opcji. Najłatwiej jest po prostu wkleić kod do swojego single.php szablon - zakładając, że nie masz włączonego komentowania również dla stron.

Alternatywnie możesz wkleić do istniejącego .js plik używany przez motyw lub utwórz plik nowy .js plik w katalogu motywów. Jeśli zdecydujesz się umieścić go w osobnym pliku .js i nie wkleić go bezpośrednio w szablonie motywu, dodaj następujące wiersze do functions.php, i zwróć uwagę, że nazwa pliku to ajaxcomments.js w katalogu głównym folderu motywu.

działanie dodatkowe („init”, „ajaxcomments_load_js”, 10); funkcja ajaxcomments_load_js () wp_enqueue_script ('ajaxcomments', get_stylesheet_directory_uri (). '/ ajaxcomments.js'); 

Oto JavaScript do obsługi formularza komentarza (lub możesz zobaczyć to na pastebin):

// AJAXified system komentowania jQuery ('document'). Ready (function ($) var commentform = $ ('# commentform'); // znajdź formularz komentarza commentform.prepend (''); // dodaj panel informacyjny przed formularz do przekazywania opinii lub błędów var statusdiv = $ ('# comment-status'); // zdefiniuj infopanel commentform.submit (function () // serializuj i przechowuj dane formularza w zmiennej var formdata = commentform.serialize ( ); // Dodaj komunikat o stanie statusdiv.html ('
Przetwarzanie… 
”); // Wyodrębnij adres URL działania z commentform var formurl = commentform.attr ('action'); // Wyślij formularz z danymi $ .ajax (type: 'post', url: formurl, data: formdata, error: function (XMLHttpRequest, textStatus, errorThrown) statusdiv.html ('
Być może pozostawiłeś jedno z pól puste lub publikujesz zbyt szybko
”); , success: function (data, textStatus) if (data == "success") statusdiv.html ('
Dzięki za komentarz. Dziękujemy za odpowiedź.
”); else statusdiv.html ('
Poczekaj chwilę, zanim opublikujesz swój następny komentarz
”); commentform.find ('textarea [name = comment]'). val (");); return false;););

Aby rozbić kod, najpierw tworzymy obiekty jQuery formularza komentarza (który zakłada, że ​​formularz komentarza ma domyślny identyfikator css “formularz komentarza”), i dodanie nad nim pustego panelu informacyjnego, którego później będziemy używać do wyświetlania użytkownikom wiadomości o postępach w publikowaniu komentarzy.

commentform.submit służy do „przejęcia” przycisku wysyłania. Następnie szeregujemy dane formularza (przekształcamy je w jedną długą linię danych), dajemy “Przetwarzanie” wiadomość do użytkownika w tym panelu informacyjnym i śmiało z prośbą AJAX. Żądanie AJAX jest standardowym formatem, ale obecnie nie wchodzi w zakres tego samouczka - wystarczy powiedzieć, że reaguje albo na sukces, albo na błąd, i usuwa formularz, jeśli się powiedzie, aby zapobiec przypadkowemu opublikowaniu tego samego komentarza dwukrotnie. Dostosuj odpowiednio komunikaty i błędy lub dodaj odpowiednią stylizację do arkusza stylów motywu, jeśli chcesz, aby komunikaty o błędach jakoś się wyróżniały. Ostatnia linia - zwróć false - uniemożliwia wypełnienie formularza przez działanie domyślne.

Program obsługi PHP

Na koniec potrzebujemy czegoś, co uniemożliwi odświeżenie strony i odeśle odpowiednią odpowiedź do użytkownika, a także powiadomi administratora, jeśli komentarz wymaga moderacji, lub powiadomi autora o nowym komentarzu. W tym celu podłączamy się do comment_post akcja, która ma miejsce tuż po dodaniu do bazy danych i wykrycie, czy było to żądanie AJAX. Dodaj to do swojego functions.php plik:

(Dostępne również w tym pastebin)

działanie dodatkowe („komentarz_post”, „ajaxify_comments”, 20, 2); funkcja ajaxify_comments ($ comment_ID, $ comment_status) if (! pusty ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) && strtolower ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') // Jeśli AJAX zażąda zmiany ($) comment_status) case '0': // powiadom moderatora o niezatwierdzonym komentarzu wp_notify_moderator ($ comment_ID); przypadek „1”: // Zatwierdzony komentarz echo „sukces”; $ commentdata = & get_comment ($ comment_ID, ARRAY_A); $ post = & get_post ($ commentdata ['comment_post_ID']); wp_notify_postauthor ($ comment_ID, $ commentdata ['comment_type']); złamać; domyślnie: echo „error”;  wyjście; 

Problemy z punktami

Jeśli strona jest nadal odświeżana zamiast publikować w AJAX, prawdopodobnie będzie to jeden z dwóch problemów. Po pierwsze - możesz nie mieć załadowanego jQuery. Zainstaluj Firebug Jak zainstalować Firebug na IE, Safari, Chrome i Opera Jak zainstalować Firebug na IE, Safari, Chrome i Opera lub włączyć narzędzia programistyczne Chrome i sprawdzić dziennik konsoli pod kątem błędów. Jeśli jQuery nie zostanie znaleziony, wróć do sekcji JavaScript i przeczytaj pierwszy fragment na temat dodawania jQuery do motywu. Druga możliwość polega na tym, że Twój motyw tworzy coś specjalnego w formularzu komentarza, a jego identyfikator nie jest już “formularz komentarza”. Sprawdź kod źródłowy, a następnie dostosuj var commentform = $ ('# commentform') wiersz w JavaScript, aby być poprawnym identyfikatorem - to może działać.

Jak zawsze jestem w pobliżu, aby pomóc w jak największym stopniu, ale proszę zamieścić linki do przykładowego adresu URL, gdzie mogę szybko sprawdzić.