Hur du stylar din WordPress-kommentarlayout

Nyligen visade vi dig hur man stylar WordPress-kommentarsformuläret, och vi tyckte att det skulle vara ofullständigt om vi inte skrev om att styla WordPress-kommentarernas layout. Tidigare har vi diskuterat att det finns standard CSS-klasser och ID:n som genereras av WordPress för att göra det enklare för temadesigners att styla sina mallar. I den här artikeln kommer vi att använda dessa standardklasser för att visa dig hur du stylar din WordPress-kommentarers layout och några av de coola saker du kan göra med den.

För detta exempel kommer vi att modifiera standardtemat Twenty Twelve i den här artikeln. Notera: Den här artikeln är för nybörjare inom temadesign och gör-det-själv-användare som har en god förståelse för HTML och CSS.

Standardklasser för WordPress-kommentarer

Som standard genererar WordPress dessa klasser för element i kommentar smallen:

/*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 {}

Hur man hittar vilka CSS-klasser du behöver redigera

Innan vi går vidare till att styla WordPress-kommentarernas layout, ett litet tips för våra nya användare. Webbläsarna Google Chrome och Mozilla Firefox kommer med ett praktiskt verktyg som du kan använda för att förbättra dina färdigheter i att utveckla WordPress-teman. Verktyget kallas Inspektera element. Placera helt enkelt musen över ett element på en webbsida, högerklicka och välj inspektera element. Ditt webbläsarfönster delas i två rader och i det nedre fönstret ser du källkoden för det elementet. Även i det nedre fönstret kan du se CSS-element och hur de är stylade. Du kan till och med redigera CSS:en där för teständamål. Det är viktigt att komma ihåg att allt du ändrar med Inspektera element endast är synligt för dig. I samma ögonblick som du uppdaterar sidan försvinner dessa ändringar. För att göra ändringarna permanenta måste du använda din style.css-fil eller andra lämpliga filer i dina teman.

Lägga till udda och jämna bakgrundsfärger för kommentarer

Att ha en annan bakgrundsfärg för udda och jämna kommentarer är en designtrend som har funnits i flera år nu. Det hjälper läsbarheten, särskilt om du har många kommentarer. Det ser också riktigt bra ut med vissa temafärger, vilket är anledningen till att många designers vill utnyttja denna funktionalitet. För att hjälpa designers att uppnå detta mål lägger WordPress till en udda och en jämn klass till varje kommentar respektive.

Du kan enkelt lägga till udda/jämna stilar för kommentarer i din temas style.css genom att klistra in följande kod.

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

Resultatet skulle se ut ungefär så här:

Styling av kommentarers författare och meta-information

WordPress lägger också till klasser till element som visas i varje kommentarsrubrik. Detta gör det möjligt för temadesigners att anpassa visningen av författarinformation och annan kommentar-metadata, såsom kommentarernas datum och tid. Här är ett exempel på kod att klistra in i din temas style.css-fil för att styla dessa element annorlunda. I det här exemplet har vi lagt till bakgrundsfärg till kommentar-metadata tillsammans med lite marginal.

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

Så här ska det se ut:

Stylar inläggsförfattarkommentarer annorlunda

Ofta kan du se att inläggsförfattarens kommentarer markeras antingen med en annan bakgrundsfärg eller en extra badge. WordPress lägger till en standardklass bypostauthor till alla kommentarer som gjorts av inläggsförfattaren. WordPress temadesigners kan använda denna klass för att styla inläggsförfattarens kommentarer annorlunda.

Vissa teman använder sin egen callback-funktion för att visa kommentarer. Genom att använda callback-funktionen kan dessa teman lägga till ytterligare information till en kommentar av inläggsförfattaren. Till exempel använder Twenty Twelve följande rad i callback-funktionen för kommentarer twentytwelve_comment() (som finns i filen functions.php i temat).

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

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

Den här koden lägger till <span>Post Author</span> till kommentarernas metainformation. Beroende på hur ditt WordPress-tema hanterar kommentarer från inläggsförfattaren kan du ändra detta till vad du vill.

Om du använder ett annat tema än Twenty Twelve, då behöver du ta reda på hur ditt tema hanterar kommentarer. Öppna helt enkelt ditt temas comments.php-fil. Om ditt tema använder sin egen callback-funktion, då ser du den inuti funktionen wp_list_comments, så här:

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

I exemplet ovan kan du se att temat använder twentytwelve_comment som callback-funktion. Om en callback-funktion anges, är den mest troliga platsen att hitta denna funktion i ditt temas functions.php-fil.

I det här exemplet ändrar vi den här funktionen för att visa Redaktör istället för Inläggsförfattare. För att göra det har vi modifierat comment callback-funktionen så här:

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

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

Vi kommer också att ändra hur det ser ut genom att lägga till följande i vår temas style.css-fil, så här:

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;
}

Så här skulle det se ut:

Stil för kommentarssvarslänk i WordPress-kommentarer

De flesta WordPress-teman har en svarslänk under varje kommentar. Denna funktionalitet visas bara om du har trådade kommentarer aktiverade. För att aktivera trådade kommentarer, gå till din WordPress-admin (Inställningar » Diskussion). Titta i avsnittet där det står andra kommentarsinställningar och markera rutan för aktivera trådade (nästlade) kommentarer.

Standard-CSS-klasserna som genereras av WordPress för svarslänken är reply och comment-reply-link. Vi kommer att använda dessa klasser för att modifiera svarslänken och göra den till en CSS-knapp.

.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;
}

Så här skulle det se ut:

Stylar knapp för att redigera kommentarer

I de flesta WordPress-teman kan inloggade användare med behörighet att redigera kommentarer se en länk för att redigera kommentarer under varje kommentar. Här är lite CSS som använder standardklassen comment-edit-link för att ändra utseendet på länken.

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;
}

Så här skulle det se ut:

Stylar länken för att avbryta svar på kommentar

I de flesta bra WordPress-teman öppnar klick på länken Svara upp kommentarsformuläret precis under kommentaren du svarar på med en länk för att avbryta kommentarssvar. Låt oss modifiera denna länk för att avbryta kommentarssvar genom att använda standard CSS-ID:t 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;
}

Så här skulle det se ut:

Stil för WordPress-kommentarformuläret

Användbara, estetiskt tilltalande och snygga kommentarsformulär uppmuntrar användare att lämna en kommentar på din blogg. Tidigare har vi skrivit en detaljerad artikel om hur man stylar WordPress kommentarsformulär. Vi rekommenderar starkt att du kollar in den för att se hur du kan ta ditt WordPress kommentarsformulär till nästa nivå.

Vi hoppas att den här artikeln hjälper dig att styla din WordPress-kommentarlayout. Om du har några frågor eller förslag, tveka inte att meddela oss genom att lämna en kommentar nedan.