Komentarze to chyba najbardziej złożony element do zakodowania w szablonach WordPress. Komentarze możemy zagnieżdżać i nie zapominajmy, że zakodować trzeba formularz do ich swobodnego dodawania. W tej instrukcji pokażę jak stworzyć potrzebny kod aby tworzony przez nas szablon obsługiwał komentarze i to bez pójścia na żadne kompromisy.

Komentarze znajdują się zazwyczaj na stronach postów. Otwórzmy zatem plik single.php i przejdźmy do fragmentu, w którym chcemy umieścić komentarze. Jak wspomniałem w obszernym przewodniku Tworzenie motywu i szablonów WordPress, system ten posiada natywną funkcję do generowania komentarzy comments_template(). Należy pamiętać, że funkcja ta powinna być uruchamiana tylko wtedy, kiedy dany post faktycznie ma obsługiwać komentarze. Nota bene redaktor strony ma możliwość wyłączenia komentarzy – zarówno globalnie, jak i w konkretnych postach.

Służą do tego opcje w sekcji Dyskusja, które można zmienić w każdym osobnym poście:

Ustawienia dyskusji na stronie edycji postu.

Wyłączenie komentarzy we wszystkich przyszłych wpisach można zmienić w ustawieniach WordPress. Przechodzimy w celu do Ustawienia > Dyskusja:

Ustawiania dyskusji w ustawieniach WordPress

Z tego powodu zaleca się aby funkcję odpowiedzialną za wygenerowanie komentarzy i formularza kontaktowego otoczyć sprawdzeniem, czy komentarze są włączone i czy faktycznie jest co generować:

if ( comments_open() || get_comments_number() ) :
   comments_template();
endif;

Nawet jeżeli nasz szablon nie posiada pliku comments.php (którego brak w szablonie jest uznawany błąd od wersji 3.0.0 w przypadku kiedy posłużymy się funkcją comments_template()) to i tak WordPress wygeneruje podstawowy HTML aby komentarze działały:

Domyślny szablon komentarzy WordPress

Po ostylowaniu będzie to jakoś wyglądało i działało… Nie jest to jednak optymalne rozwiązanie kiedy kodujemy własny szablon lub mamy gotowy kod HTML komentarzy, który ma wyglądać np. tak:

Nikt poważny nie ogranicza się do stylowania domyślnego kodu HTML jaki generuje WordPress w takich sytuacjach, bo zwyczajnie chcemy wykorzystać już ostylowane klasy i wykorzystać zaprojektowane wcześniej struktury HTML. Jeżeli korzystamy z Bootstrapa to mamy już gotowe obramowanie, klasy dla przycisków i przykładowo skalę typograficzną. Tworzymy zatem plik comments.php, który może powstać przez skopiowanie przykładu z dokumentacji (pierwszy link w źródłach) lub dzielnie stworzyć go od zera.

Zmiana (edycja) wyglądu komentarzy WordPress

Kiedy dodamy plik comments.php do głównego katalogu naszego motywu to standardowy kod HTML odpowiedzialny za wyświetlenie komentarzy i formularza zniknie. Działa już w tym momencie mechanizm szablonowania i w miejscu funkcji comments_template() WordPress umieszcza to, co znajduje się w pliku comments.php. Spróbujmy zatem odtworzyć oryginalny szablon by zrozumieć jak to działa i by potem łatwiej wprowadzić własne zmiany w generowanym kodzie HTML.

Edycja formularza do dodawania komentarzy i funkcja comment_form()

Za wyświetlenie się formularza do dodawania komentarzy odpowiada funkcja comment_form(). Może ona przyjmować argumenty, dzięki którym dostosujemy wygląd komentarzy:

comment_form( $commentform_args );

Zmienna $comments_args może przyjmować mnóstwo argumentów. Możemy edytować wygląd formularza do tego stopnia, że wklejamy cały kod pól formularza do argumentu 'fields’:

$comments_args = array(
     'fields' => array(
         'author' => '<div class="row"><div class="col-md-6"><input id="author" class="form-control" name="author" placeholder="Twoje imię"></div>',
         'email' => '<div class="col-md-6"><input id="email" class="form-control" name="email" placeholder="Twój e-mail"></div></div>'
     )
 )

Podobnie możemy zrobić z polami url, cookies. Pole formularza posiada już własny argument comment_field (nie umieszczamy go w fields):

"comment_field" => '<textarea id="comment" class="form-control" name="comment" placeholder="Komentarz" rows="4"></textarea>',

Argumenty pozwalają także na edycję etykiet przycisków. Chcąc zmienić przycisk formularza możemy zmienić jego etykietę oraz dodać dodatkowe klasy:

"label_submit" => __( "Wyślij komentarz" ),
"id_submit" => ( "comment-submit" ),     
"class_submit" => ( "btn btn-dark submit mt-4" ),
"submit_button" => '<br><input name="%1$s" type="submit" id="%2$s" class="%3$s" value="%4$s" />',

Od wersji 4.4.0 mamy możliwość dodawania własnych klas do formularza:

"class_form" => "bg-light rounded-3 shadow p-4 p-lg-5 mt-4",

