Utilizzando questo sito accetti il nostro uso dei cookie. Approfondisci

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

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:

Risultato finale: articoli recenti

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

Codice HTML degli articoli recenti

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 ?> .

/******************
* Mostra gli articoli recenti con l'immagine di anteprima
* Author: Roberto Iacono
* Website: http://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 );

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

.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
}

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

<?php RIrecentPosts(5,0,'...',null,1,1); ?>

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 :)


VUOI CREARE IL TUO SITO O BLOG WORDPRESS?

Scegli uno tra i migliori hosting per WordPress

HOSTING

Scegli uno tra i migliori hosting per WordPress

Hosting

Scegli uno tra i migliori temi WordPress professionali

GRAFICA

Scegli uno tra i migliori temi WordPress professionali

Grafica

Guide e risorse per gestire il sito WordPress a 360°

GESTIONE

Guide e risorse per gestire il sito WordPress a 360°

Gestione

EMAIL NEWSLETTER

Vuoi ricevere i miei ultimi articoli
comodamente nella tua email? È gratis!
Ben 3552 persone lo stanno già facendo!
Anonimo
   
con le dita sempre in costante, frenetico movimento sulla tastiera… vengo spesso trascinato e catturato “in rete” per colpa delle mille idee che mi girano per la testa (prima o poi troverò quella giusta)… dal futuro incerto (nonostante una laurea, e chi non lo è?..siamo in tanti!) .. credo fortemente nella condivisione della conoscenza!
34 Commenti
  • filippo

    Io visualizzo i titoli ma non le immagini…hai idea di cosa potrebbe essere?

    Ciao e grazie, filippo.

    • Roberto Iacono

      Ciao Filippo,
      probabilmente non hai impostato le immagini in evidenza per gli articoli. Fai una prova con uno solo.

      • filippo

        No, ok, avevo fatto una cazzata io. Sorry, ora le immagini vanno.
        Però ho un’altro problema…
        Quando intervengo sul codice sia nel template che in function.php non vedo le modifiche – tipo dimensioni della miniatura o il numero di articoli da visualizzare – anche se vuoto la cache del browser.

        Ciao e grazie. Ancora.

        • Roberto Iacono

          Hai messo a 0 la cache che ho aggiunto al codice? Leggi bene l’articolo.

      • Otta

        Ciao, complimenti per l’articolo, mi stai molto facilitando il lavoro con un portale.
        Da programmatore php ti dico che è un ottimo codice, ovviamente ognuno lo può personalizzare per se ma è veramente molto buono! 😉 continua così!

    • simonn

      ciao, scusa…ho lo stesso problema…vedo i titoli ma non
      le immagini..di sicuro è una banalità che mi sfugge…mi dareste una mano grazie mille!

      • Roberto Iacono

        Hai impostato l’immagine in evidenza per ogni articolo?

  • Lara

    Ciao!
    Intanto grazie per l’articolo, ho cercato qualcosa di simile per tutto il giorno e alla fine credo che questa sia proprio la soluzione che stavo cercando!
    Due cose:
    1. Le thumbnails appaiono sopra il titolo della pagina. Probabilmente ho sbagliato nel mettere la chiamata della funzione… C’è un posto preciso dove va inserita?
    2. E’ possibile fare in modo che le immagini non siano in lista ma una di fianco all’altra?
    Grazie ancora,
    Lara

    • Roberto Iacono

      Ciao Lara, per fare quallo che dici devi “solamente” modificare il codice css, tipo con un float:left;

  • Webmaster

    Ciao Roberto, senti io nel file function.php non ho il tag che citi tu in alto, il tema è stato cambiato non è di default. Se incollo quel codice infatti mi da errore poi la pagina

    • Webmaster

      Ok risolto, ma se volessi avere questo risultato ma con notizie di un altro blog ? E’ fattibile? perchè non trovo soluzione..

      • Roberto Iacono

        Sì ma il procedimento è molto più complesso.

  • Ivan

    Ciao Roberto e grazie per questo tuo lavoro.
    Ho solo un piccolo problema e non so di preciso dove metter mano nel CSS.
    Io vorrei allineare il titolo dell’articolo alla miniatura centralmente, ma copiano così com’è il codice da te sviluppato questo è il risultato che ottengo
    http://oi46.tinypic.com/28m35fs.jpg

    Come posso risolvere il problema? Cosa devo aggiungere o togliere al CSS?

    • Roberto Iacono

      Dipende anche dalla struttura dell’html oltre che del codice CSS… mi dispiace ma non vedo l’immagine

  • michele

    Se volessi inserire anche una piccola anteprima dell’articolo? grazie

    • Roberto Iacono

      Devi prendere il contenuto di the_content e tagliarlo dopo N caratteri (come avvene già per il titolo)

  • Guidetutorials

    Ciao Roberto… ho inserito il tuo codice nel mio sito correttamente! Ma il mio problema è che prende il css della mia sidebar… in particolare le mie immagini non sono integrate con il testo (cioè restano sopra ed il testo va sotto) Ora l’ho rimosso, ma se vuoi dare un’occhiata lo ripristino! PS non so se è solo un problema mio, ma quando inserisco un commento l’autocompletamento dei campi non funziona bene (provo a selezionare il campo e sparisce)

    • Roberto Iacono

      Allora devi modificare il codice css (prova ad usare “!important” )

  • Otta

    Ricordati nella query di aggiungere ‘caller_get_posts’=>1 in modo da non visualizzare gli articoli in evidenzia esclusi da categoria. Ci ho sbattuto al testa 2 ore prima di capire il perchè mi visualizzava un articolo di una categoria non compresa! 😉
    ricordati di aggiungere anche nella formattazione output il nome del div a cui si riferisce il css.

  • Elena

    Ciao Roberto,
    molto utile questo articolo, e se invece di mostrare gli ultimi articoli, volessi mostrare solo gli ultimi articoli di una determinata categoria?
    Con questo script se non sbaglio invece di null dovrei inserire gli id di tutte le categorie da escludere, siccome sono molte, si potrebbe ragionare all’incontrario? Cioè mostrare solo le categorie che voglio. :-)
    grazie

    • Roberto Iacono

      Certamente, tira via il meno da array(-1,-2,-3) —> array(1,2,3)

  • Elena

    Grazie, perfetto. :-)

    Ho provato a modificare anche le dimensioni delle miniature (riga 56) perché le vorrei piú grandi ma nulla, rimangono uguali.

    Cosa potrebbe essere?

    • Roberto Iacono

      La cache? Prova a creare un’altra tipologia di thumbnail…

  • Antonio

    Ciao, proprio quello che stavo cercando per abbellire il blog creato per mia moglie.
    Minimo un abbraccio lo riceverò, spero… ma c’è la piccola.
    Grazie, sei in gamba.
    TI seguirò.

    • Roberto Iacono

      Grazie a te Antonio :)
      Incrocio le dita per l’abbraccio 😉

  • Andrea

    Ciao mi chiamo Andrea .
    Molto interessante il tuo post , mi serve un aiuto/consiglio su WordPress.
    Ho un sito di annunci gratuiti http://www.mercatinoplus.net …..vorrei inserire un slider.
    Ho girato molto sul web senza trovare secondo ME quello che fa al mio caso.
    Che tipo di slider , uno (slideshow galleria carousel ) che vada in automatico a prendere le immagini e i link degli annunci inseriti .
    Secondo il tuo parere il tuo codice può fare per il mio caso
    Mi poi aiutare per favore
    Grazie

    • Roberto Iacono

      Ciao Andrea,
      dpvresti adattarlo… Prova a leggere http://www.robertoiacono.it/plugin-inserire-slider-wordpress/

  • matteo

    ho lo stesso problema dell’utente Filippo che in data 01/03/2013 ti faceva questa domanda:
    Io visualizzo i titoli ma non le immagini…hai idea di cosa potrebbe essere?

    Tu rispondevi:
    probabilmente non hai impostato le immagini in evidenza per gli articoli. Fai una prova con uno solo.

    che cosa significa “impostare le immagini in evidenza per gli articoli”?
    puoi spiegarmi meglio…

    Grazie e cordiali saluti
    Matteo

    • Roberto Iacono

      Ciao Matteo,
      sulla colonna a destra durante la modifica/scrittura articolo dovrebbe comparire un campo “Imposta immagine in evidenza”. Se non c’è, clicca in alto a destra su “Impostazioni schermo” e clicca sulla casella “immagine in evidenza”.

      Ora seleziona l’immagine…

      Ciao

  • matteo

    Ciao Roberto,
    Grazie mille per la risposta, sono riuscito a fare quello che mi hai detto, le immagini compaiono, ma ora ho questo piccolo problema:
    affianco alle thumbnails il titolo non mi compare di lato come nel tuo esempio, ma compare di lato in basso e poi il testo prosegue sotto la miniatura… per farti capire meglio ho postato l’immagine su pinterest potresti dargli una occhiata?
    http://pinterest.com/pin/337910778261767368/

    che cosa posso fare?
    Grazie e Cordiali saluti
    Matteo Pirola

    • Roberto Iacono

      Devi modificare il css, probabilmente impostando display:block; per il testo… ma sarebbe da testare

  • matteo

    Ciao Roberto

    ma tra i seguenti 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
    }
    quale si riferisce al testo? penso il primo… non ho capito dove dovrei provare a inserire il display:block?

    Cordiali Saluti

    • Roberto Iacono

      Hai ragione,
      .ri_recent_posts li si riferisce al testo, ma anche all’immagine. Puoi o inserire un div (per il testo), oppure prova ad impostare display: table-cell; al posto di display:block; sempre in .ri_recent_posts li

Seguimi

Scarica gli ebook gratuiti

Vuoi creare e gestire il tuo blog WordPress autonomamente ed in maniera gratuita?

Allora scarica gratuitamente gli ebook Blogging Box e Le 30+ cose da non fare con WordPress, inserisci la tua email qui sotto:
13598+
Scarica gratuitamente gli ebook!

Per maggiori informazioni guarda questa pagina per la Blogging Box e questa per le 30+ cose da non fare con WordPress.

Scarica gli ebook gratuiti

Vuoi creare e gestire il tuo blog WordPress autonomamente ed in maniera gratuita?

Allora scarica gratuitamente gli ebook Blogging Box e Le 30+ cose da non fare con WordPress, inserisci la tua email qui sotto:
13598+
Scarica gratuitamente gli ebook!

Per maggiori informazioni guarda questa pagina per la Blogging Box e questa per le 30+ cose da non fare con WordPress.
Unisciti agli oltre 10999 lettori
che seguono questo blog
3152
982
2251
4614