如何在WordPress中添加加载更多帖子按钮

2020-06-22
WordPress行业动态

您是否要在WordPress中添加“加载更多帖子”按钮？许多流行的平台允许用户在到达页面底部时加载更多帖子。在本文中，我们将向您展示如何轻松地在WordPress中添加“加载更多帖子”按钮。

何时以及为何在WordPress中添加加载更多帖子按钮

让您的用户与内容保持联系有助于您获得更多观看次数，并最终获得更多订阅者。

许多博客在首页，博客和存档页面的末尾使用简单的“较旧的帖子”导航链接。一些网站使用数字页面导航，这增加了更多上下文。

但是，某些类型的网站可以从无限滚动或加载更多帖子按钮中受益匪浅。一些示例包括：摄影网站，目录和病毒内容网站。

而不是加载整个页面，“加载更多帖子”按钮的作用就像无限滚动一样。它使用JavaScript快速获取下一组内容。这样可以改善用户体验，并使他们有机会查看更多内容。

话虽如此，让我们来看看如何轻松地在WordPress网站中添加“加载更多帖子”按钮。

在WordPress中添加加载更多帖子按钮

您需要做的第一件事是安装并激活Ajax Load More插件。有关更多详细信息，请参阅有关如何安装WordPress插件的分步指南。

激活后，插件将在您的WordPress管理菜单中添加一个名为“ Ajax Load More”的新菜单项。您需要单击它，然后转到插件的设置页面。

在设置页面上，您可以选择按钮的颜色。您也可以将按钮替换为无限滚动，以自动加载下一批帖子，而无需用户单击按钮。

接下来，您需要访问Ajax加载更多»转发器模板页面以添加用于显示帖子的模板。

该插件带有一个基本模板，其中包含WordPress循环以显示帖子。但是，它与您的主题不匹配，并且可能在您的网站上看起来不合适。

要解决此问题，您需要复制主题用于在索引，存档和博客页面上显示帖子的代码。

通常，此代码位于主题的template-parts文件夹中。在该文件夹中，您将看到显示不同内容的模板。例如content-page.php，content-search.php等。

您将寻找通用的content.php模板。这是演示主题的content.php文件中的一个示例：

<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>
    <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>
    <?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>
</article>