Cum să afișați ușor o listă de pagini cu miniaturi în WordPress

Doriți o modalitate ușoară de a face listele de pagini WordPress mai captivante? Adăugarea de miniaturi este o tehnică simplă, dar eficientă pentru a spori atractivitatea vizuală și a îmbunătăți navigarea pe site.

Afișarea imaginilor de prezentare lângă titlurile paginilor oferă vizitatorilor dvs. mai multe informații despre conținut, astfel încât aceștia sunt mai predispuși să dea clic și să viziteze acele pagini.

La WPBeginner, am ajutat mulți utilizatori să-și optimizeze site-urile WordPress și știm că acest truc poate face o mare diferență. 

În acest articol, îți vom arăta cum să afișezi o listă de pagini cu miniaturi în WordPress, pas cu pas.

De ce să afișați o listă de pagini cu miniaturi în WordPress?

WordPress are două tipuri diferite de postări numite postări și pagini.

Paginile sunt utilizate pentru conținut mai peren, cum ar fi paginile „Despre noi”, „Contactați-ne” și „Servicii”, în timp ce postările sunt utilizate pentru conținutul blogului care este actualizat mai frecvent.

Paginile tale cele mai importante sunt de obicei legate din meniul principal de navigare, dar este posibil să ai mai multe pagini pe care vrei să le afișezi.

Prin adăugarea unei liste de pagini cu miniaturi, puteți face linkurile dvs. mai atractive decât linkurile text standard și puteți oferi vizitatorilor dvs. o idee mai bună despre conținutul fiecărei pagini de pe site-ul dvs. WordPress.

Când vizitatorii sunt implicați și interesați, este probabil să viziteze mai multe pagini și să rămână mai mult timp pe site-ul dvs. web, ceea ce face mai probabil să facă o achiziție sau să se alăture listei dvs. de e-mailuri.

Acestea fiind spuse, să analizăm câteva moduri diferite prin care puteți afișa o listă de pagini cu miniaturi pe site-ul dvs. web. Utilizați pur și simplu linkurile rapide de mai jos pentru a sări direct la metoda pe care doriți să o utilizați:

• Metoda 1. Afișați o listă de pagini cu miniaturi adăugând cod în WordPress
• Metoda 2. Afișarea unei liste de pagini cu miniaturi folosind editorul de blocuri WordPress

Metoda 1. Afișați o listă de pagini cu miniaturi adăugând cod în WordPress

O modalitate de a afișa o listă de pagini cu miniaturi este prin adăugarea de cod în fișierele WordPress.

Această metodă este mai avansată, dar avantajul este că veți putea folosi shortcode-uri personalizabile. În loc să actualizați manual lista de fiecare dată când publicați o pagină nouă, shortcode-urile vor genera automat o listă actualizată de pagini pentru dvs.

Dacă nu ați mai adăugat cod pe site-ul dvs. WordPress, atunci puteți consulta ghidul nostru pentru începători despre copierea fragmentelor de pe web în WordPress.

Apoi, trebuie să adăugați următorul cod în fișierul dvs. functions.php, într-un plugin specific site-ului, sau folosind un plugin de fragmente de cod:

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>";
});

Recomandăm adăugarea acestui cod folosind WPCode, este cel mai bun plugin pentru fragmente de cod de pe piață.

WPCode face sigur și ușor adăugarea de cod personalizat în WordPress fără a edita fișierul functions.php al temei.

Pentru a începe, trebuie să instalați și să activați pluginul gratuit WPCode. Dacă aveți nevoie de ajutor, consultați tutorialul nostru despre cum să instalați un plugin WordPress.

Odată ce pluginul este activat, accesați Code Snippets » + Add Snippet din tabloul de bord WordPress.

Pe pagina Adăugare fragment, plasați cursorul mouse-ului peste opțiunea „Adăugați codul dvs. personalizat (Fragment nou)” și faceți clic pe butonul „Adăugare fragment personalizat”.

