抱歉,您的浏览器无法访问本站
本页面需要浏览器支持(启用)JavaScript
了解详情 >

WordPress自带有分页显示功能,但自制主题一般会缺少分页导航,WordPress利用插件 _WP_-PageNavi 、_wp_-page-numbers 也可以实现分页导航功能。本文适用于非插件式纯代码自制分页导航或自定义分页导航样式,同时提供自定义每页显示文章数量的代码。

本文代码参考《非插件实现WordPress分页导航》一文修改。每页显示文章数量代码来自WordPress Answers

效果图

实现方法

1、functions.php

首先在主题根目录下的functions.php中加入下面代码。

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
if ( !function_exists('pagenavi') ) {
function pagenavi( $p = 2 ) { // 取当前页前后各 2 页
if ( is_singular() ) return; // 文章与插页不用
global $wp_query, $paged;
$max_page = $wp_query->max_num_pages;
if ( $max_page == 1 ) return; // 只有一页不用
if ( empty( $paged ) ) $paged = 1;
echo '<div class="pagenavi"><span class="pages">Page <b>' . $paged . '</b> of <b>' . $max_page . '</b></span> '; // 显示页数
if ( $paged > 1 ) p_link( $paged - 1, '上一页', '‹' );/* 如果当前页大于1就显示上一页链接 */
if ( $paged > $p + 1 ) p_link( 1, '首页' );
if ( $paged > $p + 2 ) echo '<span class="page-more">...</span>';

for( $i = $paged - $p; $i <= $paged + $p; $i++ ) { // 中间页
if ( $i > 0 && $i <= $max_page ) $i == $paged ? print "<span class='page-numbers current'>{$i}</span> " : p_link( $i );
}
if ( $paged < $max_page - $p - 1 ) echo '<span class="page-more">...</span>';
if ( $paged < $max_page - $p ) p_link( $max_page, '最后页' );
if ( $paged < $max_page ) p_link( $paged + 1,'下一页', '›' );/* 如果当前页不是最后一页显示下一页链接 */
echo '</div>';
}
function p_link( $i, $title = '', $linktype = '' ) {
if ( $title == '' ) $title = "第 {$i} 页";
if ( $linktype == '' ) { $linktext = $i; } else { $linktext = $linktype; }
echo "<a class='page-numbers' href='", esc_html( get_pagenum_link( $i ) ), "' title='{$title}'>{$linktext}</a> ";
}
}

2、显示页加入显示代码

在index.php、archive.php等页面的适当位置加入下面代码。或者将原本主题的分页导航相关代码改为下面代码。

1
<?php if (function_exists('pagenavi')) { pagenavi();} ?>

3、更改显示样式

最直接的方法是在主题根目录的style.css加入下面代码,或者写到新的样式表中导入到页面中。

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
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
.pagenavi {
display: table;
margin: 50px auto;
}

.pages, .page-more, .page-numbers {
height: 40px;
width: 40px;
font-size: 18px;
color: #666;
display: block;
float: left;
position: relative;
text-align: center;
margin-right: 5px;
margin-top: 15px;
}

.pages {
width: auto;
font-size: 14px;
line-height: 40px;
margin-right: 15px;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.page-numbers {
line-height: 40px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
border: #666 1px solid;
border-radius: 10px;
}

.page-numbers:hover {
color: #fff;
background: rgba(0, 123, 255, 0.87);
border: 6px double #fff;
margin-top: 10px;
box-shadow: none;
}

.pagenavi .current, .pagenavi .current:hover {
color: #fff;
background: #007AFF;
border: 6px double #fff;
margin-top: 10px;
box-shadow: none;
}

.page-numbers a:hover, span.current {
text-decoration: none;
}

样式内容可以根据自己的需求更改,改为自己喜欢的样式即可。

附加内容

  • 想要实现页面分页,可以在WordPress(5.0以上的Gutenberg编辑器)编辑页面找到区块:布局元素 → 分页符
  • 更改主页或分类页等显示文章数量,可以到后台管理的 设置 → 阅读(博客页面至多显示) 中设置。或者在functions.php加入下面代码。
functions.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function custom_posts_per_page($query) {
if (is_home()) {
$query->set('posts_per_page', 8);
}
if (is_search()) {
$query->set('posts_per_page', -1);
}
if (is_archive()) {
$query->set('posts_per_page', 25);
} //endif
} //function

//this adds the function above to the 'pre_get_posts' action
add_action('pre_get_posts', 'custom_posts_per_page');

评论