Hur man utformar din WordPress-kommentarlayout

Inspect element in Google Chrome to look at source code and quickly find matching CSS rules

Nyligen visade vi dig hur du utformar WordPress-kommentarformulÀret och vi trodde att det skulle vara ofullstÀndigt om vi inte skrev om utformningen av WordPress-kommentarlayouten. Tidigare har vi diskuterat att det finns standard WordPress-genererade CSS-klasser och ID för att göra det lÀttare för temadesigners att utforma sina mallar. I den hÀr artikeln kommer vi att anvÀnda dessa standardklasser för att visa dig hur du utformar din WordPress-kommentarlayout och nÄgra av de coola sakerna du kan göra med den.

För detta exempel kommer vi att Àndra standardtwenty WordPress-temat i denna artikel. Obs! Den hÀr artikeln Àr avsedd för början av temadesigners och DIY-anvÀndare som har rÀttvis förstÄelse för HTML och CSS.

Standard WordPress kommentarer klasser

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


/*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 redigera

Innan vi gĂ„r vidare till utformningen av WordPress-kommentarlayouten, ett litet tips för vĂ„ra nya anvĂ€ndare. WebblĂ€sare Google Chrome och Mozilla Firefox levereras med ett praktiskt verktyg som du kan anvĂ€nda för att förbĂ€ttra dina WordPress-utvecklingsfĂ€rdigheter. Verktyget kallas Inspektera elementet. Ta bara med musen till ett element pĂ„ en webbsida, högerklicka och vĂ€lj inspektera element. Ditt webblĂ€sarfönster kommer att delas upp i tvĂ„ rader och i det nedre fönstret ser du kĂ€llkoden för det elementet. Även i det nedre fönstret kommer du att kunna se CSS-element och hur de utformas. Du kan Ă€ven redigera CSS dĂ€r inne för testĂ€ndamĂ„l. Det Ă€r viktigt att komma ihĂ„g, allt du Ă€ndrar med Inspect Element Ă€r bara synligt för dig. NĂ€r du uppdaterar sidan försvinner Ă€ndringarna. 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 nÄgra Är nu. Det hjÀlper lÀsbarheten speciellt om du har mÄnga kommentarer. Det ser ocksÄ riktigt bra ut med vissa temafÀrger, varför mÄnga designers vill anvÀnda denna funktion. För att hjÀlpa designers att uppnÄ detta mÄl lÀgger WordPress till en udda och jÀmn klass i varje kommentar.

Du kan enkelt lÀgga till den udda / jÀmna stylingen för kommentarer i ditt temas stil.css genom att klistra in följande kod.


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

Resultatet skulle se ut sÄ hÀr:

AnvÀnd CSS för att lÀgga till alternativa fÀrger för jÀmna och udda kommentarer i WordPress

Styling Kommentar Författare och Metainformation

WordPress lÀgger ocksÄ till klasser i element som visas i varje kommentarhuvud. Detta gör det möjligt för temadesigners att anpassa visningen av författarinformation och andra kommentarmeta som kommentardatum och tid. HÀr Àr en exempelkod för att klistra in i ditt temas style.css-fil för att utforma dessa element pÄ olika sÀtt. I det hÀr exemplet har vi lagt till bakgrundsfÀrg för att kommentera 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;
}

SÄ hÀr ska det se ut:

Styling av meta- och författarinformation för kommentarer i WordPress-kommentarer

Styling Post Författarens kommentarer annorlunda

Ofta kanske du ser att kommentarer frÄn inlÀggsförfattare Àr markerade antingen med en annan bakgrundsfÀrg eller nÄgot extra mÀrke. WordPress lÀgger till en standardklass av postförfattare till alla kommentarer frÄn inlÀggets författare. WordPress-temadesigners kan anvÀnda denna klass för att utforma författarkommentarer pÄ olika sÀtt.

Vissa teman anvÀnder sin egen Äteruppringningsfunktion för att visa kommentarer. Med hjÀlp av Äteruppringningsfunktionen kan dessa teman lÀgga till ytterligare information i en kommentar av inlÀggsförfattaren. Till exempel anvÀnder Twenty Twelve följande rad i kommentarens Äteruppringningsfunktion twentytwelve_comment () (finns i funktions.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>' : '' );

Den hÀr koden lÀgger till InlÀggsförfattare i kommentarens metainformation. Beroende pÄ hur ditt WordPress-tema hanterar kommentarer frÄn inlÀggsförfattaren kan du Àndra det till vad du vill.

Om du anvĂ€nder ett annat tema Ă€n Twenty Twelve mĂ„ste du ta reda pĂ„ hur ditt tema hanterar kommentarer. Öppna helt enkelt ditt temas comments.php-fil. Om ditt tema anvĂ€nder sin egen Ă„teruppringningsfunktion, skulle du se det i 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 Äteruppringningsfunktion. Om en Äteruppringningsfunktion anges Àr den mest troliga platsen för att hitta den hÀr funktionen i ditt temas funktioner.php-fil.

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 Äteruppringningsfunktionen för kommentarer 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 stil.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:

Styling av aurhor-kommentarer pÄ olika sÀtt i WordPress-kommentarer

Styling Kommentar Svar LĂ€nk i WordPress-kommentarer

De flesta WordPress-teman har en svarslÀnk under varje kommentar. Denna funktionalitet visas bara om du har aktiverat trÄdade kommentarer. För att aktivera gÀngade kommentarer, gÄ till din WordPress-administratör (InstÀllningar »Diskussion). Titta pÄ avsnittet dÀr det stÄr andra kommentarinstÀllningar och markera rutan för att aktivera gÀngade (kapslade) kommentarer.

Standard CSS-klasserna som genereras av WordPress för svarslÀnken Àr svar och kommentar-svar-lÀnk. Vi kommer att anvÀnda dessa klasser för att Àndra svarslÀnken och förvandla 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:

Styling av svarsknappen för kommentarer i WordPress-kommentarer med CSS

Styling Kommentar Redigeringsknapp

I de flesta WordPress-teman kan inloggade anvÀndare med möjlighet att redigera kommentarer se en kommentarredigeringslÀnk under varje kommentar. HÀr Àr en liten CSS som anvÀnder standardklassens kommentar-redigeringslÀnk 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 ser det ut:

AnvÀnda CSS för att utforma lÀnk för redigering av kommentarer i WordPress-kommentarer

Styling Avbryt Kommentar Svar LĂ€nk

I de flesta bra WordPress-teman öppnas kommentarformulÀret precis under kommentaren du svarar med en lÀnk för att avbryta svaret genom att klicka pÄ lÀnken Svara. LÄter oss Àndra denna lÀnk för att avbryta svar genom att anvÀnda standard CSS-ID avbryt-kommentar-svar.


#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 ser det ut:

Styling av lÀnken för att avbryta svar i WordPress-kommentarsformulÀret

Styling av WordPress-kommentarformulÀret

AnvÀndbara, estetiskt trevliga och snygga kommentarformulÀr uppmuntrar anvÀndare att lÀmna en kommentar pÄ din blogg. Tidigare har vi skrivit en detaljerad artikel om hur man utformar WordPress-formulÀr. Vi rekommenderar starkt att du kolla in 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 WordPress-kommentarlayout. Om du har nÄgra frÄgor eller förslag Àr du vÀlkommen att meddela oss genom att lÀmna en kommentar nedan.