17 abbellire commenti

Ecco alcuni aspetti da tenere in considerazione per gestire i commenti:

• Distinguete in modo chiaro la sezione dei commenti da altro contenuto. I lettori non devono confondere i commenti con il contenuto editoriale.
• I commenti devono essere di facile lettura, proprio come il resto del sito.
• Una spaziatura corretta tra i commenti, colori alternati e righe di separazione permettono di fornire una discriminante visiva. Ogni metodo che la favorisce è ben accetto.
• L’autore dei commenti deve essere evidente.
• Il form dei commenti del post deve essere facile da utilizzare, ben strutturato e deve usare un carattere leggibile con una dimensione ragionevole. Pensateci: se desiderate che i lettori leggano commenti lunghi e profondi, dovete rendere questa operazione il più semplice possibile.
• Qual è la norma nei commenti? Create un link o metteteli in minuscolo vicino al pulsante Invia.
• Utilizzate il codice HTML? In tal caso i tag sono accettabili?
• I commenti vengono moderati prima della pubblicazione? In caso affermativo, dovete farlo sapere ai lettori o almeno visualizzare una nota importante quando un commento pubblicato viene sottoposto a moderazione.
• È necessario effettuare la sottoscrizione e/o l’accesso ai commenti? Rendete il processo il più semplice e ovvio possibile.

I thread di commenti (discussioni)

I thread di commenti richiedono l’attivazione in in Impostazioni > Discussione.

Tutti i temi che utilizzano il template tag appropriato per elencare i commenti, ossia wp_list_comments(), supportano questi thread.

Ecco cosa prendere in considerazione sui thread:

• Che livello di profondità devono avere i thread? Si tratta di un’impostazione dell’amministratore e dovete accertarvi di supportarla nel vostro modello.
• Assicuratevi che il link Rispondi abbia uno stile appropriato.
• Assicuratevi che il link Cancella risposta abbia uno stile appropriato.

Le risposte ai commenti terminano all’interno del tag <li> specifico di quel commento, in un tag <ul> con la classe children.

ecco un esempio:

<<li> [Contenuto dei commenti di livello superiore] 
 <ul class="children"> 
   <li> [Risposta di primo livello] 
    <ul class="children"> 
      <li> [Risposta di secondo livello] 
      </li> 
     </ul> 
    </li> 
   </ul>
  </li>
  <li> [Commento successivo al livello superiore]
  </li>

Il numero di tag ul con la classe children consentito è determinato dall’impostazione WordPress, di cui 5 risposte è il valore di default. per creare un aspetto migliore è consigliabile impostare il margine o il padding per la classe children su 10 pixel o su un valore superiore, ovviamente tutto in base allo stile del tema, ma è consigliabile che ogni risposta abbia un rientro rispetto a quella superiore.

Assegnare uno stile al link Rispondi è più semplice. Il link si trova in un tag <a> con la classe comment-reply-link, quindi assegnate semplicemente lo stile desiderato.

ecco un esempio:

a.comment-reply-link { 
 float:right; 
 font-size: 12px;
}

Lo stesso vale per il link Cancella risposta che viene mostrato subito sotto a Commenta.

Tutto dipende dall’aspetto del template file comments.php, ovviamente, se non intervengono altri template file. Di default è incluso in un tag <a> con la classe cancel-comment-reply.

Applichiamogli un grassetto per esempio:

a#cancel-comment-reply { 
 font-weight: bold; 
}

I thread di commenti sono un metodo valido per rendere più gestibili le conversazioni molto lunghe, quindi prendetene in considerazione l’utilizzo se gli argomenti trattati nel sito suscitano dibattiti.

Evidenziare i commenti dell’autore

Potrebbe essere utile distinguere i commenti dell’autore rispetto a quelli dell’utente.

I commenti sono disposti in un elenco, (ol) con ogni commento che rappresenta un elemento dell’elenco (li). È qui che potete fare la differenza, dato che wp_list_comments() applica alcune classi CSS a ogni elemento li. Tra queste classi si trova bypostauthor, se è l’autore del post che ha scritto un commento.

sfondo giallo ai commenti dell’autore:

li.bypostauthor { 
 background: yellow; 
}

Tutto ciò che è correlato al particolare commento è disponibile all’interno del tag li.bypostauthor.

Potete modificare il modo in cui viene visualizzato l’ avatar con la classe corrispondente img.avatar, o i metadati del commento con div.comment-author e div.comment-meta, oltre al testo vero e proprio dei commenti.

Impostiamo la dimensione del carattere del testo dei commenti su 18 pixel, solo per divertimento, e mantenete giallo lo sfondo:

li.bypostauthor { 
 background: yellow; 
}
li.bypostauthor div.comment-body p { 
 font-size: 18px; 
}