Så här stylar du layouten för dina comments i WordPress

Senast visade vi dig hur du stylar WordPress kommentarformulär, och vi tänkte att det skulle vara ofullständigt om vi ej skrev om styling av WordPress comments layout. Tidigare har vi diskuterat att det finns standard WordPress genererade CSS-klasser och ID:n för att göra det lättare för temadesigners att styla sina templates. I den här artikeln kommer vi att använda dessa standardklasser för att visa dig hur du stylar din WordPress comments layout och några av de coola saker du kan göra med den.

För det här exemplets skull kommer vi att ändra standardtemat Twenty Twelve WordPress i den här artikeln. Note: Den här artikeln är för nybörjare inom tema-design och DIY-användare som har en rimlig förståelse för HTML och CSS.

Klasser för standard WordPress Comments

Som standard genererar WordPress dessa klasser för element i templates för comments:

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

Så här hittar du vilka CSS-klasser du behöver edit

Innan vi går vidare till styling av WordPress comments layout, ett litet tips för våra nya användare. Google Chrome och Mozilla Firefox web browsers kommer med ett praktiskt verktyg som du kan använda för att förbättra dina färdigheter i att utveckla WordPress theme. Verktyget är anropat Inspect Element. Ta helt enkelt din mus till ett element på en page, högerklicka och välj inspect element. Din webbläsare kommer att delas upp i två row och i det nedre fönstret kommer du att se källkoden för det elementet. I det nedre fönstret kan du också se CSS-element och hur de är stylade. Du kan till och med editera CSS där inne för teständamål. Det är viktigt att komma ihåg att allt du ändrar med hjälp av Inspect Element bara är synligt för you. I samma ögonblick som du uppdaterar page försvinner dessa ändringar. För att göra ändringarna permanently måste du använda din style.css-fil eller andra lämpliga filer i dina themes.

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

Att ha olika bakgrundsfärg för udda och jämna kommentarer är en designtrend som har funnits i några år nu. Det hjälper läsbarheten, särskilt om du har många kommentarer. Det ser också riktigt bra ut med vissa färger i temat, vilket är anledningen till att många designers vill använda den här funktionen. För att hjälpa designers att uppnå detta mål adderar WordPress en udda respektive jämn klass till varje comment.

Du kan enkelt add to odd/even styling för comments i ditt 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 Kommentar Författare och Meta Information

WordPress addar också klasser till element som visas i varje comment header. Detta allow temadesigners att customize displayen av författarinformation och annan kommentar meta som kommentarens datum och tid. Här är ett exempel på kod som du kan klistra in i ditt temas style.css-fil för att styla dessa element på olika sätt. I det här exemplet har vi add to bakgrundsfärg till comment meta tillsammans med lite avstånd.

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

Det är så här det ska se ut:

Styling av post författarens kommentarer på olika sätt

Ofta kanske du ser att kommentarer från författare till inlägg markeras antingen med en annan bakgrundsfärg eller något ytterligare märke. WordPress adderar en standardklass bypostauthor till alla kommentarer som görs av postens författare. WordPress temadesigners kan använda den här klassen för att styla inläggsförfattarens kommentarer på olika sätt.

Vissa teman använder en egen callback-funktion för att displayed comments. Med hjälp av callback-funktionen kan dessa teman add to ytterligare information till en comment by post author. Twenty Twelve använder till exempel följande rad i callback-funktionen för kommentarer, twentytwelve_comment() (location i functions.php-filen 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>' : '' );

Denna kod add to <span>Post Author</span> till metainformationen för kommentaren. Beroende på hur ditt WordPress-tema hanterar kommentarer från författaren till posten, kan du ändra det till vad du vill.

Om du använder ett annat theme än Twenty Twelve, måste du ta reda på hur ditt theme hanterar comments. Öppna helt enkelt ditt temas comments.php-fil. Om ditt theme använder sin egen callback-funktion, skulle du se den inuti wp_list_comments-funktionen, gillar du det 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 location för att hitta denna funktion i functions.php-filen i your theme.

I det här exemplet ändrar vi den här funktionen för att visa Editor istället för Post Author. För att göra det har vi ändrat callback-funktionen för comments 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årt 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;
}

Det är så här det skulle se ut:

Styling Kommentar Reply-To Link i WordPress Comments

De flesta teman i WordPress har en svarslänk under varje comment. Denna funktion visas endast om du har aktiverat trådade comments. För att aktivera trådade kommentarer, gå till din WordPress-admin (Settings ” Discussion). Titta på den section där det står other comment settings och kontrollera boxen för enable threaded (nested) comments.

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 ändra svarslänken och göra om 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;
}

Det är så här det skulle gilla att se ut:

Styling av knappen Comment Edit

I de flesta teman i WordPress kan inloggade användare med capability att redigera kommentarer se en länk för att redigera kommentarer under varje kommentar. Här är en liten CSS som använder standardklassen comment-edit-link för att ändra länkens appearance.

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 gilla att se ut:

Styling Cancel Comment Reply-To Link

I de flesta bra WordPress teman, klickar du på Reply-länken öppnar kommentarformuläret precis under den kommentar du svarar på med en länk för att cancel kommentar svar. Låt oss ändra denna cancel comment reply link genom att använda standard CSS ID 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;
}

Här är hur det skulle gilla att se ut:

Styling av formuläret för comments i WordPress

Användbara, estetiskt tilltalande och snygga kommentarsformulär uppmuntrar användarna att lämna en comment på din blogg. Tidigare har vi skrivit en detaljerad artikel om hur man stylar WordPress kommentarformulär. Vi rekommenderar starkt att du går och kontrollerar det för att se hur du kan ta ditt WordPress-kommentarformulär till nästa nivå.

Vi hoppas att den här artikeln hjälper dig att utforma din layout för WordPress comments. Om du har några frågor eller förslag är du välkommen att höra av dig till oss genom att lämna en comment under.