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 linkowane z Twojego głównego menu nawigacyjnego, ale możesz mieć więcej stron, które chcesz wyświetlić.

Dodając listę stron ze zrzutami ekranu, 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, chętniej odwiedzą więcej stron i dłużej pozostaną 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
• Metoda 2. Wyświetlanie listy stron ze zrzutami ekranu przy użyciu edytora bloków WordPress

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 jej zaletą jest możliwość korzystania z konfigurowalnych shortcode'ów. Zamiast ręcznie aktualizować listę za każdym razem, gdy publikujesz nową stronę, shortcode'y automatycznie wygenerują zaktualizowaną listę stron.

Jeśli nigdy wcześniej nie dodawałeś kodu do swojej witryny WordPress, zapoznaj się z naszym przewodnikiem dla początkujących dotyczącym wklejania fragmentów kodu z sieci do WordPressa.

Następnie musisz dodać następujący kod do swojego pliku functions.php, w specyficznym dla witryny pluginie, lub za pomocą pluginu do 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 najlepszy plugin do 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 poradnikiem 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 jeszcze tego nie zrobiłeś, zapoznaj się z naszym przewodnikiem 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ć shortcode 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 szczegółów, zapoznaj się z naszym przewodnikiem na temat jak znaleźć identyfikatory stron w WordPress.

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

Możesz również użyć krótkiego kodu, aby wyświetlić listę swoich najnowszych postów na blogu. Może to być świetny sposób na zwiększenie liczby wyświetleń postó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 postó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 wyświetlania listy stron w WordPress 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 biblioteki medió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/wyłącz.

Jeśli chcesz dodać tekst poniżej swojego nagłówka, 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 z miniaturami, możesz użyć wtyczki SeedProd, aby to zrobić za pomocą kreatora metodą przeciągnij i upuść. Więcej szczegółów znajdziesz w naszym przewodniku na temat tworzenia niestandardowej strony w WordPress.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak łatwo wyświetlić listę stron ze zrzutami ekranu w WordPress. Możesz również zapoznać się z naszymi rekomendacjami najlepszych kreatorów motywów WordPress oraz naszym przewodnikiem jak dodać nieskończone przewijanie do swojej 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.