Mostrare gli articoli recenti con immagine di anteprima in WordPress senza plugin

I plugin sono belli, sono comodi, sono essenziali, ma certamente sono anche del codice in più da caricare e possono rallentare WordPress!

In questo articolo ti spiego come mostrare gli ultimi N articoli con la relativa immagine di anteprima, senza plugin! In più ho utilizzato anche la cache, così da minimizzare le interrogazioni al database 😮

Il risultato

Prima di iniziare, ecco il risultato che ho ottenuto utilizzando il codice che ti mostrerò a breve:

e questo è il relativo codice HTML mostrato nel sorgente della pagina:

Il codice

Fai un backup via FTP del file functions.php e style.css del tuo tema, prevenire è meglio che curare 🙂

Ora vai su Aspetto > Editor > functions.php ed incolla il seguente codice prima dell’ultimo tag ?> .

[php]
/******************
* Mostra gli articoli recenti con l’immagine di anteprima
* Author: Roberto Iacono
* Website: https://www.robertoiacono.it/
* $quanti_post_mostrare = 5; quanti articoli mostrare?
* $lunghezza_titolo = 0; quanti caratteri deve essere lungo il titolo? Lascia 0 per mostrarli tutti
* $title_more = ‘…’; testo da visualizzare dopo il troncamento
* $rimuovi_cat = null; non mostra gli ultimi articoli di una data categoria. Se vuoi escludere una o più categorie, usa array(-1,-2,-3) dove 1, 2, 3 sono gli ID delle gategorie da escludere
* $vuoi_la_cache = 1; imposta la cache per salvare i risultati in memoria, così da alleggerire le richieste al Database
* $mostra_titolo = 1; mostra il titolo Recent Posts predisposto per la localizzazione
*
* Se vuoi aggiungere/eliminare dei filtri sugli ultimi articoli, devi modificare la query che genera gli articoli da mostrare, ti rimando a http://codex.wordpress.org/Class_Reference/WP_Query
*******************/
function RIrecentPosts($quanti_post_mostrare, $lunghezza_titolo, $title_more, $rimuovi_cat, $vuoi_la_cache, $mostra_titolo) {
$ri_recent_post = get_transient(‘RIrecentPosts_transient_key’);
if ($ri_recent_post === false || $vuoi_la_cache == 0) {
$ri_recent_posts = new WP_Query();
$ri_recent_posts->query(array( ‘category__not_in’ => $rimuovi_cat, ‘showposts’ => $quanti_post_mostrare ));
$ri_recent_post = ”;
// Aggiunge il titolo Recent Posts
if($mostra_titolo == 1)
$ri_recent_post .= ‘<h2>’. __(‘Recent Posts’) .'</h2>’;
$ri_recent_post .= ‘<ul>’;
while ($ri_recent_posts->have_posts()) : $ri_recent_posts->the_post();
$ri_recent_post .= ‘<li>’;
// mostra l’immagine di anteprima
$ri_recent_post .= ‘<a href="’. get_permalink() .’">’. get_the_post_thumbnail(get_the_ID(),’ri-recent-thumbnails’) .'</a>’;
// mostra il titolo
$ri_recent_post .= ‘<a href="’. get_permalink() .’" title="’. get_the_title() .’">’;
// taglia il titolo se è più lungo di $lunghezza_titolo caratteri
if ($lunghezza_titolo > 0 ){
if(strlen(get_the_title()) > $lunghezza_titolo)
$ri_recent_post .= substr(get_the_title(), 0, $lunghezza_titolo) . $title_more;
}
else
$ri_recent_post .= get_the_title();
$ri_recent_post .= ‘</a>’;
$ri_recent_post .= ‘</li>’;
endwhile;
$ri_recent_post .= ‘</ul>’;
wp_reset_query();
// salva i risultati in cache per 1 giorno
if ($vuoi_la_cache == 1)
set_transient(‘RIrecentPosts_transient_key’, $ri_recent_post, 3600 * 24);
}
echo $ri_recent_post;
}

