Jak stylizować układ komentarzy w WordPress

Niedawno pokazaliśmy Wam jak stylizować formularz komentarzy WordPress i pomyśleliśmy, że byłoby to niekompletne, gdybyśmy nie napisali o stylizacji układu komentarzy WordPress. W przeszłości omawialiśmy, że istnieją domyślne klasy i identyfikatory CSS generowane przez WordPress, aby ułatwić projektantom motywów stylizację ich szablonów. W tym artykule użyjemy tych domyślnych klas, aby pokazać Wam, jak stylizować układ komentarzy WordPress i niektóre z fajnych rzeczy, które możecie z tym zrobić.

Dla celów tego przykładu będziemy modyfikować domyślny motyw Twenty Twelve WordPress w tym artykule. Uwaga: Ten artykuł jest przeznaczony dla początkujących projektantów motywów i użytkowników DIY, którzy mają dobre pojęcie o HTML i CSS.

Domyślne klasy komentarzy WordPress

Domyślnie WordPress generuje następujące klasy dla elementów w szablonie komentarzy:

/*Comment Output*/

.commentlist .reply {}
.commentlist .reply a {}

.commentlist .alt {}
.commentlist .odd {}
.commentlist .even {}
.commentlist .thread-alt {}
.commentlist .thread-odd {}
.commentlist .thread-even {}
.commentlist li ul.children .alt {}
.commentlist li ul.children .odd {}
.commentlist li ul.children .even {}

.commentlist .vcard {}
.commentlist .vcard cite.fn {}
.commentlist .vcard span.says {}
.commentlist .vcard img.photo {}
.commentlist .vcard img.avatar {}
.commentlist .vcard cite.fn a.url {}

.commentlist .comment-meta {} 
.commentlist .comment-meta a {}
.commentlist .commentmetadata {}
.commentlist .commentmetadata a {}

.commentlist .parent {}
.commentlist .comment {}
.commentlist .children {}
.commentlist .pingback {}
.commentlist .bypostauthor {}
.commentlist .comment-author {}
.commentlist .comment-author-admin {}

.commentlist {}
.commentlist li {}
.commentlist li p {}
.commentlist li ul {}
.commentlist li ul.children li {}
.commentlist li ul.children li.alt {}
.commentlist li ul.children li.byuser {}
.commentlist li ul.children li.comment {}
.commentlist li ul.children li.depth-{id} {}
.commentlist li ul.children li.bypostauthor {}
.commentlist li ul.children li.comment-author-admin {}

#cancel-comment-reply {}
#cancel-comment-reply a {}

Jak znaleźć klasy CSS, które musisz edytować

Zanim przejdziemy do stylizacji układu komentarzy WordPress, mała wskazówka dla naszych nowych użytkowników. Przeglądarki internetowe Google Chrome i Mozilla Firefox posiadają przydatne narzędzie, które możesz wykorzystać do poprawy swoich umiejętności tworzenia motywów WordPress. Narzędzie to nazywa się Inspektor elementów. Po prostu najedź kursorem myszy na element na stronie internetowej, kliknij prawym przyciskiem myszy i wybierz „Inspektor elementów”. Okno przeglądarki podzieli się na dwie części, a w dolnym oknie zobaczysz kod źródłowy tego elementu. Również w dolnym oknie będziesz mógł zobaczyć elementy CSS i sposób ich stylizacji. Możesz nawet edytować CSS w tym miejscu w celach testowych. Ważne jest, aby pamiętać, że wszystko, co zmienisz za pomocą Inspektora elementów, jest widoczne tylko dla Ciebie. W momencie odświeżenia strony te zmiany znikną. Aby zmiany były trwałe, musisz użyć pliku style.css lub innych odpowiednich plików w swoich motywach.

Dodawanie kolorów tła dla nieparzystych i parzystych komentarzy

