Cum să stilizezi aspectul comentariilor tale WordPress

Recent am arătat cum să stilizezi formularul de comentarii WordPress, și am considerat că ar fi incomplet dacă nu am scrie despre stilizarea aspectului comentariilor WordPress. În trecut, am discutat că există clase și ID-uri CSS generate implicit de WordPress pentru a facilita stilizarea șabloanelor de către designerii de teme. În acest articol, vom folosi acele clase implicite pentru a vă arăta cum să stilizați aspectul comentariilor WordPress și câteva dintre lucrurile interesante pe care le puteți face cu el.

În scopul acestui exemplu, vom modifica tema implicită Twenty Twelve WordPress în acest articol. Notă: Acest articol este destinat designerilor de teme începători și utilizatorilor DIY care au o înțelegere corectă a HTML și CSS.

Clase implicite pentru comentariile WordPress

Implicit, WordPress generează aceste clase pentru elementele din șablonul de comentarii:

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

Cum să găsești ce clase CSS trebuie să editezi

Înainte de a trece la stilizarea aspectului comentariilor WordPress, un mic sfat pentru utilizatorii noștri noi. Browserele web Google Chrome și Mozilla Firefox vin cu un instrument util pe care îl puteți folosi pentru a vă îmbunătăți abilitățile de dezvoltare a temelor WordPress. Instrumentul se numește Inspect Element. Pur și simplu duceți mouse-ul la un element de pe o pagină web, faceți clic dreapta și alegeți inspect element. Fereastra browserului se va împărți în două rânduri, iar în fereastra inferioară veți vedea codul sursă al acelui element. De asemenea, în fereastra inferioară, veți putea vedea elementele CSS și cum sunt stilizate. Puteți chiar edita CSS-ul acolo în scopuri de testare. Este important să rețineți că orice modificați folosind Inspect Element este vizibil doar pentru dvs. În momentul în care reîmprospătați pagina, acele modificări vor dispărea. Pentru a face modificările permanente, trebuie să utilizați fișierul style.css sau alte fișiere corespunzătoare din temele dvs.

Adăugarea culorilor de fundal impare și pare pentru comentarii

A avea o culoare de fundal diferită pentru comentariile impare și pare este o tendință de design care există de câțiva ani. Ajută la lizibilitate, mai ales dacă aveți multe comentarii. De asemenea, arată foarte bine cu anumite culori de temă, motiv pentru care mulți designeri doresc să utilizeze această funcționalitate. Pentru a ajuta designerii să atingă acest obiectiv, WordPress adaugă o clasă impară și o clasă pară fiecărui comentariu, respectiv.

Puteți adăuga cu ușurință stilizarea impar/par pentru comentarii în fișierul style.css al temei dvs. prin lipirea următorului cod.

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

Rezultatul ar arăta cam așa:

Stilizați autorul comentariului și informațiile meta

WordPress adaugă, de asemenea, clase elementelor afișate în antetul fiecărui comentariu. Acest lucru permite designerilor de teme să personalizeze afișarea informațiilor autorului și a altor meta-date ale comentariilor, cum ar fi data și ora comentariului. Iată un cod exemplu pe care să-l lipiți în fișierul style.css al temei dvs. pentru a stiliza aceste elemente diferit. În acest exemplu, am adăugat o culoare de fundal la meta-datele comentariilor, împreună cu spațiere.

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

Așa ar trebui să arate:

Stilul diferit al comentariilor autorului postării

De multe ori s-ar putea să vedeți că comentariile autorului postării sunt evidențiate fie cu o culoare de fundal diferită, fie cu o insignă suplimentară. WordPress adaugă o clasă implicită bypostauthor tuturor comentariilor făcute de autorul postării. Designerii de teme WordPress pot folosi această clasă pentru a stiliza diferit comentariile autorului postării.

Unele teme folosesc propria funcție de apel pentru a afișa comentariile. Folosind funcția de apel, aceste teme pot adăuga informații suplimentare unui comentariu de către autorul postării. De exemplu, Twenty Twelve folosește următoarea linie în funcția de apel a comentariilor twentytwelve_comment() (situată în fișierul functions.php al temei).

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

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

Acest cod adaugă <span>Post Author</span> la informațiile meta ale comentariului. În funcție de modul în care tema dvs. WordPress gestionează comentariile autorului postării, puteți modifica acest lucru la orice doriți.

Dacă folosești o altă temă decât Twenty Twelve, atunci trebuie să afli cum gestionează tema ta comentariile. Deschide pur și simplu fișierul comments.php al temei tale. Dacă tema ta folosește propria funcție de apel, atunci o vei vedea în interiorul funcției wp_list_comments, astfel:

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

În exemplul de mai sus, puteți vedea că tema folosește twentytwelve_comment ca funcție de apel. Dacă este specificată o funcție de apel, atunci cea mai probabilă locație pentru a găsi această funcție este în fișierul functions.php al temei dumneavoastră.

În acest exemplu, modificăm această funcție pentru a afișa Editor în loc de Autorul postării. Pentru a face acest lucru, am modificat funcția de apelare a comentariului astfel:

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

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

Vom modifica, de asemenea, modul în care arată, adăugând următorul cod în fișierul style.css al temei noastre, astfel:

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

Așa ar arăta:

Stilarea linkului de răspuns la comentarii în comentariile WordPress

Majoritatea temelor WordPress au un link de răspuns sub fiecare comentariu. Această funcționalitate este afișată doar dacă aveți comentarii în fir (nested) activate. Pentru a activa comentariile în fir, accesați panoul de administrare WordPress (Setări » Discuție). Căutați secțiunea unde se specifică alte setări de comentarii și bifați căsuța pentru activarea comentariilor în fir (nested).

Clasele CSS implicite generate de WordPress pentru linkul de răspuns sunt reply și comment-reply-link. Vom folosi aceste clase pentru a modifica linkul de răspuns și a-l transforma într-un buton 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;
}

Așa ar arăta:

Stilul butonului de editare a comentariului

În majoritatea temelor WordPress, utilizatorii conectați cu permisiunea de a edita comentarii pot vedea un link de editare a comentariului sub fiecare comentariu. Iată un mic CSS care folosește clasa implicită comment-edit-link pentru a modifica aspectul linkului.

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

Așa ar arăta:

Stilul linkului de anulare a răspunsului la comentariu

În majoritatea temelor WordPress bune, clic pe link-ul Răspunde deschide formularul de comentarii chiar sub comentariul la care răspunzi, cu un link pentru a anula răspunsul la comentariu. Să modificăm acest link de anulare a răspunsului la comentariu folosind ID-ul CSS implicit 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;
}

Așa ar arăta:

Stilarea formularului de comentarii WordPress

Formularele de comentarii utilizabile, plăcute estetic și stilate încurajează utilizatorii să lase un comentariu pe blogul dvs. Anterior am scris un articol detaliat despre cum să stilizezi formularul de comentarii WordPress. Vă recomandăm cu tărie să îl consultați pentru a vedea cum puteți duce formularul de comentarii WordPress la nivelul următor.

Sperăm că acest articol vă ajută să stilizați aspectul comentariilor WordPress. Dacă aveți întrebări sau sugestii, nu ezitați să ne anunțați lăsând un comentariu mai jos.