Come stilizzare il layout dei commenti di WordPress

Recentemente ti abbiamo mostrato come stilizzare il modulo commenti di WordPress, e abbiamo pensato che sarebbe stato incompleto se non avessimo scritto sulla stilizzazione del layout dei commenti di WordPress. In passato, abbiamo discusso che ci sono classi e ID CSS generati da WordPress di default per aiutare a rendere più facile per i designer di temi stilizzare i loro modelli. In questo articolo, utilizzeremo quelle classi di default per mostrarti come stilizzare il tuo layout dei commenti di WordPress e alcune delle cose interessanti che puoi fare con esso.

Ai fini di questo esempio, modificheremo il tema predefinito Twenty Twelve di WordPress in questo articolo. Nota: questo articolo è destinato ai designer di temi principianti e agli utenti fai-da-te che hanno una buona comprensione di HTML e CSS.

Classi CSS predefinite di WordPress per i commenti

Per impostazione predefinita, WordPress genera queste classi per gli elementi nel modello dei commenti:

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

Come trovare quali classi CSS devi modificare

Prima di passare allo stile del layout dei commenti di WordPress, un piccolo consiglio per i nostri nuovi utenti. I browser web Google Chrome e Mozilla Firefox sono dotati di uno strumento utile che puoi usare per migliorare le tue capacità di sviluppo di temi WordPress. Lo strumento si chiama Ispeziona elemento. Basta posizionare il mouse su un elemento di una pagina web, fare clic con il pulsante destro del mouse e scegliere ispeziona elemento. La finestra del browser si dividerà in due righe e nella finestra inferiore vedrai il codice sorgente di quell'elemento. Sempre nella finestra inferiore, potrai vedere gli elementi CSS e come sono stilizzati. Puoi persino modificare il CSS lì per scopi di test. È importante ricordare che tutto ciò che cambi usando Ispeziona elemento è visibile solo a te. Nel momento in cui aggiorni la pagina, tali modifiche scompariranno. Per rendere permanenti le modifiche, devi usare il tuo file style.css o altri file appropriati nei tuoi temi.

Aggiungere colori di sfondo dispari e pari per i commenti

Avere un colore di sfondo diverso per i commenti dispari e pari è una tendenza di design che esiste da alcuni anni. Aiuta la leggibilità, specialmente se hai molti commenti. Inoltre, si abbina molto bene con determinati colori del tema, motivo per cui molti designer vogliono utilizzare questa funzionalità. Per aiutare i designer a raggiungere questo obiettivo, WordPress aggiunge rispettivamente una classe dispari e pari a ciascun commento.

Puoi facilmente aggiungere lo stile dispari/pari per i commenti nel file style.css del tuo tema incollando il seguente codice.

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

Il risultato dovrebbe apparire più o meno così:

Stile del nome dell'autore del commento e delle informazioni meta

WordPress aggiunge anche classi agli elementi visualizzati nell'intestazione di ciascun commento. Ciò consente ai designer di temi di personalizzare la visualizzazione delle informazioni sull'autore e altri meta commenti come la data e l'ora del commento. Ecco un esempio di codice da incollare nel file style.css del tuo tema per stilizzare questi elementi in modo diverso. In questo esempio abbiamo aggiunto un colore di sfondo ai meta commenti insieme a un po' di spaziatura.

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

Dovrebbe apparire così:

Stile diverso per i commenti dell'autore del post

Spesso potresti notare che i commenti dell'autore del post sono evidenziati con un colore di sfondo diverso o con un badge aggiuntivo. WordPress aggiunge una classe predefinita bypostauthor a tutti i commenti fatti dall'autore del post. I designer di temi WordPress possono usare questa classe per stilizzare diversamente i commenti dell'autore del post.

Alcuni temi utilizzano la propria funzione di callback per visualizzare i commenti. Utilizzando la funzione di callback, questi temi possono aggiungere informazioni aggiuntive a un commento dell'autore del post. Ad esempio, Twenty Twelve utilizza la seguente riga nella funzione di callback dei commenti twentytwelve_comment() (situata nel file functions.php del tema).

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

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

Questo codice aggiunge <span>Post Author</span> alle informazioni meta del commento. A seconda di come il tuo tema WordPress gestisce i commenti dell'autore del post, puoi modificarlo come desideri.

Se stai usando un tema diverso da Twenty Twelve, allora devi scoprire come il tuo tema gestisce i commenti. Apri semplicemente il file comments.php del tuo tema. Se il tuo tema sta usando la propria funzione di callback, allora la vedrai all'interno della funzione wp_list_comments, in questo modo:

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

Nell'esempio sopra, puoi vedere che il tema sta usando twentytwelve_comment come funzione di callback. Se viene specificata una funzione di callback, allora la posizione più probabile per trovare questa funzione è nel file functions.php del tuo tema.

In questo esempio stiamo modificando questa funzione per visualizzare Editor invece di Post Author. Per farlo abbiamo modificato la funzione di callback dei commenti in questo modo:

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

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

Modificheremo anche il suo aspetto aggiungendo quanto segue nel file style.css del nostro tema in questo modo:

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

Ecco come apparirebbe:

Stile del link di risposta ai commenti nei commenti di WordPress

La maggior parte dei temi WordPress ha un link di risposta sotto ogni commento. Questa funzionalità viene visualizzata solo se hai abilitato i commenti nidificati. Per abilitare i commenti nidificati, vai alla tua bacheca di WordPress (Impostazioni » Discussione). Cerca la sezione in cui sono indicate le altre impostazioni dei commenti e seleziona la casella per abilitare i commenti nidificati.

Le classi CSS predefinite generate da WordPress per il link di risposta sono reply e comment-reply-link. Utilizzeremo queste classi per modificare il link di risposta e trasformarlo in un pulsante 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;
}

Ecco come apparirebbe:

Stile del pulsante di modifica del commento

Nella maggior parte dei temi WordPress, gli utenti connessi con la capacità di modificare i commenti possono vedere un link di modifica del commento sotto ogni commento. Ecco un piccolo CSS che utilizza la classe predefinita comment-edit-link per modificare l'aspetto del link.

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

Ecco come apparirebbe:

Stile del link di annullamento della risposta al commento

Nella maggior parte dei temi WordPress ben fatti, facendo clic sul link Rispondi si apre il modulo di commento appena sotto il commento a cui stai rispondendo con un link per annullare la risposta al commento. Modifichiamo questo link di annullamento della risposta al commento utilizzando l'ID CSS predefinito 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;
}

Ecco come apparirebbe:

Stile del modulo di commento di WordPress

Moduli di commento utilizzabili, esteticamente gradevoli ed eleganti incoraggiano gli utenti a lasciare un commento sul tuo blog. In precedenza abbiamo scritto un articolo dettagliato su come stilizzare il modulo di commento di WordPress. Ti consigliamo vivamente di dare un'occhiata per vedere come puoi portare il tuo modulo di commento di WordPress al livello successivo.

Speriamo che questo articolo ti aiuti a stilizzare il layout dei tuoi commenti di WordPress. Se hai domande o suggerimenti, non esitare a farcelo sapere lasciando un commento qui sotto.