Posiadanie innego koloru tła dla nieparzystych i parzystych komentarzy jest trendem projektowym, który istnieje od kilku lat. Pomaga to w czytelności, zwłaszcza jeśli masz dużo komentarzy. Wygląda również bardzo dobrze z pewnymi kolorami motywu, dlatego wielu projektantów chce wykorzystać tę funkcjonalność. Aby pomóc projektantom osiągnąć ten cel, WordPress dodaje odpowiednio klasę nieparzystą i parzystą do każdego komentarza.

Możesz łatwo dodać stylizację nieparzystych/parzystych dla komentarzy w pliku style.css swojego motywu, wklejając poniższy kod.

.commentlist .even .comment { 
background-color:#ccddf2; 
} 
.commentlist .odd .comment {
background-color:#CCCCCC;
}

Wynik wyglądałby mniej więcej tak:

Stylizacja autora komentarza i informacji meta

WordPress dodaje również klasy do elementów wyświetlanych w nagłówku każdego komentarza. Pozwala to projektantom motywów na dostosowanie wyświetlania informacji o autorze i innych metadanych komentarza, takich jak data i godzina komentarza. Oto przykładowy kod do wklejenia w pliku style.css Twojego motywu, aby inaczej stylizować te elementy. W tym przykładzie dodaliśmy kolor tła do metadanych komentarza wraz z pewnym odstępem.

.comments-area article header {
	margin: 0 0 48px;
	overflow: hidden;
	position: relative;
	background-color:#55737D;
	color:#FFFFFF;
	padding: 10px;
}

Tak to powinno wyglądać:

Różne style komentarzy autora posta

Często można zauważyć, że komentarze autora wpisu są wyróżnione innym kolorem tła lub dodatkową odznaką. WordPress dodaje domyślną klasę bypostauthor do wszystkich komentarzy wykonanych przez autora wpisu. Projektanci motywów WordPress mogą używać tej klasy do odmiennego stylizowania komentarzy autora wpisu.

Niektóre motywy używają własnej funkcji zwrotnej do wyświetlania komentarzy. Korzystając z funkcji zwrotnej, te motywy mogą dodawać dodatkowe informacje do komentarza od autora posta. Na przykład, Twenty Twelve używa następującej linii w funkcji zwrotnej komentarza twentytwelve_comment() (znajdującej się w pliku functions.php motywu).

// If current post author is also comment author, make it known visually.

( $comment->user_id === $post->post_author ) ? '<span> ' . __( 'Post author', 'twentytwelve' ) . '</span>' : '' );

Ten kod dodaje <span>Post Author</span> do metadanych komentarza. W zależności od tego, jak Twój motyw WordPress obsługuje komentarze autora posta, możesz to zmodyfikować do czegokolwiek chcesz.

Jeśli używasz innego motywu niż Twenty Twelve, musisz dowiedzieć się, jak Twój motyw obsługuje komentarze. Po prostu otwórz plik comments.php swojego motywu. Jeśli Twój motyw używa własnej funkcji zwrotnej, zobaczysz ją w funkcji wp_list_comments, w ten sposób:

<?php wp_list_comments( array( 'callback' => 'twentytwelve_comment', 'style' => 'ol' ) ); ?>

W powyższym przykładzie widać, że motyw używa twentytwelve_comment jako funkcji zwrotnej. Jeśli określono funkcję zwrotną, najbardziej prawdopodobnym miejscem do znalezienia tej funkcji jest plik functions.php Twojego motywu.

W tym przykładzie zmieniamy tę funkcję, aby zamiast Autora wpisu wyświetlać Edytora. Aby to zrobić, zmodyfikowaliśmy funkcję zwrotną komentarza w następujący sposób:

// If current post author is also comment author, make it known visually.

( $comment->user_id === $post->post_author ) ? '<span> ' . __( 'Editor', 'twentytwelve' ) . '</span>' : '');