Dzięki temu mechanizmowi mamy wpływ na bardzo wiele elementów i nie ma sensu abym je wszystkie tutaj wypisywał. Zapraszam do dokumentacji funkcji comment_form() – prowadzi do niej trzeci link umieszczony w źródłach tego artykułu.

Ostatnia zmiana to reorganizacja pól. Często jest tak, że pola do wpisania nazwy i adresu e-mail komentującego mają się znaleźć przed polem tekstowym do komentarza a checkbox odnośnie cookies ma być na końcu. W tym celu skrzystamy z filtru:

function reorder_textarea_comment_field( $fields ) {
   $comment_field = $fields['comment'];
     $cookies_field = $fields['cookies'];
     unset( $fields['comment'] );
     unset( $fields['cookies'] );
     $fields['comment'] = $comment_field;
     $fields['cookies'] = $cookies_field;
     return $fields;
}
add_filter( 'comment_form_fields', 'reorder_textarea_comment_field' );

Przy pomocy tego samego filtru możemy też wyłączyć pole do dodawania adresu strony internetowej:

function remove_url_comment_field( $fields ) {
    if( isset( $fields['url'] ) ){
       unset( $fields['url'] ); return $fields;
    }
 }
 add_filter( 'comment_form_fields', 'remove_url_comment_field' );

Edycja szablonu komentarzy i funkcja wp_list_comments()

Podobnie sprawa wygląda z generowaniem formularzy. Na początek warto sprawdzić czy są jakieś komentarze:

if (get_comments_number() > 0) :
    wp_list_comments($comments_args);
endif;

Tak jak w przypadku formularza, funkcja wp_list_comments() przyjmuje wiele argumentów. W jednej z ostatnich realizacji dostosowywałem wielkość awatara i zmieniałem styl z listy nieuporządkowanej na elementy div:

$comments_args = array(
   "avatar_size" => 38,
   "style"       => "div"
);

Funkcja wp_list_comment pozwala dodawać niestandardowy kod HTML przed i po każdym komentarzu. Argumenty pozwalają nawet definiować własny walker, który pozwoli zapanować nad mechanizmem zagnieżdżania. Wiele przykładów jest zamieszczonych w dokumentacji, do której prowadzi czwarty link w źródłach.

Aby zademonstrować jak edytować szablon komentarzy posłużę się gotowym przykładem klasy wp-bootstrap-comment-walker. Znalazłem dwie implementacje – jedna dla Bootstrapa w wersji 3. i druga dla wersji 4:

Nie ma najmniejszego problemu aby dostosować je do Bootstrapa 5 lub innego frameworka CSS. Do pliku functions.php dodajemy obsługę html5 dla elementu comment-list:

function custom_theme_setup() {
   add_theme_support( 'html5', array( 'comment-list' ) );
}
add_action( 'after_setup_theme', 'custom_theme_setup' );

Plik class-wp-bootstrap-comment-walker.php pobrany z jednego z podanych przykładów dodajemy do głównego folderu tworzonego motywu. W tworzonym pliku comments.php zawieramy plik:

require_once('class-wp-bootstrap-comment-walker.php');

W funkcji wp_list_comments() wykorzystujemy niestandardowy walker:

wp_list_comments( array(
   "style"      => "ol",
   "max_depth"  => 4,
   "short_ping" => true,
'walker' => new Bootstrap_Comment_Walker(),
));

Wszelkie szczegółowe zmiany wprowadzamy w pliku class-wp-bootstrap-comment-walker.php bo tam jest cały kod, który odpowiada za generowanie się każdego fragmentu kodu.

Za pomocą filtru comment_reply_link możemy zmienić napis na przycisku do dodawania odpowiedzi lub dodać ikonkę taką jaką widzimy na ilustracji powyżej:

function comment_reply_text( $link ) {
     $link = str_replace( 'Odpowiedz</a>', '<i class="ai-corner-up-left"></i>Odpowiedz</a>', $link );
     return $link;
 }
 add_filter( 'comment_reply_link', 'comment_reply_text' );

Szablon comments.php oraz zawartość walkera można otoczyć własnym kodem HTML lub dodać do niego dodatkowe elementy. Tak stworzony szablon można wykorzystać w wielu sytuacjach i wykorzystać go we własnych typach postów lub na stronie z produktami.

Podsumowanie

Implementacja komentarzy za pomocą natywnych funkcji WordPress pozwoli szybko zakodować formularz do ich wprowadzania oraz zaprojektować własny szablon HTML dyskusji pod postami. Funkcje comment_form() i wp_list_comments() przyjmują wiele argumentów, dzięki którym dostosujemy sposób generowania kodu HTML i bez wysiłku przekształcimy go do własnych celów. Gdyby to okazało się niewystarczające pozostają filtry a ostatecznym asem w rękawie WordPress dewelopera jest argument walker w funkcji wp_list_comments() z własnym szablonem pojedynczego komentarza.

Źródła

Oceń artykuł na temat: Programowanie komentarzy w szablonie WordPress
Średnia : 4.4 , Maksymalnie : 5 , Głosów : 9