Jak dodać przycisk wczytywania kolejnych wpisów w WordPressie?

Chcesz dodać przycisk wczytywania kolejnych wpisów w WordPressie?

Wiele popularnych platform umożliwia użytkownikom wczytywanie kolejnych wpisów po dotarciu do dolnej części strony.

W tym artykule pokażemy, jak w prosty sposób dodać przycisk wczytywania większej ilości wpisów w WordPressie.

Kiedy i dlaczego warto wczytywać więcej wpisów w WordPressie?

Utrzymywanie zaangażowania użytkowników w treść pomaga uzyskać więcej zobaczów i ostatecznie więcej subskrybentów.

Wiele blogów używa prostego odnośnika nawigacyjnego „Starsze wpisy” na końcu strony głównej, bloga i archiwum. Niektóre witryny internetowe używają numerycznej nawigacji po stronach, która dodaje więcej kontekstu.

Istnieją jednak pewne typy witryn internetowych, które mogą czerpać ogromne korzyści z nieskończonego przewijania lub przycisku wczytywania większej liczby wpisów. Niektóre przykłady obejmują: witryny fotograficzne, witryny z listami i witryny z treściami wiralowymi.

Zamiast wczytywać całą nową stronę, przycisk „wczytaj więcej wpisów” działa jak nieskończone przewijanie. Wykorzystuje JavaScript do szybkiego pobierania następnej treści. Poprawia to wrażenia użytkownika i daje mu szansę na zobaczenie większej ilości twoich treści.

W związku z tym przyjrzyjmy się, jak łatwo dodać przycisk wczytywania większej liczby wpisów w twojej witrynie WordPress.

Dodawanie przycisku wczytywania kolejnych wpisów w WordPressie

Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i włączanie wtyczki Ajax Load More. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po włączaniu wtyczka doda nowy utwórz menu o nazwie „Ajax Load More” do twojego menu administratora WordPress. Należy go kliknąć i przejść do strony ustawień wtyczki.

Na stronie ustawień możesz wybrać kolor twojego przycisku. Możesz również zastąpić przycisk nieskończonym przewijaniem, które automatycznie wczytuje kolejne wpisy bez konieczności klikania przycisku.

Następnie należy przejść na stronę Ajax Load More ” Repeater Template, aby dodać twój szablon do wyświetlania wpisów.

Wtyczka jest dostarczana z podstawowym szablonem zawierającym pętlę WordPress do wyświetlania wpisów. Nie pasuje on jednak do twojego motywu i może wyglądać nie na miejscu na twojej witrynie internetowej.

Aby to poprawić, musisz skopiować kod, którego twój motyw używa do wyświetlania wpisów na stronach indeksu, archiwum i bloga.

Zwykle kod ten znajduje się w katalogu fragmentów szablonu twojego motywu. W tym katalogu znajdują się 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 należy wkleić go w polu „Repeater Templates” w ustawieniach wtyczki.

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

Następnie należy przejść na stronę Ajax Load More ” Shortcode Builder, aby wygenerować krótki kod.

Ta strona zawiera wiele różnych opcji, które można dostosować do własnych potrzeb. Najpierw należy wybrać rodzaj kontenera. Jeśli nie masz pewności, spójrz na skopiowany wcześniej szablon. 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 wpisu „Starsze wpisy”, który można zmienić na „Wczytywanie większej ilości wpisów” lub cokolwiek innego.

Na koniec należy wybrać, czy wpisy mają być wczytywane automatycznie, czy też użytkownicy mają czekać na kliknięcie przycisku „Wczytaj więcej wpisów”.

Twój krótki kod jest teraz gotowy do użycia. W prawej kolumnie zobaczysz krótki kod wyjściowy. Śmiało skopiuj krótki kod i wklej go w edytorze tekstu, ponieważ będziesz go potrzebować w następnym kroku.

Dodawanie kolejnych wpisów w Twoim motywie WordPress

Ta część poradnika wymaga dodania kodu do plików twojego motywu WordPress. Jeśli nie robiłeś tego wcześniej, zapoznaj się z naszym przewodnikiem na temat kopiowania i wklejania kodu w WordPress.

Nie zapomnij wykonać kopii zapasowej twojego motywu WordPress przed wprowadzeniem jakichkolwiek zmian.

Będziesz musiał znaleźć pliki szablonu, w których chcesz dodać przycisk wczytywania większej liczby wpisów w twoim motywie. W zależności od tego, jak zorganizowany jest twój motyw, zazwyczaj są to pliki index.php, archives.php, categories.php itp.

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

Ponieważ dodajemy krótki kod w pliku motywu, będziemy musieli dodać go wewnątrz funkcji do_shortcode, tak jak poniżej:

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

Możesz teraz zapisać zmiany i przejść na twoją witrynę internetową, aby zobaczyć przycisk „Wczytywanie większej liczby wpisów” w działaniu. Oto jak to wyglądało na naszej witrynie demonstracyjnej:

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak wczytywać więcej wpisów w WordPress. Możesz również zapoznać się z naszą mega listą najbardziej przydatnych wskazówek, trików i hacków WordPress dla początkujących oraz z naszą ekspercką listą najlepszych wtyczek WordPress do Facebooka, które pomogą Ci rozwinąć Twojego bloga.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.