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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Dennis Muthomi says
This is a great tutorial on adding a ’Load More Posts’ button
I have a quick question though:- if my current theme uses pagination to display blog posts (e.g. links to ’Next’ and ’Previous’ posts at the bottom), will adding the Ajax Load More plugin’s shortcode replace that pagination with the ’Load More’ button?
or will it possibly conflict and cause issues/crashes on my site?
some clarification on how this works with existing pagination would be really helpful. I’d hate to break my site, but love the idea of a smoother ’Load More’ experience for readers.
WPBeginner Support says
There should not be a conflict but it would depend on your specific theme, we would recommend reaching out to your theme’s support and they can let you know if there are any conflicts with the plugin
Administratör
Jean says
Thanks for your constant effort to educate the WP community. I’m wondering if we can use Ajax Load More for content within a single post. In other words, I would like to use this plugin (not others from newer post) just to replace the page brake native function with the page links.
Is it possible?
WPBeginner Support says
At the moment the plugin is not designed for that but if you check with the plugin’s support they would be able to let you know how to set that up if it is possible.
Administratör
Katie says
This article was so easy to follow, however I got stuck at this step:
”You will need to add the shortcode you copied earlier into your theme right after the endwhile; tag.”
I looked through index.php and anything else that could possibly contain the template files and I couldn’t find an endwhile; tag anywhere. I know this article is a couple years old; is there a new alternative code that this tag may have been replaced with?
WPBeginner Support says
Your theme may have a setup specific to it, we would recommend reaching out to your specific theme’s support and they should be able to let you know where you would add this.
Administratör
Joe Sebastian says
First of all that you too much for this tut. It was a saviour. However I am having an issue. When I click on the load. more button the post get repeated once, after that it works perfectly. Any help would be greatly appreciated. Cheers.
Mohammed says
Thank you, but it shows all post
anu says
i am using colormag free version is it possible to enable infinite code
Tamara Ali says
Hello Team,
I created my first new theme for a blog, and I want to have either load more button or infinite scroll, I applied everything in this post but the load more didn’t work and it is not functional, I’ve made few researches and nothing works,
Would you help me please?
Thank you
Regards
WPBeginner Support says
Hi Tamara,
Try deactivating all plugins and then add load more button. If it works then turn on plugins one by one to find out which plugin may be causing the compatibility issues.
Administratör
Michele says
Perfect timing as I needed this feature today! I’ve set everything up per your instructions and they work great until I actually need to click the button on the page. It looks like the load is pending but then doesn’t do anything else. Couldn’t find a similar issue on their support. Any thoughts?