Jak dodać przycisk „Więcej postów” w WordPress

Kiedy odwiedzający trafiają na Twój blog, celem jest utrzymanie ich jak najdłużej. Ale jeśli muszą stale klikać, aby przejść do następnej strony, tworzy to tarcie, które może spowodować ich odejście, zanim zbadają więcej Twoich treści.

Właśnie tutaj przydaje się przycisk „Załaduj więcej postów”. Zamiast przerywać przepływ, czytelnicy mogą natychmiast wyświetlić nowe artykuły, nigdy nie opuszczając strony. Ta prosta funkcja może zmniejszyć współczynnik odrzuceń, zwiększyć czas spędzony na stronie i sprawić, że przeglądanie Twoich treści będzie bezproblemowe.

Widzieliśmy, że to podejście działa szczególnie dobrze w przypadku blogów i stron w stylu magazynów z dużą liczbą postów. Dodanie przycisku „Załaduj więcej” ułatwia czytelnikom odkrywanie większej ilości Twoich treści. Ponadto, im dłużej zostaną, tym bardziej prawdopodobne jest, że zasubskrybują lub staną się lojalnymi odwiedzającymi.

W tym artykule pokażemy Ci krok po kroku, jak dodać przycisk „Załaduj więcej postów” w WordPress.

Kiedy i dlaczego dodać przycisk „Załaduj więcej postów” w WordPressie

Jeśli chcesz, aby ludzie spędzali więcej czasu na Twojej stronie, musisz ułatwić im odkrywanie nowych treści. Im dłużej odwiedzający pozostają zaangażowani w Twoje treści, tym więcej wyświetleń uzyskasz i tym bardziej prawdopodobne jest, że zasubskrybują lub wrócą ponownie.

Większość blogów używa prostych nawigacji na dole swoich stron głównych, blogów lub archiwów, takich jak link „Starsze posty” lub paginacja numeryczna. Chociaż to działa, może przerywać przepływ czytania i powodować, że odwiedzający przestaną przeglądać.

Dlatego pewne typy stron widzą duże korzyści z dodania przycisku „Załaduj więcej postów”. Jest to szczególnie skuteczne w przypadku stron internetowych z dużą ilością treści, takich jak blogi kulinarne, witryny fotograficzne, listy artykułów lub strony z wirusowymi wiadomościami.

Weźmy na przykład blog So Much Food, używają oni czystego przycisku „Załaduj więcej postów”, który natychmiast ładuje nowe przepisy.

Zamiast ładować całą nową stronę, przycisk 'Załaduj więcej postów' działa podobnie do nieskończonego przewijania. Wykorzystuje JavaScript do szybkiego pobierania kolejnego zestawu treści. Poprawia to doświadczenie użytkownika i daje mu możliwość przeglądania większej ilości Twoich treści bez przerw.

Mając to na uwadze, przyjrzyjmy się, jak łatwo dodać przycisk „Załaduj więcej postów” do Twojej witryny WordPress.

Krok 1: Dodawanie przycisku „Załaduj więcej postów” w WordPressie

Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i aktywowanie wtyczki Ajax Load More. Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku na temat jak zainstalować wtyczkę WordPress.

Po aktywacji wtyczka doda nową pozycję menu o nazwie „Ajax Load More” do menu administratora WordPress. Musisz kliknąć ją i przejść do strony ustawień wtyczki.

Na stronie ustawień możesz wybrać kolor swojego przycisku. Możesz również zastąpić przycisk nieskończonym przewijaniem, które automatycznie ładuje następną partię postów bez klikania przez użytkowników przycisku.

Następnie musisz odwiedzić stronę Ajax Load More » Szablon powtarzalny, aby dodać swój szablon do wyświetlania postów.

Wtyczka zawiera podstawowy szablon zawierający pętlę WordPressa do wyświetlania postów. Jednak nie pasuje on do Twojego motywu i może wyglądać nieodpowiednio na Twojej stronie internetowej.

Aby to naprawić, musisz skopiować kod, którego Twój motyw używa do wyświetlania postów na stronach indeksu, archiwum i stronach blogowych.

Zazwyczaj ten kod znajduje się w folderze template-parts Twojego motywu. W tym folderze znajdziesz szablony do wyświetlania różnych treści. Na przykład content-page.php, content-search.php i inne.

