Jak dodać system komentarzy do motywu WordPress

System komentarzy w WordPress, to kolejna bardzo ważna składowa strony opartej o ten właśnie CMS. Dyskusja pod wpisami pozwala na angażowanie czytelników, czy to poprzez umożliwienie im zadawania pytań do tekstu, czy dzielenie się własnymi doświadczeniami. Nic tak nie odzwierciedla aktywności bloga, jak liczba komentarzy zamieszczonymi pod wpisami.

Mając już przygotowaną „bazę” motywu, tj. gotowe wyświetlanie wpisów we frontendzie możemy przystąpić do kolejnego etapu, jakim będzie dodanie systemu komentarzy.

Własny szablon WordPress – Jak dodać formularz komentarzy

System komentarzy w WordPress składa się z dwóch zasadniczych części. Pierwszą z nich jest formularz – dzięki niemu możliwe jest dodawanie komentarzy, druga to funkcja pobierająca i wyświetlająca komentarze. W tym poradniku znajduje się opis, jak do motywu, który jeszcze nie ma zaimplementowanego modułu dyskusji, podpiąć system komentarzy WordPress.

 

Zacznijmy od formularza…

Dodawanie do szablonu WordPress formularza dodawania komentarzy

Prawdopodobnie myślałeś, że znajdziesz tutaj kod HTML do wspomnianego wcześniej formularza komentarzy ale nic z tych rzeczy! WordPress posiada ten kod w swoich plikach jądra i jedyne co my, jako deweloperzy motywów musimy zrobić, to użyć jednej sprytnej funkcji, która ten formularz dla nas wyświetli.

Funkcja, która wyświetli formularz komentowania na naszej stronie WordPress, to oczywiście comment_form().

<?php comment_form(); ?>

Funkcję w takiej postaci wystarczy skopiować i wkleić bezpośrednio w pliku single.php gdzieś pod ciałem pętli, albo jeszcze lepiej do dedykowanego, oddzielnego pliku o nazwie comments.php, do którego później dodamy także kod odpowiedzialny za wyświetlanie komentarzy. Tym sposobem nasz plik single.php pozostanie „czystszy” i bardziej czytelny.

Teraz, aby wczytać nasz nowy plik do motywu musimy skorzystać z kolejnej specjalnej funkcji WordPress –

<?php comments_template(); ?>

– to wszystko! Formularz (od strony technicznej) jest już gotowy. Funkcja jest na tyle inteligentna, że właściwie dalej nie trzeba z nią nic robić (przynajmniej na tym etapie, później zajmiemy się wyglądem).

Funkcja wczytująca formularz pozwala także na przesłanie jej dodatkowych parametrów, które pozwalają na spersonalizowanie wyświetlanego formularza. Przykładowo można dodawać dodatkowe pola do wprowadzania danych, lub ukrywać te które domyślnie się pojawiają. Można również określić, czy trzeba być zalogowanym, aby dodawać komentarze określić tekst przy etykietach pól, nadać odpowiednie klasy i identyfikatory dla CSS. Dociekliwych odsyłam do kodeksu WP.

Teraz wypadałoby formularz przetestować. Dodajmy zatem kilka komentarzy – przydadzą się do sprawdzenia, czy i jak będą wyświetlane później na stronie.

Wyświetlanie komentarzy w motywie WordPress – pętla komentarzy (comment loop)

Najpierw w Panelu Administracyjnym WordPress zatwierdź wszystkie testowe komentarze – przydadzą nam się do testowania.

Wyświetlanie komentarzy jest tylko trochę bardziej skomplikowane, tzn. tylko tak wygląda ale zasadniczo zaczynamy od użycia gotowej konstrukcji, którą później modyfikujemy według potrzeb.

Wspomnianą konstrukcję pobieramy z kodeksu WordPress, wygląda to tak jak poniżej:

