Jak stylizować twój układ komentarzy WordPress

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

Na potrzeby tego przykładu, w tym artykule będziemy modyfikować domyślny motyw Twenty Twelve WordPress. Uwaga: Ten artykuł jest przeznaczony dla początkujących projektantów motywów i majsterkowiczów, którzy dobrze znają HTML i CSS.

Domyślne klasy komentarzy WordPress

Domyślnie WordPress generuje te 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 należy 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 są wyposażone w przydatne narzędzie, którego możesz użyć, aby poprawić swoje umiejętności tworzenia motywów WordPress. Narzędzie to nosi nazwę Inspect Element. Wystarczy, że najedziesz myszką na element na stronie, klikniesz prawym przyciskiem myszy i wybierzesz inspect element. Okno twojej przeglądarki zostanie podzielone na dwa wiersze, 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 tam nawet edytować CSS w celach testowych. Ważne jest, aby pamiętać, że wszystko, co zmienisz za pomocą Inspect Element, będzie widoczne tylko dla ciebie. Po odświeżeniu strony zmiany te znikną. Aby zmiany trwały, musisz użyć pliku style.css lub innych odpowiednich plików w twoim motywie.

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

Posiadanie różnych kolorów tła dla nieparzystych i parzystych komentarzy to trend w projektowaniu, który istnieje już od kilku lat. Pomaga to w czytelności, szczególnie w przypadku dużej liczby komentarzy. Wygląda to również bardzo dobrze z niektórymi kolorami motywu, dlatego wielu projektantów chce wykorzystać tę funkcjonalność. Aby pomóc projektantom osiągnąć ten cel, WordPress dodaje odpowiednio nieparzystą i parzystą klasę do każdego komentarza.

Możesz łatwo dodać styl nieparzysty/parzysty dla komentarzy w pliku style.css twojego motywu, wklejając następujący 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 każdym nagłówku komentarza. Pozwala to projektantom motywów na dostosowanie wyświetlania informacji o autorze i innych meta komentarzy, takich jak data i godzina komentarza. Oto przykładowy kod, który można wkleić do pliku style.css twojego motywu, aby nadać tym elementom inny styl. W tym przykładzie dodaliśmy kolor tła do meta komentarza wraz z pewnymi odstępami.

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

.

Tak to powinno wyglądać:

Stylizacja wpisów autorów na różne sposoby

Często można zauważyć, że komentarze autorów wpisów są wyróżnione innym kolorem tła lub dodatkową plakietką. WordPress dodaje domyślną klasę bypostauthor do wszystkich komentarzy autora wpisu. Projektanci motywów WordPress mogą użyć tej klasy, aby nadać inny styl wpisom autorów.

Niektóre motywy używają własnej funkcji zwrotnej do wyświetlania komentarzy. Korzystając z funkcji wywołania zwrotnego, motywy te mogą dodawać dodatkowe informacje do komentarza według autora wpisu. Na przykład Twenty Twelve używa następującej linii w funkcji wywołania zwrotnego 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 metainformacji komentarza. W zależności od tego, w jaki sposób twój motyw WordPress obsługuje komentarze autora wpisu, możesz zmodyfikować to w dowolny sposób.

Jeśli używasz innego motywu niż Twenty Twelve, musisz dowiedzieć się, jak twój motyw obsługuje komentarze. Wystarczy otworzyć plik comments. php twojego motywu. Jeśli twój motyw używa własnej funkcji wywołania zwrotnego, zobaczysz ją w funkcji wp_list_comments, jak poniżej:

<?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 prawdopodobną lokalizacją do znalezienia tej funkcji jest plik functions.php twojego motywu.

W tym przykładzie zmieniamy tę funkcję, aby wyświetlała Redaktora zamiast Autora wpisu. Aby to zrobić, zmodyfikowaliśmy funkcję wywołania zwrotnego 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>' : '');

.

Zamierzamy również zmodyfikować sposób, w jaki to wygląda, dodając następujące elementy 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 będzie wyglądać:

Stylizacja odnośnika odpowiedzi na komentarz w komentarzach WordPress

Większość motywów WordPress posiada odnośnik odpowiedzi pod każdym komentarzem. Ta funkcja jest wyświetlana tylko wtedy, gdy włączone są komentarze podzielone na wątki. Aby włączyć komentarze w wątkach, przejdź do swojego panelu administracyjnego WordPress(Ustawienia ” Dyskusja). Zajrzyj do sekcji, w której znajdują się inne ustawienia komentarzy i zaznacz pole włączające komentarze wątkowe (zagnieżdżone).

Domyślne klasy CSS generowane przez WordPress dla odnośnika odpowiedzi to reply i comment-reply-link. Użyjemy tych klas do zmodyfikowania odnośnika 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 będzie wyglądać:

Stylizacja przycisku edycji komentarza

W większości motywów WordPress logujący się użytkownicy z możliwością edycji komentarzy widzą odnośnik do edycji komentarza pod każdym komentarzem. Oto mały CSS, który wykorzystuje domyślną klasę comment-edit-link do modyfikacji wyglądu odnośnika.

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 by to wyglądało:

Stylizacja Anuluj Komentarz Odpowiedz Odnośnik

W większości dobrych motywów WordPress kliknięcie odnośnika Odpowiedz otwiera formularz komentarza tuż pod komentarzem, na który odpowiadasz, z odnośnikiem do anulowania odpowiedzi na komentarz. Zmodyfikujmy ten odnośnik 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 by to wyglądało:

Stylizacja formularza komentarza 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 komentarza WordPress. Zdecydowanie zalecamy zapoznanie się z nim, aby zobaczyć, jak możesz przenieść swój formularz komentarza WordPress na wyższy poziom.

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