WordPress Pagination 透過建立分頁選單，讓網站內容更容易被閱讀。
今天分享的分頁選單建立方法，在有些 WordPress 佈景主題是內建的功能。不過還是有部分佈景主題只提供簡單的下一頁與上一頁選單功能，剛好朋友問到如何建立立分頁選單按鈕，今天一併將找到的解決方法跟大家分享，如果您的佈景主題也正在尋求分頁選單按鈕的建置方法，可以參考一下接下來的文章內容。不過今天分享的方法是透過修改部分檔案來建立分頁選單，所以需要部分檔案編輯的能力，另外也需要先建置好子佈景主題。
WordPress Pagination
- 在開始以前請先確認子佈景主題已經建置完成，並且內建有 functions.php 檔案與 style.css 檔案。
- 首先編輯子佈景主題裡的 functions.php 檔案，並且填入以下語法。這一步驟是定義所有文章列表的分頁選單排列組合，依序建立分頁與分頁選單按鈕。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
function wpbeginner_numeric_posts_nav() { if( is_singular() ) return; global $wp_query; /** Stop execution if there's only 1 page */ if( $wp_query->max_num_pages <= 1 ) return; $paged = get_query_var( 'paged' ) ? absint( get_query_var( 'paged' ) ) : 1; $max = intval( $wp_query->max_num_pages ); /** Add current page to the array */ if ( $paged >= 1 ) $links[] = $paged; /** Add the pages around the current page to the array */ if ( $paged >= 3 ) { $links[] = $paged - 1; $links[] = $paged - 2; } if ( ( $paged + 2 ) <= $max ) { $links[] = $paged + 2; $links[] = $paged + 1; } echo '<div class="navigation"><ul>' . "\n"; /** Previous Post Link */ if ( get_previous_posts_link() ) printf( '<li>%s</li>' . "\n", get_previous_posts_link() ); /** Link to first page, plus ellipses if necessary */ if ( ! in_array( 1, $links ) ) { $class = 1 == $paged ? ' class="active"' : ''; printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( 1 ) ), '1' ); if ( ! in_array( 2, $links ) ) echo '<li>…</li>'; } /** Link to current page, plus 2 pages in either direction if necessary */ sort( $links ); foreach ( (array) $links as $link ) { $class = $paged == $link ? ' class="active"' : ''; printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $link ) ), $link ); } /** Link to last page, plus ellipses if necessary */ if ( ! in_array( $max, $links ) ) { if ( ! in_array( $max - 1, $links ) ) echo '<li>…</li>' . "\n"; $class = $paged == $max ? ' class="active"' : ''; printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $max ) ), $max ); } /** Next Post Link */ if ( get_next_posts_link() ) printf( '<li>%s</li>' . "\n", get_next_posts_link() ); echo '</ul></div>' . "\n"; } |
- 再來修改子佈景主題的 style.css 檔案，為這些分頁選單按鈕定義式樣。填入以下語法：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
.navigation li a, .navigation li a:hover, .navigation li.active a, .navigation li.disabled { color: #fff; text-decoration:none; } .navigation li { display: inline; } .navigation li a, .navigation li a:hover, .navigation li.active a, .navigation li.disabled { background-color: #6FB7E9; border-radius: 3px; cursor: pointer; padding: 12px; padding: 0.75rem; } .navigation li a:hover, .navigation li.active a { background-color: #3C8DC5; } |
- 最後修改佈景主題裡的分頁顯示設計，以這次示範文章的佈景主題 Moesia，首頁展示文章區塊設計是採用 home.php 檔案，所以先複製到子佈景主題。接著找到原佈景主題分頁設計的字串：
|
1 |
<?php moesia_paging_nav(); ?> |
- 將它替換成：
|
1 |
<?php wpbeginner_numeric_posts_nav(); ?> |
- 這樣就完成整個新的設計式樣了。
- 同理，如果想要在彙整頁面或是分類頁面也有分頁選單的效果，那麼就需要分別為 archive.php 與 category.php 檔案作修改。特別注意的是不同的佈景主題，也許修改的檔案不盡相同，請確實參考佈景主題官網文件說明。