Jak AJAX-ify Twoje komentarze WordPress

Reklama

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 [Usunięto uszkodzony adres URL] lub Disqus 3 sposoby zachęcania do komentowania na blogu WordpressOtrzymywanie komentarzy na blogu jest świetną motywacją do kontynuowania długiego okresu blogowania. Wiedząc, że ktoś tam jest, doceniając twoją pracę, czujesz się świetnie, ale nie ... Czytaj więcej , ale jeśli wolisz zachować wszystko w domu lub wykonać inne dostosowania, to publikowanie komentarzy przez AJAX jest co najmniej powinieneś zrobić.

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

Aby używać funkcji innych niż WordPress jako AJAX, przeczytaj mój

poprzedni samouczek Samouczek korzystania z AJAX w WordPressAJAX to niezwykła technologia internetowa, która przesunęła nas poza zwykły „link kliknięcia, przejdź do innej strony” struktura Internetu 1.0. Umożliwia witrynom dynamiczne pobieranie i wyświetlanie treści bez użytkownik... Czytaj więcej 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 najpierw, 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 sprawia, że ​​jest to wywołanie AJAX i obsługuje także odpowiedź.
• Program obsługi PHP, który włącza się do akcji comment_post

JavaScript

Po pierwsze, będzie to potrzebne jQuery, podobnie jak wszystko, co obecnie jest 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 Firebuga, 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"), fałszywe); 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 data niż ta domyślnie dołączona do WordPress - warto więc dodać tę opcję, 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 do szablonu motywu, dodaj następujące wiersze do functions.phpi 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 zobacz na pastebin):

 // AJAXified system komentowania. jQuery („dokument”). gotowy (funkcja ($) { var commentform = $ ('# commentform'); // znajdź formularz komentarza. commentform.prepend ('
 
'); // dodaj panel informacyjny przed formularzem, aby przekazać opinie lub błędy. var statusdiv = $ ('# comment-status'); // zdefiniuj infopanel commentform.submit (function () { // serializować i przechowywać dane formularza w zmiennej. var formdata = commentform.serialize (); // Dodaj komunikat o stanie. statusdiv.html ('
 Przetwarzanie... 
'); // Wyodrębnij adres URL działania z formularza komentarza. var formurl = commentform.attr („akcja”); // Prześlij formularz z danymi. .ajax ({ type: 'post', url: formurl, data: formdata, error: function (XMLHttpRequest, textStatus, errorThrown) { statusdiv.html ('
 Możliwe, że jedno z pól było puste lub publikujesz zbyt szybko 
'); }, success: function (data, textStatus) { if (data == „sukces”) statusdiv.html ('
 Dziękujemy za komentarz. Dziękujemy za odpowiedź. 
 '); jeszcze. statusdiv.html ('
 Poczekaj chwilę, zanim opublikujesz swój następny komentarz 
'); commentform.find ('textarea [name = comment]'). val (''); } }); zwracać fałsz; }); });

Aby rozbić kod, najpierw tworzymy obiekty jQuery z formularza komentarza (który zakłada, że ​​formularz komentarza ma domyślny identyfikator css „form komentarza”)i dodając pusty panel informacyjny nad nim, 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 przesyłania. Następnie szeregujemy dane formularza (przekształcamy je w jedną długą linię danych), dając „Przetwarzanie”Do użytkownika w tym panelu informacyjnym i śledź żądanie AJAX. Żądanie AJAX to standardowy format, ale tak naprawdę nie wchodzi w zakres tego samouczka dzisiaj - wystarczy powiedzieć, że reaguje na sukces lub błąd i jeśli formularz się powiedzie, ten formularz jest pusty, aby zapobiec przypadkowemu opublikowaniu tego samego komentarza dwa razy. 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 powiadomienie administratora, jeśli komentarz wymaga moderacji, lub powiadomienie autora o nowym komentarzu. W tym celu podłączamy się do comment_post działanie, które następuje tuż po dodaniu do bazy danych i wykrycie, czy było to żądanie AJAX. Dodaj to do swojego functions.php plik:

(Także dostępny na tym pastebinie)

działanie dodatkowe („komentarz_post”, „ajaxify_comments”, 20, 2); funkcja ajaxify_comments ($ comment_ID, $ comment_status) { if (! empty ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) && strtolower ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { // Jeśli żądanie AJAX to. przełącznik ($ comment_status) { przypadek „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 wciąż odświeżana zamiast publikować w AJAX, prawdopodobnie będzie to jeden z dwóch problemów. Jeden - możesz nie mieć załadowanego jQuery. zainstalować Firebug Jak zainstalować Firebug na IE, Safari, Chrome i Opera Czytaj więcej lub włącz narzędzia programistyczne Chrome i sprawdź 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ż „formularzem komentarza”. Sprawdź kod źródłowy, a następnie dostosuj var commentform = $ („#formform”) 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ć.