Resaltar entradas del día en WordPress

Alexander Moya me ha contactado hace un par de días para preguntarme sobre la posibilidad de escribir un artículo en TecnoBITA como invitado, así que decidí aceptar y ver si de esa forma abro definitivamente una nueva categoría en el blog sobre Programación y Diseño Web.

Tutorial creado por Alexander Moya, autor del blog de tecnología TecnoVits

Resaltar entradas en WordPress

Resaltar las entradas del día puede ser muy útil para nuestros visitantes, aquellos no suscritos al RSS del blog, pueden estar entrando diariamente para revisar las últimas noticias, adelantos o novedades del día.

Sin embargo deben estar buscando de artículo en artículo, cuáles fueron escritos hoy y cuales no. Pero qué tal si quisiéramos facilitar este proceso, separar los artículos de hoy, del resto de artículos?

Ahí es cuando podemos hacer uso de algunas funciones pequeñas y sencillas de usar, WordPress viene naturalmente hecho para ser extendido en muchas formas, nosotros en este tutorial nos ensuciaremos las manos con un poquito de código PHP, sin embargo como dije antes es muy sencillo y no hay donde perderse.

Separar las entradas:

  • Abrimos index.php de la instalación de WordPress
  • Buscamos el loop de wordpress que inicia en:
   1: <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  • WordPress cuenta con métodos que cuentan los segundos transcurridos desde el unix Epoch (1 de enero de 1970), este método es ampliamente usado en varias áreas, lo que haremos es capturar el tiempo de cada entrada en el index.php y compararla con el día actual, ambos en segundos desde 1970, para ello copiamos y pegamos ambas líneas luego de la instrucción del punto anterior:

<?php $today = date(“Y-m-d”); $post_time = get_the_time(‘U’); $today_unix = strtotime($today);
if ($post_time >

   1: <?php $today = date("Y-m-d"); $post_time = get_the_time('U'); $today_unix = strtotime($today);
   2: if ($post_time > $today_unix) { $hoy = yes; } else { $hoy = no; } if ($hoy === yes) {    echo('<div id="hoy">'); } ?>

Aquí ocurrió lo siguiente:

  1. Estamos guardando el día de hoy en una variable php llamada $today y luego la transformamos en segundos con la medida del epoch en $today_unix.
  2. En $post_time guardamos la fecha en segundos desde el epoch de la entrada actual.
  3. El if compara las fechas, si son iguales guarda un yes en $hoy, de lo contrario guarda un no.
  4. Si $hoy tiene un yes, abre un nuevo div titulado “hoy”, como bien sabemos los divs son cajas invisibles que nos permiten manipular su contenido a antojo con la ayuda de CSS.
  • Buscamos el final del loop de WordPress que termina en:
   1: <?php endwhile; else: ?>
   2: <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
   3: <?php endif; ?>
  • Antes del final agregamos:
   1: <?php if ($hoy === yes) { echo('</div>'); } ?>

Si $hoy es igual a yes cerramos el contenedor div y ahora cada entrada de hoy esta encerrada en un div de id=”hoy”

Darle estilo:

Con esto terminamos de manipular el loop de WordPress y solo queda agregar un poco de CSS  para diferenciar las entradas del día actual:

  • Abrimos style.css
  • Agregamos la siguiente referencia a nuestro div id=”hoy” al final de style.css: #hoy { }

Adentro de estas dos llaves podremos incluir todo el código que queramos para diferenciar las entradas de hoy, por ejemplo como en mi tema actual yo muestro la entrada más reciente con un extracto y las demás como una lista de títulos, decidí agregar una imagen que represente los artículos escritos hoy:

Para lograr esto, solo tuve que crear el pequeño ícono que lo llame new.gif y agregar como imagen en el div de hoy en style.css:

   1: #hoy {
   2:     background: url(http://www.tecnovits.com/…/new.gif) no-repeat left;
   3:     margin-right: 4px;
   4: }

Y cada día solo se resaltaran con este íconos las entradas escritas ese día. Con CSS pueden jugar bastante, pueden cambiarle el fondo a los artículos de hoy, el color de la letra, imágenes diferentes, etc. Con CSS hay pocos limites.

¿Como resaltarías tu las entradas ?, cuéntanos en los comentarios.

Loading Facebook Comments ...

3 Comentarios en “Resaltar entradas del día en WordPress

  1. @det: Tamibén es posible, únicamente tendrías que reemplazar “$hoy = yes;” por el loop, sin embargo antes del loop tendrías que poner “?>” y despues del loop tendrías que poner “<?php”, ambos sin comillas.

    El else que sigue lo dejas vacio.
    Quitas el if y el echo que sigue.
    El loop antes seguía después de esto, ahora ya lo moviste dentro del primer if.
    Borras la linea que contiene el if con hoy == yes y el echo , toda esa linea.

    Con estos pasos te debería servir para mostrar solo los del día. Suerte con eso y nos avisas que tal te fue. 😉

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *