Come mostrare facilmente un elenco di pagine con miniature in WordPress

Vuoi un modo semplice per rendere più coinvolgenti gli elenchi delle tue pagine WordPress? Aggiungere miniature è una tecnica semplice ma efficace per aumentare l'attrattiva visiva e migliorare la navigazione del sito.

Visualizzare le immagini in evidenza accanto ai titoli delle tue pagine fornisce ai tuoi visitatori maggiori informazioni sul contenuto, in modo che siano più propensi a fare clic e visitare quelle pagine.

Noi di WPBeginner abbiamo aiutato molti utenti a ottimizzare i loro siti WordPress e sappiamo che questo trucco può fare una grande differenza. 

In questo articolo, ti mostreremo come visualizzare un elenco di pagine con miniature in WordPress, passo dopo passo.

Perché visualizzare un elenco di pagine con miniature in WordPress?

WordPress ha due diversi tipi di post chiamati post e pagine.

Le pagine sono utilizzate per contenuti più duraturi, come le pagine "Chi siamo", "Contattaci" e "Servizi", mentre i post sono utilizzati per contenuti del blog che vengono aggiornati più frequentemente.

Le tue pagine più importanti sono solitamente collegate dal tuo menu di navigazione principale, ma potresti avere altre pagine che desideri visualizzare.

Aggiungendo un elenco di pagine con miniature, puoi rendere i tuoi collegamenti più accattivanti rispetto ai normali collegamenti di testo e dare ai tuoi visitatori un'idea migliore dei contenuti di ciascuna pagina sul tuo sito web WordPress.

Quando i visitatori sono coinvolti e interessati, è probabile che visitino più pagine e rimangano più a lungo sul tuo sito web, il che aumenta la probabilità che effettuino un acquisto o si iscrivano alla tua lista email.

Detto questo, diamo un'occhiata a diversi modi per mostrare un elenco di pagine con miniature sul tuo sito web. Utilizza semplicemente i collegamenti rapidi qui sotto per passare direttamente al metodo che desideri utilizzare:

• Metodo 1. Mostra un elenco di pagine con miniature aggiungendo codice a WordPress
• Metodo 2. Mostra un elenco di pagine con miniature utilizzando l'editor a blocchi di WordPress

Metodo 1. Mostra un elenco di pagine con miniature aggiungendo codice a WordPress

Un modo per mostrare un elenco di pagine con miniature è aggiungere codice ai tuoi file WordPress.

Questo metodo è più avanzato, ma il vantaggio è che potrai utilizzare shortcode personalizzabili. Invece di dover aggiornare manualmente l'elenco ogni volta che pubblichi una nuova pagina, gli shortcode genereranno automaticamente un elenco aggiornato di pagine per te.

Se non hai mai aggiunto codice al tuo sito WordPress prima, puoi consultare la nostra guida per principianti su come inserire snippet dal web in WordPress.

Quindi, è necessario aggiungere il seguente codice al tuo file functions.php, in un plugin specifico per il sito, o utilizzando un plugin per snippet di codice:

add_shortcode('pagelist', function ($args) {
    $args = wp_parse_args($args, [
        'type'  => 'page',
        'limit' => 10,
    ]);
    $out = [];
    $ids = [];
    // Check if we have a predefined list od IDs
    if ( ! empty($args['id'])) {
        $ids = array_filter(explode(',', $args['id']), function ($id) {
            return ! empty($id);
        });
        $ids = array_map('intval', $ids);
    }
    // If we don't have a predefined list od IDs, get the latest posts based on 'limit' parameter
    if (empty($ids)) {
        $queryArgs = [
            'post_type'              => isset($args['type']) && post_type_exists($args['type']) ? $args['type'] : 'page',
            'posts_per_page'         => ! empty($args['limit']) && is_numeric($args['limit']) ? intval($args['limit']) : 10,
            'ignore_sticky_posts'    => true,
            'fields'                 => 'ids',
            'cache_results'          => false,
            'update_post_meta_cache' => false,
            'update_post_term_cache' => false,
        ];
        $ids = get_posts($queryArgs);
        wp_reset_postdata();
    }
    foreach ($ids as $id) {
        $img = has_post_thumbnail($id)
            ? get_the_post_thumbnail($id, [60, 60])
            : '<span class="wpb-post-list__no-image"></span>';
        $excerpt = has_excerpt($id) ? wpautop(get_the_excerpt($id)) : '';
        $out[] = "<a href='" . get_the_permalink($id) . "' class='wpb-page-list__item'>
            <div>{$img}</div>
            <div>
                <div><h4>" . get_the_title($id) . "</h4></div>
                {$excerpt}
            </div>
        </a>";
    }
    return "<div class='wpb-page-list'>" . implode('', $out) . "</div>";
});

