WordPress, zmiana wyglądu komentarzy

Komentarze w WordPress, a właściwie ich wygląd, można zmieniać na wiele różnych sposobów. Jednym z łatwiejszych sposobów jest zwykłe kombinowanie z CSS i praca z domyślnie wygenerowanym przez WordPress kodem. Czasem wystarczy prosty skrypt JavaScript do podmienienia kolejności bloków.

W wielu przypadkach można na prawdę sporo w ten sposób osiągnąć, jednak nie zawsze to wystarcza. Co zrobić, gdy przy próbie stworzenia bardziej kreatywnego efektu sam CSS już nie daje rady? Została jeszcze jedna opcja, dzięki której możliwe będzie napisanie całej struktury wyświetlanych komentarzy zupełnie od zera, dokładnie tak, jak tego potrzebujemy.

WordPress po prostu komentarze

W jednym z pierwszych tutaj wpisów pisałem już o tym łatwiejszym sposobie (komentarze na blogu),  więc tutaj wspomnę tylko o najważniejszych rzeczach.

Aby wyświetlić komentarze przy danym wpisie na blogu, w pliku comments.php aktywnego motywu wystarczy wywołać odpowienidą funkcję, która zrobi za nas resztę:

<ul class="commentlist">
   <?php wp_list_comments(); ?>
</ul>

Wygenerowany przez WordPress kod komentarzy wygląda następująco (dla uproszczenia usunąłem zbędne linki, atrybuty i identyfikatory, które nie są szczególnie ważne przy „stylowaniu” komentarzy):

<ul class="commentlist">
  <li class="comment">
    <div class="comment-body">
        <div class="comment-author">
            <img alt='' src='' class='avatar avatar-32 photo' />        
            <cite class="fn">admin</cite> <span class="says">pisze:</span>        
        </div>
        <div class="comment-meta commentmetadata">
            <a href="">14 lipca 2013 o 10:27</a>
            &nbsp;&nbsp;
            <a class="comment-edit-link" href="" title="Edytuj komentarz">(Edytuj)</a>
        </div>
        <p>Tutaj treść komentarza</p>
        <div class="reply">
            <a class='comment-reply-link'>Odpowiedz</a>
        </div>
    </div>
    <ul class="children">
    <!-- odpowiedzi do komentarza -->
    </ul>
  </li>
</ul>

Mając taki schemat kodu HTML, oraz korzystając z dostępnych w nim klas, można osiągnąć wiele ciekawych efektów. Problem, który osobiście zauważyłem i  bardzo mi przeszkadzał był taki, że treść komentarza nie jest w swoim bloku, zamiast tego akapity komentarza pojawiają się tak jakoś dziwnie pomiędzy innymi blokami. Być może to tylko ja, ale w większości szablonów, które obejrzałem praktycznie wszystkie miały swoją funkcję poprawiającą ten problem.

Oczywiście nie robi się czegoś tylko dlatego, że inni tak robią, ale czasem po prostu szybciej jest napisać funkcję generującą kod „po naszemu” niż kombinowanie ze starym kodem.

Komentarze – piszemy własny Walker do generowania komentarzy

Pierwsza sprawa, to poprawienie wywołania funkcji w comments.php:

<ul class="commentlist">
    <?php wp_list_comments(array('avatar_size' => 56, 'callback' => 'nd_comments')); ?>
</ul>

Do funkcji generującej komentarze, czyli wp_list_comments(), dopisałem tablicę z dodatkowymi parametrami, które pozwolą na zmianę wielkości awatara pobieranego z serwerów gravatara, oraz zdefiniowanie 'callbacka’, który wywoła naszą funkcję do wygenerowania komentarzy.

Teraz otwieramy do edycji plik functions.php, w którym zapiszemy wspomnianą funkcję, generującą komentarze „po naszemu”. U mnie funkcja będzie się nazywać nd_comments.

Zaczynamy od sprawdzenia, czy funkcja istnieje:

if ( ! function_exists( 'nd_comments' ) ) {
  function nd_comments( $comment, $args, $depth ) {
    //ciało funkcji
  }
}

Teraz część sprawdzająca rodzaj komentarza (trackback, pingback, comment):

   $GLOBALS['comment'] = $comment;
    switch ( $comment->comment_type ) :
        case 'pingback' :
        case 'trackback' :
            ?>
            <li <?php comment_class(); ?> id="comment-<?php comment_ID(); ?>">
                <p><?php _e( 'Pingback:', 'newdivide' ); ?> <?php comment_author_link(); ?> <?php edit_comment_link( __( '(Edytuj)', 'newdivide' ), '<span>', '</span>' ); ?></p>
            <?php
        break;
        default :
        global $post;
    ?>