if ( have_comments() ) : ?>
<h4 id="comments"><?php comments_number('No Comments', 'One Comment', '% Comments' );?></h4>
<ul>
	<?php wp_list_comments(); ?>
</ul>
<div>
<div><?php previous_comments_link() ?></div>
<div><?php next_comments_link() ?></div>
</div>
<?php else : // this is displayed if there are no comments so far ?>
	<?php if ( comments_open() ) :
		// If comments are open, but there are no comments.
	else : // comments are closed
	endif;
endif;

Całość jest opakowana w instrukcję if, która korzysta ze specjalnego tagu warunkowego WordPress (have_comments()) do sprawdzenia, czy aktualnie wyświetlany wpis posiada zapisane komentarze do wyświetlenia.

Druga linijka, to nagłówek H4, w którym użyto funkcji comments_number() do wyświetlenia ilości zapisanych przy wpisie komentarzy.

Kolejne 3 linijki, to właściwe wyświetlenie komentarzy. Funkcja wp_list_comments(), zwraca komentarze w postaci elementów listy, dlatego dookoła niej znajdują się tagi <ul>, </ul>.

Linijki z funkcjami previous_comments_link(), oraz next_comments_link(), dodają do systemu komentarzy nawigację – linki 'poprzednia strona’, 'następna strona’.

Linijki znajdujące się po pierwszej instrukcji else, są tak naprawdę opcjonalne, ale można także je wzbogacić w taki sposób, jak jest to pokazane na kolejnym listingu.

Personalizowanie systemu komentarzy

Wstępnie akceptuję, to co twórcy WordPress mi podsuwają, żeby zobaczyć, z czym mam do czynienia – wstawiam cały powyższy kod do mojego pliku comments.php, gdzieś niedaleko funkcji, która wstawia formularz dodawania komentarzy. Dodatkowo zamieniam komentarze podane we wcześniejszym listingu na komunikaty, które będą wyświetlały się odwiedzającym, oraz informowały ich o tym, czy można dany wpis komentować czy też nie.

Tak teraz wygląda mój pełny plik comments.php:

<?php
if ( have_comments() ) : ?>
	<h2 class="blue"><?php comments_number('Nigdy nie zadziała?', '(Jeden komentarz)', '(% komentarze/y)' );?></h2>

	<ul class="commentlist">
		<?php wp_list_comments(); ?>
	</ul>
	<div class="navigation">
		<div class="alignleft"><?php previous_comments_link() ?></div>
		<div class="alignright"><?php next_comments_link() ?></div>
	</div>
<?php else : // this is displayed if there are no comments so far ?>
	<?php if ( comments_open() ) : ?>
		<p class="italic">Skomentuj ten wpis jako pierwszy!</p>
<?php 	else : ?>
		<p class="italic">Komentowanie tego wpisu zostało zamknięte!</p>
<?php	
	endif;
endif; 

comment_form();
?>

 

Zakończenie

Na zakończenie ciekawostka. 🙂

Jeżeli nie chciało ci się robić dedykowanego pliku dla funkcji wyświetlającej formularz komentarzy i samych komentarzy, co jest całkiem w porządku – to jest Twój motyw i być może dla Ciebie bardziej wygodne i optymalne będzie trzymanie tych kilku linijek w jednym pliku, jednak należy mieć na uwadze, że niektóre wtyczki „podpinają się” pod wspomnianą funkcję wczytującą plik szablonu comments.php i zastępują zapisany w nim kod swoim.

Wspomnienie o tym jest o tyle ważne, że czasami z myślą, że i tak będziemy korzystać z wtyczek Disqus czy Facebook dla przechowywania komentarzy, zapominamy o tym i wspomniane wtyczki zwyczajnie nie działają.

Aktualizacja 2017-07-08

Artykuł został poprawiony i zaktualizowany. Stary akapit z zakończeniem wpisu został skasowany i zastąpiony ciekawostką. Wiele wyjaśnień zostało poprawionych i rozwiniętych.