Jak dodać miniatury do linków poprzedniego i następnego wpisu w WordPressie

Po całej tej pracy nad postem na blogu WordPress, frustrujące jest patrzenie, jak czytelnicy odchodzą po jednej stronie.

Jeden z głównych powodów? Zwykłe linki tekstowe na dole Twoich wpisów ledwo zwracają na siebie uwagę.

Dodanie miniatur do tych linków nawigacyjnych może pomóc przyciągnąć uwagę. Czytelnicy od razu widzą, co jest dalej, co sprawia, że są znacznie bardziej skłonni pozostać i przeglądać Twoje treści.

Przetestowaliśmy wiele metod i stwierdziliśmy, że WPCode jest najlepszym narzędziem do tego zadania. Pozwala bezpiecznie dodawać niestandardowe fragmenty kodu bez modyfikowania plików motywu.

W tym przewodniku pokażemy Ci dokładnie, jak dodać miniatury do linków poprzedniego i następnego posta w WordPress. Jest to łatwiejsze niż myślisz! 💡

Dlaczego wyświetlać miniatury z linkami do poprzedniego i następnego wpisu?

Miniatury natychmiast sprawiają, że Twoje linki nawigacyjne są bardziej przyciągające wzrok i klikalne. Mogą zachęcić czytelników do dalszego przeglądania Twojej witryny, potencjalnie zwiększając liczbę wyświetleń stron i czas spędzony na stronie.

Twój blog WordPress oferuje kilka pomocnych funkcji, które pomagają odwiedzającym znaleźć nowe treści i nawigować po Twojej witrynie.

Funkcje te obejmują:

• Menu nawigacyjne
• A pasek wyszukiwania, i
• A widget archiwum postów.

Inna pomocna funkcja nawigacyjna znajduje się na dole każdego posta na blogu. Tam znajdziesz linki do poprzednich i następnych postów Twojej witryny.

Te linki budują zaangażowanie użytkowników, ponieważ gdy odwiedzający skończą czytać jeden wpis na blogu, mogą szukać czegoś innego do przeczytania. Jednak jeśli dodasz miniatury, linki będą wyglądać bardziej interaktywnie.

Jest to również świetny sposób na zwrócenie uwagi na Twoje najlepiej działające lub popularne posty na blogu.

Na przykład możesz mieć treści filarowe, które już generują mnóstwo ruchu i przekształcają tych czytelników w subskrybentów e-mail. Dodanie miniatur z linkami do postów tylko pomogłoby Ci zbudować listę e-mailową i rozwijać małą firmę.

Mając to na uwadze, pokażemy Ci, jak dodać miniatury do linków poprzedniego i następnego posta w WordPress. Oto wszystkie tematy, które omówimy w tym artykule:

Zacznijmy!

Używanie miniatur z linkami do poprzedniego i następnego posta w WordPress

Aby dodać miniatury do linków poprzedniego i następnego wpisu, musisz dodać kod do plików motywu WordPress.

Polecamy używać WPCode, najlepszej wtyczki do fragmentów kodu dla WordPressa. Pozwala ona na dodawanie kodu bez psucia witryny i zawiera mnóstwo gotowych szablonów, dzięki czemu nie musisz pisać kodu od zera.

Na naszych stronach internetowych używamy WPCode do tworzenia i zarządzania niestandardowymi fragmentami kodu. Działało to dla nas niesamowicie dobrze i możesz zapoznać się z naszą pełną recenzją WPCode, aby poznać jej funkcje.

Jeśli nigdy tego wcześniej nie robiłeś, zapoznaj się z naszym przewodnikiem na temat kopiowania i wklejania kodu w WordPress.

Aby rozpocząć, musisz zainstalować i aktywować wtyczkę WPCode. Z obszaru administracyjnego WordPressa przejdź do Wtyczki » Dodaj wtyczkę.

Na następnym ekranie użyj pola wyszukiwania, aby szybko znaleźć wtyczkę WPCode.

Kliknij „Zainstaluj teraz” w wynikach wyszukiwania, a następnie „Aktywuj”.

Jeśli potrzebujesz pomocy, możesz zapoznać się z naszym artykułem na temat jak zainstalować wtyczkę WordPress.

