如何在 WordPress 中添加更多文章加載按鈕
你是否希望在 WordPress 中添加加載更多文章按鈕？許多熱門平台允許用戶在頁面底部時加載更多文章。本文將向你展示如何輕鬆地在 WordPress 中添加加載更多文章按鈕。
何時以及為什麼需要在 WordPress 中添加更多文章加載按鈕
讓用戶與你的內容保持互動有助於獲得更多的觀看次數和最終的訂閱者。許多博客在其首頁、博客和歸檔頁面使用簡單的「舊文章」導航鏈接。有些網站使用數字頁碼導航，提供更多的上下文。然而，某些類型的網站可以從無限滾動或加載更多文章按鈕中獲益匪淺。例如：攝影網站、清單網站和病毒內容網站。
「加載更多文章」按鈕類似於無限滾動，它使用 JavaScript 快速獲取下一組內容。這樣可以改善用戶體驗，讓他們有機會查看更多你的內容。
在 WordPress 中添加更多文章加載按鈕
第一步，你需要安裝並啟用 Ajax Load More 插件。欲了解更多詳情，請參考我們的逐步指南，了解如何安裝 WordPress 插件。
啟用後，插件會在你的 WordPress 管理菜單中添加一個名為「Ajax Load More」的新菜單項目。你需要點擊它並進入插件的設置頁面。
在設置頁面，你可以選擇按鈕的顏色，也可以選擇替換按鈕為無限滾動，這樣不需用戶點擊按鈕，就能自動加載下一批文章。
接下來，你需要訪問 Ajax Load More » Repeater Template 頁面，添加顯示文章的模板。插件附帶一個基本模板，其中包含顯示文章的 WordPress 迴圈。然而，這個模板可能與你的主題不匹配，顯得不合適。
要解決這個問題，你需要複制主題用於顯示首頁、歸檔和博客內文章的代碼。通常，這個代碼位於主題的 template-parts 文件夾中。在那個文件夾中，你會看到顯示不同內容的模板。例如 content-page.php、content-search.php 等等。
你應該尋找通用的 content.php 模板。以下是我們演示主題 content.php 文件中的一個例子：
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php
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
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>%s',
'separator' => '<span class="screen-reader-text">, </span>',
) );
?>
</div>
<?php
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>找到這段代碼後，你需要將其粘貼在插件設置中的「Repeater Templates」字段內。不要忘記點擊「Save Template」按鈕來保存你的設置。
接下來，你需要訪問 Ajax Load More » Shortcode Builder 頁面生成短代碼。這個頁面包含很多不同的選項可供自定義。首先，你需要選擇容器類型。如果你不確定，請查看之前複制的模板。大多數現代 WordPress 主題使用 <div> 元素。
之後，向下滾動到按鈕標籤區域。這裡你可以更改按鈕上的文本。默認情況下，插件使用「舊文章」，你可以將其更改為「加載更多文章」或任何你喜歡的文字。
最後，你需要選擇是希望文章自動加載還是等用戶點擊加載更多文章按鈕。
現在你的短代碼已經準備好了。在右側欄中，你會看到短代碼輸出。請複制該短代碼並將其粘貼在文本編輯器中，因為你下一步將需要它。
在你的 WordPress 主題中添加更多文章加載
這部分教程要求你將代碼添加到你的 WordPress 主題文件中。如果你之前沒有這麼做過，請查看我們的指南，了解如何在 WordPress 中複制和粘貼代碼。不要忘記在做出任何更改之前備份你的 WordPress 主題。
你需要找到希望在主題中添加加載更多文章按鈕的模板文件。根據主題的組織方式，通常這些文件是 index.php、archives.php、categories.php 等等。
你需要在 endwhile; 標籤之後將之前複製的短代碼添加到主題中。由於我們將短代碼添加到主題文件中，我們需要使用 do_shortcode 函數，如下所示：
<?php echo do_shortcode('[ajax_load_more container_type="div" post_type="post"]'); ?>你現在可以保存更改並訪問你的网站以查看「加載更多文章」按鈕的效果。以下是我們演示網站上的顯示效果：
希望這篇文章幫助你學習如何在 WordPress 中添加加載更多文章按鈕。同時你也可以參考我們的大量 WordPress 初學者最有用的小貼士、技巧和黑客，以及我們精選的最好的 WordPress Facebook 插件以增加你的博客。
如果你喜歡這篇文章，請訂閱我們的 YouTube 頻道獲取 WordPress 視頻教程。你還可以在 Twitter 和 Facebook 上找到我們。
