Jak łatwo pokazać listę stron ze zrzutami ekranu w WordPress

Chcesz łatwego sposobu na uczynienie list stron WordPress bardziej angażującymi? Dodawanie miniatur to prosta, ale skuteczna technika zwiększania atrakcyjności wizualnej i poprawy nawigacji po stronie.

Wyświetlanie obrazów wyróżniających obok tytułów stron daje odwiedzającym więcej informacji o treści, dzięki czemu chętniej klikają i odwiedzają te strony.

W WPBeginner pomogliśmy wielu użytkownikom zoptymalizować ich strony WordPress i wiemy, że ta sztuczka może przynieść dużą różnicę. 

W tym artykule pokażemy Ci krok po kroku, jak wyświetlić listę stron ze zrzutami ekranu w WordPress.

Dlaczego wyświetlać listę stron ze zrzutami ekranu w WordPress?

WordPress ma dwa różne typy wpisów: wpisy i strony.

Strony są używane do bardziej ponadczasowych treści, takich jak strony „O nas”, „Kontakt” i „Usługi”, podczas gdy posty są używane do treści blogowych, które są częściej aktualizowane.

Twoje najważniejsze strony są zazwyczaj połączone z Twoim głównym menu nawigacyjnym, ale możesz mieć więcej stron, które chcesz wyświetlić.

Dodając listę stron ze miniaturami, możesz sprawić, że Twoje linki będą bardziej atrakcyjne niż standardowe linki tekstowe i dasz odwiedzającym lepsze pojęcie o zawartości każdej strony na Twojej stronie WordPress.

Gdy odwiedzający są zaangażowani i zainteresowani, prawdopodobnie odwiedzą więcej stron i pozostaną dłużej na Twojej stronie, co zwiększa prawdopodobieństwo dokonania zakupu lub dołączenia do Twojej listy e-mailowej.

Biorąc to pod uwagę, przyjrzyjmy się kilku różnym sposobom wyświetlania listy stron ze zrzutami ekranu na Twojej stronie internetowej. Po prostu skorzystaj z poniższych szybkich linków, aby przejść bezpośrednio do wybranej metody:

Metoda 1. Wyświetlanie listy stron ze zrzutami ekranu poprzez dodanie kodu do WordPress

Jednym ze sposobów pokazania listy stron z miniaturkami jest dodanie kodu do plików WordPress.

Ta metoda jest bardziej zaawansowana, ale zaletą jest to, że będziesz mógł używać konfigurowalnych krótkich kodów. Zamiast ręcznie aktualizować listę za każdym razem, gdy publikujesz nową stronę, krótkie kody automatycznie wygenerują dla Ciebie zaktualizowaną listę stron.

Jeśli wcześniej nie dodawałeś kodu do swojej witryny WordPress, zapoznaj się z naszym przewodnikiem dla początkujących, jak wklejać fragmenty z sieci do WordPressa.

Następnie musisz dodać następujący kod do swojego pliku functions.php, w wtyczce specyficznej dla witryny lub za pomocą wtyczki fragmentów kodu:

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

Zalecamy dodanie tego kodu za pomocą WPCode, jest to najlepsza wtyczka fragmentów kodu na rynku.

WPCode sprawia, że dodawanie niestandardowego kodu w WordPress jest bezpieczne i łatwe, bez konieczności edycji pliku functions.php Twojego motywu.

Aby rozpocząć, musisz zainstalować i aktywować bezpłatną wtyczkę WPCode. Jeśli potrzebujesz pomocy, zapoznaj się z naszym samouczkiem, jak zainstalować wtyczkę WordPress.

Po aktywacji wtyczki przejdź do Code Snippets » + Add Snippet z poziomu pulpitu WordPress.

Na stronie Dodaj fragment, najedź kursorem myszy na opcję „Dodaj swój niestandardowy kod (nowy fragment)” i kliknij przycisk „Dodaj niestandardowy fragment”.

Następnie, w wyskakującym okienku, które pojawi się na ekranie, wybierz „Fragment PHP” jako typ kodu.

Stamtąd musisz dodać tytuł dla swojego fragmentu, który może być czymkolwiek, co pomoże Ci zapamiętać, do czego służy kod.

Następnie wklej powyższy kod do pola „Podgląd kodu”.

Następnie po prostu przełącz przełącznik z pozycji „Nieaktywny” na „Aktywny” i kliknij przycisk „Zapisz fragment” u góry strony.

Ten fragment kodu utworzy shortcode, którego możesz użyć do wyświetlenia listy stron ze zdjęciami w dowolnym miejscu swojej witryny.

Przed użyciem krótkiego kodu musisz dodać następujący kod CSS do swojej witryny, aby upewnić się, że lista stron wyświetla się poprawnie.

Jeśli nie robiłeś tego wcześniej, zapoznaj się z naszym przewodnikiem na temat jak łatwo dodać niestandardowy CSS do swojej witryny 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;
}

Następnie musisz dodać następujący krótki kod do WordPress, aby dodać swoją listę stron:

[pagelist]

Ten shortcode wyświetli listę stron zawierającą Twoje 10 najnowszych stron, posortowanych według daty publikacji. Będzie się automatycznie aktualizować w miarę dodawania nowych stron.

Jeśli chcesz ograniczyć liczbę wyświetlanych stron, możesz użyć poniższego shortcode:

[pagelist limit=3]

Po prostu zastąp „3” liczbą stron, które chcesz wyświetlić.

Aby dodać skrócony kod do WordPress, otwórz stronę, którą chcesz edytować, a następnie kliknij przycisk „Plus” dodaj blok.