Po aktywacji przejdź do Fragmenty kodu » + Dodaj fragment z panelu administratora WordPress.

Zostaniesz przekierowany do biblioteki fragmentów kodu, gdzie możesz wybierać spośród szerokiej gamy gotowych szablonów.

Aby dodać miniatury do linków poprzedniego i następnego posta, prześlemy fragment niestandardowego kodu.

Kliknijmy więc „+ Dodaj niestandardowy fragment” w sekcji „Dodaj swój niestandardowy kod (nowy fragment)”.

W wyświetlonym oknie podręcznym wybierzesz typ kodu.

Tutaj chcesz wybrać „PHP Snippet”, który jest małym fragmentem kodu używanym do rozszerzania funkcjonalności WordPressa.

Następnym krokiem jest nadanie fragmentowi kodu nazwy, aby można było się do niego później odwołać.

Następnie po prostu skopiuj poniższy kod do edytora tekstu WPCode:

function wpb_posts_nav(){
    $next_post = get_next_post();
    $prev_post = get_previous_post();
     
    if ( $next_post || $prev_post ) : ?>
     
        <div class="wpb-posts-nav">
            <div>
                <?php if ( ! empty( $prev_post ) ) : ?>
                    <a href="<?php echo get_permalink( $prev_post ); ?>">
                        <div>
                            <div class="wpb-posts-nav__thumbnail wpb-posts-nav__prev">
                                <?php echo get_the_post_thumbnail( $prev_post, [ 100, 100 ] ); ?>
                            </div>
                        </div>
                        <div>
                            <strong>
                                <svg viewBox="0 0 24 24" width="24" height="24"><path d="M13.775,18.707,8.482,13.414a2,2,0,0,1,0-2.828l5.293-5.293,1.414,1.414L9.9,12l5.293,5.293Z"/></svg>
                                <?php _e( 'Previous article', 'textdomain' ) ?>
                            </strong>
                            <h4><?php echo get_the_title( $prev_post ); ?></h4>
                        </div>
                    </a>
                <?php endif; ?>
            </div>
            <div>
                <?php if ( ! empty( $next_post ) ) : ?>
                    <a href="<?php echo get_permalink( $next_post ); ?>">
                        <div>
                            <strong>
                                <?php _e( 'Next article', 'textdomain' ) ?>
                                <svg viewBox="0 0 24 24" width="24" height="24"><path d="M10.811,18.707,9.4,17.293,14.689,12,9.4,6.707l1.415-1.414L16.1,10.586a2,2,0,0,1,0,2.828Z"/></svg>
                            </strong>
                            <h4><?php echo get_the_title( $next_post ); ?></h4>
                        </div>
                        <div>
                            <div class="wpb-posts-nav__thumbnail wpb-posts-nav__next">
                                <?php echo get_the_post_thumbnail( $next_post, [ 100, 100 ] ); ?>
                            </div>
                        </div>
                    </a>
                <?php endif; ?>
            </div>
        </div> <!-- .wpb-posts-nav -->
     
    <?php endif;
}

Oto jak może to wyglądać na Twoim ekranie:

Przed aktywacją przewiń w dół do sekcji „Wstawianie”, aby sprawdzić ustawienia.

Upewnij się, że „Metoda wstawiania” jest ustawiona na „Automatyczne wstawianie”, a „Lokalizacja” na „Uruchom wszędzie”.

Następnie możesz przewinąć ponownie w górę i przełączyć przycisk z „Nieaktywny” na „Aktywny”.

Nie zapomnij kliknąć przycisku „Zapisz fragment” lub „Aktualizuj”, aby aktywować nową funkcję.

Teraz, gdy funkcja została utworzona, musimy utworzyć drugi fragment, aby dokładnie poinformować WordPress, gdzie ją wyświetlić na stronie. Dzieląc to na dwa fragmenty, najpierw bezpiecznie tworzymy funkcję, a następnie łatwo ją umieszczamy, nie przeciążając witryny ani nie psując układu.

Wróćmy do strony Fragmenty kodu » + Dodaj fragment.

Ponownie, w opcji „Dodaj swój niestandardowy kod (nowy fragment)”, kliknij „+ Dodaj niestandardowy fragment”.

