WordPress: creare una pagina di archivio

Creare una pagina di archivio per il nostro sito in WordPress richiede la creazione di un template di pagina e di una funzione che visualizzi le categorie del nostro sito con il numero di post per ciascuna categoria e almeno i dieci post più recenti per categoria. Ogni categoria dovrà avere un link che punti alla sezione corrispondente. Vediamo come procedere.

Utilizzeremo la funzione get_categories() e la classe WP_Query per il nostro scopo:

function display_cats_with_posts() {
	
	$cats = get_categories();
	$html = '<ul id="archive-list">' . "\n";
	
	foreach($cats as $cat) {
		
		$id = $cat->cat_ID;
		$posts_no = $cat->category_count;
		$name = $cat->cat_name;
		$link = get_category_link( $cat->term_id );
		
		$html .= '<li><h3><a href="'. $link . '">' . $name . '</a><span> (' . $posts_no . ' post)</span></h3>';
		$html .= '<ul>' . "\n";
		$query = new WP_Query(array('cat' => $id, 'posts_per_page' => 10));
		
		while($query->have_posts()) {
			
			$query->the_post();
			
			$html .= '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>' . "\n";
			
			
		}
		
		wp_reset_query();
		
		$html .= '</ul>' . "\n";
		$html .= '</li>' . "\n";
		
		
	}
	
	$html .= '</ul>' . "\n";
	
	return $html;
	
}

La funzione appena creata esegue un loop nell'array degli oggetti di tipo categoria restituito da get_categories() e assembla una stringa HTML estraendo il link completo alla categoria, il suo nome e il numero di post associato. Usando l'ID della categoria, invece, creiamo ogni volta un nuovo Loop con la classe WP_Query.

A questo punto possiamo inserire la nostra funzione nel template di pagina:

<?php echo display_cats_with_posts(); ?>

Ora non ci resta che assegnare degli stili specifici alla nostra pagina per formattare i nostri archivi:

<?php
function add_styles_to_archives() {
	
	if(is_page(2343)) {
		
		?>
		
		<style type="text/css" media="screen">
		
		#archive-list {
			
			overflow: hidden;
			padding: 2em 0 0 0;
			margin: 0;
			
		}
		
		#archive-list > li {
			
			list-style: none;
			margin: 0 0 1em 0;
			padding: 0 0 0.4em 0;
			border-bottom: 1px solid #ccc;
			overflow: hidden;
		}
		
		#archive-list > li > h3 {
			float: left;
			width: 60%;
		}
		
		#archive-list > li ul {
			margin: 0;
			padding: 0;
			list-style: none;
			width: 30%;
			float: right;
		}
		
		#archive-list > li > h3 a {
			text-decoration: none;
			color: #000;
			text-transform: uppercase;
			
		}
		
		#archive-list > li > h3 a:hover {
			color: #555;
		}
		
		#archive-list > li > h3 span {
			display: inline-block;
			margin-left: 0.4em;
			padding: 3px 12px;
			font-size: 0.85em;
			background: #333;
			color: #fff;
			border-radius: 12px;
			line-height: 1;
			
		}
		
		#archive-list > li ul li {
			margin-bottom: 0.4em;
			
		}
		
		
		</style>
		
	<?php	
	}
	
}

add_action('wp_head', 'add_styles_to_archives');
?>