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?

Krótko mówiąc, 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.

Twój blog WordPress oferuje kilka pomocnych funkcji, które pomogą odwiedzającym znaleźć nowe treści i poruszać się po Twojej witrynie. Funkcje te obejmują:

• menu nawigacyjne
• a pasek wyszukiwania, i
• widżet archiwów postów.

Kolejna pomocna funkcja nawigacji znajduje się na dole każdego wpisu na blogu. Tam znajdziesz linki do poprzednich i następnych wpisów na Twojej stronie.

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 najpopularniejsze posty na blogu.

Na przykład możesz mieć treści filarowe, które już generują ogromny ruch i zamieniają tych czytelników w subskrybentów e-mail. Dodanie miniatur z linkami do wpisów tylko pomoże 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:

• Using Thumbnails with Previous and Next Post Links in WordPress
• Alternatywa: Wyświetlanie popularnych wpisów z miniaturami
• Często zadawane pytania dotyczące miniatur nawigacji postów
• Dodatkowe linki: Używanie obrazów i innych plików multimedialnych w WordPress

Zacznijmy!

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

Aby dodać miniatury do linków poprzedniego i następnego posta, będziesz musiał dodać kod do plików motywu WordPress. Jeśli nigdy tego nie robiłeś, zapoznaj się z naszym przewodnikiem na temat jak kopiować i wklejać kod w WordPressie.

Dodawanie kodu za pomocą WPCode

Pierwszym krokiem jest dodanie następującego fragmentu kodu za pomocą WPCode, najlepszej wtyczki do fragmentów kodu. Pozwala ona na dodawanie kodu bez psucia witryny i zawiera wiele gotowych szablonów, dzięki czemu nie musisz pisać kodu od zera.

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

Aby rozpocząć, musisz zainstalować i aktywować wtyczkę WPCode. Jeśli potrzebujesz pomocy, możesz zapoznać się z naszym artykułem na temat jak zainstalować wtyczkę WordPress.

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

Następnie kliknij przycisk „Dodaj nowy”.

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

Aby dodać miniatury do poprzednich i następnych linków do wpisów, wgramy niestandardowy ciąg kodu. Kliknijmy więc „Użyj fragmentu” w sekcji „Dodaj własny kod (nowy fragment)”.

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

Tutaj chcesz wybrać „Fragment PHP”.

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

Po wklejeniu fragmentu kodu możesz przełączyć przycisk z pozycji „Nieaktywny” na „Aktywny”.

Powinno to wyglądać tak.

Umożliwi to działanie kodu.

Następnie możesz po prostu kliknąć przycisk „Zaktualizuj”.

Teraz musimy wrócić do strony Fragmenty kodu » + Dodaj fragment.

Ponownie, w opcji „Dodaj własny kod (nowy fragment)” wybierz „Użyj fragmentu”.

Upewnij się, że w wyświetlonym oknie dialogowym wybierzesz „Fragment PHP”.

Następnie możesz nadać mu opisową nazwę, aby łatwo można było się do niego później odwołać.

Teraz możesz skopiować poniższy kod i wkleić go do edytora tekstu WPCode.

wpb_posts_nav();

Ten kod mówi WordPress gdzie wyświetlić nawigację z obrazkiem wyróżniającym.

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ąć „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.

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 zbuduje zaufanie, poprawi dowód społeczny i zapewni, że odwiedzający pozostaną na Twojej stronie dłużej.

Kiedy sprawdzisz pierwszą metodę w naszym przewodniku na temat jak wyświetlać posty według wyświetleń w WordPress, dowiesz się, jak łatwo jest dodawać popularne posty za pomocą pluginu MonsterInsights.

W WPBeginner używamy MonsterInsights, aby uważnie śledzić wydajność naszej strony internetowej. Możesz zapoznać się z naszą pełną recenzją MonsterInsights i dowiedzieć się, 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 też zapoznać się z naszym przewodnikiem jak dodać niestandardowe widżety po poście w WordPress, 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.

Czy mogę zmienić rozmiar miniatur?

Absolutnie! W pierwszym fragmencie kodu poszukaj linii zawierających [ 100, 100 ]. Te liczby reprezentują szerokość i wysokość w pikselach. Po prostu zamień je na wymiary, które najlepiej pasują do projektu Twojego motywu.

Czy dodawanie miniatur za pomocą kodu spowolni moją stronę internetową?

Wcale nie. Kod jest lekki i zbudowany z myślą o wydajności, więc nie powinieneś zauważyć żadnego spowolnienia. Ponadto WPCode zapewnia, że fragment ładuje się tylko na stronach pojedynczych wpisów, gdzie jest potrzebny.

Co się stanie, jeśli wpis nie ma obrazka wyróżniającego?

Bez obaw. Jeśli powiązany post nie ma obrazka wyróżniającego, kod po prostu wyświetli zamiast tego link tekstowy. Niemniej jednak, ustawienie obrazka wyróżniającego dla każdego posta pomaga utrzymać spójny i dopracowany wygląd Twojej witryny.

Czy lepiej pokazywać linki poprzedni/następny czy sekcję popularnych postów?

To zależy od Twojego celu. Linki poprzedni i następny świetnie nadają się do prowadzenia czytelników przez powiązane treści w kolejności.

Ale jeśli chcesz, aby ludzie przeglądali Twoje najlepsze artykuły, sekcja popularnych postów (przy użyciu narzędzia takiego jak MonsterInsights) może zdziałać cuda.

Dodatkowe linki: Używanie obrazów i innych plików multimedialnych w WordPress

Mamy nadzieję, że ten samouczek pomógł Ci dowiedzieć się, jak używać miniatur z linkami do poprzedniego i następnego posta w WordPress. Następnie możesz również chcieć dowiedzieć się:

• Jak przycinać i edytować miniatury postów w WordPress
• Jak dodać obraz tła w WordPress
• Jak dodać miniatury filmów wyróżniających w WordPressie
• Jak dodać widżet odtwarzacza muzyki audio w WordPress
• Jak dodać indeksowanie i wyszukiwanie PDF w WordPress
• 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.