Consigliamo di aggiungere questo codice utilizzando WPCode, è il miglior plugin per snippet di codice sul mercato.

WPCode rende sicuro e facile aggiungere codice personalizzato in WordPress senza modificare il file functions.php del tuo tema.

To get started, you need to install and activate the free WPCode plugin. If you need help, see our tutorial on how to install a WordPress plugin.

Una volta attivato il plugin, vai su Snippet di codice » + Aggiungi snippet dal tuo pannello di controllo WordPress.

Nella pagina Aggiungi snippet, passa il mouse sopra l'opzione 'Aggiungi il tuo codice personalizzato (Nuovo snippet)' e fai clic sul pulsante 'Aggiungi snippet personalizzato'.

Successivamente, nel popup che appare sullo schermo, seleziona 'Snippet PHP' come tipo di codice.

Da lì, devi aggiungere un titolo per il tuo snippet, che può essere qualsiasi cosa per aiutarti a ricordare a cosa serve il codice.

Quindi, incolla il codice sopra nella casella 'Anteprima codice'.

Dopodiché, semplicemente attiva l'interruttore da 'Inattivo' ad 'Attivo' e fai clic sul pulsante 'Salva snippet' in cima alla pagina.

Questo snippet di codice creerà uno shortcode che puoi utilizzare per visualizzare l'elenco delle tue pagine con miniature ovunque sul tuo sito.

Prima di utilizzare lo shortcode, dovrai aggiungere il seguente CSS al tuo sito per assicurarti che l'elenco delle tue pagine venga visualizzato correttamente.

Se non l'hai mai fatto prima, consulta la nostra guida su come aggiungere facilmente CSS personalizzato al tuo sito WordPress.

.wpb-page-list{
    display: block;
    margin: 10px 0 35px;
}
.wpb-page-list__item{
    display: grid;
    grid-template-columns: 60px 1fr;
    grid-column-gap: 16px;
    align-items: center;
    text-decoration: none;
    margin: 10px 0;
}
.wpb-page-list__item:hover h4{
    text-decoration: underline;
}
.wpb-post-list img,
.wpb-post-list__no-image{
    display: block;
    width: 60px;
    height: 60px;
}
.wpb-post-list__no-image{
    background: #aaa;
}
.wpb-page-list__item h4{
    font-size: 20px;
}
.wpb-page-list__item p {
    font-size: 1rem;
    color: #555;
}

Dopodiché, devi aggiungere il seguente shortcode a WordPress per aggiungere l'elenco delle tue pagine:

[pagelist]

Questo shortcode visualizzerà un elenco di pagine contenente le tue ultime 10 pagine, in ordine di data di pubblicazione. Si aggiornerà automaticamente man mano che verranno aggiunte nuove pagine.

Se desideri limitare il numero di pagine da visualizzare, puoi utilizzare lo shortcode seguente:

[pagelist limit=3]

Sostituisci semplicemente '3' con il numero di pagine che desideri visualizzare.

Per aggiungere lo shortcode a WordPress, apri la pagina che desideri modificare e quindi fai clic sul pulsante 'Aggiungi blocco' 'Più'.

Dopodiché, cerca il blocco 'Shortcode'.

Quindi, fai clic sul blocco 'Shortcode' per aggiungerlo al tuo sito e incolla semplicemente lo shortcode di cui sopra.

Una volta terminato, assicurati di fare clic su 'Salva' o 'Pubblica' per salvare le modifiche.

Dopodiché, i tuoi visitatori potranno visualizzare l'elenco delle tue pagine con miniature.

Puoi anche utilizzare lo shortcode in un widget per visualizzare l'elenco delle tue pagine nella barra laterale o nel piè di pagina.

Visualizza un elenco di pagine con pagine specifiche del sito

Per visualizzare un elenco di pagine con solo alcune pagine, dovrai aggiungere il seguente shortcode al tuo sito:

[pagelist id="20, 10, 35"]

Questo shortcode visualizzerà pagine specifiche in base al loro ID. Per maggiori dettagli, consulta la nostra guida su come trovare gli ID delle pagine in WordPress.

Visualizza un elenco con i tuoi ultimi post del blog

Puoi anche usare lo shortcode per visualizzare un elenco dei tuoi ultimi post del blog. Questo può essere un ottimo modo per aumentare le visualizzazioni di pagina sui tuoi post del blog.

