WP-PageNavi

想要將佈景主題中的舊式 [← 較舊的文章 | 較新的文章 →] 連結取代為頁面連結嗎？

這個外掛提供了可產生精美分頁連結的 wp_pagenavi() 範本標籤。

使用方式

針對使用中的佈景主題，必須找到呼叫 next_posts_link() 及 previous_posts_link() 函式的程式碼，並將他們取代為外掛指定的程式碼。

在 Twentyten 佈景主題中，程式碼看起來大致如下：

<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'twentyten' ) ); ?></div> <div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'twentyten' ) ); ?></div>

請將上述兩行程式碼取代為以下程式碼：

<?php wp_pagenavi(); ?>

針對多頁分頁連結，請搜尋類似以下的程式碼：

<?php wp_link_pages( ... ); ?>

並取代為下列程式碼：

<?php wp_pagenavi( array( 'type' => 'multipart' ) ); ?>

前往 WordPress 管理後台→[設定]→[PageNavi] 進行設定。

變更 CSS

如需變更 WP-PageNavi 的 CSS 樣式，請從外掛目錄複製 pagenavi-css.css 至使用中的佈景主題的目錄中，然後修改佈景主題目錄中的副本檔案。使用這個方式，便不會在這個外掛更新時遺失之前進行的變更。

另外，網站管理員可以在外掛設定頁取消核取 [使用 pagenavi-css.css]，並直接在使用中的佈景主題的 style.css 檔案中加入相關樣式。

變更類別名稱

以下列出的篩選器，均可用於變更指派給頁面導覽元素的預設類別名稱。

篩選器

• wp_pagenavi_class_pages
• wp_pagenavi_class_first
• wp_pagenavi_class_previouspostslink
• wp_pagenavi_class_extend
• wp_pagenavi_class_smaller
• wp_pagenavi_class_page
• wp_pagenavi_class_current
• wp_pagenavi_class_larger
• wp_pagenavi_class_nextpostslink
• wp_pagenavi_class_last

篩選器使用方式

// Simple Usage - 1 callback per filter add_filter('wp_pagenavi_class_previouspostslink', 'theme_pagination_previouspostslink_class'); add_filter('wp_pagenavi_class_nextpostslink', 'theme_pagination_nextpostslink_class'); add_filter('wp_pagenavi_class_page', 'theme_pagination_page_class'); function theme_pagination_previouspostslink_class($class_name) { return 'pagination__control-link pagination__control-link--previous'; } function theme_pagination_nextpostslink_class($class_name) { return 'pagination__control-link pagination__control-link--next'; } function theme_pagination_page_class($class_name) { return 'pagination__current-page'; } // More Concise Usage - 1 callback for all filters add_filter('wp_pagenavi_class_previouspostslink', 'theme_pagination_class'); add_filter('wp_pagenavi_class_nextpostslink', 'theme_pagination_class'); add_filter('wp_pagenavi_class_page', 'theme_pagination_class'); function theme_pagination_class($class_name) { switch($class_name) { case 'previouspostslink': $class_name = 'pagination__control-link pagination__control-link--previous'; break; case 'nextpostslink': $class_name = 'pagination__control-link pagination__control-link--next'; break; case 'page': $class_name = 'pagination__current' break; } return $class_name; }

開發工作

• https://github.com/lesterchan/wp-pagenavi

致謝

• 這個外掛採用了來自 Flaticon 的 SimpleIcon 所創作的圖示。

贊助

開發者用了許多時間建立外掛，並加以更新、維護及進行技術支援，如果喜歡這個外掛並贊助幾美元給開發者，開發者會非常感激。沒有贊助亦無妨，這個外掛可供網站隨時使用，不須有任何負擔。