Els comentaris són una part fonamental de qualsevol bloc. Per aquesta raó no podeu obviar aquesta funcionalitat del tema visual i personalitzar-la en relació al disseny general del lloc web.

Obriu l'arxiu index.php del tema visual i afegiu la següent funció després del tercer bloc de l'estructura de l'article:

<div class="comentaris">     
   <?php comments_template();  ?>
</div>

Cliqueu a l'enllaç Sense comentaris d'un article o entrada qualsevol i veieu l'aspecte visual del formulari de comentaris:

Com heu verificat, el formulari dels comentaris no té cap estil associat i es presenta en la seva forma més crua.

Per tal que associeu correctament els estils, cal que analitzeu l'estructura generada per Wordpress del formulari de comentaris:

• L'estructura està contenida dins de la divisió:
  

  <div class="comentaris">

• Una nova subdivisió representada per\\

  <div id="respond">

• El text Leave a reply és una capçalera de nivell tres (h3)
• A continuació un formulari (form) format per tres camps (Name, Mail i Website), una àrea de text (textarea) i un botó de confirmació.

Obriu el fitxer style.css del tema visual i doneu-li un estil general a la regió de .comentaris i #respond:

/*------ comentaris --------*/
 
.comentaris {
	color: #3c3c3c;
	background-color: #efefef;
 
}
 
 
#respond {
	border-top: 2px solid #fefefe;
	padding: 15px 0px 20px 20px;
}

Actualitzeu el navegador i veieu el resultat:

Es el moment que li doneu estil a la capçalera de nivell tres i a la resta de text:

.comentaris h3 {
	font-family: Arial, sans-serif;
	font-size: 18px;
        margin-bottom: 10px;
}
 
.comentaris p {
	font-family: Arial, sans-serif;
	font-size: 12px;
}
 
.comentaris p a {
	font-family: Arial, sans-serif;
	font-size: 12px;
	color: #3c3c3c;
}

Veieu els canvis:

Proporcioneu un estil al formulari del comentari.

.comentaris form p {
	margin-bottom: 7px;
}
 
.comentaris textarea {
	border: none;
	width: 95%;
	font-size: 16px;
	margin-top: 15px;
	padding: 5px;
	font-family: Arial, sans-serif;
	color: #5c5c5c;
 
}
 
.comentaris input {
	border: none;
	margin-bottom: 5px;
}
 
.comentaris input:hover {
	background-color: #efef6f;
}
 
.comentaris input#submit {
	border: none;
	margin-bottom: 15px;
	font-size: 18px;
	padding: 5px;
}

Refresqueu la finestra del navegador i comproveu els canvis:

Proveu a escriure un comentari. El resultat, un cop validat el comentari per l'administració del bloc, sense cap estil associat és massa cru:

L'estructura del comentari, tal com la genera Wordpress per defecte, és aparentment complexa, però si realitzeu una anàlisi detallat comprovareu que:

• El bloc dels comentaris s'inicialitza amb una capçalera de nivell tres:

  <h3 id="comments">One Response to “Tercera entrada”</h3>

• Segueix l'element de llista numerada:

  <ol class="commentlist">

  que conté els comentaris associats i publicats d'un article.

Proporcioneu un estil a aquests dos elements:

#comments {
	border-top: 1px solid #cfcfcf;
	padding: 15px 0px 0px 20px;
}
 
.commentlist {
	padding: 0px 0px 20px 20px;
}

i veieu el resultat:

Ara és moment que tracteu l'estil de cada comentari. Aquí teniu la següent proposta:

.comment-body {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 5px;
	margin:  15px 15px 15px 0;
	color: #efefef;
	background-color: #4f4f4f;
}
 
 
.comment-author {
	float: left;
	font-family: Arial, sans-serif;
	font-size: 15px;
}
 
.fn a {
	font-family: Arial, sans-serif;
	font-size: 15px;
	color: #efefef;
}
 
.comment-meta {
	text-align: right;
}
 
.comment-meta a {
	font-family: Arial, sans-serif;
	font-size: 12px;
	color: #afafaf;
}
 
.comment-body p {
	margin-top: 10px;
	padding: 10px;
	clear: both;
	font-size: 14px;
	text-indent: 10px;
	line-height: 1.3;
}

Visualment obtendríeu el següent aspecte estètic de la llista de comentaris: