Background Image

Usprawniamy komentarze w WordPress

Wordpress comments right way

Przez — w kategorii Wordpress w dniu 3 października, 2016

Tagi:

WordPress z założenia miał być platformą blogową. Skalowalność i prostota edycji sprawiła, że w dzisiejszych czasach platforma ta nadaje się praktycznie do wszystkiego. Od stron wizytówek poprzez fora po e-sklepy. Nadal jednak większość stanowią blogi oraz portale. Tak więc dziś zajmiemy się najważniejszym elementem każdego dobrego bloga – komentarzami.

Gotowce

Na wielu blogach spotkasz się choćby ze wtyczką CommentLuv która dodaje link do ostatniego wpisu autora komentarzy, dzięki której pomagasz nie tylko innym ale i sobie, ale o szczegółach innym razem. Mamy też wtyczkę Disqus, z której kiedyś korzystałem. Jest to cały gotowy mechanizm, który implementujemy na stronie nie martwiąc się o to jak wygląda, gdyż za wszystko odpowiada zewnętrzna aplikacja. Są też takie rozwiązania jak Livefyre czy IntenseDebate od firmy Automattic, która odpowiada za rozwój WordPress’a. Media społecznościowe – Facebook, Google+ – także oferują swoje rozwiązania, których fanem osobiście nie jestem.

Dodatkowe „bajery”

WP Ajaxify Comments

Wtyczka, dzięki której możemy publikować komentarze bez konieczności przeładowywania strony. Niestety konfiguracja może sprawiać problemy w przypadku niestandardowych szablonów. Szczególnie osobom, które nie mają żadnej wiedzy na temat CSS. Nie mniej jednak posiada ona gotowe ustawienia do motywów bazowych – Twenty Sixteen, Twenty Fifteen, Twenty Fourteen itd..

GD Rating System

Ciekawa wtyczka, która pozwala na ocenianie zamieszczanych komentarzy. I nie tylko 😉

Live Comment Preview

Wtyczka ta wyświetla pod formularzem podgląd tego, co zostanie opublikowane. Przydatne gdy mamy możliwość dodawania linków, obrazków itd. Użytkownik nie ma możliwości edycji po publikacji.

Subscribe to Comments

Świetna wtyczka, która pozwala użytkownikom na subskrypcje mailową o nowych komentarzach do wpisu. Aż dziwne, że nie została ona dodana do podstawowej core WordPress’a

Comment Images

Rozszerzenie dodaje użytkownikom możliwość zamieszczania obrazków w komentarzach, a administratorowi zarządzania nimi w panel. Niestety, pozwala na dodanie tylko jednego obrazka do komentarza, co jednak w większości przypadków w zupełności wystarcza.

Wolniejsze ładowanie

Każdy taki dodatek ma swoje plusy i minusy. Wchodzimy na repozytorium, czy na jakiegoś bloga na którym znaleźliśmy wpis o tym jak to nie będzie fajnie, jak to nie zwiększy ruchu na naszej witrynie gdy zainstalujemy to, to i to.. Ok, instalujemy jeden dodatek, drugi, piąty, dziesiąty. Lista wtyczek w panelu rośnie. Mamy masę dodatków, bajerów, usprawnień. Wszystko fajnie, ale strona coś nagle zwolniła. Otóż każdy taki dodatek nie tylko w większości przypadków dodaje jakiś plik CSS i/lub JS do strony – co zwiększa liczbę zapytań do serwera, wagę całej strony itd. – ale też dodaje masę funkcji PHP’owych, które serwer musi przemielić. Co przy dużym ruchu przekłada się na spadek wydajności. Dlatego wszystko jest dla ludzi, ale trzeba mieć to jednak na uwadze.

WordPress nie gryzie

Tradycyjne komentarze też są bardzo dobre. Mają co prawda trochę mało funkcjonalności, co mnie dziwi skoro WordPress jest platformą blogową, ale wystarczy kilka usprawnień aby wszystko prezentowało się świetnie i działało jak należy. Na naszym blogu nie korzystamy z żadnego pluginu do komentarzy, sami napisaliśmy prosty walker, który korzysta z corowych funkcji WordPress’a. Poniżej pokażę Ci jak w prosty sposób odmienić wygląd naszych komentarzy, dodać im trochę funkcji oraz styli. Demo możesz zobaczyć pod wpisem, gdyż to jest dokładnie ten sam kod 🙂

Układ edytora

Zacznijmy od zmiany układu samego formularza dodawania. Kilka wersji temu pole textarea w komentarzach zostało przeniesione do góry, zmieńmy więc kolejność i przenieśmy je na dół, dzięki czemu najpierw będziemy mieli pola z danymi autora a później pole wiadomości. Oto prosta funkcja która nam to załatwi:

Teraz musimy utworzyć tzw. Walker do komentarzy – czyli nadpiszemy domyślną funkcjonalność aby troszkę pozmieniać w jej układzie i dodać kilka rzeczy. Utwórzmy zatem plik comments_walker.php i umieśćmy go katalogu szablonu. Ja to zrobiłem w podkatalogu /inc/ aby nie zaśmiecał mi struktury plików. Następnie utwórzmy nową klasę comment_walker której kod podaję poniżej:

Pliku nie includujemy do functions.php. Zrobimy to gdzie indziej.

Comments.php

Udaj się teraz do pliku comments.php w katalogu szablonu (lub utwórz go jeśli takiego nie masz). A następnie wklej ten kod:

Mamy już gotowy cały układ komentarzy oraz formularza. Przyszła pora na trochę magii w CSS.

Dodajemy CSS

Ostatnio pisałem o wykorzystaniu grunta oraz sassa w projektach, stąd też poniżej wklejam style w SASS. Jeśli jednak preferujesz zwykły CSS na stronie http://sassmeister.com/ możesz błyskawicznie skompilować ten kod

Jetpack

Ta wtyczka od autorów WordPressa posiada bardzo ciekawy moduł – jetpack comments – który po włączeniu rozszerza możliwości samego formularza o możliwość logowania za pomocą facebooka, twittera, google plus oraz konta na wordpress.com, zamiast wpisywania za każdym razem swoich danych, co z pewnością ułatwi czytelnikom publikacje komentarzy. Oczywiście nadal mamy też i tą możliwość. Prezentuje się nieźle i nie spowalnia aż tak strony jak choćby disqus.

jetpack-comments

Na zakończenie

Osobiście korzystam z domyślnego systemu komentarzy rozszerzonego właśnie o tego walkera. Doinstalowałem sobie do tego Jetpacka – nie tylko z tego powodu, gdyż korzystam jeszcze z kilku innych ciekawych funkcji jak photon, czy publicize – na swoim blogu. Z tego rozwiązania korzystam już od ponad roku i jestem z niego bardzo zadowolony. Po pierwsze strona jest znacznie szybsza niż gdy korzystałem przez kilka tygodni z disqusa, nie mam syfu w panelu w postaci miliona wtyczek i podstron, które mają niby usprawnić wszystko… a także mam pełną kontrolę nad tym jak będą wyglądać komentarze publikowane przez czytelników. Nie martwię się o update’y, gdyż na pewno nie zmienią one wyglądu i funkcjonalności tego systemu. Jednym słowem polecam 🙂

Dodaj komentarz