Come creare il layout dei commenti su WordPress

Di recente vi abbiamo mostrato come stilizzare il modulo dei commenti di WordPress e abbiamo pensato che sarebbe stato incompleto se non avessimo scritto di come stilizzare il layout dei commenti di WordPress. In passato, abbiamo parlato dell’esistenza di classi CSS e ID predefiniti generati da WordPress per facilitare ai progettisti di temi lo stile dei loro template. In questo articolo, useremo queste classi predefinite per mostrarvi come modellare il layout dei commenti di WordPress e alcune delle cose interessanti che potete fare con esso.

In questo articolo modificheremo il tema predefinito di Twenty Twelve. Nota: questo articolo è rivolto ai progettisti di temi e agli utenti fai-da-te che hanno una discreta conoscenza di HTML e CSS.

Classi predefinite dei commenti di WordPress

Di default WordPress genera queste classi per gli elementi del template 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 le classi CSS da modificare

Prima di passare al layout dei commenti di WordPress, un piccolo suggerimento per i nuovi utenti. I browser Google Chrome e Mozilla Firefox sono dotati di un pratico strumento che potete utilizzare per migliorare le vostre capacità di sviluppo di temi WordPress. Lo strumento si chiama Ispeziona elemento. È sufficiente posizionarsi con il mouse su un elemento di una pagina web, fare clic con il tasto destro e scegliere ispeziona elemento. La finestra del browser si dividerà in due disponi in riga e nella finestra inferiore verrà visualizzato il codice sorgente dell’elemento. Sempre nella finestra inferiore è possibile vedere gli elementi CSS e il loro stile. È anche possibile modificare il CSS a scopo di test. Importa ricordare che qualsiasi modifica apportata con l’elemento Ispezione è visibile solo all’utente. Nel momento in cui si ricarica la pagina, le modifiche scompaiono. Per rendere permanenti le modifiche, è necessario utilizzare il file style.css o altri file appropriati nei temi.

Aggiunta di colori di sfondo pari e dispari per i commenti

L’aggiunta di un colore di sfondo diverso per i commenti pari e dispari è una tendenza di design che esiste già da qualche anno. Aiuta la leggibilità, soprattutto se i commenti sono numerosi. Inoltre, si abbina molto bene a determinati colori del tema, motivo per cui molti designer desiderano utilizzare questa funzionalità. Per aiutare i designer a raggiungere questo obiettivo, WordPress aggiunge rispettivamente una classe pari e una dispari a ogni commento.

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

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

Il risultato sarà simile a questo:

Stilizzazione dell’autore dei commenti e delle informazioni di meta

WordPress aggiunge anche delle classi agli elementi visualizzati in ogni header dei commenti. Ciò consente ai progettisti dei temi di personalizzare la visualizzazione delle informazioni sull’autore e di altri meta commenti, come la data e l’ora del commento. Ecco un esempio di codice da incollare nel file style.css del tema per personalizzare questi elementi. In questo esempio abbiamo aggiunto il colore di sfondo alla meta dei commenti e una certa spaziatura.

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

Ecco come dovrebbe apparire:

Stilizzare in modo diverso i commenti degli autori degli articoli

Spesso si nota che i commenti degli autori degli articoli sono messi in evidenza con un colore di sfondo diverso o con un badge aggiuntivo. WordPress aggiunge una classe predefinita bypostauthor a tutti i commenti fatti dall’autore dell’articolo. I progettisti dei temi di WordPress possono utilizzare questa classe per dare uno stile diverso ai commenti degli autori degli articoli.

Alcuni temi utilizzano una propria funzione di callback per visualizzare i commenti. Utilizzando la funzione di callback, questi temi possono aggiungere informazioni aggiuntive a un commento per autore dell’articolo. Ad esempio, Twenty Twelve utilizza il seguente follower nella funzione di callback dei commenti twentytwelve_comment() (che si trova 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>Autore</span> alle meta informazioni dei commenti. A seconda di come il tema di WordPress gestisce i commenti dell’autore dell’articolo, è possibile modificare il codice in qualsiasi modo si desideri.

Se si utilizza un tema diverso da Twenty Twelve, è necessario scoprire come il tema gestisce i commenti. Basta aprire il file comments.php del tema. Se il tema utilizza una propria funzione di callback, la si vedrà all’interno della funzione wp_list_comments, in questo modo:

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

Nell’esempio precedente, si può vedere che il tema utilizza twentytwelve_comment come funzione di callback. Se viene specificata una funzione di callback, la posizione più probabile per trovare questa funzione è nel file functions.php del tema.

In questo esempio stiamo cambiando questa funzione per visualizzare l’editore invece dell’autore dell’articolo. Per fare ciò, 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 l’aspetto aggiungendo nel file style.css del tema quanto segue:

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:

Stilizzazione del link di risposta al commento nei commenti di WordPress

La maggior parte dei temi di WordPress prevede un collega per la risposta sotto ogni commento. Questa funzionalità viene visualizzata solo se i commenti sono abilitati. Per abilitare i commenti in thread, andate nell’amministrazione di WordPress(Impostazioni ” Discussione). Guardate la sezione in cui si parla di altre impostazioni per i commenti e selezionate la casella abilitata per i commenti in thread (annidati).

Le classi CSS predefinite generate da WordPress per il collega 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:

Stilizzazione del pulsante di modifica dei commenti

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

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:

Styling Annulla Commento Commenta Link

Nella maggior parte dei buoni temi di WordPress, facendo clic sul link Rispondi si apre il modulo dei commenti appena sotto il commento a cui si sta rispondendo con un collega per annullare la risposta al commento. Modifichiamo questo collegamento per annullare la 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:

Stilizzazione del modulo per i commenti di WordPress

Moduli per i commenti usabili, esteticamente piacevoli ed eleganti incoraggiano gli utenti a lasciare un commento sul vostro blog. In precedenza abbiamo scritto un articolo dettagliato su chi siamo per creare un modulo per i commenti su WordPress. Vi consigliamo vivamente di selezionarlo per vedere come potete portare il vostro modulo per i commenti su WordPress a un livello superiore.

Speriamo che questo articolo vi aiuti a creare il layout dei commenti su WordPress. Se avete domande o suggerimenti, non esitate a farcelo sapere lasciando un commento qui sotto.