Jak stylizować układ komentarzy WordPress

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

Ze względu na ten przykład 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 majsterkowiczów, którzy dobrze rozumieją HTML i CSS.

Domyślne Klasy Komentarzy WordPress

Domyślnie WordPress generuje te klasy dla elementów w szablonie komentarzy:

/ * Komentarz*/

.commentlist .odpowiedz {}
.commentlist .odpowiedz a {}

.commentlist .alt {}
.commentlist .odd {}
.commentlist .even {}
.commentlist .thread-alt {}
.commentlist .thread-odd {}
.commentlist .thread-even {}
.commentlist li ul.dzieci .alt {}
.commentlist li ul.dzieci .odd {}
.commentlist li ul.dzieci .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 .komentarz-meta {} 
.commentlist .komentarz-meta a {}
.commentlist .commentmetadata {}
.commentlist .commentmetadata a {}

.commentlist .rodzic {}
.commentlist .komentarz {}
.commentlist .dzieci {}
.commentlist .pingback {}
.commentlist .bypostauthor {}
.commentlist .komentarz-autor {}
.commentlist .komentarz-Autor-admin {}

.commentlist {}
.commentlist li {}
.commentlist li p {}
.commentlist li ul {}
.commentlist li ul.dzieci li {}
.commentlist li ul.dzieci li. alt {}
.commentlist li ul.dzieci li. byuser {}
.commentlist li ul.dzieci li. komentarz {}
.commentlist li ul.dzieci li. głębokość - {id} {}
.commentlist li ul.dzieci li. bypostauthor {}
.commentlist li ul.dzieci li. komentarz-Autor-admin {}

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

Jak znaleźć klasy CSS, które chcesz 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 poręczne narzędzie, którego możesz użyć do poprawy umiejętności tworzenia motywów WordPress. Narzędzie nazywa się Sprawdź Element. Po prostu najedź myszką na element na stronie internetowej, kliknij prawym przyciskiem myszy i wybierz inspect element. Okno 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 jak są stylizowane. Możesz nawet edytować tam CSS do celów testowych. Ważne jest, aby pamiętać, że wszystko, co zmienisz za pomocą elementu Inspect, jest widoczne tylko dla ciebie. W momencie odświeżenia strony te zmiany znikną. Aby zmiany stały, musisz użyć swojego stylu.plik css lub inne odpowiednie pliki w szablonach.

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

Posiadanie innego koloru tła dla nieparzystych i parzystych komentarzy to trend projektowy, który istnieje już od kilku lat. Pomaga w czytelności, szczególnie 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 nieparzystą i równą klasę odpowiednio do każdego komentarza.

Możesz łatwo dodać dziwne / parzyste stylizacje komentarzy w stylu Twojego motywu.css poprzez wklejenie poniższego kodu.

.commentlist .parzyste .comment { 
background-color: # ccddf2; 
} 
.commentlist .dziwne .comment {
background-color: # CCCCCC;
}

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

Stylizacja autor komentarza i meta informacje

WordPress dodaje również klasy do elementów wyświetlanych w każdym nagłówku komentarza. Pozwala to projektantom motywów dostosować wyświetlanie informacji o autorze i innych meta komentarzy, takich jak Data i godzina komentarza. Oto przykładowy kod do wklejenia w stylu motywu.plik css, aby stylizować te elementy w inny sposób. W tym przykładzie dodaliśmy kolor tła do komentowania meta wraz z odstępami.

.comments-area article header {
	margin: 0 0 48px;
	przepełnienie: Ukryte;
	pozycja: względna;
	background-color:#55737D;
	color: # FFFFFF;
	padding: 10px;
}

Tak powinno to wyglądać:

Stylizacja Post Autor Komentuje Inaczej

Często zdarza się, że komentarze autorów postów są podświetlane innym kolorem tła lub dodatkową odznaką. WordPress dodaje klasę domyślną bypostauthor do wszystkich komentarzy autora postu. Projektanci motywów WordPress mogą używać tej klasy do innego stylu komentarzy autorów postów.

