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 所創作的圖示。

贊助開發工作

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