Cómo personalizar la visualización de los archivos WordPress en la barra lateral

Recientemente, estábamos trabajando en el diseño del sitio de un cliente que nos requería mostrar archivos mensuales organizados por año en la barra lateral. Probablemente fue muy fácil para su diseñador maquetarlo en Photoshop, pero fue un poco complicado de lograr en WordPress. Vea la imagen de abajo:

Ahora probablemente te estarás preguntando por qué fue difícil introducirlo en WordPress cuando wp_get_archives() lista los archivos mensualmente con el año al lado? Bueno, eso es porque este cliente sólo quería mostrar el año una vez a la izquierda. No hay una manera real de personalizar el estilo de la función wp_get_archives().

Buscamos soluciones en la web y no encontramos nada. Este problema tiene que ser realmente raro, sin embargo, encontramos que Andrew Appleton tenía un problema similar, y él tenía una solución para ello. Usamos sus códigos con algunas modificaciones.

El código de Andrew no tenía un parámetro límite para los archivos. Así que usar sus códigos significaría que usted mostrará el mes de todos los archivos. Imagínatelo para un blog que tiene 5 años. Así que añadimos un parámetro de límite que nos permitió limitar el número de meses mostrados a 18 en cualquier momento dado.

Así que básicamente lo que necesita hacer es pegar el siguiente código en el archivo sidebar.php de su tema o en cualquier otro archivo en el que desee mostrar archivos WordPress personalizados:

123456789101112131415161718192021get_results(«SELECT DISTINCT MONTH( post_date) AS month , YEAR( post_date) AS year, COUNT( id) as post_count FROM $wpdb->posts WHERE post_status = ` publish’ and post_date year; if($year_current!= if($year_prev!= null){?> /year; ?>/year; ?>

             

  • «/year; ?>/month, 1, $month->year)) ?»>>month, 1, $month->year)) ?>
  • = 18) { break; } endforeach; ?>

    Nota: Si desea cambiar el número de meses visualizados, deberá cambiar la línea 19, donde el valor del límite actual de $ es 18.

    Nuestro CSS se parecía un poco a esto:

    123456.widget-archive{padding: 0040px0; float: left; width: 235px;}.widget-archive ul {margin: 0;}.widget-archive li {margin: 0; padding: 0;}.widget-archive li a{ border-left: 1pxsolid#d6d7d7; padding: 5px03px10px; margen: 00055px; display: block;}li.archive-year{float: left; font-family: Helvetica, Arial, san-serif; padding: 5px03px10px; color:#ed1a1c;}a{color:#ed1a1c; margen: 0; borde: 0px; acolchado: 0;}

    Así que al hacerlo de esta manera, tuvimos el resultado final para que se viera así:

    Ahora, si quieres mostrar el número de mensajes en cada mes, entonces necesitarás añadir este trozo de código en cualquier lugar entre la línea 12 – 16 del código anterior:

    1post_count; ?>

    Un ejemplo de lo que puedes hacer con el recuento de mensajes y todo se puede ver en la imagen de abajo:

    La foto de arriba fue tomada del sitio de Andrew Appleton porque esa fue la solución que él encontró de la que derivamos nuestro estilo. Si quieres ver el css de sus estilos, simplemente haz clic en el enlace de su sitio web de arriba.

    ¿Conoce una forma más fácil de lograrlo? ¿Va a personalizar la visualización de sus archivos WordPress en el próximo diseño? Por favor, comparta sus ideas en el cuadro de comentarios de abajo.

    Deja un comentario