【wordpress】導航(navigation)與分頁(pagination)的差異與使用時機

隨著網站文章的數量越來越多，若在文章列表頁一次載入太多文章封面，有可能拖慢網站速度；為了解決這個問題，緩載入及分頁就出現了！

以下將介紹wordpress的導航方法：導航與分頁。

1. 導航(navigation)

1-1. 導航特點介紹

• 主要用於單篇文章頁(single.php)，也可用在文章列表樣版(archive.php、index.php)。
• 導航是比較簡易的呈現方式，沒有1、2、3…這種的數字分頁。

1-2. 導航的應用

previous_post_link(‘參數1′ ,’參數2’);
參數1 – 連結
參數2 – 顯示文字

用於單篇文章頁(single.php) – 顯示上一篇與下一篇的文章連結
程式碼範例：

<div class="post-navigation">
  <div class="prev-post"><?php previous_post_link('%link', '« Previous Post'); ?></div>
  <div class="next-post"><?php next_post_link('%link', 'Next Post »'); ?></div>
</div>

the_post_navigation(array(
'prev_text' => '<span class="nav-subtitle">' . esc_html__( '＜上一篇', 'your_theme' ) . '</span> <span class="nav-title">%title</span>',
'next_text' => '<span class="nav-subtitle">' . esc_html__( '下一篇＞', 'your_theme' ) . '</span> <span class="nav-title">%title</span>',
));

用於文章列表頁– 切換『更舊』或『更新』的文章

the_posts_navigation();

2. 分頁(pagination)

2-1. 分頁特點介紹

• 分頁適用於文章列表樣版(archive.php、index.php)
• 比較詳細的呈現方式，除了上一頁、下一頁的按鈕外，也會出現頁碼

2-2. 分頁的應用

將下列程式碼套用在文章列表樣板中，並變更the_posts_pagination()函數中的參數，上一頁、下一頁改為左右箭頭：

the_posts_pagination(array(
            'prev_text'          => __('<', 'mobuyashea_theme'),
            'next_text'          => __('>', 'mobuyashea_theme'),
            'before_page_number' => '<span class="meta-nav screen-reader-text">' . __('第', 'mobuyashea_theme') . ' </span>',
        ));