Aplicar estilos CSS a entradas según la fecha de publicación

Cómo añadir una clase o un mensaje en entradas antiguas de WordPress

Al rediseñar webs que ya tienen algunos años, y por tanto, bastantes entradas antiguas que se han ido acumulando, es frecuente encontrarse con un problema que tiene fácil solución: marcar de alguna manera las entradas antiguas, para poder editar los estilos con CSS, diferenciarlas así de las entradas que se han publicado a partir del nuevo diseño.

Es lo que me pasó al renovar el diseño de esta web sobre noticias culturales basada en WordPress. Si el problema se soluciona añadiendo una clase HTML en la etiqueta <body>, una función como esta puede servir de ayuda:

// -----------------------------------------------------
// Nueva clase en <body> para entradas antiguas
// -----------------------------------------------------
function body_class_old_posts( $classes ) {
	if ( is_single() ) {
		global $post;
		$post_date = get_the_date('Y-m-d'); // Fecha de publicación de la entrada actual
		$old_posts = '2014-04-23'; // <-- Editar fecha para comparación

		// Si la entrada se publicó antes de la fecha establecida...
		if ( $post_date <= $old_posts ) {
			$classes[] = 'old-post'; // Clase que se añadirá a <body>
		}
	}
	return $classes;
}
add_filter( 'body_class', 'body_class_old_posts' );

Esta función solo afectará a las entradas (no páginas) cuya fecha sea anterior al 23 de abril de 2014. Es decir, si la fecha de publicación de la entrada es anterior a la especificada en el código, añadirá la clase “old-post” dentro de la etiqueta <body>, utilizando la función de WordPress body_class. Lógicamente, podemos editar esta fecha, respetando el formato: “año-mes-día”, o bien cambiándolo al definirlo en la línea anterior con get_the_date.

Una vez que tenemos las entradas antiguas marcadas, ya podemos aplicar estilos CSS personalizados a cualquier elemento de la página. Por ejemplo:

body.old-post { /* Añadir estilos CSS */ }
body.old-post .entry-content { /* Añadir estilos CSS */ }

Añadir un mensaje en las entradas antiguas (sin plugin)

Otra manera de enfocar el problema sería añadiendo una nota o aviso, es decir, no presentar algún estilo CSS diferente sinó mostrar directamente el mensaje. Además, para hacerlo más dinámico, en este caso la fecha será relativa (tiempo transcurrido desde la publicación de la entrada), en vez de fija como en el ejemplo anterior.

function old_post_message($content) {
	$postTime = get_the_time('U');
	$monthsAgo = strtotime("-1 month");
	if ( is_single() && $postTime < $monthsAgo ) {
		$content .= '<div id="old-post-message">';
		$content .= 'Nota: esta entrada se publicó hace más de un mes.';
		$content .= '</div>';
	}
	return $content;
}
add_filter( 'the_content' , 'old_post_message' );

En este caso, primero guardamos la fecha de la entrada con get_the_time (en tiempo Unix), después definimos el tiempo para que una entrada se considere antigua, en este caso un mes (-1 month) y finalmente creamos un bloque con la nota, que sólo se activará en caso de que estemos viendo una entrada (is_single) y se cumpla la condición de tiempo especificada.

Podemos cambiar “-1 month” por cualquier otra fecha, por ejemplo: “-1 year”, “-2 weeks”, “-15 days”, etc. Más información en el manual sobre strtotime.

Añadir un mensaje en las entradas antiguas (con plugin)

Si en vez de una clase HTML lo que queremos es incluir una nota que avise de que una entrada es antigua, existe un plugin que se llama Alert Post is Old que hace exactamente eso.

Este plugin añade una notificación en las entradas y páginas cuando se cumple la regla que hayamos definido. Por ejemplo: añadir un mensaje si la entrada tiene más de dos años. Tanto el texto del mensaje como la cantidad de años se pueden editar desde las opciones del plugin:

Mensaje en entradas antiguas de WordPress

Otro plugin similar es Old post notification.

Comentarios

  1. Aptoide

    La verdad que me ha gustado mucho este articulo.

    Voy a ponerlo en practica, ya que me resulta util informar al usuario de que es un post antiguo.

  2. Marina

    Hola buenas, yo tengo un blog de ofertas. Necesito usar un plugin como este pero necesito que salga en los post que tienen más de dos semanas. ¿Sabes si se puede modificar el plugin para que salte en post’s de esa antiguedad?. Y si es así, ¿sabes como he de hacerlo?. Gracias

  3. Daniel

    Hola Marina.
    He añadido un ejemplo para mostrar un mensaje con fecha relativa (hace X semanas, meses o años). A ver si te sirve.

    Si no, puedes probar este otro plugin: Old post notification.

  4. Luna

    Hola, buenas tardes. Te quería preguntar si esto puede funcionar en blogger. Y si se puede aplicar a las entradas individuales. Aumentar el ancho de estas y reducir la sidebar y los elementos de ambas, respectivamente.

    Un saludo.

  5. Daniel

    Hola Luna. No, estos ejemplos de funciones y plugins son específicos para WordPress, no funcionarán en Blogger.

  6. Snapchat

    Realmente me ha parecido un artículo muy interesante, ahora tocará ponerlo en práctica en entradas individuales.

  7. Rodolfo Divi

    Hola Daniel, gracias por publicar este artículo, muy útil, probaré utilizando el código ya que no me gusta tener wordpress sobrecargado de plugins.

  8. Jose

    Justo lo que buscaba para un diseño nuevo que estoy preparando, Gracias Daniel por el aporte, te añado a favoritos.

Y tú qué opinas?

Las URLs se convertirán en enlaces automáticamente. Tu dirección de email no se publicará ni se utilizará para enviar ningún tipo de información. Los mensajes que no aporten nada al tema que se trata en esta entrada se borrarán. Las imágenes que aparecen al lado de cada autor utilizan el servicio de Gravatar. Recuerda que puedes usar etiquetas HTML como <a href>, <code>, <em> o <strong> en los comentarios.

(necesario)

(opcional)