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

已发表: 2018-06-25

作为博主和内容创建者,您希望让人们参与并阅读您的帖子。 有很多方法可以做到这一点:一个好的搜索或标记系统,一个带有最近帖子链接的侧边栏,一旦读者到达页面底部,一个旧帖子的画廊,等等。

另一种好方法是使用“加载更多帖子”按钮,也称为无限滚动。 这将使感兴趣的读者只要愿意就可以浏览您的内容。 如果您愿意下载插件或做一些编码工作,这个宝贵的功能很容易添加到您的 WordPress 网站。 让我们开始吧。

为什么要无限滚动?

infinity

当用户导航到下一页时,必须重新加载整个站点。 导航栏、背景等等——虽然它们可能已经缓存了这些元素,但还是要多等几秒钟。 通过无限滚动,只需加载新帖子,只需片刻。

此外,无限滚动让访客阅读。 如果他们必须搜索以找到较旧的帖子,他们可能不会继续阅读。 但只要有一个按钮,它们可能会停留更长时间。

如果您准备好向 WordPress 添加加载更多按钮,那么您应该记住几件事。

  • 在编辑模板文件或代码之前,请务必备份您的 WordPress 网站。 或者在将更改带到主站点之前使用子主题进行试验。
  • 要安装 WordPress 插件,请转到您的 WordPress 管理区域,然后单击“插件”下方的“添加新”按钮。 从那里,搜索您想要的插件,安装并激活它。 就这么简单!
  • 如果这不起作用,请从您找到的任何地方下载该插件。 再次转到“添加新”,但这一次,单击“上传”上传文件。 然后安装并激活插件。
  • 如果这些方法似乎不起作用,一些插件会附带其他安装说明!

没有插件

不是插件人? 如果你更愿意自己做这件事,不用担心。 如果您想自己编写代码或制作自己的插件,请遵循本指南指南 两者都可以帮助您自行设置此功能 - 尽管您可能会错过插件可以提供的额外功能和轻松自定义。

这些教程涉及很多吓人的代码,但只要按照说明进行操作,应该不会太难。 您将设置一些参数以确保如果没有足够的帖子,按钮不会显示,设置基本代码,并使用 CSS 使其漂亮。

轻松加载更多

如果您更喜欢插件,这是一个很好的选择。 Easy Load More,顾名思义,是一个懒加载插件。 它使用 Ajax 在同一页面上加载额外的帖子,并且几乎不需要对主题文件进行编辑。 该插件是专门为留下尽可能小的标记而设计的,具有简约且可自定义的默认按钮、较小的 Javascript 大小以及使用 SVG 呈现的加载图标,因此不需要下载图像文件。

一旦你下载了插件,就很容易设置它。 首先,您需要从插件菜单上的设置页面配置插件。 然后,找到您想要无限滚动的页面,并将“load_more_button()”函数添加到主题的模板文件中。 它适用于自定义模板和任何页面,从主页到存档页面。

加载更多

如果您正在寻找更高级的东西,Ajax Load More 提供了许多额外的功能。

Ajax load more

有一个简码生成器,可让您创建对其他页面、帖子或评论的自定义查询。 查询参数意味着加载的帖子可以属于某些类别或帖子类型,您也可以过滤掉某些帖子。 您还可以创建模板,使插件与您的主题完美匹配。

除了所有这些功能之外,还有一些附加组件可以进一步扩展功能。 预加载帖子,用页面替换延迟加载,或更改插件的外观和布局!

虽然 Ajax Load More 可以由高级用户进行广泛定制和调整,但设置它是一个相当小的考验。 只需使用 Shortcode Builder 创建您的自定义简码,然后通过内容编辑器直接将其添加到您的站点或将其放置在您的模板文件中。 这就是你需要做的!

为 WooCommerce 加载更多产品

Load More Products for WooCommerce

如果您使用电子商务,这种特殊类型的加载更多按钮使用类似的 Ajax 编码来加载无限产品。 它与多个 WooCommerce 插件兼容。 免费版本让您可以通过按钮和一些基本的自定义功能访问无限滚动。 付费插件有多个延迟加载选项,包括动画、按钮自定义和针对移动设备的不同加载。

简单加载更多

如果您只需要简单且易于激活的东西,Simple Load More 将完成工作。 它会在您的主页上自动激活,因此如果您只需要这些,您只需安装、设置并完成即可。

Simple Load More

如果您在其他页面上需要它,只需进行一些简单的设置并将函数“simple_more_button()”或简码“[load_more button_text=”ABC”]”添加到您想要按钮的页面的模板文件中。

加载更多

如果你想尝试一个简单的 jQuery 加载更多插件,请查看这个。 加载更多任何东西都适用于任何地方、任何页面、任何内容。 帖子、评论、产品、图片——任何地方,任何地方。

为此,您需要一些技术知识。 虽然您不需要弄乱主题文件,但您需要找到与您希望按钮显示的位置以及它将从何处提取内容相关的“div”标签。 最简单的方法是在您想要按钮的位置使用“检查元素”,并尝试找到正确的 div、class 或 side 标签。 如果您不是 Web 开发人员或不知道如何浏览 Inspect Element,您可能想跳过这一步。

Load More Anything

通过加载更多轻松吸引读者

那不是那么难,对吧? 无限滚动是让访问者轻松访问更多内容的好方法,而无需加载多个页面或浏览导航链接。 它很简单,消除了任何可能的混淆。 如果您的网站上还没有加载更多按钮,您还在等什么?

如果本指南对您有所帮助,何不查看我们的FacebookTwitter以获取更多 WordPress 提示和教程? 如果您想从我们这里看到任何 WordPress 教程,请在下面的评论中告诉我们。