Recientemente, estábamos trabajando en el diseño del sitio de un cliente que nos requería mostrar archivos mensuales ordenados por año en la barra lateral. Probablemente fue muy fácil para su diseñador hacer una maqueta en Photoshop, pero fue un poco complicado de lograr en WordPress. Vea la imagen a continuación:
Ahora probablemente se esté preguntando por qué fue complicado introducirlo en WordPress cuando wp_get_archives () enumerar los archivos mensualmente con el año al lado? Bueno, eso se debe a que este cliente solo quería mostrar el año una vez a la izquierda. No existe una forma 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 muy raro, sin embargo, descubrimos que Andrew Appleton tenía un problema similar y tenía una solución. Usamos sus códigos con pequeñas modificaciones.
El código de Andrew no tenía un parámetro de límite para los archivos. Entonces, usar sus códigos significaría que mostrará todos los archivos del mes. Imagínese eso para un blog que tiene 5 años. Así que agregamos un parámetro de límite que nos permitió limitar el número de meses mostrados a 18 en un momento dado.
Entonces, básicamente, lo que debe hacer es pegar el siguiente código en el sidebar.php archivo o cualquier otro archivo donde desee mostrar archivos personalizados de WordPress:
<?php global $wpdb; $limit = 0; $year_prev = null; $months = $wpdb->get_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 <= now( ) and post_type="post" GROUP BY month , year ORDER BY post_date DESC"); foreach($months as $month) : $year_current = $month->year; if ($year_current != $year_prev){ if ($year_prev != null){?> <?php } ?> <li class="archive-year"><a href="<?php bloginfo('url') ?>/<?php echo $month->year; ?>/"><?php echo $month->year; ?></a></li> <?php } ?> <li><a href="<?php bloginfo('url') ?>/<?php echo $month->year; ?>/<?php echo date("m", mktime(0, 0, 0, $month->month, 1, $month->year)) ?>"><span class="archive-month"><?php echo date_i18n("F", mktime(0, 0, 0, $month->month, 1, $month->year)) ?></span></a></li> <?php $year_prev = $year_current; if(++$limit >= 18) { break; } endforeach; ?>
Nota: Si desea cambiar el número de meses que se muestra, debe cambiar la línea 19, donde el valor límite de $ actual se establece en 18.
Nuestro CSS se parecía un poco a esto:
.widget-archive{padding: 0 0 40px 0; float: left; width: 235px;} .widget-archive ul {margin: 0;} .widget-archive li {margin: 0; padding: 0;} .widget-archive li a{ border-left: 1px solid #d6d7d7; padding: 5px 0 3px 10px; margin: 0 0 0 55px; display: block;} li.archive-year{float: left; font-family: Helvetica, Arial, san-serif; padding: 5px 0 3px 10px; color:#ed1a1c;} li.archive-year a{color:#ed1a1c; margin: 0; border: 0px; padding: 0;}
Entonces, al hacerlo de esta manera, obtuvimos el resultado final para verse así:
Ahora, si desea mostrar el recuento de publicaciones en cada mes, deberá agregar este fragmento de código en cualquier lugar entre las líneas 12 y 16 del código anterior:
<?php echo $month->post_count; ?>
Un ejemplo de lo que puede hacer con el recuento de publicaciones y todo se puede ver en la imagen a continuación:
La imagen de arriba fue tomada de Sitio de Andrew Appleton porque esa fue la solución que se le ocurrió de la que derivamos nuestro estilo. Si desea ver el CSS de sus estilos, simplemente haga clic en el enlace de su sitio web arriba.
¿Conoce una forma más sencilla de lograr esto? ¿Personalizará la visualización de sus archivos de WordPress en el próximo diseño? Comparta sus pensamientos en el cuadro de comentarios a continuación.