Niektóre motywy używają własnej funkcji wywołania zwrotnego do wyświetlania komentarzy. Korzystając z funkcji wywołania zwrotnego, motywy te mogą dodawać dodatkowe informacje do komentarza przez autora postu. Na przykład Twenty Twelve używa następującego wiersza w funkcji zwrotnej komentarza twentytwelve_comment() (znajduje się w funkcje.php plik tematu).

// Jeśli obecny autor postu jest również autorem komentarza, poinformuj go wizualnie.

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

Ten kod dodaje < span>Autor postu< / span> do informacji meta komentarza. W zależności od tego, jak Twój motyw WordPress obsługuje komentarze autora postu, możesz go zmodyfikować do wszystkiego, co chcesz.

Jeśli używasz innego motywu niż dwadzieścia dwanaście, musisz dowiedzieć się, jak Twój motyw obsługuje komentarze. Po prostu otwórz swój motyw komentarze.php plik. Jeśli twój motyw korzysta z własnej funkcji wywołania zwrotnego, zobaczysz go wewnątrz wp_list_komentarze funkcja, jak ta:

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

W powyższym przykładzie widać, że motyw jest używany twentytwelve_comment jako funkcja zwrotna. Jeśli podano funkcję zwrotną, najbardziej prawdopodobną lokalizacją, w której można ją znaleźć, są funkcje motywu.plik php.

W tym przykładzie zmieniamy tę funkcję na Edytor wyświetlania zamiast autora postu. Aby to zrobić, zmodyfikowaliśmy funkcję wywołania zwrotnego komentarza w ten sposób:

// Jeśli obecny autor postu jest również autorem komentarza, poinformuj go wizualnie.

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

Zamierzamy również zmodyfikować sposób, w jaki wygląda, dodając następujące elementy w stylu naszego motywu.plik css jak ten:

li. bypostauthor cite span {
	kolor: #21759b;
	background-color: #f8f0cb;
	tło-obraz: brak;
	border: 1px solid # f8f0cb;
	border-radius: 3px;
	box-shadow: brak;
	padding: 3px;
	font-weight: bold;
}

Tak by to wyglądało:

Stylizacja komentarz Odpowiedz Link w WordPress Komentarze

Większość motywów WordPress ma link odpowiedzi pod każdym komentarzem. Ta funkcja jest wyświetlana tylko wtedy, gdy włączone są komentarze z wątkami. Aby włączyć komentarze z wątkami, przejdź do panelu administracyjnego WordPress (Ustawienia ” Dyskusja). Spójrz na sekcję, w której jest napisane inne ustawienia komentarza i zaznacz pole Włącz komentarze gwintowane (zagnieżdżone).

Domyślne klasy CSS generowane przez WordPress dla linku odpowiedzi to odpowiedz oraz komentarz-odpowiedź-link. Będziemy używać tych klas, aby zmodyfikować link odpowiedzi i przekształcić 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;
}

.Skomentuj artykuł {
	padding-bottom: 2.79 rem;
}

a. komentarz-odpowiedź-link,
a. comment-edit-link {
	color: # FFFFFF;
	font-size: 13px;
	font-size: 0.928571429 rem;
	line-height: 1.846153846;
	tekst-Dekoracja: Brak;
}

a. komentarz-odpowiedź-link: hover,
a. comment-edit-link: hover {
	kolor: #f6e7d7;
}

Tak by to wyglądało:

Przycisk Edycji Komentarza Stylizacyjnego

W większości motywów WordPress zalogowani użytkownicy z możliwością edycji komentarzy mogą zobaczyć link do edycji komentarza pod każdym komentarzem. Oto trochę CSS, który używa domyślnej klasy komentarz-edycja-link aby zmodyfikować wygląd łącza.

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 Link

W większości dobrych motywów WordPress kliknięcie linku odpowiedzi otwiera formularz komentarza tuż pod komentarzem, na który odpowiadasz, z linkiem do anulowania odpowiedzi na komentarz. Pozwala zmodyfikować ten link Anuluj komentarz odpowiedz za pomocą domyślnego identyfikatora CSS anuluj-komentarz-odpowiedz.

# 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;
	tekst-Dekoracja: Brak;
}

Oto jak by to wyglądało:

Stylizacja formularza komentarza WordPress

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

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