I teraz następuje właściwa część elementu listy, w którym znajdzie się treść komentarza, data jego opublikowania, informacje o autorze i jego awatar. Dobrym podejściem byłoby tutaj napisanie zwykłego kodu HTML, a następnie zastąpienie statycznych elementów na dynamiczne funkcje WordPressa, które zajmą się resztą.

Do wykorzystania w komentarzach można użyć np. następujących funkcji:

Funkcja do wygenerowania domyślnej klasy CSS dla elementu listy, w którym znajdzie się „ciało” komentarza.

comment_class();

Generuje element img z odwołaniem do pliku graficznego ustawionego przez użytkownika na gravatarze. Jako pierwszy parametr należy podać albo identyfikator autora, albo jego adres e-mail. Opcjonalnie jako drugi parametr, można podać rozmiar grafiki w pikselach (domyślny rozmiar to 96). Jako trzeci parametr, funkcja przyjmuje adres URL do pliku z grafiką dla użytkowników, którzy nie mają swoich profili na gravatarze, więc w tym miejscu możemy zdefiniować własny domyślny dla nich awatar.

get_avatar();

Funkcja zwraca odnośnik autora aktualnego komentarza:

get_comment_author_link();

Funkcja zwraca link HTML do komentarza:

get_comment_link();

Zwraca czas publikacji komentarza:

get_comment_time();

Zwraca datę publikacji komentarza:

get_comment_date();

Zwraca odnośnik html, który umożliwia przejście do edycji komentarza:

edit_comment_link();

Najważniejsze – wyświetla treść komentarza:

comment_text();

Zwraca link, który umożliwia dodawanie odpowiedzi do wybranego komentarza:

comment_reply_link();

I to w zasadzie wszystko, co będzie nam potrzebne.

Najlepszym sposobem na sprawdzenie, jak te funkcje działają i co zwracają jest podejrzenie któregoś z gotowych szablonów do WordPress.

Ja stworzyłem coś takiego:

if ( ! function_exists( 'nd_comments' ) ) :
/*
 * Template for comments and pingbacks.
 * Used as a callback by wp_list_comments() for displaying the comments.
 */
function nd_comments( $comment, $args, $depth ) {
    $GLOBALS['comment'] = $comment;
    switch ( $comment->comment_type ) :
        case 'pingback' :
        case 'trackback' :
            ?>
            <li <?php comment_class(); ?> id="comment-<?php comment_ID(); ?>">
                <p><?php _e( 'Pingback:', 'newdivide' ); ?> <?php comment_author_link(); ?> <?php edit_comment_link( __( '(Edytuj)', 'newdivide' ), '<span>', '</span>' ); ?></p>
            <?php
        break;
        default :
        global $post;
    ?>

        <li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>">
            <div class="comment-body">

                <div class="comment-avatar">
                    <?php echo get_avatar( $comment, 50 ); ?>
                </div>

                <div class="comment-meta">
                    <div class="comment-author">    
                        <?php printf( '<cite>%1$s</cite>', get_comment_author_link()); ?>        
                    </div>
                    <div class="comment-date">
                        <?php
                        printf( '<a href="%1$s"><time datetime="%2$s">%3$s</time></a>',
                            esc_url( get_comment_link( $comment->comment_ID ) ),
                            get_comment_time( 'c' ),
                            /* translators: 1: date, 2: time */
                            sprintf( __( '%1$s o %2$s', 'newdivide' ), get_comment_date(), get_comment_time() )
                        );    ?>
                        <?php edit_comment_link( __( 'Edytuj', 'newdivide' ), '&nbsp;(', ')' ); ?>                        
                    </div>

                </div>
                <div class="comment-content">

                    <?php if ( '0' == $comment->comment_approved ) : ?>
                        <p><?php _e( 'Twój komentarz oczekuje na moderację..', 'newdivide' ); ?></p>
                    <?php endif; ?>

                    <?php comment_text(); ?>
                </div>

                <div class="reply">
                    <?php comment_reply_link( array_merge( $args, array( 'reply_text' => __( 'Odpowiedz', 'newdivide' ), 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
                </div>

            </div>
        </li>
    <?php
        break;
    endswitch; // end comment_type check
}
endif;

//end nd_comments

Na zakończenie galeria komentarzy, która może kogoś zainspiruje 🙂