Hur man lägger till en knapp för att ladda fler inlägg i WordPress

När besökare landar på din blogg är målet att få dem att läsa så länge som möjligt. Men om de ständigt måste klicka sig vidare till nästa sida, skapar det friktion som kan få dem att lämna innan de utforskar mer av ditt innehåll.

Det är där en knapp för att ladda fler inlägg kommer in. Istället för att bryta flödet kan läsare omedelbart hämta nya artiklar utan att någonsin lämna sidan. Denna enkla funktion kan minska avvisningsfrekvensen, förbättra tiden på webbplatsen och göra surfandet på ditt innehåll enkelt.

Vi har sett att detta tillvägagångssätt fungerar särskilt bra för bloggar och webbplatser i tidningsstil med många inlägg. Att lägga till en knapp för att ladda mer gör det enklare för läsare att upptäcka mer av ditt innehåll. Dessutom, ju längre de stannar, desto mer sannolikt är det att de prenumererar eller blir lojala besökare.

I den här artikeln visar vi dig hur du lägger till en knapp för att ladda fler inlägg i WordPress, steg för steg.

När och varför lägga till en knapp för att ladda fler inlägg i WordPress

Om du vill att folk ska spendera mer tid på din webbplats måste du göra det enkelt för dem att fortsätta upptäcka nytt innehåll. Ju längre besökare engagerar sig i ditt innehåll, desto fler visningar får du och desto mer sannolikt är det att de prenumererar eller kommer tillbaka igen.

De flesta bloggar använder enkel navigering längst ner på sina startsidor, bloggsidor eller arkivsidor, som en länk till 'Äldre inlägg' eller numerisk sidnavigering. Även om detta fungerar, kan det avbryta läsflödet och få besökare att sluta surfa.

Det är därför vissa typer av webbplatser ser stora fördelar med att lägga till en knapp för att ladda fler inlägg. Det är särskilt effektivt för innehållstunga webbplatser som matbloggar, fotowebbplatser, listor eller virala nyhetssajter.

Ta till exempel bloggen So Much Food, de använder en ren knapp för 'Ladda mer inlägg' som omedelbart laddar nya recept.

Istället för att ladda en helt ny sida fungerar en knapp för att 'Ladda fler inlägg' som oändlig scrollning. Den använder JavaScript för att snabbt hämta nästa uppsättning innehåll. Detta förbättrar användarupplevelsen och ger dem en chans att se mer av ditt innehåll utan avbrott.

Med det sagt, låt oss titta på hur du enkelt lägger till en knapp för att ladda mer inlägg på din WordPress-webbplats.

Steg 1: Lägga till en knapp för att ladda fler inlägg i WordPress

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

Vid aktivering lägger pluginet till ett nytt menyalternativ märkt 'Ajax Load More' i din WordPress-administratörsmeny. Du måste klicka på det och gå till pluginets inställningssida.

På inställningssidan kan du välja färgen på din knapp. Du kan också ersätta knappen med oändlig scrollning, som laddar nästa omgång inlägg automatiskt utan att användarna klickar på knappen.

Därefter behöver du besöka sidan Ajax Load More » Repeater Template för att lägga till din mall för att visa inlägg.

Pluginet levereras med en grundläggande mall som innehåller WordPress-loopen för att visa inlägg. Den matchar dock inte ditt tema och kan se malplacerad ut på din webbplats.

För att åtgärda detta måste du kopiera koden som ditt tema använder för att visa inlägg på index-, arkiv- och bloggsidor.

Normalt finns den här koden i mappen template-parts i ditt tema. I den mappen ser du mallar för att visa olika innehåll. Till exempel content-page.php, content-search.php och mer.

Du kommer att leta efter den generiska mallen content.php. Här är ett exempel från vår demo-temas 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 behöver du klistra in den i fältet 'Repeater Templates' i plugininställningarna.

Glöm inte att klicka på knappen 'Spara mall' för att lagra dina inställningar.

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

Den här sidan innehåller många olika alternativ som du kan anpassa. Först måste du välja containertyp. Om du är osäker, titta bara på mallen du kopierade tidigare. De flesta moderna WordPress-teman använder <div>-elementet.

Efter det, scrolla ner till avsnittet för knappetiketter. Här kan du ändra texten som visas på knappen. Som standard använder pluginet 'Ä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 inlägg ska laddas automatiskt eller vänta på att användare klickar på knappen för att ladda fler inlägg.

Din kortkod är nu redo att användas. I den högra kolumnen ser du kortkodens utdata. Kopiera kortkoden och klistra in den i en textredigerare eftersom du kommer att behöva den i nästa steg.

Steg 2: Lägga till 'Ladda fler inlägg' i ditt WordPress-tema

Den här delen av handledningen kräver att du lägger till kod i dina WordPress-temafiler. Om du inte har gjort det tidigare, ta en titt på vår guide om hur man kopierar och klistrar in kod i WordPress.

Notera: Glöm inte att säkerhetskopiera ditt WordPress-tema innan du gör några ändringar.

Du behöver hitta mallfilerna där du vill lägga till knappen för att ladda fler inlägg i ditt tema. Beroende på hur ditt tema är organiserat är dessa filer vanligtvis index.php, archives.php, categories.php, etc.

Du måste lägga till kortkoden du kopierade tidigare i ditt tema precis efter taggen endwhile;.

Eftersom vi lägger till kortkoden i en temafil, måste vi lägga till den inuti do_shortcode-funktionen, så här:

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

Du kan nu spara dina ändringar och besöka din webbplats för att se knappen 'Ladda mer inlägg' i aktion. Så här såg det ut på vår demosida:

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till en knapp för att ladda fler inlägg i WordPress. Du kanske också vill se vår guide om hur du listar framtida kommande schemalagda inlägg i WordPress och våra experttips om bästa plugins för relaterade inlägg för WordPress.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.