实现WordPress自带分页功能

Posted by Y Cheung on Fri, Jun 25, 2010

在模板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' => '&laquo;',
19    'next_text' => '&raquo;',
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; }

效果图如下:

945192971794637567

红色为当前页码,绿色块为鼠标悬停时的效果。