Cómo Añadir Los Comentarios En Una Burbuja En Wordpress Bluegrace

Cómo añadir los comentarios en una burbuja en WordPress BlueGrace

VeraSoul
3 Min.

Calendario Burbuja Comentarios En primer lugar hay que aclara que la implementación de este tipo de comentarios con burbujas están ubicados en la fecha tipo calendario y para el tema de mi blog me ha costado un poco llevarlo a cabo por la diferencia en la forma que debe ser implementada.

Por otro lado, esta entrada ha sido explicada en el blog CSS-Tricks , la cual ha sido escrita por Yoast.

Como puedes ver, la imagen que se muestra como calendario para el tema de este blog es la que se encuentra a la izquierda de este párrafo y el código para el CSS es el siguiente:

 

.entrydate .dateMonth {font-size : 10px; text-align : center; color : #FFF; margin : 0; padding : 3px 0 0;} .entrydate .dateDay {font-family : Times New Roman,Helvetica,Sans-Serif; font-size : 21px; font-weight : 700; text-align : center; color : #888; margin : 0; padding : 3px 0 0;} .entrydate .dateYear {font-size : 9px; padding : 0 0 0 1pt; } .entrydate {background : transparent url(images/date.png) repeat scroll 0 0; float : right;  height : 53px; margin-left : 5px; margin-top : 5px; width : 49px;}

La ventaja en comparación con el código presentado en CSS-Tricks radica en el empleo de una sola imagen para visualizar los meses y los días, pues estos se sitúan sobre el mismo en forma de texto mediante el siguiente código:

<?php if (!is_page()) : ?>  
   <div class="entrydate"> 
      <div class="dateMonth"> 
        <?php the_time('M');?> 
      </div> 
      <div class="dateDay"> 
       <?php the_time('j'); ?> 
       </div> 
    </div> <?php endif; ?>

Ahora bien, para añadir la burbuja, debemos copiar el siguiente código en nuestro fichero style.css

.burbuja {
	position: absolute;
	text-align: center;
	top: -4px;
	left: 22px;
	width: 30px;
	height: 24px;
	padding: 3px 0;
	background: url(images/bubble.png) no-repeat 0 0;
}

La imagen os la dejo aquí para que puedan descargarla: Bubble, recuerda asignarle la ruta adecuada.

Teniendo el CSS para la burbuja y conociendo en la plantilla el la parte del código que visualiza la fecha dentro del calendario solo nos queda ubicar la burbuja de los comentarios y para ello debemos obtener el número de comentarios mediante la función comments_number();

<div class="burbuja">   <?php comments_number('0', '1', '%'); ?>
</div>

Solo nos falta ubicar el código anterior en el lugar adecuado y para ello debemos colocarlo justo donde visualizamos el día (mirar código completo arriba) porque debemos sustituirlo por el siguiente:

<div class="entrydate">          <div class="dateMonth">         <?php the_time('M');?>  </div>  <div class="burbuja">             <?php comments_number('0', '1', '%'); ?>  </div>  <div class="dateDay">      <?php the_time('j'); ?>  </div>
</div>

El resultado es una bonita burbuja que se situará sobre nuestro calendario.

Compartir
2 Comentarios