摘要：在wordpress主题开发中，内容列表翻页最常用到的就是wordpress翻页功能代码，之前大挖的翻页函数的可控性不强...
在wordpress主题开发中，内容列表翻页最常用到的就是wordpress翻页功能代码，之前大挖的翻页函数的可控性不强，经常出现因为页面内容过多而导致的页数显示过多或是超出，今天大挖分享给大挖一个可以对多个数值进行功能的wordpress翻页功能代码，而且提供了大家应用的方法，很简单，而且是可以完美试用在ul li间的一个支持自适应的代码。希望对大家有帮助。
将以下代码在wordpress主题目录下的function.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 |
function get_pagenavi( $range = 4 ) { global $paged,$wp_query; if ( !$max_page ) { $max_page = $wp_query->max_num_pages; } if( $max_page >1 ) { if( !$paged ){ $paged = 1; } echo "<li>"; previous_posts_link('上一页');echo"</li>"; if ( $max_page >$range ) { if( $paged <$range ) { for( $i = 1; $i <= ($range +1); $i++ ) { echo "<li><a href='".get_pagenum_link($i) ."'"; if($i==$paged) echo " class='current'";echo ">$i</a></li>"; } }elseif($paged >= ($max_page -ceil(($range/2)))){ for($i = $max_page -$range;$i <= $max_page;$i++){ echo "<li><a href='".get_pagenum_link($i) ."'"; if($i==$paged)echo " class='current'";echo ">$i</a></li>"; } }elseif($paged >= $range &&$paged <($max_page -ceil(($range/2)))){ for($i = ($paged -ceil($range/2));$i <= ($paged +ceil(($range/2)));$i++){ echo "<li><a href='".get_pagenum_link($i) ."'";if($i==$paged) echo " class='current'";echo ">$i</a></li>"; } } }else{ for($i = 1;$i <= $max_page;$i++){ echo "<li><a href='".get_pagenum_link($i) ."'"; if($i==$paged)echo " class='current'";echo ">$i</a></li>"; } } echo "<li>";next_posts_link('下一页');echo"</li>"; echo '<li><span>共'.$max_page.'页</span></li>'; } } |
在你需要的地方使用下面的代码调用，当然css样式还是需要您自己去输入的，根据您主题的界面风格进行填写，这里大挖给到一组样式。
|
1 2 3 4 5 |
<div class="pagination"> <ul> <?php get_pagenavi();?> </ul> </div> |
翻页代码的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 |
/*fanye*/ .list-page { text-align: center } .pagination { margin: 0; border-radius: 0 } .pagination>li>a { margin-top: 20px; padding: 6px 14px; margin-left: 12px; color: #555; background-color: transparent; border: 1px solid #555 } .pagination>li>a:hover { color: #fff; background-color: #f00; border: 1px solid #f00 } .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover { z-index: 2; color: #fff; cursor: default; background-color: #f00; border-color: #f00 } .pagination>li:first-child>a { margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0 } .pagination>li:last-child>a { border-top-right-radius: 0; border-bottom-right-radius: 0 } |
