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

Ahora probablemente te estés preguntando por qué fue difícil insertarlo en WordPress cuando wp_get_archives () enumerar los archivos mensualmente con el próximo año? Bueno, esto se debe a que este cliente solo quería mostrar el año una vez que se quedó. 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 debe ser muy raro, sin embargo lo hemos encontrado. andrea manzana tenía el problema similar y tenía una solución para ello. Hemos utilizado sus códigos con modificaciones menores.

El código de Andrew no tenía un parámetro limitante para los archivos. Entonces, usar sus códigos significaría que mostrará todos los archivos del mes. Imagínatelo para un blog que tiene 5 años. Así que agregamos un parámetro de límite que nos permitió limitar la cantidad de meses que se muestran a 18 en un momento dado.

Entonces, básicamente, lo que debe hacer es pegar el siguiente código en sus temas barra lateral.php archivo o cualquier otro archivo en el que desee ver 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%20bloginfo('url')%20?>/<?php%20echo%20$month->year;%20?>/"><?php echo $month->year; ?></a></li>
	
	<?php } ?>
	<li><a href="<?php%20bloginfo('url')%20?>/<?php%20echo%20$month->year;%20?>/<?php%20echo%20date("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 la cantidad de meses que se muestran, debe cambiar la línea 19 donde el valor límite actual de $ 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 hacer esto, obtuvimos el resultado final así:

Ahora, si desea mostrar el recuento de publicaciones de cada mes, debe agregar este 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 tomamos nuestro estilo. Si desea ver el CSS para sus estilos, simplemente haga clic en el enlace de su sitio web arriba.

¿Conoces una manera más fácil de hacer esto? ¿Personalizará la visualización de sus archivos de WordPress en el próximo diseño? Por favor, comparta sus pensamientos en el cuadro de comentarios a continuación.