Zmienimy również sposób jego wyświetlania, dodając następujący kod w pliku style.css naszego motywu w następujący sposób:

li.bypostauthor cite span {
	color: #21759b;
	background-color: #f8f0cb;
	background-image: none;
	border: 1px solid #f8f0cb;
	border-radius: 3px;
	box-shadow: none;
	padding: 3px;
	font-weight:bold;
}

Tak to by wyglądało:

Stylizacja linku odpowiedzi na komentarz w komentarzach WordPress

Większość motywów WordPress ma link „Odpowiedz” poniżej każdego komentarza. Ta funkcjonalność jest wyświetlana tylko wtedy, gdy masz włączone komentarze wątkowe. Aby włączyć komentarze wątkowe, przejdź do panelu administracyjnego WordPress (Ustawienia » Dyskusja). Poszukaj sekcji z innymi ustawieniami komentarzy i zaznacz pole wyboru „Włącz komentarze wątkowe (zagnieżdżone)”.

Domyślne klasy CSS generowane przez WordPress dla linku odpowiedzi to reply i comment-reply-link. Użyjemy tych klas do modyfikacji linku odpowiedzi i przekształcenia go w przycisk CSS.

.reply { 
	float:right;
	margin:0 10px 10px 0;
	text-align:center;
	background-color: #55737D;
	border:1px solid #55737D;
	border-radius:3px;
	padding:3px;
	width:50px;
	box-shadow: 1px 1px 2px 2px #4f4f4f;
}

.comment article {
	padding-bottom:2.79rem;
}

a.comment-reply-link,
a.comment-edit-link {
	color: #FFFFFF;
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
	text-decoration:none;
}

a.comment-reply-link:hover,
a.comment-edit-link:hover {
	color: #f6e7d7;
}

Tak to by wyglądało:

Stylizacja przycisku edycji komentarza

W większości motywów WordPress, zalogowani użytkownicy z uprawnieniami do edycji komentarzy widzą link do edycji komentarza pod każdym komentarzem. Oto trochę kodu CSS, który wykorzystuje domyślną klasę comment-edit-link do modyfikacji wyglądu tego linku.

a.comment-edit-link {
	float:left;
	margin:0 0 10px 10px;
	text-align:center;
	background-color: #55737D;
	border:1px solid #55737D;
	border-radius:3px;
	padding:3px;
	width:50px;
	box-shadow: 1px 1px 2px 2px #4f4f4f;
}

Oto jak to będzie wyglądać:

Stylizacja linku anulowania odpowiedzi na komentarz

W większości dobrych motywów WordPress kliknięcie linku Odpowiedz otwiera formularz komentarza tuż pod komentarzem, na który odpowiadasz, z linkiem do anulowania odpowiedzi na komentarz. Zmodyfikujmy ten link do anulowania odpowiedzi na komentarz, używając domyślnego identyfikatora CSS cancel-comment-reply.

#cancel-comment-reply-link  { 
	text-align:center;
	background-color: #55737D;
	border:1px solid #55737D;
	border-radius:3px;
	padding:3px;
	width:50px;
	color:#FFFFFF;
	box-shadow: 1px 1px 2px 2px #4f4f4f;
	text-decoration:none;
}

Oto jak to będzie wyglądać:

Stylizacja formularza komentarzy WordPress

Użyteczne, estetyczne i stylowe formularze komentarzy zachęcają użytkowników do pozostawienia komentarza na Twoim blogu. Wcześniej napisaliśmy szczegółowy artykuł o tym, jak stylizować formularz komentarzy WordPress. Zdecydowanie zalecamy, abyś sprawdził ten artykuł, aby zobaczyć, jak możesz przenieść swój formularz komentarzy WordPress na wyższy poziom.

Mamy nadzieję, że ten artykuł pomoże Ci w stylizacji układu komentarzy w WordPress. Jeśli masz jakieś pytania lub sugestie, daj nam znać, zostawiając komentarz poniżej.