Resaltar la fecha y cantidad de comentarios en WordPress
¿Te gusta la forma de mostar la fecha y cantidad de comentarios en los post que muestra la imagen de arriba? ¿Se ve bien, verdad? Y lo mejor es que es muy fácil de implementar.
Antes de implementarlo, te recomiendo que veas el demo on-line en Yoast.com para ver como resultaría. A continuación pongo el código para implementar esto (perdón por el salto, pero es muy largo)
Por cierto, tendrán que subir sus iconos. Si quieren los de la imagen (lo cual recomiendo) pueden usar los “Calendar icons” y subirlos a la carpeta “images” de su tema.
Coloquen esto en cualquier parte de el archivo CSS de el tema de su blog:
-
p.date {
-
width: 42px;
-
height: 10px;
-
padding: 18px 0 14px 0;
-
text-align: center;
-
}
-
p.date span { display: none; }
-
/************************************************
-
* iconos para cada mes *
-
************************************************/
-
.month1 { background: url(images/cal_01.gif) no-repeat 0 0; }
-
.month2 { background: url(images/cal_02.gif) no-repeat 0 0; }
-
.month3 { background: url(images/cal_03.gif) no-repeat 0 0; }
-
.month4 { background: url(images/cal_04.gif) no-repeat 0 0; }
-
.month5 { background: url(images/cal_05.gif) no-repeat 0 0; }
-
.month6 { background: url(images/cal_06.gif) no-repeat 0 0; }
-
.month7 { background: url(images/cal_07.gif) no-repeat 0 0; }
-
.month8 { background: url(images/cal_08.gif) no-repeat 0 0; }
-
.month9 { background: url(images/cal_09.gif) no-repeat 0 0; }
-
.month10 { background: url(images/cal_10.gif) no-repeat 0 0; }
-
.month11 { background: url(images/cal_11.gif) no-repeat 0 0; }
-
.month12 { background: url(images/cal_12.gif) no-repeat 0 0; }
-
/************************************************
-
* Burbuja con numero de comentarios*
-
************************************************/
-
.shield {
-
position: relative;
-
}
-
.commentscloud {
-
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;
-
}
Después de colocar ese código CSS, tendrán que decirle a WordPress donde quieren que se ponga.Para esto, simplemente copiamos y pegamos el siguiente código en la parte en donde queremos que el calendario y la burbuja de comentarios aparezca:
-
<div class=“shield”>
-
<p class=“date month<?php the_time(‘n’); ?>”>
-
<span><?php the_time(‘F’); ?></span>
-
<?php the_time(‘j’); ?>
-
<span><?php the_time(‘S’); ?></span>
-
</p>
-
<div class=“commentscloud”>
-
<?php comments_number(’0′, ’1′, ‘%’); ?>
-
</div>
-
</div>
Vía: Xyberneticos
