Después de dirigir sitios WordPress durante muchos años, hemos aprendido que los pequeños cambios pueden marcar una gran diferencia. Uno de estos pequeños pero importantes detalles es cómo mostrar la fecha en tus entradas.
La mayoría de los blogs suelen mostrar la fecha exacta de publicación de una entrada. Pero utilizar fechas relativas como “hace 2 días” o “ayer” puede ser mejor para los lectores. Estas fechas indican rápidamente a los lectores la novedad y relevancia del contenido, lo que aumenta las probabilidades de que lo lean.
El problema es que la mayoría de los temas de WordPress no muestran las fechas de esta manera por defecto. Pero no se preocupe. Hemos descubierto 2 maneras fáciles de mostrar fechas relativas en tu sitio WordPress: una usando un plugin y otra usando un simple código.
¿Por qué mostrar fechas relativas en lugar de absolutas/exactas?
¿Te has fijado alguna vez en que las plataformas de medios sociales como Facebook o Twitter muestran las fechas de entrada como “hace 2 horas” o “hace 3 días” en lugar de fechas exactas? Esto se llama formato de fecha relativa.
A diferencia de las fechas absolutas (como “21 de agosto de 2024”), las fechas relativas en WordPress dan a sus lectores una idea rápida de la frescura de su contenido.
Veamos un ejemplo. Cuando los visitantes ven una entrada fechada “hace 2 días” en lugar de una fecha concreta, saben al instante que se trata de contenido reciente. De este modo, los lectores pueden saber rápidamente qué entradas son nuevas y merecen la pena sin tener que marcar / comprobar la fecha de hoy ni hacer cuentas.
Sin embargo, vale la pena señalar que las fechas relativas no son adecuadas para todo tipo de sitios web.
Por ejemplo, si tiene un blog histórico o un sitio en el que las fechas exactas son cruciales, puede que sea mejor utilizar fechas absolutas. La clave está en tener en cuenta el tipo de contenido y las preferencias del público a la hora de decidir si añadir fechas relativas a tu sitio de WordPress.
Dicho esto, veamos dos formas de añadir fechas relativas en WordPress. Hemos encontrado un plugin que facilita el proceso, pero también hemos encontrado un método de código que ofrece más control. Puede utilizar los enlaces rápidos a continuación para omitir a su método preferido:
Método 1: Usando el plugin Meks Time Ago (Gratis pero limitado)
Si estás buscando un plugin sencillo para mostrar fechas y horas relativas en WordPress, entonces tenemos una gran elección para ti. De todos los plugins de fechas relativas que hemos probado, Meks Time Ago es uno de los más fáciles para principiantes. Además, es gratuito y funciona tanto con temas clásicos como de bloques.
Para utilizar Meks Time Ago, puede instalar y activar el plugin de WordPress en su área de administrador / administración.
Después de eso, ve a Ajustes ” General en tu Escritorio. Desplázate hacia abajo y encontrarás los ajustes del plugin Meks Time Ago.
El primer ajuste que debes activar es dónde aplicar el formato de ‘hace tiempo’. Aquí, tienes que elegir ‘Fecha’ y ‘Hora’.
También puede elegir si desea aplicar este formato de fecha a entradas cuya antigüedad no supere un determinado número de minutos, horas, días y meses.
Decidimos optar por 12 meses.
A continuación, puedes cambiar dónde colocar la palabra “hace” en el formato de fecha.
Hemos optado por mantenerlo después de la fecha relativa porque la mayoría de la gente está familiarizada con esta formulación.
Por último, puede sustituir la palabra “hace” por otro término si es necesario. También puedes dejarla en blanco.
Una vez hecho esto, sólo tienes que hacer clic en “Guardar cambios”.
Ya está. Ahora, todas las fechas de tus entradas tendrán fechas relativas. Puedes ver tus cambios en móvil, escritorio y tableta para ver si todo se ve bien.
He aquí un ejemplo:
Algo que no nos gusta de Meks Time Ago es que, aunque la entrada se haya publicado hoy o ayer, el plugin mostrará la fecha de publicación como ‘hace X minutos’ o ‘hace X horas’.
A algunas personas no les importa este formato, pero otras pueden querer que la fecha se muestre como ‘Hoy’ o ‘Ayer’ en su lugar. Si eso es lo que prefieres, puedes seguir este método siguiente.
Método 2: Utilizar código personalizado (personalizable pero ligeramente avanzado)
Este método implica código personalizado y, como explicamos anteriormente, es la mejor opción si desea mostrar las fechas como ‘Hoy’ o ‘Ayer’ en lugar de ‘Hace X minutos’ o ‘Hace X horas’.
Pero no te dejes intimidar. Vamos a guiarte por el proceso paso a paso. Además, vamos a utilizar un plugin de fragmentos de código llamado WPCode, que hace que sea seguro y fácil de añadir código personalizado sin romper su sitio web.
Puedes aprender más acerca de este plugin en nuestra reseña / valoración de WPCode.
En primer lugar, instale y active el plugin de WordPress en su área de administrador / administración.
Después, debe ir a Fragmentos de código ” + Añadir fragmento. A continuación, seleccione “Añadir su código personalizado (nuevo fragmento)” y haga clic en el botón “+ Añadir fragmento personalizado”.
Ahora, dé un nombre a su nuevo código personalizado. Puede ser algo sencillo, como ‘Fecha relativa formateada con hora’.
Además, cambie el Tipo de código a ‘Fragmento de código PHP’.
Una vez hecho esto, copie y pegue el fragmento de código que aparece a continuación en el cuadro Vista previa del código:
/**
* Converts a timestamp into a human-readable relative date string.
*
* @param int $timestamp The timestamp to convert
* @return string The human-readable relative date string
*/
function human_readable_relative_date( $timestamp ) {
$time_difference = time() - $timest // Calculate the time difference between now and the timestamp
$seconds_in_a_day = 86400; // Number of seconds in a day
if ( $time_difference < 0 ) {
return 'Date is in the future'; // Handle future dates
} elseif ( $time_difference < $seconds_in_a_day ) {
return 'Today at ' . date( 'H:i', $timestamp ); // Handle same-day dates
} elseif ( $time_difference < 2 * $seconds_in_a_day ) {
return 'Yesterday at ' . date( 'H:i', $timestamp ); // Handle one-day-old dates
} elseif ( $time_difference < 7 * $seconds_in_a_day ) {
$days = floor( $time_difference / $seconds_in_a_day ); // Calculate full days ago
return $days . ($days == 1 ? ' day' : ' days') . ' ago at ' . date( 'H:i', $timestamp ); // Handle dates within the last week
} elseif ( $time_difference < 30 * $seconds_in_a_day ) {
$weeks = floor( $time_difference / ( 7 * $seconds_in_a_day ) ); // Calculate full weeks ago
return $weeks . ($weeks == 1 ? ' week' : ' weeks') . ' ago at ' . date( 'H:i', $timestamp ); // Handle dates within the last month
} elseif ( $time_difference < 365 * $seconds_in_a_day ) {
$months = floor( $time_difference / ( 30 * $seconds_in_a_day ) ); // Calculate full months ago
return $months . ($months == 1 ? ' month' : ' months') . ' ago at ' . date( 'H:i', $timestamp ); // Handle dates within the last year
} else {
$years = floor( $time_difference / ( 365 * $seconds_in_a_day ) ); // Calculate full years ago
return $years . ($years == 1 ? ' year' : ' years') . ' ago at ' . date( 'H:i', $timestamp ); // Handle dates older than a year
}
}
/**
* Shortcode function to convert a given timestamp or date to a human-readable relative date string.
*
* @param array $atts Shortcode attributes
* @return string The human-readable relative date string
*/
function relative_date_shortcode( $atts ) {
$attributes = shortcode_atts(
array(
'timestamp' => '', // Default value for 'timestamp' attribute
'date' => '', // Default value for 'date' attribute
),
$atts
);
// If no timestamp or date attribute provided, use the post's published date
if ( empty($attributes['timestamp']) && empty($attributes['date']) ) {
global $post;
if ( !is_null($post) ) {
$attributes['timestamp'] = get_the_time('U', $post->ID); // Get the post's timestamp
}
} elseif ( !empty($attributes['date']) ) {
$attributes['timestamp'] = strtotime($attributes['date']); // Convert 'date' attribute to timestamp
}
// Validate the timestamp
if ( !empty($attributes['timestamp']) && is_numeric($attributes['timestamp']) ) {
return human_readable_relative_date( $attributes['timestamp'] ); // Return the human-readable relative date
} else {
return 'Invalid timestamp or date'; // Return an error message if the timestamp is invalid
}
}
add_shortcode( 'relative_date', 'relative_date_shortcode' ); // Register the shortcode
La primera función, human_readable_relative_date, toma una fecha y la cambia a un formato fácil de usar.
Por ejemplo, puede mostrar “Hoy a las 14:30” o “Hace 3 días a las 10:15”, lo que facilita a los lectores la comprensión de la antigüedad de una entrada.
La segunda función, relative_date_shortcode, crea un shortcode que puede utilizar en WordPress. Este shortcode le permite añadir fácilmente fechas relativas a su contenido sin cambiar los archivos de su tema.
Utilizando este código, puede hacer que las fechas de sus entradas sean más fáciles de usar. Los lectores verán rápidamente lo reciente que es su contenido, lo que puede hacer que su sitio parezca más actual y atractivo.
A continuación, desplácese hasta la sección “Inserción”. A continuación, seleccione “Inserción automática” como método de inserción y “Solo portada” como ubicación.
En la esquina superior derecha, cambie el conmutador “Inactivo” a “Activo” y haga clic en el botón “Guardar fragmento de código”.
Con tu código activado, veamos cómo puedes activar las fechas relativas en tu blog de WordPress. El proceso variará en función del tipo de tema que estés utilizando.
Cómo añadir el formato de fecha relativa en temas de bloques
Si utiliza un tema de bloque, sólo tiene que añadir el shortcode a la parte de la plantilla ‘Post Meta’.
Esta parte de la plantilla se encarga de mostrar información acerca de las entradas de su blog, como el autor, la categoría y la fecha de publicación.
Consejo profesional: Si no ves el menú Personalizador de temas en el administrador de WordPress, probablemente estés utilizando un tema en bloque. De lo contrario, omita el siguiente método.
Primero, ve a Apariencia ” Editor para abrir el editor completo del sitio.
Ahora verá varias opciones para personalizar el tema de su bloque.
Aquí, haz clic en “Patrones”.
En la página siguiente, verás todos los patrones y partes de plantillas que tiene tu tema.
Sólo tiene que seleccionar la opción “Publicar Meta”.
Ahora debería ver la parte de la plantilla Post Meta.
En primer lugar, debe borrar el bloque Fecha existente para que podamos sustituirlo por nuestro shortcode.
Para ello, puede hacer clic en el bloque Fecha.
Si le resulta difícil hacer clic en él, puede simplemente hacer clic en el botón “Vista de lista” de la parte superior y seleccionar el bloque “Fecha”. A continuación, haz clic en el menú de tres puntos y elige “Borrar”.
Con el bloque Fecha borrado, sigue adelante y añade el bloque ‘Shortcode’ a la Meta de tu entrada.
Para ello, haga clic en el botón “+” en cualquier lugar de la página y arrastre y suelte allí el bloque Shortcode.
A continuación, escriba el siguiente shortcode en el bloque:
[relative_date]
Una vez hecho esto, sólo tienes que hacer clic en “Guardar”.
Ahora, la plantilla de una sola entrada utilizará fechas relativas.
Este es el aspecto que tiene en nuestro sitio de demostración:
Cómo añadir el formato de fecha relativa en temas clásicos
El proceso para añadir fechas relativas en temas clásicos de WordPress es un poco diferente y más técnico. Esto se debe a que cada tema clásico tiene diferentes configuraciones.
Pero ten paciencia. Te daremos un ejemplo para que puedas entender fácilmente cómo hacerlo por tu cuenta, tanto si utilizas un tema de WordPress gratuito como premium.
Si es la primera vez que personaliza los archivos de su tema clásico, le recomendamos que lo haga en un sitio de prueba o en una versión local de su sitio de WordPress. De esta forma, cualquier error inesperado causado por la edición del código no afectará a tu sitio web activo.
El primer paso que debe dar es encontrar el archivo del tema responsable de mostrar los metadatos de sus entradas. Esto puede ser:
- Su archivo de entrada única (normalmente llamado single.php)
- La parte de la plantilla que muestra el contenido de tu entrada (algo como content.php)
- El archivo de etiquetas de la plantilla, que contiene funciones para mostrar la información de las entradas (normalmente denominado template-tags.php).
Como regla general, debe buscar líneas de código que muestren la fecha de la entrada. Estas líneas suelen llamar a funciones de WordPress como the_date(), the_time(), get_the_date(), get_the_time(), get_the_modified_date() o get_the_modified_time().
Si necesitas ayuda, tenemos una guía paso a paso sobre cómo encontrar qué archivos de temas de WordPress editar usando un simple plugin. También puedes ponerte en contacto con el desarrollador de tu tema de WordPress o comprobar su documentación para obtener más ayuda.
En nuestro caso, el archivo responsable de mostrar la fecha de la entrada es template-tags.php. Aquí está el código original completo que el tema estaba utilizando para mostrar la fecha exacta de publicación:
if ( ! function_exists( 'twentysixteen_entry_date' ) ) :
/**
* Prints HTML with date information for current post.
*
* Create your own twentysixteen_entry_date() function to override in a child theme.
*
* @since Twenty Sixteen 1.0
*/
function twentysixteen_entry_date() {
$time_string = '<time class="entry-date published updated" datetime="%1$s">%2$s</time>';
if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) {
$time_string = '<time class="entry-date published" datetime="%1$s">%2$s</time><time class="updated" datetime="%3$s">%4$s</time>';
}
$time_string = sprintf(
$time_string,
esc_attr( get_the_date( 'c' ) ),
get_the_date(),
esc_attr( get_the_modified_date( 'c' ) ),
get_the_modified_date()
);
printf(
'<span class="posted-on"><span class="screen-reader-text">%1$s </span><a href="%2$s" rel="bookmark">%3$s</a></span>',
/* translators: Hidden accessibility text. */
_x( 'Posted on', 'Used before publish date.', 'twentysixteen' ),
esc_url( get_permalink() ),
$time_string
);
}
endif;
Para editar el archivo en sí, puede abrirlo a través de FTP o del gestor de archivos de su proveedor de alojamiento de WordPress.
Si es usuario de Bluehost, puede utilizar el gestor de archivos accediendo a su cuenta de alojamiento web. A continuación, en el Escritorio, haga clic en la pestaña “Sitios web” y seleccione “Ajustes” para el sitio que está tratando de personalizar.
Se abrirá la página de ajustes de su sitio.
Cambie a la pestaña “Avanzado” y haga clic en el botón “Gestionar” de la sección “Gestión de archivos”.
Ahora debería estar en el gestor de archivos de Bluehost.
Como nuestro archivo se llama template-tags.php, tuvimos que ir a public_html ” wp-content ” theme-name ” inc.
Ahora verá varios archivos para elegir.
Aquí, sigue adelante y elige template-tags.php. Haga clic con el botón derecho en el archivo y seleccione ‘Editar’.
Ahora, localice el código responsable de mostrar la fecha de publicación.
Para ello puedes utilizar las teclas CTRL / Comando y F.
Ahora, tendrás que editar este código en particular para que llame a la función human_readable_relative_date que añadimos antes usando WPCode.
Así es como hemos sustituido el código original de if ( ! function_exists( 'twentysixteen_entry_date' ) ) : por endif;:
if ( ! function_exists( 'twentysixteen_entry_date' ) ) :
/**
* Prints HTML with date information for current post.
*
* Create your own twentysixteen_entry_date() function to override in a child theme.
*
* @since Twenty Sixteen 1.0
*/
function twentysixteen_entry_date() {
// Get the post's published timestamp
$published_timestamp = get_the_time('U');
// Generate the human-readable relative date
$relative_date = human_readable_relative_date( $published_timestamp );
// Output the relative date
printf(
'<span class="posted-on"><span class="screen-reader-text">%1$s </span><a href="%2$s" rel="bookmark">%3$s</a></span>',
/* translators: Hidden accessibility text. */
_x( 'Posted on', 'Used before publish date.', 'twentysixteen' ),
esc_url( get_permalink() ),
$relative_date
);
}
endif;
Una vez modificado el código, haz clic en el botón “Guardar cambios”.
Si tu código no funciona, y eres un completo principiante en esto, entonces te sugerimos que utilices una herramienta de IA como ChatGPT de OpenAI para averiguar qué está mal en tu código.
Puedes hacer una pregunta sencilla como: “Hola, estoy intentando hacer X con el siguiente código [pega aquí tu código], pero no funciona. Puedes ayudarme a averiguar qué es lo que falla?”.
Dicho esto, si su código funciona, entonces esto es lo que debería ver en su plantilla de una sola entrada:
Consejos adicionales para personalizar su blog de WordPress
Aparte de añadir fechas relativas a tus entradas de WordPress, hay muchas otras formas de personalizar tu blog. Aquí tienes algunas ideas:
- Cómo cambiar el estilo de las categorías individuales en WordPress
- Cómo añadir una barra de progreso en tus entradas de WordPress
- Cómo establecer una imagen de reserva por defecto para las miniaturas de las entradas de WordPress
- Cómo dar un estilo diferente a cada entrada de WordPress
- Cómo añadir una barra de progreso de lectura en entradas de WordPress
- Cómo destacar nuevas entradas para los visitantes que regresan en WordPress
- Cómo enlazar migas de pan en WordPress
Esperamos que este artículo te haya ayudado a aprender cómo mostrar fechas relativas en WordPress. También puedes comprobar nuestra selección de los mejores maquetadores de arrastrar y soltar para WordPress y nuestra guía práctica sobre cómo editar un sitio web en WordPress.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Ziaul Hai
I want to know how to remove relative dates. My wordpress theme shows the relative date by default. But I am not able to change that.
WPBeginner Support
You could replace the relative_post_the_date with the PHP in this article depending on how you want it to display but if you reach out to your theme’s support they may have a built-in method to disable this style of date.
Administrador
Sreeharsh
Hi, I’m getting wrong time stamp using Meks Time Ago plugin in my homescreen. For a 9 hour ago post, its showing 2 weeks ago. Please help me solve it.
Thank you.