WordPress Sensei

Vlastní WordPress šablona #5 – Komentáře

Komentáře jsou nedílnou součástí každého blogu. Kam by to svět dotáhl, kdyby čtenáři nemohli ukazovat love nebo prokazovat nesmiřitelný hate. Nicméně aby komentáře fungovaly v šabloně správně, je třeba je vložit „in WordPress way“. Tedy pomocí těch správných funkcí. A ty si nyní ukážeme.

Implementace komentářů se dá rozdělit na dvě části: jejich zobrazení a vložení formuláře pro jejich odesílání.

Zobrazení komentářů

Základní zobrazení je poměrně jednoduché. Stačí vytvořit soubor comments.php a do něj vložit následující kód:

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

A v místě, kde chcete komentáře zobrazovat (v našem případě je dáme do singular.php) tuto šablonu zavoláte pomocí funkce comments_template(). Podobně jako při volání patičky či hlavičky je možné volat pro každou stránku jinou šablonu. Tentokrát jako parametr ale musíte zvolit název soubor. Pokud byste tedy chtěli komentáře vykreslit pomocí souboru comment-special.php, zavolali byste si funkci comments_template(‘comment-special.php’).

K užitku vám u funkce wp_list_comments() bude i několik parametrů:

  • style – může být div, ul a li na základě kontejneru v jakém budete komentáře vypisovat. Pokud půjde o číslovaný seznam použijete kód: 
    <ol class='commentlist'>
    <?php wp_list_comments(array('style' => 'ol')); ?>
</ol>
  • avatar_size – velikost avatara, může být od 1 do 512
  • reverse_top_level – pomocí tohoto parametru lze obrátit řazení komentáře, pokud ho nastavíte na true, budou se první zobrazovat nejnovější

K dispozici je samozřejmě více parametrů, jejich kompletní seznam naleznete na WordPress Codexu. Nezapomeňte že samotný vzhled komentářů si sami musíte upravit v kaskádových stylech. Existuje i pokročilejší možnost, jak upravovat html šablonu komentářů.

Vlastní html šablona pro komentáře

V základním stavu vám funkce wp_list_comments() vypíše veškeré HTML pěkně podle sebe, ale i tento výstup je možné customizovat. Stačí použít parametr callback:

<ol class='commentlist'>
    <?php wp_list_comments(array(
        'style' => 'ol', 
        'avatar_size' => 124, 
        'callback' => 'dc_comment_render'
        )
    ); ?>
</ol>

Při vykreslení každého komentáře komentáře se zavolá funkce dc_comment_render(). Všechny parametry jsou do ní injektovány a tato renderovací funkce by je měla respektovat. Tedy jak velikost avatara, tak například tag name kontejneru.

Funkce může vypadat takto:

function dc_comment_render($comment, $args, $depth)
{ 
    $wrap = $args['style'] == 'div' ? 'div' : 'li';
    ?>
    <<?php echo $wrap;?> <?php comment_class(); ?> id='li-comment-<?php comment_ID(); ?>'>
        <div id='comment-<?php comment_ID(); ?>' class='comment'>
            <header class="comment-meta comment-author vcard">
                <?php echo get_avatar($comment, $args['avatar_size']); ?>
                <cite class="fn">
                    <?php echo get_comment_author_link(); ?>
                    <a href="<?php echo esc_url( get_comment_link( $comment->comment_ID ) ); ?>">
                        <time datetime="<?php echo  get_comment_time( 'c' );?>">
                            <?php echo get_comment_date(); ?> <?php echo get_comment_time(); ?>
                        </time>
                    </a>
                </cite>
            </header>

            <?php if($comment->comment_approved == '0') { ?>
                <p class="comment-awaiting-moderation">Komentář čeká na schválení.</p>
            <?php } ?>

            <section class="comment-content comment">
                <?php comment_text(); ?>
            </section>

            <div class="reply">
                <?php comment_reply_link(
                    array_merge(
                        $args, 
                        array(
                            'depth' => $depth, 
                            'max_depth' => $args['max_depth']
                            )
                        )
                    ); 
                ?>
            </div>
        </<?php echo $wrap;?>>
    <?php
}

Co byste neměli přehlédnout:

  • Používejte funkci comment_class() pro generování tříd kaskádových stylů.
  • Nezapomeňte doplnit informaci o tom, zda komentář čeká na schválení.
  • Nezapomeňte doplnit link reply, aby lidé mohli na jednotlivé komentáře reagovat. Plus je dobré použít wp_enqueue_script(‘comment-reply’). Díky tomuto javascriptu se po kliku na „Odpovědět“ neprovede refresh a návštěvník bude moci hned odpovídat.
  • WordPress na jednotlivé komentáře odkazuje přes kotvu #comment-{ID}, takže jim nechte jejich id: comment-<?php comment_ID(); ?>

Zobrazení počtu komentářů

Ještě je běžné pod článkem zobrazit aktuální počet komentářů nebo výzvu, aby se návštěvník stal Kolumbem a udělal první krok.

Na začátku jsme pro zobrazení komentářů použili funkci comments_template(). Teď ji ještě budeme muset trochu upravit, aby referovala nastavení WordPressu.

<?php if (comments_open() || get_comments_number()) { ?>
    <?php comments_template(); ?>
<?php } ?>

Nechceme, aby se komentářová šablona zobrazila v případě, že komentáře jsou vypnuté. Jedinou výjimkou je situace, když už zde nějaké komentáře jsou a ty je třeba zobrazit. Kód pro vypsání nadpisu vypadá následovně:

    <h3 id="comments">
        <?php
            if (get_comments_number() == 1) {
                printf(__('One Response to %s'), '„' . get_the_title() . '“');
            } else {
                printf(_n('%1$s Response to %2$s', '%1$s Responses to %2$s', get_comments_number()),
                    number_format_i18n(get_comments_number()), '„' . get_the_title() . '“');
            }
        ?>
    </h3>

Určitě jste si všimli, že scripty obsahují funkci __() a _n(). Jde o překlady. Zatím se jím snažím vyhnout a v nějaké z dalších kapitol si ukážeme jak na ně. Ještě musím vypíchnout, že komentářová část by měla obsahovat id comments, protože WordPress na tuto kotvu často odkazuje.

Formulář pro komentář

Opět nám pro základní funkcionalitu postačí jedna obyčejná funkce:

<?php if (comments_open()) { ?>
    <?php comment_form(); ?>
<?php } ?>

I comment_form() má parametry, kterými můžete formulář trochu customizovat, ale jde spíše už o pokročilejší úpravy, které zde nebudu ukazovat. Projít si je můžete na WordPress codexu. Umožňují i částečné změny v HTML struktuře, ale tomu se snažte vyhnout. Pokud použijete funkci comment_form() v jednoduché formě, budou moci s komentářovým formulářem pracovat další pluginy.

O nic dalšího se není třeba starat, WordPress si to už zařídí sám

Aktuální stav

V dnešním díle jsme si do šablony přidali komentáře. Pro vypisování používáme custom funkci dc_comment_render(), takže si můžeme definovat vlastní HTML. U formuláře se držíme standardního comment_form() bez jakýchkoliv parametrů.

Aktuální zdrojové kódy si můžete zobrazit na GitHubu.

Michal Ozogán