info@nebulosaweb.com

Post con immagine di anteprima nella sidebar di WordPress

post con anteprima

Negli ultimi giorni per via del nuovo template mi sono trovato a provare diversi plug-in per mostrare una lista di post con immagine di anteprima nella sidebar. Tra tutti i plug-in installati però nessuno sembrava fare al caso mio quindi ho optato per una soluzione “manuale” provando a sviluppare uno script che avesse le funzioni desiderate.
Ripassandomi le funzioni di WordPress e mettendomi all’opera mi sono sorpreso di quanto fosse semplice realizzare la cosa.

Lo script come lo uso nel caso di questo template è il seguente.

<ul id='randPosts'>
	<?php $posts = get_posts('orderby=rand&numberposts=5&category=-4'); foreach($posts as $post) { ?>
	<li>
		<?php echo "<img class='alignleft' src='".get_bloginfo( 'template_directory' )."/scripts/timthumb.php?src=".catch_that_image()."&amp;w=75&amp;h=75' height='75' width='75' alt='".the_title('','',FALSE)."'/>"; ?>
		<h4><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h4>
		<span><?php the_time('j F Y') ?></span>
	</li>
	<?php } ?>
</ul>

Come si può vedere il codice è veramente pochissimo, ed è tutto frutto di funzioni native di WordPress ad eccezione di catch_that_image() che preleva la prima immagine che trova nei post. Tale funzione, che potete prelevare qui di seguito, dovrà essere inserita nel file functions.php del vostro template.

function catch_that_image() {
    global $post, $posts;
    $first_img = "";
    ob_start();
    ob_end_clean();
    $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
    $first_img = $matches [1] [0];
 
    if(empty($first_img)){ //Definisce un'immagine di default
        $first_img = "/images/default.jpg";
    }
    return $first_img;
}

Per il resize dell’immagine ho usato TimThumb, scaricabile qui. Vi rimando anche a questo articolo dove è spiegato il suo semplice funzionamento.

Personalizzare la lista di post

Per personalizzare la lista di post mostrati dallo script vi basta cambiare i parametri passati alla funzione get_posts().

orderby: definisce il tipo di ordine che in questo caso è random ma potete ad esempio impostarlo secondo le date passando il valore post_date.

numberposts: definisce il numero di post da mostrare.

category: definisce la categoria dei post da visualizzare. Escludendo tale parametro verranno restituiti tutti i post, se invece come in questo caso, il numero della categoria verrà preceduto dal segno meno verranno mostrati tutti i post eccetto quelli di quest’ultima.

Importante

Un accorgimento da tenere per evitare conflitti è di non posizionare lo script prima del ciclo che estrae l’articolo principale della pagina.

Autore: Fabio Di Stasio

Web Designer Freelance specializzato in sviluppo web, realizzazione di template responsive, creazione di temi e plugin WordPress e purista degli standard W3C.