Un pequeño detalle que separa a los sitios de WordPress amateur de los profesionales es cómo muestran las fechas.
Plataformas importantes como Twitter y Medium utilizan fechas relativas (como "hace 5 minutos" o "hace 2 semanas") porque le dicen instantáneamente a los lectores cuán reciente es el contenido.
Ahora puedes agregar esta misma función a tu sitio de WordPress.
Habiendo agregado fechas relativas a muchos sitios de WordPress, podemos decirte que este simple cambio a menudo conduce a un mejor compromiso, ya que los visitantes pueden identificar rápidamente tu contenido más reciente.
La buena noticia es que agregar esta función es mucho más simple de lo que la mayoría de la gente piensa.
En esta guía, compartiremos dos métodos probados para implementar fechas relativas en WordPress.
💡Respuesta rápida: Cómo mostrar fechas relativas en WordPress
¿Tienes prisa? Echa un vistazo a las formas más fáciles de mostrar fechas relativas en WordPress:
- Método 1: Bloque de fecha de WordPress – Úsalo si quieres una solución rápida y gratuita con una configuración mínima y no te importan los problemas de caché.
- Método 2: Plugin Meks Time Ago – Úsalo si quieres fechas relativas precisas incluso en sitios cacheados, con fácil personalización y configuración técnica mínima.
- Método 3: Código personalizado – Úsalo si te sientes cómodo editando archivos de temas y quieres control total sobre cómo se muestran las fechas.
¿Por qué usar fechas relativas en WordPress?
Las fechas relativas permiten a tus lectores ver de un vistazo cuán reciente es tu contenido, haciendo que tu sitio sea más atractivo y fácil de navegar que usando fechas exactas.
Así es como las fechas relativas pueden ayudar:
- Muestra la frescura al instante: En lugar de "25 de noviembre de 2025", tus publicaciones pueden mostrar "hace 2 días", para que los visitantes sepan de inmediato que el contenido es reciente.
- Mejora la experiencia del usuario: Los lectores pueden detectar rápidamente publicaciones nuevas sin tener que calcular las fechas ellos mismos.
- Formato familiar: Plataformas de redes sociales como Facebook y Twitter ya usan fechas relativas, por lo que tu audiencia está acostumbrada a este estilo.
Sin embargo, vale la pena señalar que las fechas relativas no son adecuadas para todos los tipos de sitios web.
Por ejemplo, si tienes un blog histórico o un sitio donde las fechas precisas son cruciales, es mejor usar fechas absolutas. La clave es considerar el tipo de contenido y las preferencias de tu audiencia al decidir si agregar fechas relativas a tu sitio de WordPress.
Dicho todo esto, veamos 3 formas de agregar fechas relativas en WordPress.
- Método 1: Usando el bloque de fecha de WordPress (Rápido y gratuito)
- Método 2: Usando el plugin Meks Time Ago (Gratuito y personalizable)
- Method 3: Using Custom Code (Advanced but More Customizable)
- Consejos adicionales para personalizar tu blog de WordPress
💡Nota: Ten en cuenta que si tu sitio utiliza plugins de caché o caché a nivel de host, las fechas relativas renderizadas en el servidor (Métodos 1 y 3) podrían no actualizarse correctamente para todos los visitantes.
Una fecha que diga “hace 1 minuto” podría tener en realidad horas de antigüedad. Si no te importa esta limitación, aún puedes usar el Método 1 o el Método 3.
De lo contrario, el Método 2 (plugin Meks Time Ago) generalmente evita este problema, ya que actualiza las fechas del lado del cliente y funciona bien con páginas cacheadas.
Método 1: Usando el bloque de fecha de WordPress (Rápido y gratuito)
¿Sabías que el bloque de fecha de WordPress se puede configurar para usar fechas relativas? Esta es la forma más fácil de mostrar fechas relativas sin instalar un plugin o agregar código personalizado a tu sitio web de WordPress.
Sin embargo, hemos encontrado dos inconvenientes al usar este método. En primer lugar, no permite mucha personalización. Por ejemplo, no puedes mostrar fechas como 'Hoy' o 'Ayer' en lugar de 'hace X minutos' o 'hace X horas'.
En segundo lugar, el bloque de Fecha de WordPress es utilizable en plantillas de un tema de bloques de WordPress, pero no en las de un tema clásico. Si estás usando un tema clásico, te sugerimos seguir el Método 2 o el Método 3.
En este tutorial, te mostraremos cómo personalizar el bloque de Fecha de WordPress en la parte de la plantilla de ‘Metadatos de publicación’ de tu tema de bloques para que muestre fechas relativas. Usaremos el editor de sitio completo para esto.
Esta parte de la plantilla es responsable de mostrar información sobre tus publicaciones de blog, como el autor, la categoría y la fecha de publicación.
Dicho esto, el bloque de Fecha también funcionará si lo agregas a cualquier publicación o página en el editor de bloques.
Consejo profesional: Si no estás viendo el personalizador de temas en tu administrador de WordPress, significa que probablemente estés usando un tema de bloques.
Primero, ve a Apariencia » Editor para abrir el editor de sitio completo.
Ahora verás varias opciones para personalizar tu tema de WordPress.
Aquí, haz clic en 'Patrones'.
En la siguiente página, verás todos los patrones y partes de plantilla que tiene tu tema.
Simplemente selecciona la opción 'Meta de publicación'.
Ahora deberías ver la parte de plantilla Meta de publicación.
Aquí, haz clic en el bloque que dice 'Fecha de publicación', que es el bloque de Fecha de WordPress. Al hacer clic en él, se abrirá la barra lateral de configuración del bloque en el lado derecho.
Lo que quieres hacer es deshabilitar la configuración de 'Formato predeterminado' y elegir el formato 'hace 3 meses'.
Puedes mantener habilitada la configuración de 'Enlace a la publicación' para que el bloque de Fecha enlace a la publicación del blog en la que aparece, o deshabilitarla. También puedes activar 'Mostrar fecha de última modificación' si deseas mostrar la última vez que se actualizó la publicación en lugar de cuándo se publicó por primera vez.
Una vez hecho, simplemente haz clic en 'Guardar'.
Ahora deberías ver todas las instancias de tu plantilla 'Post Meta' en tu sitio web usando fechas relativas.
Método 2: Usando el plugin Meks Time Ago (Gratuito y personalizable)
Si buscas un plugin sencillo para mostrar fechas y horas relativas en WordPress, tenemos una excelente opció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.
Dicho esto, este método tampoco funciona si quieres que las fechas se muestren como 'Hoy' o 'Ayer' en lugar de 'hace X segundos' o 'hace X días'. Sin embargo, puedes personalizar cosas como a qué publicaciones añadir las fechas relativas e incluso reemplazar la palabra 'hace'.
Para usar Meks Time Ago, puedes instalar y activar el plugin de WordPress en tu área de administrador.
Después de eso, ve a Ajustes » General en tu panel de control. Desplázate hacia abajo y encontrarás los ajustes del plugin Meks Time Ago.
El primer ajuste que debes habilitar es dónde aplicar el formato 'hace tiempo'. Aquí, necesitas seleccionar 'Fecha' y 'Hora' para mostrar la fecha relativa de cuándo se publicó por primera vez la entrada.
Alternativamente, puedes elegir 'Fecha (modificada)' o 'Hora (modificada)' si deseas mostrar la última vez que se actualizó la entrada, no cuándo se publicó por primera vez.
También puedes elegir si aplicar este formato de fecha a entradas que no tengan más de un cierto 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.
Elegimos mantenerla después de la fecha relativa porque la mayoría de las personas están familiarizadas con esta redacción.
Finalmente, puedes reemplazar la palabra 'hace' con un término diferente si es necesario. También puedes simplemente dejarla en blanco.
Una vez que hagas eso, simplemente haz clic en ‘Guardar cambios’.
¡Eso es todo! Ahora, todas las fechas de tus publicaciones tendrán fechas relativas. Puedes ver tus cambios en móvil, escritorio y tableta para asegurarte de que todo se vea bien.
Aquí tienes un ejemplo:
Método 3: Usando código personalizado (Avanzado pero más personalizable)
Este método implica código personalizado, y como explicamos anteriormente, es una mejor opción si deseas mostrar las fechas como ‘Hoy’ o ‘Ayer’ en lugar de ‘hace X minutos’ o ‘hace X horas’.
¡Pero no te intimides! Te guiaremos a través del proceso paso a paso. Además, utilizaremos un plugin de fragmentos de código llamado WPCode, que hace que sea seguro y fácil agregar código personalizado sin romper tu sitio web.
Hemos probado exhaustivamente el plugin y lo hemos encontrado muy confiable. Puedes obtener más información sobre el plugin en nuestra reseña de WPCode.
Primero, instala y activa el plugin de WordPress en tu área de administrador.
Nota: WPCode también tiene un plan gratuito que puedes usar. Sin embargo, actualizar a la versión pro te dará acceso a funciones como una biblioteca en la nube de fragmentos de código, lógica condicional inteligente y más.
Después de eso, necesitas ir a Fragmentos de Código » + Agregar Fragmento. Luego, selecciona 'Agregar tu código personalizado (Nuevo Fragmento)' y haz clic en el botón '+ Agregar Fragmento Personalizado'.
Ahora, dale un nombre a tu nuevo código personalizado. Puede ser algo simple, como 'Fecha Relativa Formateada con Hora'.
Además, cambia el Tipo de Código a 'Fragmento de PHP'.
Una vez hecho esto, simplemente copia y pega el fragmento de código a continuación en el cuadro de 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 2:30 PM' o 'Hace 3 días a las 10:15 AM'. Esto hace que sea más fácil para tus lectores entender la antigüedad de una publicación.
La segunda función, relative_date_shortcode, crea un shortcode que puedes usar en WordPress. Este shortcode te permite agregar fácilmente fechas relativas a tu contenido sin cambiar los archivos de tu tema.
Al usar este código, puedes hacer que las fechas de tus publicaciones sean más fáciles de usar para los lectores. Los lectores verán rápidamente cuán reciente es tu contenido, lo que puede hacer que tu sitio se sienta más actual y atractivo.
A continuación, desplázate hacia abajo hasta la sección 'Inserción'. Luego, elige 'Insertar automáticamente' para el Método de inserción y 'Solo frontend' para la Ubicación.
En la esquina superior derecha, cambia el interruptor de 'Inactivo' a 'Activo' y haz clic en el botón 'Guardar fragmento'.
Con tu código activo, veamos cómo puedes habilitar las fechas relativas en tu blog de WordPress. El proceso diferirá según el tipo de tema que estés utilizando.
Cómo agregar el formato de fecha relativa en temas de bloques
Si usas un tema de bloques, entonces puedes simplemente reemplazar el bloque de Fecha de WordPress con el shortcode que creaste en tu parte de plantilla de Metadatos de publicación.
Primero, dirígete a Apariencia » Editor.
Ahora verás el menú principal del editor de sitio completo.
Haz clic en 'Patrones'.
Ahora deberías ver todos los patrones y partes de plantilla que ofrece tu tema de bloques.
Aquí, elige la opción 'Metadatos de publicación'.
Primero, necesitas eliminar el bloque de Fecha existente para poder reemplazarlo con nuestro shortcode.
Para hacer esto, puedes hacer clic en el bloque de Fecha.
Si te resulta difícil hacer clic en él, puedes hacer clic en el botón 'Vista de lista' en la parte superior y seleccionar el bloque 'Fecha'. Luego, haz clic en el menú de tres puntos y elige 'Eliminar'.
Con el bloque de Fecha eliminado, haz clic en el bloque 'Shortcode' en tus Metadatos de publicación.
Puedes hacer esto haciendo clic en el botón ‘+’ en cualquier parte de la página y arrastrando y soltando el bloque de Shortcode allí.
Después de eso, escribe el siguiente shortcode en el bloque:
[relative_date]
Una vez hecho esto, simplemente haz clic en ‘Guardar’.
Ahora, tu plantilla de entrada individual usará fechas relativas.
Así es como se ve en nuestro sitio de demostración:
Cómo agregar el formato de fecha relativa en temas clásicos
El proceso para agregar 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 configuraciones distintas.
Pero ten paciencia. Te daremos un ejemplo para que puedas entender fácilmente cómo hacerlo por tu cuenta, ya sea que uses un tema de WordPress gratuito o premium.
Si esta es la primera vez que personalizas los archivos de tu tema clásico, te recomendamos hacerlo en un sitio de staging o una versión local de tu sitio de WordPress. De esta manera, cualquier error inesperado causado por la edición del código no afectará tu sitio web en vivo.
El primer paso que debes tomar es encontrar el archivo del tema responsable de mostrar los metadatos de tu publicación. Este puede ser:
- Tu archivo de publicación única (generalmente llamado single.php)
- La parte de la plantilla que muestra el contenido de tu publicación (algo como content.php)
- Tu archivo de etiquetas de plantilla, que contiene funciones para mostrar información de la publicación (comúnmente llamado template-tags.php)
Como regla general, debes buscar líneas de código que muestren la fecha de la publicación. 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 tema de WordPress editar usando un plugin sencillo. Alternativamente, puedes contactar a tu desarrollador de temas de WordPress o consultar su documentación para obtener más ayuda.
En nuestro caso, el archivo responsable de mostrar la fecha de la publicación es template-tags.php. Aquí está el código original completo que el tema estaba usando 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í, puedes abrir el archivo vía FTP o el administrador de archivos de tu proveedor de hosting de WordPress.
Si eres usuario de Bluehost, entonces puedes usar el administrador de archivos iniciando sesión en tu cuenta de hosting web. Luego, en el panel de control, haz clic en la pestaña 'Sitios web' y selecciona 'Configuración' para el sitio que intentas personalizar.
Esto abrirá la página de configuración de tu sitio.
Cambia a la pestaña 'Avanzado' y haz clic en el botón 'Administrar' en la sección Administrador de archivos.
Ahora deberías estar en el administrador de archivos de Bluehost.
Dado que nuestro archivo se llama template-tags.php, tuvimos que ir a public_html » wp-content » nombre-del-tema » inc.
Ahora verás varios archivos para elegir.
Aquí, procede y elige template-tags.php. Haz clic derecho en el archivo y selecciona 'Editar'.
Ahora, localiza el código que es responsable de mostrar la fecha de publicación.
Puedes usar las teclas CTRL / Comando y F para hacer esto.
Ahora, tendrás que editar este código en particular para que llame a la función human_readable_relative_date que agregamos usando WPCode anteriormente.
Así es como reemplazamos el código original de if ( ! function_exists( 'twentysixteen_entry_date' ) ) : a 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 que hayas modificado el código, haz clic en el botón ‘Guardar Cambios’.
Si tu código no funciona y eres un principiante total, te sugerimos usar una herramienta de IA como ChatGPT de OpenAI para averiguar qué está mal con tu código.
Podrías hacer una pregunta simple como: ‘Hola, estoy intentando hacer X usando el siguiente código [pega tu código aquí], pero no funciona. ¿Puedes ayudarme a averiguar qué está mal con esto?’
Dicho esto, si tu código funciona, esto es lo que deberías ver en la plantilla de tu publicación individual:
Consejos adicionales para personalizar tu blog de WordPress
Además de agregar fechas relativas a tus publicaciones de WordPress, hay muchas otras formas de personalizar tu blog. Aquí tienes algunas ideas:
- Cómo dar estilo a categorías individuales de forma diferente en WordPress
- Cómo agregar una barra de progreso en tus publicaciones de WordPress
- Cómo establecer una imagen de respaldo predeterminada para las miniaturas de las entradas de WordPress
- Cómo dar estilo a cada publicación de WordPress de manera diferente
- Cómo agregar una barra de progreso de lectura en las entradas de WordPress
- Cómo resaltar publicaciones nuevas para visitantes recurrentes en WordPress
- Cómo mostrar enlaces de navegación de migas de pan en WordPress
Esperamos que este artículo te haya ayudado a aprender cómo mostrar fechas relativas en WordPress. También te puede interesar consultar nuestras selecciones expertas de los mejores constructores de páginas de arrastrar y soltar para WordPress y nuestra guía definitiva sobre cómo editar un sitio web de WordPress.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Dennis Muthomi
He usado fechas relativas en un sitio de WordPress de noticias (en el nicho de entretenimiento) con un enfoque de código personalizado similar y funciona muy bien para aumentar la participación del usuario.
Un pequeño consejo que me gustaría añadir: considera usar lógica condicional para mostrar fechas absolutas para publicaciones más antiguas que un cierto umbral (por ejemplo, 1 año).
Esto dará contexto al contenido perenne mientras se siguen usando fechas relativas para las publicaciones recientes.
¡Realmente quería compartir eso!
Ziaul Hai
Quiero saber cómo eliminar las fechas relativas. Mi tema de WordPress muestra la fecha relativa por defecto. Pero no puedo cambiar eso.
Soporte de WPBeginner
Podrías reemplazar el `relative_post_the_date` con el PHP de este artículo dependiendo de cómo quieras que se muestre, pero si contactas con el soporte de tu tema, es posible que tengan un método incorporado para deshabilitar este estilo de fecha.
Administrador
Sreeharsh
Hola, estoy obteniendo una marca de tiempo incorrecta usando el plugin Meks Time Ago en mi pantalla de inicio. Para una publicación de hace 9 horas, muestra hace 2 semanas. Por favor, ayúdame a resolverlo.
Gracias.