Dobrze zaprojektowana sekcja dyskusji na blogu to nie tylko strona wizualna ale także jej przyjazność i łatwość w obsłudze. W prawidłowo zaprojektowanej sekcji komentarzy już na pierwszy rzut oka powinno być widać, gdzie dany wątek komentarzy się zaczyna, a gdzie kończy. Guzik umożliwiający na odpowiadanie do komentarzy powinien być widoczny ale nie powinien w niczym przeszkadzać. Równie ważne jest jest wyraźne zaznaczenie odpowiedzi do danego komentarza, tak aby kolejne wypowiedzi do artykułu nie zlewały się z dyskusją pomiędzy użytkownikami.
To i wiele więcej w tym artykule!
Własny szablon WP – Jak zrobić profesjonalnie wyglądające komentarze na blogu
W poprzednim wpisie tj. WordPress formularz komentarzy – modyfikacja i zmiana wyglądu, pisałem jak w „czystym” motywie WordPress dodać zestaw reguł CSS, które znacząco poprawią wygląd formularza do dodawania komentarzy, a dzisiaj w podobnym stylu zajmiemy się wyświetlaniem komentarzy.
Jeżeli dodasz do wybranego wpisu kilka testowych komentarzy, to zobaczysz, że nie wyglądają one zbyt schludnie i nie do końca wiadomo, co do czego się odnosi, gdzie jest początek jednego, a gdzie koniec drugiego wątku. Obrazek po prawej stronie przedstawia aktualny wygląd sekcji komentarzy na moim blogu.
Edytujemy comments.php
Zacznijmy od początku. Poniżej zamieszczam lekko zmodyfikowaną, w stosunku do wpisu o dodawaniu dyskusji do bloga, wersję kodu z mojego pliku [wpa_comments]comments.php[/wpa_comments].
<?php
if ( have_comments() ) : ?>
<h2>Komentarze do wpisu <span class="italic"><?php comments_number('Dadaj komentarz jako pierwszy!', '(Jeden komentarz)', '(% komentarze/y)' );?></span></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 mój wpis jako pierwszy!</p>
<?php else : ?>
<p class="italic">Komentowanie tego wpisu zostało zamknięte!</p>
<?php
endif;
endif;
$new_defaults = array(
'comment_notes_after' => '',
'title_reply' => 'Dodaj swoją odpowiedź w tym temacie'
);
comment_form($new_defaults);
?>
Dużo się tutaj nie zmieniło, a raczej naniesionych zostało tylko kilka kosmetycznych zmian. Tutaj to na razie tyle, reszta zupełnie mnie satysfakcjonuje.
Dobra, przejdźmy teraz do właściwej części artykułu…
WordPress – całkowita zmiana wyglądu komentarzy
Aby nadać reguły CSS do komentarzy, musimy wiedzieć jak są one zbudowane. Żeby stwierdzić z jakich identyfikatorów i klas korzysta system komentarzy w WordPress (pomijając powyższy kod pętli, który dostarcza nam tylko część tych informacji), musimy zajrzeć do kodu źródłowego wygenerowanej strony, na której mamy już kilka komentarzy.
Początek sekcji komentarzy, przynajmniej w moim przypadku, rozpoczyna nagłówek <h2>Komentarze do wpisu[...]</h2>, a kończy ją formularz dodawania komentarzy (formularz znajduje się w bloku z identyfikatorem #respond), więc w źródle strony szukam fragmentu kodu znajdującego się pomiędzy tymi elementami. Poniżej zamieszczam przykładu, jak może wyglądać wygenerowana sekcja komentarzy na waszej stronie:
<h2>Komentarze do wpisu <span class="italic">(4 komentarze/y)</span></h2>
<ul class="commentlist">
<li class="comment byuser comment-author-admin bypostauthor even thread-even depth-1" id="comment-2">
<div id="div-comment-2" class="comment-body">
<div class="comment-author vcard">
<img alt='' src='' class='avatar avatar-32 photo' height='32' width='32' />
<cite class="fn">ziemekpr0</cite> <span class="says">pisze:</span>
</div>
<div class="comment-meta commentmetadata">
<a href="#">28 grudnia 2012 o 14:11</a>
<a class="comment-edit-link" href="#" title="Edytuj komentarz">(Edytuj)</a>
</div>
<p>Testowy komentarz</p>
<div class="reply">
<a class='comment-reply-link' href='#'>Odpowiedz</a> </div>
</div>
</li>
</ul>
<div class="navigation">
<div class="alignleft"></div>
<div class="alignright"></div>
</div>
I w tym miejscu, należy zauważyć, że tego kodu jest całe mnóstwo, a jest to jedynie jeden komentarz! Z jednej strony – ok, dla każdego elementu mamy praktycznie oddzielną klasę, więc łatwo możemy zapisać reguły CSS do tego do czego chcemy, z drugiej – średnia znajomość CSS i pojęcie o dziedziczeniu dały by nam ten sam efekt, ale z krótszym i bardziej czytelnym kodem.
Więc tak, wszystkie komentarze znajdują się w elemencie niesortowanej listy <ul> z klasą .commentlist. Każdy element listy, czyli <li>, to oddzielny komentarz z klasą .comment. W elemencie listy może pojawić się jeszcze sekcja wątku komentarzy (zagnieżdżone komentarze; zagnieżdżona lista <ul> z klasą .children), czyli odpowiedzi do komentarzy. Domyślnie, WordPress pozwala na 4-stopniowe zagnieżdżenie wątków komentarzy, a nasz profesjonalny szablon oczywiście musi sobie z tym poradzić!
WordPress zmiana wyglądu komentarzy
Tym razem zacznę od końca -sprawimy, aby odpowiedzi do odpowiedzi posiadały odpowiednie wcięcie, które zaznaczy, gdzie dany wątek komentarzy się zaczyna a gdzie kończy. Do wszystkich list podrzędnych, czyli tych z klasą .children dodajemy „wcięcie” od lewej:
.commentlist .children {
margin-left: 10px;
}
A teraz jak zrobić, aby co drugi komentarz, miały inny kolor? Lub inaczej, jak ustawić inne tło dla komentarzy sąsiadujących? Do komentarzy dodawanych jest całe mnóstwo klas. Do tego konkretnego celu możemy użyć co najmniej kilku:
.even– wszystkie komentarze parzyste opatrzone są tą klasą.odd– jw. dla komentarzy nieparzystych.thread-even– chodzi o parzyste wątki komentarzy.thread-odd– jw. tylko chodzi o nieparzyste wątki
Dwie ostatnie klasy możemy łączyć z .even i .odd aby uzyskać efekt, że np. wszystkie wątki parzyste będą miały pokolorowane nieparzyste komentarze, a wątki nieparzyste, komentarze parzyste, lub odwrotnie. Zachęcam do eksperymentowania, bo wygląda na to, że można uzyskać bardzo ciekawe efekty. 🙂
Więc tak, u mnie wszystkie elementy list, czyli wszystkie komentarze, będą miały tło koloru białego, a komentarze nieparzyste innego, zapis tego w CSS mógłby wyglądać tak:
.commentlist li {
background-color: #fff; /*kolor biały*/
}
.commentlist li.odd{
background: #f9f9f9; /*kolor lekko szarawy*/
}
Zauważ, że pod uwagę są brane wszystkie elementy list – li, nawet te, które należą do list zagnieżdżonych.
Cała reszta, to umiejętne wykorzystanie możliwości arkuszy stylów CSS – lokalizujemy klasę elementu, który chcemy zmienić, i dodajemy do niej odpowiednie właściwości. Poniżej zamieszczam wszystkie moje reguły odpowiedzialne za komentarze i krótkie wyjaśnienie, co do czego i po co:
.commentlist li:last-child, ul.children li:last-child{ /*chodzi o zaznaczenie ostatniego elementu list i dodanie do nich dolnej krawędzi*/
border-bottom:solid #ddd 1px;
}
.commentlist li { /* wszystkie kmentarze */
background-color: #fff; /* biale tlo */
border:solid #ddd 1px; /* krawedz z wszystkich stron */
border-bottom:none; /* dolna krawedz */
}
.commentlist li.odd{ /* komentarze nieparzyste */
background: #f9f9f9; /* lekko szarawe tlo */
}
.comment .fn, .comment .fn a{ /* autor komentarza */
font-size: 12px;
color: #3F6AA2;
font-weight: bold;
}
.comment .reply{ /* 'pojemnik' w którym znajduje się link 'Odpowiedz' */
text-align:right; /* wyrównanie tekstu do prawej, bo chcę aby był po prawej stronie */
}
.comment-reply-link{ /* link 'Odpowiedz' */
font-style: italic; /* czcionka pochylona */
font-size: 11px; /* rozmiar czcionki */
color: #3F6AA2; /* kolor niebieski */
}
.commentlist .children {
list-style: none; /* usuniecie punktora listy */
margin-left: 10px; /* zewnętrzny margines od lewej */
padding: 10px; /* wewnętrzny margines z wszystkich stron */
}
.commentlist .avatar { /* obrazek komentatora, avatar */
float: left; /* przyleganie do lewej */
margin-right: 10px; /* margines po prawej */
padding: 0; /* margines wewnętrzny */
vertical-align: middle; /* pionowe położenie */
}
.comment-author .says { /* tekst 'pisze' kolo nicku autora */
color: #999; /* kolor czcionki */
}
.comment-body .comment-meta { /* 'pojemnik' w którym znajduje się między innymi data komentarza */
color: #999;
display: inline-block; /* wyświetlanie jako element liniowy */
margin: 0;
padding: 0;
text-align: left;
}
.comment-body .comment-meta a { /* linki w pojemniku daty komentarza, np 'Edytuj' */
font-size: 11px;
}
.comment-body{ /* 'ciało' komentarza */
clear: both; /* sprawia, że ani z lewej ani z prawej strony komentarza nie wyświetla się nic innego */
padding: 10px;
}
.comment-body p {
clear: both;
}
Efekt jest następujący:
WordPress zmiana wyglądu komentarzy
I to już wszystko.
Aktualizacja 2017-07-09
Ten wpis przeszedł gruntowną aktualizację aby sprawdzić, czy jest nadal aktualny. Dodałem wiele nowych wyjaśnień ale także wiele z nich bardziej rozwinąłem. Usunąłem niepotrzebne lanie wody i zostały same konkrety. 🙂
Jeżeli masz jakieś pytania do tego tematu, to zapraszam do sekcji komentarzy poniżej.
