Bootstrap Wordpress tutorial logo

Comments.php czyli formularz do dodawania komentarzy

autor: Robert

1 grudnia 2014

Skoro już prowadzimy bloga to chcemy by pod naszym wpisem pojawiały się komentarze. WordPress umożliwia własne ostylowanie pola dodawania komentarzy, więc skoro jest taka możliwość to tutaj również wykorzystamy sobie Bootstrapa.

Ten plik jest dość skomplikowany i wykorzystuje wiele z WordPressowych funkcji. Poniżej znajduje się lista wykorzystywanych w pliku comments.php

  • <?php if ( 'open' == $post->comment_status ) : ?> ta instrukcja sprawdza czy post ma włączoną możliwość komentowania
  • <?php comments_number( $zero = 'Bądź pierwsza/y', $one = '(1)', $more = ('%')); ?> wyświetla nam informacje w zależności od ilości komentarzy
  • <?php cancel_comment_reply_link(); ?> wyświetla link umożliwiający zrezygnowanie z komentarza
  • <?php if ( get_option( 'comment_registration' ) && !$user_ID ) : ?> jeśli komentować mogą tylko zarejestrowane osoby wyświetli się odpowiedni komunikat
  • <?php echo wp_login_url( get_permalink() ); ?> wyświetli linka prowadzącego do logowania
  • <?php echo get_option('siteurl'); ?>/wp-comments-post.php wygeneruje link w formularzu służący do wysłania komentarza
  • <?php echo get_option( 'siteurl' ); ?>/wp-admin/profile.php" wygeneruje link do profilu zalogowanego użytkownika
  • <?php echo $user_identity; ?> wyświetli nazwę zalogowanego użytkownika
  • <?php echo wp_logout_url( get_permalink() ); ?> wygeneruje link służący do wylogowania się
  • <?php if ( $req ) echo "( wymagane )"; ?> jeśli obowiązkowe jest podanie imienia w komentarzu, zostanie wyświetlony odpowiedni komunikat
  • <?php echo $comment_author; ?> wstawi w wartość value formularza imię autora komentarza
  • <?php echo $comment_author_email; ?> wstawi w wartość value formularza email autora komentarza
  • <?php do_action( 'comment_form', $post->ID ); comment_id_fields(); ?> zapisze komentarz pod wpisem

Tak więc zaczynamy

Otoczymy nasz formularz divem z klasą .col-md-8 aby nie był on zbyt szeroki. Następnie sprawdzamy za pomocą instrukcji <?php if ( 'open' == $post->comment_status ) : ?> czy post ma możliwość komentowania.

Teraz wyświetlimy sobie tekst „Komentarz” otoczony znacznikiem H3 wewnątrz którego w znaczniku small umieścimy funkcję wyświetlającą ilość komentarzy <?php comments_number( $zero = 'Bądź pierwsza/y', $one = '(1)', $more = ('%')); ?>. Jak się pewnie domyślacie, w przypadku braku komentarzy mamy wiadomość ‚Bądź pierwsza/y’, w przypadku jednego komentarza zobaczymy ‚(1)’ natomiast w przypadku większej ilości, znak % zamieni się na ilość komentarzy.

Teraz umieścimy sobie linka z możliwością rezygnacji odpowiedzi na umieszczony już komentarz. Wykorzystujemy do tego funkcję <?php cancel_comment_reply_link(); ?>. Zauważcie, że link ten wyświetla się jedynie jeśli odpowiadamy na komentarz a nie tworzymy nowy.

Kolejnym elementem jest użycie instrukcji warunkowej, która w przypadku obowiązku rejestracji wyświetli odpowiedni komunikat, jeśli takiego obowiązku nie ma, wygenerujemy formularz. Instrukcja o której mowa wygląda następująco: <?php if ( get_option( 'comment_registration' ) && !$user_ID ) : ?> a komunikat: <p>Musisz być <a href="<?php echo wp_login_url( get_permalink() ); ?>">zalogowany</a> aby móc komentować.</p> gdzie <?php echo wp_login_url( get_permalink() ); ?> wyświetli linka prowadzącego do logowania.

Skoro mamy już komunikat mówiący o zalogowaniu (pewnie i tak udostępnimy komentowanie wszystkim:)) przechodzimy do generowania formularza. Skoro mieliśmy już instrukcję „if” to teraz pora na jej dalszą część czyli „else”. Tak więc piszemy: <?php else : ?> i otwieramy sobie formularz, który wyśle nasz komentarz.

Początek formularza wygląda następująco: <form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">. Teraz wyświetlimy sobie komunikat dla zalogowanych użytkowników. Najpierw instrukcją warunkową <?php if ( $user_ID ) : ?> sprawdzamy czy użytkownik jest zalogowany, jeśli tak to za pomocą kodu: Zalogowany jako: <a href="<?php echo get_option( 'siteurl' ); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo wp_logout_url( get_permalink() ); ?>" title="Wyloguj się z tego konta">Wyloguj się »</a> pobieramy link do jego profilu, wyświetlamy nazwę użytkownika, oraz wyświetly link umożliwiający wylogowanie.

Jeśli użytkownik nie jest zalogowany przechodzimy do wyświetlania właściwej części formularza. Zaczynamy od <?php else : ?> gdyż wcześniej użyliśmy instrukcji „if” co można czytać następująco: Jeśli(if) użytkownik jest zalogowany to najpierw wyświetl jego dane, w przeciwnym razie(else) wyświetl od razu formularz.

Teraz będziemy korzystali ze standardowych Bootstrapowych formularzy. Tworzymy sobie zatem label czyli etykietkę naszego pola, która może zawierać kod: <?php if ( $req ) echo "( wymagane )"; ?>, dzięki czemu, gdy pole to jest wymagane do wysłania komentarza, zostanie wyświetlony stosowny komunikat. Kolejnym elementem jest pole do wprowadzenia wartości. Tutaj w elemencie „value” musimy wkleić:

  • dla pola z imieniem autora komentarza
  • dla pola z mailem autora komentarza

Na koniec umieszczamy element „textarea” czyli pole do treści komentarza.

W komentarzu możemy umieścić niektóre element HTMLa, jeśli chcemy poinformować o nich użytkownika, pod polem treści komentarza możemy umieścić funkcję <?php echo allowed_tags(); ?>, która wyświetli nam dozwolone znaczniki.

Pozostaje nam jeszcze utworzenie przycisku służącego do wysłania komentarza czyli znacznika input z klasą .btn oraz type="submit"

Co ważne, zanim zamkniemy formularz, musimy w nim umieścić jeszcze funkcję <?php do_action( 'comment_form', $post->ID ); comment_id_fields(); ?>, która dołączy do formularza niezbędne dla WordPressa informacje. Na sam koniec zamykamy diva z klasą .col-md-8

Teraz odwołamy się do naszego pliku functions.php gdzie, jak pamiętacie napisaliśmy sobie funkcję, która zmieniała nam wygląd listy komentarzy

Otwieramy sobie zatem diva z klasą .col-md-12 wewnątrz którego umieszczamy funkcję

<?php wp_list_comments(
    array(
      'type'      =>  'comment',
      'callback'  =>  'comments_feed_template_callback'
    )
  ); ?>

Gdzie type będzie miał wartość comment a callback będzie miał wartość comments_feed_template_callback czyli będzie się odwoływał do naszej funkcji o tej samej nazwie w pliku functions.php.

Myślę, że w tym przypadku łatwiej czyta się sam kod niż taki jego opis, ale różnie to bywa dlatego go dla Was przygotowałem. Starałem się by był jak najbardziej zrozumiały i mam nadzieję, że taki jest:)

Przejdź do przykładowej strony
Patryk 30 grudnia 2014 o 19:48

Jak będzie wyglądał plik comments.php oraz functions.php ??

Odpowiedz
Marcin 2 sierpnia 2015 o 21:12

Jak wyłączyć wgl na stronie dodawanie komentarzy i ich wyświetlanie? żeby były tylko wpisy

Odpowiedz
Adam 27 marca 2016 o 13:40

extra

Odpowiedz