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中添加“加載更多文章”按鈕。
何時以及為何在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”的新菜單項。 您需要單擊它，然後轉到插件的設定頁面。
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" target="_blank" rel="external nofollow" 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.
之後，向下滾動到按鈕标簽部分。 您可以在此處更改按鈕上顯示的文本。 預設情況下，插件使用“舊文章”，您可以将其更改為“加載更多文章”或任何您想要的内容。
Lastly, you need to choose whether you want posts to load automatically or wait for users to click on the load more posts button.
最後，您需要選擇是要自動加載文章還是等待使用者單擊“加載更多文章”按鈕。
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.
您的簡碼現在可以使用了。 在右列中，您将看到簡碼輸出。 繼續并複制簡碼，然後将其粘貼到文本編輯器中，因為下一步将需要它。
在您的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.
現在，您可以儲存所做的更改并通路您的網站，以檢視正在運作的“加載更多文章”按鈕。
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視訊教程。 您也可以在Twitter和Facebook上找到我們。
翻譯自: https://www.wpbeginner.com/wp-themes/how-to-add-load-more-posts-button-in-wordpress/
wordpress 加載慢