Aggiungi semplicemente il seguente shortcode a WordPress:

[pagelist type=post]

Ecco come apparirà ai tuoi lettori l'elenco dei tuoi ultimi post del blog.

Visualizza un elenco di pagine con ogni pagina che hai pubblicato

Infine, puoi mostrare un elenco di pagine con miniature che contiene ogni pagina che hai pubblicato.

Questo può essere utile se vuoi creare una pagina archivio o una pagina sitemap HTML per i tuoi lettori. Le miniature dei post aggiunte la rendono più coinvolgente di un semplice elenco di pagine.

Dovrai aggiungere il seguente shortcode al tuo sito:

[pagelist limit="-1"]

Man mano che pubblichi nuove pagine, il tuo elenco di pagine si aggiornerà automaticamente.

Metodo 2. Mostra un elenco di pagine con miniature utilizzando l'editor a blocchi di WordPress

Un altro modo per mostrare un elenco di pagine in WordPress è utilizzare l'editor a blocchi di WordPress.

Nota: Utilizzando questo metodo, il tuo elenco di pagine dovrà essere creato e aggiornato manualmente, poiché le nuove pagine non verranno aggiunte automaticamente una volta pubblicate.

Per fare ciò, apri la pagina che desideri modificare.

Quindi, fai clic sull'icona 'Più' per aggiungere un blocco e aprire il menu dei blocchi.

Successivamente, cerca 'Colonne' nella casella di ricerca.

Quindi, seleziona il blocco 'Colonne'.

Questo apre un elenco di blocchi colonna disponibili.

Seleziona il blocco colonna '30/70'. Useremo la colonna di sinistra per le miniature delle immagini e la colonna di destra per il titolo della pagina e un breve riassunto.

Quindi, fai clic sull'icona 'Più' per aggiungere un blocco.

Successivamente, seleziona il blocco 'Immagine' per aggiungere la tua immagine in evidenza. Questo ti dà la possibilità di caricare una nuova immagine o sceglierne una dalla tua libreria multimediale.

Se desideri collegare la tua immagine, fai clic sull'icona 'Inserisci link'.

Quindi, aggiungi semplicemente l'URL della tua pagina.

Una volta aggiunta l'immagine, fai clic sull'icona 'Più' per aggiungere un blocco nella colonna di destra.

Quindi, cerca il blocco 'Intestazione' e fai clic su di esso per aggiungerlo alla tua pagina.

Successivamente, inserisci il titolo della tua pagina e mettilo in evidenza.

Quindi, fai clic sull'icona 'Link' per aggiungere un collegamento alla pagina.

Puoi scegliere se il link si apre nella stessa pagina o in una nuova scheda, attivando o disattivando l'interruttore.

Se desideri aggiungere testo sotto il tuo titolo, fai semplicemente clic nuovamente sull'icona 'Aggiungi blocco' e seleziona il blocco 'Paragrafo'.

Quindi, digita semplicemente nell'area di testo disponibile.

Per aggiungere altri elementi alla tua lista utilizzando la formattazione appena creata, fai clic sul blocco colonna e seleziona il menu 'Opzione' con i tre puntini.

Quindi, seleziona l'opzione 'Duplica' dall'elenco a discesa.

Questo creerà automaticamente una copia della colonna.

Tutto ciò che devi fare è seguire gli stessi passaggi di cui sopra per modificare l'immagine, l'intestazione e il testo.

Una volta terminate le modifiche alla lista delle tue pagine, assicurati di fare clic sul pulsante 'Aggiorna' o 'Pubblica' nella parte superiore della pagina.

Ora, i tuoi visitatori vedranno una lista di pagine più coinvolgente con miniature dei post.

Nota: Esiste un altro blocco disponibile chiamato blocco 'Lista Pagine' che ti consente di aggiungere una lista di pagine senza miniature.

Tuttavia, il metodo manuale sopra descritto è l'unico modo per aggiungere una lista con miniature utilizzando l'editor a blocchi.

Se stai cercando di creare pagine completamente personalizzate che includano anche una lista di pagine con miniature, puoi utilizzare il plugin SeedProd per farlo utilizzando un costruttore drag and drop. Per maggiori dettagli, consulta la nostra guida su come creare una pagina personalizzata in WordPress.

Speriamo che questo articolo ti abbia aiutato a imparare come mostrare facilmente un elenco di pagine con miniature in WordPress. Potresti anche voler consultare le nostre scelte di esperti dei migliori costruttori di temi WordPress e la nostra guida su come aggiungere lo scroll infinito al tuo sito WordPress.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.