// elimina la cache per mostrare gli ultimi articoli recenti senza plugin
add_action( ‘publish_post’, ‘delete_RIrecentPosts_transient_key’,10,2 );
function delete_RIrecentPosts_transient_key()
{
delete_transient(‘RIrecentPosts_transient_key’);
}

add_image_size( ‘ri-recent-thumbnails’, 100, 100, true );
[/php]

Poi vai su Aspetto > Editor > styles.css ed incolla il seguente codice dove vuoi (magari in fondo):

[css]
.ri_recent_posts {
list-style:none;
}
.ri_recent_posts li {
display:block;
}
.ri_recent_posts li:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow: hidden;
float: none;
}
.ri_recent_posts img {
float:left;
margin: 5px
}
[/css]

Utilizza il codice qui sotto per richiamare la funzione che viene utilizzata per mostrare gli ultimi N articoli recenti:

[php]
<?php RIrecentPosts(5,0,’…’,null,1,1); ?>
[/php]

Per visualizzare gli articoli recenti nella sidebar, dovrai inserire questo codice nella sidebar attraverso un Widget. Per far ciò, ti consiglio di utilizzare lo snippet per abilitare il widget di Testo ad eseguire il php, che di default non permette l’esecuzione del codice php.

La chiamata della funzione

La chiamata della funzione RIrecentPosts richiede 6 parametri nel seguente ordine:

1. Inserisci il numero di articoli che vuoi mostrare.
2. Inserisci il numero di caratteri del titolo dell’articolo da mostrare. Con 0 li mostra tutti.
3. Nel caso al punto precedente avessi impostato un valore diverso da 0, allora puoi scegliere che cosa mostrare dopo il troncamento del titolo.
4. Escludi gli articoli di determinate categorie. Per escludere certe categorie scrivi array(-1,-2,-3), dove 1, 2, 3 sono gli ID delle categorie da escludere. Puoi escludere anche solo una categoria, utilizzando array(-1) . Con null verranno mostrati gli articoli di tutte le categorie.
5. Vuoi salvare il risultato in cache? Allora lascia 1, altrimenti imposta 0. Quando verrà pubblicato un nuovo articolo, la cache verrà svuotata automaticamente.
6. Se uguale ad 1, viene mostrato il titolo Recent Posts predisposto per la localizzazione. Imposta 0 se non lo vuoi visualizzare.

Dimensioni dell’immagine di anteprima

Con questo codice, alla riga 56, crei un tipo di thumbnail (immagine di anteprima) che ho chiamato ri-recent-thumbnails, delle dimensioni 100×100 px. Puoi modificare le dimensioni cambiando i relativi lavori alla riga 56.

Il tipo di thumbnail creato è diverso da quello nativo di WordPress, che invece puoi gestire da Impostazioni > Media >.

Puoi anche utilizzare le dimensioni delle thumbnail nativa di WordPress, in questo caso sostituisci ri-recent-thumbnails con thumbnail, ed elimina la riga 56.

Le immagini di anteprima, se hai già caricato immagini in precedenza, non saranno quasi mai delle dimensioni desiderate. In questo caso, utilizza il plugin Regenerate Thumbnails per rigenerare tutte le thumbnails! Ti consiglio di fare un backup della cartella wp-content/uploads/ prima di procedere con la rigenerazione.

La cache

Ho aggiunto (oggi mi sentivo un abile programmatore ;)) un sistema di cache persistente, che ha una durata temporale limitata. Di default, l’ho impostata ad un giorno (vedi la riga 44).

La cache si svuota ogni volta che viene pubblicato un nuovo articolo, ma è anche possibile disattivarla passando il valore 0 come quinto parametro alla funzione RIrecentPosts.

Attendo un tuo feedback

Non mi ritengo un abile programmatore, per cui tutto il codice può essere ottimizzato… proprio per questo motivo aspetto dei tuoi suggerimenti ed un tuo parere nei commenti qui sotto 🙂