在模板index.php相应位置添加分页栏,加上以下代码:
1<?php if (function_exists('wp_pagenavi')) { wp_pagenavi(); } else { include('navigation.php'); } ?>
新建一个名为navigation.php的模板,里面包含以下代码:
1<?php global $wp_rewrite;
2$paginate_base = get_pagenum_link(1);
3if (strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()) {
4 $paginate_format = '';
5 $paginate_base = add_query_arg('paged', '%#%');
6} else {
7 $paginate_format = (substr($paginate_base, -1 ,1) == '/' ? '' : '/') . user_trailingslashit('page/%#%/', 'paged');;
8 $paginate_base .= '%_%';
9}
10echo '<div class="page_navi"><ul>' . "\n";
11echo paginate_links( array(
12 'base' => $paginate_base,
13 'format' => $paginate_format,
14 'total' => $wp_query->max_num_pages,
15 'mid_size' => 5,
16 'current' => ($paged ? $paged : 1),
17 'type' => 'list',
18 'prev_text' => '«',
19 'next_text' => '»',
20));
21echo "\n</ul></div>\n";
22?>
在style.css文件中添加以下代码:
1.page_navi {float: none;line-height:23px;text-align: center;}
2.page_navi li { float:left;padding:5px;}
3.page_navi a, .page_navi a:visited, .page_navi a:hover, .page_navi span.current, .page_navi span.pages, .page_navi span.extend, .page_navi span.current, .page_navi span.dots {border:1px solid #e5e5e5; border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;padding:2px 5px 2px 5px;text-decoration:none; float:center;}
4.page_navi a:hover { border:none;background: #5cb096;color:#fff; }
5.page_navi span.current { border:none; background: #EB4640; color:#fff; font-family: inherit; font-style: inherit; font-weight: inherit; font-size:12px; padding:2px 5px 2px 5px; }
效果图如下:
红色为当前页码,绿色块为鼠标悬停时的效果。