Apoi, în fereastra pop-up care apare pe ecran, selectează „PHP Snippet” ca tip de cod.

De acolo, trebuie să adăugați un titlu pentru fragmentul dvs., care poate fi orice pentru a vă ajuta să vă amintiți la ce folosește codul.

Apoi, lipiți codul de mai sus în caseta „Previzualizare cod”.

După aceea, pur și simplu comutați comutatorul de la „Inactiv” la „Activ” și faceți clic pe butonul „Salvează fragmentul” din partea de sus a paginii.

Acest fragment de cod va crea un shortcode pe care îl puteți utiliza pentru a afișa lista dvs. de pagini cu miniaturi oriunde pe site-ul dvs.

Înainte de a utiliza shortcode-ul, va trebui să adăugați următorul CSS pe site-ul dvs. pentru a vă asigura că lista de pagini este afișată frumos.

Dacă nu ați mai făcut acest lucru înainte, consultați ghidul nostru despre cum să adăugați cu ușurință CSS personalizat pe site-ul dvs. 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;
}

După aceea, trebuie să adăugați următorul shortcode în WordPress pentru a adăuga lista de pagini:

[pagelist]

Acest shortcode va afișa o listă de pagini care conține ultimele dvs. 10 pagini, în ordinea datei publicării. Se va actualiza automat pe măsură ce sunt adăugate pagini noi.

Dacă doriți să limitați numărul de pagini care vor fi afișate, atunci puteți utiliza shortcodul de mai jos:

[pagelist limit=3]

Pur și simplu înlocuiți „3” cu numărul de pagini pe care doriți să le afișați.

Pentru a adăuga shortcode-ul în WordPress, deschideți pagina pe care doriți să o editați și apoi faceți clic pe butonul „Plus” pentru a adăuga un bloc.

După aceea, caută blocul „Shortcode”.

Apoi, faceți clic pe blocul „Shortcode” pentru a-l adăuga pe site-ul dvs. și pur și simplu lipiți shortcode-ul de mai sus.

Odată ce ai terminat, asigură-te că apeși pe „Salvează” sau „Publică” pentru a salva modificările.

După aceea, vizitatorii dvs. vor putea vizualiza lista de pagini cu miniaturi.

Puteți, de asemenea, utiliza shortcodul într-un widget pentru a afișa lista paginilor în bara laterală sau în subsol.

Afișați o listă de pagini cu pagini specifice ale site-ului

Pentru a afișa o listă de pagini doar cu anumite pagini, va trebui să adăugați următorul shortcode pe site-ul dvs.:

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

Acest shortcode va afișa pagini specifice pe baza ID-ului lor. Pentru mai multe detalii, consultați ghidul nostru despre cum să găsiți ID-urile paginilor în WordPress.

Afișează o listă cu cele mai recente postări de pe blogul tău

Puteți folosi, de asemenea, shortcode-ul pentru a afișa o listă a celor mai recente postări de pe blog. Aceasta poate fi o modalitate excelentă de a crește numărul de vizualizări ale paginilor pe postările de pe blog.

Pur și simplu adăugați următorul shortcode în WordPress:

[pagelist type=post]

Iată cum va arăta lista dvs. cu cele mai recente postări de pe blog cititorilor dvs.

Afișează o listă de pagini cu fiecare pagină pe care ai publicat-o

În final, poți afișa o listă de pagini cu miniaturi care conține fiecare pagină pe care ai publicat-o.

Acest lucru poate fi util dacă doriți să creați o pagină de arhivă sau o pagină de hartă a site-ului HTML pentru cititorii dvs. Miniaturile de postări adăugate o fac mai captivantă decât o simplă listă de pagini.

Va trebui să adăugați următorul shortcode pe site-ul dvs.:

[pagelist limit="-1"]

Pe măsură ce publicați pagini noi, lista dvs. de pagini se va actualiza automat.