W wyświetlonym oknie WPCode zapyta o typ kodu.

Możesz wybrać „Fragment PHP”.

Otworzy się ten sam edytor tekstu, co poprzednio.

Nadaj swojej nowej niestandardowej wstawce opisową nazwę, abyś mógł się do niej łatwo odwołać w przyszłości.

Teraz możesz skopiować i wkleić poniższy kod do edytora tekstu WPCode. Ten kod informuje WordPress gdzie wyświetlić nawigację z wyróżnionym obrazkiem.

wpb_posts_nav();

Oto jak może to wyglądać na Twoim ekranie:

Po wykonaniu tej czynności przewiń w dół do sekcji „Wstawianie” i kliknij menu rozwijane obok opcji „Lokalizacja”.

Stąd przejdź do „Specyficzne dla strony” i wybierz „Wstaw po poście”. W ten sposób miniatury pojawią się prawidłowo obok linków.

Na koniec możesz włączyć opcję „Aktywny” i kliknąć „Zapisz wstawkę” (lub „Zaktualizuj”).

Po zapisaniu zmian możesz użyć tej funkcji w szablonie, w którym chcesz wyświetlić linki do poprzedniego i następnego posta wraz z miniaturami.

Ponieważ ustawiłeś lokalizację na „Wstaw po poście”, WPCode automatycznie zajmie się umieszczeniem za Ciebie. Nie ma potrzeby edytowania plików motywu.

I to wszystko – dodałeś i skonfigurowałeś miniatury poprzedniego i następnego posta!

Teraz, gdy wyświetlasz wpis na swojej stronie internetowej, zobaczysz, że poprzednie i następne linki na dole wpisu mają teraz miniatury.

Alternatywa: Wyświetlanie popularnych wpisów z miniaturami

Innym sposobem na zaangażowanie czytelników po przeczytaniu posta jest wyświetlenie listy popularnych postów po każdym artykule. Pozwoli to czytelnikom zobaczyć Twoje najlepsze treści, a nie tylko poprzednie i następne opublikowane artykuły.

Twoje popularne posty zawierają Twoje najskuteczniejsze treści. Wyświetlanie ich odwiedzającym pomoże zwiększyć liczbę wyświetleń stron i zaangażowanie użytkowników.

Chociaż linki poprzedni i następny są świetne do czytania chronologicznego, narzędzie takie jak MonsterInsights pozwala automatycznie wyświetlać Twoje absolutnie najlepsze, najbardziej konwertujące treści, aby utrzymać zaangażowanie czytelników.

W WPBeginner używamy MonsterInsights do śledzenia wydajności naszej strony internetowej. Możesz przeczytać naszą pełną recenzję MonsterInsights i zobaczyć, dlaczego jest to nasze ulubione narzędzie do podejmowania decyzji opartych na danych.

Widżet Najpopularniejsze Posty MonsterInsights oferuje szeroki wybór atrakcyjnych motywów i wiele opcji dostosowywania.

Możesz dowiedzieć się, jak łatwo to skonfigurować w naszym przewodniku na temat wyświetlania postów według liczby wyświetleń w WordPressie.

Możesz też zapoznać się z naszym przewodnikiem na temat dodawania niestandardowych widżetów po postach w WordPressie, gdzie dowiesz się, jak dodawać różne rodzaje treści na końcu każdego wpisu na blogu.

Często zadawane pytania dotyczące miniatur nawigacji postów

Masz pytania dotyczące dodawania miniatur do nawigacji postów? Oto kilka rzeczy, o które czytelnicy często pytają przed rozpoczęciem.

Dodatkowe linki do używania obrazów i innych plików multimedialnych w WordPress

Mamy nadzieję, że ten samouczek pomógł Ci nauczyć się używać miniatur z linkami do poprzedniego i następnego posta w WordPressie.

Następnie możesz również chcieć dowiedzieć się:

• Jak przycinać i edytować miniatury postów w WordPress
• Jak dodać miniatury filmów wyróżniających w WordPressie
• Tekst alternatywny obrazu a tytuł obrazu w WordPress
• Jak naprawić problem z niewidocznym obrazem wyróżniającym w WordPress
• Jak zoptymalizować obrazy pod kątem wydajności sieci bez utraty jakości

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.