Fecha en formato bonito un plugin de jQuery corriendo en wordpress
Hace un par de años John Resig el autor de jQuery escribió un árticulo muy bonito donde anunciaba una pequeña función que imprimía el día en un formato mas humano al cual denomino pretty-date , la función básicamente es la siguiente:
/* prettyDate
*
* recibe una fecha en formato ISO8601
* y devuelve la fecha en formato bonito
*/
function prettyDate(time){
// Lo primero que hace es obtener la diferencia
// de la fecha pasada con la fecha actual
var date = new Date((time || "").replace(/-/g,"/").replace(/[TZ]/g," ")),
diff = (((new Date()).getTime() - date.getTime()) / 1000),
day_diff = Math.floor(diff / 86400);
//Si la diferencia es invalida, quiere decir que el argumento pasado por el
// usuario es invalido por lo cual regresa null
if ( isNaN(day_diff) || day_diff < 0 || day_diff >= 31 )
return;
//Finalmente va atrapando el rango de los las diferencias para así devolver el resultado
return day_diff == 0 && (
diff < 60 && "just now" ||
diff < 120 && "1 minute ago" ||
diff < 3600 && Math.floor( diff / 60 ) + " minutes ago" ||
diff < 7200 && "1 hour ago" ||
diff < 86400 && Math.floor( diff / 3600 ) + " hours ago") ||
day_diff == 1 && "Yesterday" ||
day_diff < 7 && day_diff + " days ago" ||
day_diff < 31 && Math.ceil( day_diff / 7 ) + " weeks ago";
}
Posteriormente esta función se convirtió en un plugin de jQuery mantenido por jzaefferer (uno de los dev. del nucleo de jQuery). Pero… si analizamos detenidamente el código anterior del cual esta basado el plugin nos daremos cuenta que cuando la fechas rebasaba la semana el plugin truena, como se puede ver en el siguiente demo :S.
Este plugin lo empece a utilizar para la página de la Academia de Software Libre , sin mas me decidí a agregarle el soporte para meses y años, ademas de agregarle soporte para la lengua española (ver detalles de la confirmación), algunos de estos cambios están disponibles en la versión 1.1 disponible en el repositorio de jzaefferer sin embargo de momento la traducción completa esta disponible en mi repositorio (aunque quizás cuando lea esto mis cambios ya se hayan integrado).
Como usar este plugin es muy simple y personalizable
Una vez que obtengamos el plugin podemos usarlo de la siguiente manera:
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.prettydate.js"></script>
<script type="text/javascript" src="js/jquery.prettydate-es.js"></script>
<script>
jQuery(function ($) {
$(".entryDate").prettyDate({attribute: "datetime"});
});
</script>
</head>
<body>
<time datetime="2012-10-29T18:12:02+00:00" itemprop="dateCreated">
</time>
</body>
Veamos lo primero que hacemos es cargar la librería jQuery, posteriormente el plugin (prettydate.js) y finalmente su traducción al español (jquery.prettydate-es.js ojo el orden importa).
Luego en el ready de jQuery mandamos a llamar a los elementos que pertenezcan a la clase .entryDate para aplicarles el plugin, al momento de mandarle el argumento {attribute: "datetime"} estamos indicando que el atributo a convertir sera el datetime, si no indicamos esto por defecto buscaría el atributo title
$(".entryDate").prettyDate({attribute: "datetime"});
Hechando andar este plugin en WordPress
Bien lo primero que tenemos que hacer es mandar a llamar las librerias necesarias, por ejemplo deberíamos agregar en el header.php o footer.php de nuestra plantilla las siguientes lineas:
<?php
$rootPath = get_bloginfo('template_directory');
?>
<script src="<?php echo $rootPath; ?>js/jquery.js"></script>
<script src="<?php echo $rootPath; ?>js/jquery.prettydate/jquery.prettydate.js"></script>
<script src="<?php echo $rootPath; ?>js/jquery.prettydate/jquery.prettydate-es.js"></script>
<script language="Javascript" type="text/javascript">
$(function() {
$(".entry-date").prettyDate({attribute: "datetime"});
});
</script>
Una vez que tenemos esto estamos diciendo que le muestre la fecha en formato bonito a los elementos que pertenezcan a la clase entry-date y que a la vez tengan atributo datetime en formato ISO-8601 correcto, por lo cual faltaría generar dicha la salida desde nuestro tema de worpdress.
Finalmente en la cabecera del código de nuestro artículos agregamos el siguiente código en php:
<?php
printf(
'<a href="%1$s" title="%2$s" rel="bookmark">'.
'<time itemprop="dateCreated" datetime="%3$s">%4$s</time></a>',
get_bloginfo('url') . '/' . get_the_time('Y/m/d'),//Aqui la liga deberia de ir a los posts de ese día
'Artículos del día ' . get_the_date(),
get_the_time( 'c' ),
get_the_date()
);
Sólo como dato informativo la funcion
get_the_time
con el argumento ‘c’ regresa la fecha en formato ISO como lo indica en su API wordpress.
Quizás esto lo debería de meter en alguna función y agregarlo en su archivo function.php de la manera siguiente:
if ( ! function_exists( 'mitema_pretty_date_post' ) ) :
function mitema_pretty_date_post() {
// el código mostrado anteriormente
}
endif;
De esta forma solo bastaría con mandar a llamar la función para re-utilizarla, en el single.php o en el loop.php, content.php, etc… podría agregar:
mitema_pretty_date_post();
