Curiosidades Software Tutoriales WordPress

Como añadir los comentarios en una burbuja y en la cabecera de las entradas de la plantilla WordPress BlueGrace

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.

Calendario

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>

Calendario Burbuja Comentarios 2 El resultado es una bonita burbuja que se situará sobre nuestro calendario.

2 Comentarios

  • Perfecto Vera…., muchas gracias por compartirlo, había visto el efecto en CSS-Tricks como tu bien has indicado, pero me pareció imposible de aplicar a este tema. Se ve bien con Chrome y Firefox, en IE la burbuja se separa un poco más pero de todas formas, muchísimas gracias por compartirlo, lo aplicaré a mi blog.

    Una vez más…, gracias.

VeraMagazine  - Tu canal de Prensa y Revistas.

Nota: recuerda que debes tener Telegram instalado.
Unirme
VeraMagazine