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

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

Ahora probablemente se esté preguntando por qué fue difícil insertar en WordPress cuando wp_get_archives () enumerar los archivos mensualmente con el próximo año? Bueno, eso es porque 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 Andrew Appleton tenía un problema similar y tenía una solución. Hemos utilizado sus códigos con modificaciones menores.

El código de Andrew no tenía un parámetro de limitación para los archivos. Entonces, usar sus códigos significaría que mostrará todos los archivos del mes. Imagínese esto 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 archivo sidebar.php de su tema o en 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 la cantidad de meses que se muestran, debe cambiar la línea 19, donde el valor del 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, así, obtuvimos el resultado final similar a este:

Ver archivos personalizados en la barra lateral de WordPress

Ahora, si desea mostrar el recuento de publicaciones en cada mes, debe agregar este fragmento de código en cualquier lugar entre las líneas 12-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:

Ver archivos de WordPress personalizados con recuento de publicaciones

La imagen de arriba fue tomada de Sitio de Andrew Appleton porque esa fue la solución que se le ocurrió y de la que tomamos 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 hacer esto? ¿Personalizará la visualización de sus archivos de WordPress en el próximo proyecto? Comparta sus pensamientos en el cuadro de comentarios a continuación.

Deja una respuesta

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

Subir