Så här addar du till knappen Ladda fler posts i WordPress

Vill du add to en knapp för att ladda fler posts i WordPress?

Många populära plattformar allow användare att ladda fler posts när de når längst ner på sidan.

I den här artikeln visar vi hur du enkelt lägger till en knapp för att hämta fler posts i WordPress.

När och varför add to knappen Load More Posts i WordPress

Att hålla dina användare engagerade i innehållet hjälper dig att få fler views och i slutändan fler prenumeranter.

Många bloggar använder den enkla navigationslänken ”Äldre inlägg” i slutet av sina home pages, bloggar och archive pages. Vissa websites använder numerisk page navigation som adderar mer sammanhang.

Det finns dock vissa typer av webbplatser som kan dra stor nytta av infinite scroll eller ladda fler inlägg knapp. Några exempel är: webbplatser för fotografering, listor och webbplatser med viralt content.

Istället för att hämta en helt ny page, fungerar knappen ”load more posts” som infinite scroll. Den använder JavaScript för att snabbt hämta nästa uppsättning content. Detta förbättrar användarupplevelsen och ger dem en chans att view mer av your content.

Med detta sagt, låt oss ta en titt på hur du enkelt kan add to knappen hämtar fler posts på din WordPress site.

Lägga till knappen Ladda fler posts i WordPress

Det första du behöver göra är att installera och aktivera pluginet Ajax Load More. För mer detaljer, se vår steg-för-steg guide om hur du installerar ett WordPress plugin.

Vid aktivering kommer pluginet att lägga till ett nytt menu item märkt ”Ajax Load More” till din WordPress admin menu. You need to click on it and head over to the plugin’s settings page.

På sidan Settings kan du välja färg på din knapp. Du kan också ersätta knappen med infinite scroll som hämtar nästa inlägg automatiskt utan att användarna klickar på knappen.

Därefter måste du besöka Ajax Load More ” Repeater Template page för att lägga till din template för att visa posts.

Pluginet levereras med en grundläggande template som innehåller WordPress-slingan för att visa publicerade posts. Den matchar dock inte ditt theme och kan se malplacerad ut på din website.

För att fixa detta måste du kopiera koden som your theme använder för att visa posts på index-, archive- och blogg pages.

Normalt sett är denna kod placerad i template-parts folder i your theme. I den mappen kommer du att se templates för att visa olika content. Till exempel content-page.php, content-search.php, med mera.

Du kommer att leta efter den generiska templaten content.php. Här är ett exempel från vårt demotema’s content.php-fil:

<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-## -->

När du har hittat den koden måste du klistra in den i fältet ”Repeater Templates” i plugin-inställningarna.

Glöm inte att klicka på knappen ”Save Template” för att spara dina settings.

Därefter måste du besöka Ajax Load More ” Shortcode Builder-sida för att generera shortcode.

Denna page innehåller många olika alternativ som du kan customize. Först måste du selecta vilken typ av container du vill ha. Om du är osäker är det bara att titta på templaten som du kopierade tidigare. De flesta moderna teman i WordPress använder elementet <div>;.

Därefter rullar du ner till Section för knappens etiketter. Här kan du ändra den text som visas på knappen. Som standard använder plugin ”Äldre inlägg”, och du kan ändra det till ”Ladda fler inlägg” eller vad du vill.

Slutligen måste du välja om du vill att posterna ska hämtas automatiskt eller vänta på att användarna klickar på knappen Ladda fler posts.

Your shortcode är nu redo att användas. I den högra Column, kommer du att se shortcode utmatning. Gå vidare och kopiera shortcode och klistra in den i en textredigerare eftersom du kommer att behöva den i nästa steg.

Lägga till fler publicerade posts i ditt WordPress Theme

Denna del av tutorialen är obligatorisk för att du ska kunna add to kod i dina WordPress theme-filer. Om du inte har gjort det tidigare kan du läsa vår guide om hur du copy and paste kod i WordPress.

Glöm inte att göra en backup av ditt WordPress theme innan du gör några ändringar.

Du måste hitta templates-filerna där du vill add to knappen load more posts i ditt theme. Beroende på hur ditt theme är organiserat är dessa filer vanligtvis index.php, archives.php, categories.php, etc.

You will need to add the shortcode you copied earlier into your theme right after the endwhile; tagged.

Eftersom vi lägger till shortcode i en theme-fil måste vi lägga till den i do_shortcode-funktionen, gillar detta:

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

You can now save your changes and visit your website to see the ”Load more posts” button in action. Så här såg det ut på vår demo site:

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till knappen hämtar fler posts i WordPress. Du kanske också vill se vår megalista över de mest användbara WordPress-tipsen, -trixen och -hackarna för Beginner och våra expertval av de bästa WordPress Facebook-tilläggen för att få din blogg att växa.

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.