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

wordpress 加载慢

Do you want to add a load more posts button in WordPress? Many popular platforms allow users to load more posts when they reach to the bottom of the page. In this article, we will show you how to easily add a load more posts button in WordPress.

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

How to add load more posts button in WordPress
何时以及为何在WordPress中添加加载更多帖子按钮 (When and Why Add Load More Posts Button in WordPress)

Keeping your users engaged with the content helps you get more views and ultimately more subscribers.

让您的用户与内容保持互动可以帮助您获得更多观看次数,并最终获得更多订阅者。

Many blogs use the simple ‘Older posts’ navigation link at the end of their home, blog, and archive pages. Some websites use numeric page navigation which adds more context.

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

However, there are certain type of websites that can benefit immensely from infinite scroll or load more posts button. Some examples include: photography websites, listicles, and viral content websites.

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

Instead of loading a whole new page, ‘load more posts’ button works like infinite scroll. It uses JavaScript to quickly fetch the next set of content. This improves user experience and gives them a chance to view more of your content.

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

That being said, let’s take a look at how to easily add load more posts button in your WordPress site.

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

在WordPress中添加加载更多帖子按钮 (Adding Load More Posts Button in WordPress)

First thing you need to do is install and activate the Ajax Load More plugin. For more details, see our step by step guide on how to install a WordPress plugin.

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

Upon activation, the plugin will add a new menu item labeled ‘Ajax Load More’ to your WordPress admin menu. You need to click on it and head over to the plugin’s settings page.

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

Ajax Load More settings

On the settings page, you can choose the color of your button. You can also replace the button with infinite scroll which loads next batch of posts automatically without users clicking on the button.

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

Next, you need to visit Ajax Load More » Repeater Template page to add your template for displaying posts.

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

The plugin comes with a basic template containing the WordPress loop to display posts. However, it does not match your theme and may look out of place on your website.

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

To fix this, you need to copy the code your theme uses to display posts on index, archive, and blog pages.

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

Normally, this code is located in the template-parts folder of your theme. In that folder, you will see templates to display different content. For example content-page.php, content-search.php, and more.

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

You will be looking for the generic content.php template. Here is an example from our demo theme’s content.php file:

您将寻找通用的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><!-- .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-## -->

Once you find that code, you need to paste it inside the Repeater Templates field in plugin settings.

找到该代码后,您需要将其粘贴到插件设置的“ Repeater Templates”字段中。

Don’t forget to click on the ‘Save Template’ button to store your settings.

不要忘记点击“保存模板”按钮来保存您的设置。

Next, you need to visit Ajax Load More » Shortcode Builder page to generate the shortcode.

接下来,您需要访问Ajax加载更多»简码构建器页面以生成简码

This page contains many different options that you can customize. First you will need to select the container type. If you are unsure, just look at the template you copied earlier. Most modern themes use the <div>; element.

此页面包含许多您可以自定义的选项。 首先,您需要选择容器类型。 如果不确定,只需查看先前复制的模板即可。 大多数现代主题都使用<div> ; 元件。

After that scroll down to the button labels section. Here you can change the text that appears on the button. By default, plugin uses ‘Older Posts’, and you can change that to ‘Load more posts’ or anything you want.

之后,向下滚动到按钮标签部分。 您可以在此处更改按钮上显示的文本。 默认情况下,插件使用“旧帖子”,您可以将其更改为“加载更多帖子”或任何您想要的内容。

Button label

Lastly, you need to choose whether you want posts to load automatically or wait for users to click on the load more posts button.

最后,您需要选择是要自动加载帖子还是等待用户单击“加载更多帖子”按钮。

Disable scroll

Your shortcode is now ready to be used. In the right column, you will see the shortcode output. Go ahead and copy the shortcode and paste it in a text editor as you will need it in the next step.

您的简码现在可以使用了。 在右列中,您将看到简码输出。 继续并复制简码,然后将其粘贴到文本编辑器中,因为下一步将需要它。

Shortcode output
在您的WordPress主题中添加更多的帖子 (Adding Load More Posts in Your WordPress Theme)

This part of the tutorial requires you to add code into your WordPress theme files. If you haven’t done this before, then take a look at our guide on how to copy and paste code in WordPress.

本教程的这一部分要求您将代码添加到WordPress主题文件中。 如果您以前没有做过,请查看我们的指南, 了解如何在WordPress中复制和粘贴代码

Don’t forget to backup your WordPress theme before making any changes.

进行任何更改之前, 不要忘记备份WordPress主题

You will need to find the template files where you want to add the load more posts button in your theme. Depending on how your theme is organized, usually these files are index.php, archives.php, categories.php, etc.

您将需要找到要在主题中添加“加载更多帖子”按钮的模板文件。 根据主题的组织方式,这些文件通常是index.php,archives.php,category.php等。

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

您将需要在结束之后endwhile;将之前复制的简码添加到主题中endwhile; 标签。

Since we are adding the shortcode in a theme file, we will need to add it inside the do_shortcode function, like this:

由于我们将短代码添加到主题文件中,因此需要将其添加到do_shortcode函数中,如下所示:



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.

现在,您可以保存所做的更改并访问您的网站,以查看正在运行的“加载更多帖子”按钮。

Click to load more posts button preview

We hope this article helped you learn how to add load more posts button in WordPress. You may also want to see our mega list of the most useful WordPress tips, tricks, and hacks for beginners.

我们希望本文能帮助您学习如何在WordPress中添加“加载更多帖子”按钮。 您可能还想查看我们的针对初学者的最有用的WordPress技巧,窍门和黑客列表。

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.

如果您喜欢这篇文章,请订阅我们的YouTube频道 WordPress视频教程。 您也可以在TwitterFacebook上找到我们。

翻译自: https://www.wpbeginner.com/wp-themes/how-to-add-load-more-posts-button-in-wordpress/

wordpress 加载慢

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值