Metoda 2. Afișarea unei liste de pagini cu miniaturi folosind editorul de blocuri WordPress

O altă modalitate de a afișa o listă de pagini în WordPress este prin utilizarea editorului de blocuri WordPress.

Notă: Când utilizați această metodă, lista dvs. de pagini va trebui creată și actualizată manual, deoarece paginile noi nu vor fi adăugate automat odată ce sunt publicate.

Pentru a face acest lucru, deschide pagina pe care dorești să o editezi.

Apoi, faceți clic pe pictograma „Plus” de adăugare bloc pentru a deschide meniul de blocuri.

După aceea, căutați „Coloane” în caseta de căutare.

Apoi, selectați blocul „Coloane”.

Aceasta va afișa o listă de blocuri de coloane disponibile.

Selectați blocul de coloane „30/70”. Vom folosi coloana din stânga pentru imaginile miniatură și coloana din dreapta pentru titlul paginii și un scurt rezumat.

Apoi, faceți clic pe pictograma „Plus” pentru a adăuga un bloc.

După aceea, selectați blocul „Imagine” pentru a adăuga imaginea dvs. de prezentare. Aceasta vă oferă opțiunea de a încărca o imagine nouă sau de a alege una din biblioteca dvs. media.

Dacă doriți să legați imaginea, faceți clic pe pictograma „Inserează legătură”.

Apoi, pur și simplu adăugați URL-ul paginii dvs.

După ce ați adăugat imaginea, faceți clic pe pictograma „Plus” pentru a adăuga un bloc în coloana din dreapta.

Apoi, căutați blocul „Titlu” și faceți clic pe el pentru a-l adăuga pe pagina dvs.

Apoi, introduceți titlul paginii și evidențiați-l.

Apoi, faceți clic pe pictograma „Legătură” pentru a adăuga o legătură la pagină.

Puteți alege ca linkul să se deschidă în aceeași pagină sau într-un nou tab, activând sau dezactivând comutatorul.

Dacă doriți să adăugați text sub antetul dvs., pur și simplu faceți clic din nou pe pictograma „Adăugare bloc” și selectați blocul „Paragraf”.

Apoi, pur și simplu tastați în zona de text disponibilă.

Pentru a adăuga mai multe elemente la lista dvs. folosind formatarea pe care tocmai ați creat-o, faceți clic pe blocul de coloană și selectați meniul „Opțiuni” cu cele trei puncte.

Apoi, selectați opțiunea „Duplicate” din lista derulantă.

Acest lucru va crea automat o copie a coloanei.

Tot ce trebuie să faceți este să urmați aceiași pași ca mai sus pentru a schimba imaginea, antetul și textul.

După ce ați terminat de făcut modificări la lista dvs. de pagini, asigurați-vă că faceți clic pe butonul „Actualizare” sau „Publicare” din partea de sus a paginii.

Acum, vizitatorii dvs. vor vedea o listă de pagini mai captivantă cu miniaturi ale postărilor.

Notă: Există un alt bloc disponibil numit blocul „Page List” care vă permite să adăugați o listă de pagini fără miniaturi.

Cu toate acestea, metoda manuală de mai sus este singura modalitate de a adăuga o listă cu miniaturi folosind editorul de blocuri.

Dacă doriți să creați pagini complet personalizate care includ, de asemenea, o listă de pagini cu miniaturi, atunci puteți utiliza pluginul SeedProd pentru a face acest lucru folosind un constructor drag and drop. Pentru mai multe detalii, consultați ghidul nostru despre cum să creezi o pagină personalizată în WordPress.

Sperăm că acest articol te-a ajutat să înveți cum să afișezi ușor o listă de pagini cu miniaturi în WordPress. S-ar putea să vrei să vezi și selecția noastră de experți a celor mai bune constructori de teme WordPress și ghidul nostru despre cum să adaugi scroll infinit pe site-ul tău WordPress.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.