Będziesz szukać ogólnego szablonu content.php. Oto przykład z pliku content.php naszego motywu demonstracyjnego:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <?php
        // Post thumbnail.
        twentyfifteen_post_thumbnail();
    ?>
 
    <header class="entry-header">
        <?php
            if ( is_single() ) :
                the_title( '<h1 class="entry-title">', '</h1>' );
            else :
                the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' );
            endif;
        ?>
    </header><!-- .entry-header -->
 
    <div class="entry-content">
        <?php
            /* translators: %s: Name of current post */
            the_content( sprintf(
                __( 'Continue reading %s', 'twentyfifteen' ),
                the_title( '<span class="screen-reader-text">', '</span>', false )
            ) );
 
            wp_link_pages( array(
                'before'      => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentyfifteen' ) . '</span>',
                'after'       => '</div>',
                'link_before' => '<span>',
                'link_after'  => '</span>',
                'pagelink'    => '<span class="screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>%',
                'separator'   => '<span class="screen-reader-text">, </span>',
            ) );
        ?>
    </div><!-- .entry-content -->
 
    <?php
        // Author bio.
        if ( is_single() && get_the_author_meta( 'description' ) ) :
            get_template_part( 'author-bio' );
        endif;
    ?>
 
    <footer class="entry-footer">
        <?php twentyfifteen_entry_meta(); ?>
        <?php edit_post_link( __( 'Edit', 'twentyfifteen' ), '<span class="edit-link">', '</span>' ); ?>
    </footer><!-- .entry-footer -->
 
</article><!-- #post-## -->

Po znalezieniu tego kodu, musisz wkleić go w pole „Szablony powtarzalne” w ustawieniach wtyczki.

Nie zapomnij kliknąć przycisku „Zapisz szablon”, aby zapisać swoje ustawienia.

Następnie musisz odwiedzić stronę Kreator Krótkich Kodów Ajax Load More », aby wygenerować krótki kod.

Ta strona zawiera wiele różnych opcji, które możesz dostosować. Najpierw musisz wybrać typ kontenera. Jeśli nie masz pewności, po prostu spójrz na szablon, który skopiowałeś wcześniej. Większość nowoczesnych motywów WordPress używa elementu <div>.

Następnie przewiń w dół do sekcji etykiet przycisków. Tutaj możesz zmienić tekst wyświetlany na przycisku. Domyślnie wtyczka używa „Starsze posty” i możesz zmienić to na „Załaduj więcej postów” lub cokolwiek chcesz.

Na koniec musisz wybrać, czy chcesz, aby posty ładowały się automatycznie, czy czekały, aż użytkownicy klikną przycisk „Załaduj więcej postów”.

Twój skrócony kod jest gotowy do użycia. W prawej kolumnie zobaczysz wynik działania skróconego kodu. Skopiuj skrócony kod i wklej go do edytora tekstu, ponieważ będzie on potrzebny w następnym kroku.

Krok 2: Dodawanie przycisku „Załaduj więcej postów” w Twoim motywie WordPress

Ta część samouczka wymaga dodania kodu do plików motywu WordPress. Jeśli nigdy tego nie robiłeś, zapoznaj się z naszym przewodnikiem jak kopiować i wklejać kod w WordPress.

Uwaga: Nie zapomnij wykonać kopii zapasowej swojego motywu WordPress przed wprowadzeniem jakichkolwiek zmian.

Musisz znaleźć pliki szablonu, w których chcesz dodać przycisk 'Załaduj więcej postów' w swoim motywie. W zależności od organizacji Twojego motywu, zazwyczaj są to pliki index.php, archives.php, categories.php itp.

Będziesz musiał dodać skrócony kod, który wcześniej skopiowałeś, do swojego motywu, zaraz po tagu endwhile;.

Ponieważ dodajemy shortcode w pliku motywu, będziemy musieli umieścić go w funkcji do_shortcode, w następujący sposób:

echo do_shortcode('[ajax_load_more container_type="div" post_type="post"]');  

Możesz teraz zapisać zmiany i odwiedzić swoją stronę internetową, aby zobaczyć przycisk „Załaduj więcej postów” w akcji. Oto jak wyglądał na naszej stronie demonstracyjnej:

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodać przycisk 'Załaduj więcej postów' w WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat wyświetlania przyszłych zaplanowanych postów w WordPress oraz naszymi ekskluzywnymi wyborami najlepszych wtyczek do powiązanych postów dla 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.