Następnie wyszukaj blok „Krótki kod”.

Następnie kliknij blok „Shortcode”, aby dodać go do swojej witryny i po prostu wklej powyższy shortcode.

Po zakończeniu upewnij się, że kliknąłeś „Zapisz” lub „Opublikuj”, aby zachować zmiany.

Po tym Twoi odwiedzający będą mogli zobaczyć Twoją listę stron ze zrzutami ekranu.

Możesz również użyć krótkiego kodu w widżecie, aby wyświetlić listę stron w pasku bocznym lub stopce.

Wyświetl listę stron z określonymi stronami witryny

Aby wyświetlić listę stron zawierającą tylko określone strony, musisz dodać następujący shortcode do swojej witryny:

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

Ten krótki kod wyświetli określone strony na podstawie ich identyfikatorów. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem, jak znaleźć identyfikatory stron w WordPressie.

Wyświetl listę swoich najnowszych wpisów na blogu

Możesz również użyć krótkiego kodu, aby wyświetlić listę swoich najnowszych wpisów na blogu. Może to być świetny sposób na zwiększenie liczby wyświetleń stron Twoich wpisów na blogu.

Po prostu dodaj następujący skrócony kod do WordPress:

[pagelist type=post]

Oto jak Twoja lista z najnowszymi wpisami na blogu będzie wyglądać dla Twoich czytelników.

Wyświetl listę stron z każdą opublikowaną stroną

Na koniec możesz wyświetlić listę stron z miniaturami, która zawiera każdą opublikowaną stronę.

Może to być przydatne, jeśli chcesz utworzyć stronę archiwum lub stronę mapy witryny HTML dla swoich czytelników. Dodane miniatury wpisów sprawiają, że jest ona bardziej angażująca niż prosta lista stron.

Musisz dodać następujący krótki kod do swojej witryny:

[pagelist limit="-1"]

W miarę publikowania nowych stron, Twoja lista stron będzie automatycznie aktualizowana.

Metoda 2. Wyświetlanie listy stron ze zrzutami ekranu przy użyciu edytora bloków WordPress

Innym sposobem pokazania listy stron w WordPressie jest użycie edytora bloków WordPress.

Uwaga: Korzystając z tej metody, lista stron będzie musiała być tworzona i aktualizowana ręcznie, ponieważ nowe strony nie będą automatycznie dodawane po ich opublikowaniu.

Aby to zrobić, otwórz stronę, którą chcesz edytować.

Następnie kliknij ikonę „Plus” dodawania bloku, aby otworzyć menu bloków.

Następnie wyszukaj „Kolumny” w polu wyszukiwania.

Następnie wybierz blok „Kolumny”.

Spowoduje to wyświetlenie listy dostępnych bloków kolumn.

Wybierz blok kolumny „30/70”. Lewą kolumnę wykorzystamy na miniatury, a prawą na tytuł strony i krótki opis.

Następnie kliknij ikonę „Plus” do dodawania bloków.

Następnie wybierz blok „Obraz”, aby dodać swój wyróżniony obraz. Daje to możliwość przesłania nowego obrazu lub wybrania go z Twojej biblioteki multimediów.

Jeśli chcesz połączyć swój obraz, kliknij ikonę „Wstaw link”.

Następnie po prostu dodaj adres URL swojej strony.

Po dodaniu obrazu kliknij ikonę „Plus” do dodawania bloków w prawej kolumnie.

Następnie wyszukaj blok „Nagłówek” i kliknij go, aby dodać do swojej strony.

Następnie wprowadź tytuł strony i go zaznacz.

Następnie kliknij ikonę „Link”, aby dodać link do strony.

Możesz wybrać, czy link ma otwierać się na tej samej stronie, czy w nowej karcie, klikając przełącznik włącz lub wyłącz.

Jeśli chcesz dodać tekst pod swoim nagłówkiem, po prostu kliknij ponownie ikonę „Dodaj blok” i wybierz blok „Akapit”.

Następnie po prostu wpisz tekst w dostępnym polu tekstowym.

Aby dodać więcej elementów do listy, używając właśnie utworzonego formatowania, kliknij blok kolumny i wybierz menu opcji z trzema kropkami.

Następnie wybierz opcję „Duplikuj” z listy rozwijanej.

Spowoduje to automatyczne utworzenie kopii kolumny.

Wszystko, co musisz zrobić, to wykonać te same kroki, co powyżej, aby zmienić obraz, nagłówek i tekst.

Po zakończeniu wprowadzania zmian na liście stron, upewnij się, że klikniesz przycisk „Zaktualizuj” lub „Opublikuj” u góry strony.

Teraz Twoi odwiedzający zobaczą bardziej angażującą listę stron z miniaturkami postów.

Uwaga: Dostępny jest inny blok o nazwie „Page List”, który pozwala dodać listę stron bez miniatur.

Jednak powyższa metoda ręczna jest jedynym sposobem na dodanie listy z miniaturami za pomocą edytora bloków.

Jeśli chcesz tworzyć całkowicie niestandardowe strony, które zawierają również listę stron ze zdjęciami, możesz użyć wtyczki SeedProd, aby zrobić to za pomocą kreatora metodą przeciągnij i upuść. Więcej informacji znajdziesz w naszym przewodniku na temat tworzenia niestandardowych stron w WordPress.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak łatwo wyświetlić listę stron ze zdjęciami w WordPress. Możesz również zapoznać się z naszymi najlepszymi wyborami najlepszych kreatorów motywów WordPress oraz naszym przewodnikiem na temat dodawania nieskończonego przewijania do Twojej witryny WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.