摘要：之前分享过的wordpress分页代码都不够强大，没有整体的首页，尾页和共计多少页的整体组织的函数功能出现，这次大挖整理...
之前分享过的wordpress分页代码都不够强大，没有整体的首页，尾页和共计多少页的整体组织的函数功能出现，这次大挖整理了wordpress里面可以通用的分类栏目翻页功能，并且附带了现成的css样式表，方便喜欢动手去操作的你直接使用。以下的是翻页样式的截图示例，足够满足大部分的需求，只是目前该样式没有支持响应式的样式表，如果你的wordpress主题是响应式的，还需要对样式表进行响应式的媒体调整。
只需要将下面的代码添加到wordpress主题function里面，就可以实现翻页功能在wordpress主题的注册。
|
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 |
/** * 数字分页函数 * 因为wordpress默认仅仅提供简单分页 * 所以要实现数字分页，需要自定义函数 * @Param int $range 数字分页的宽度 * @Return string|empty 输出分页的HTML代码 */ function dawa_pagenavi( $range = 4 ) { global $paged,$wp_query; if ( !$max_page ) { $max_page = $wp_query->max_num_pages; } if( $max_page >1 ) { echo "<div class='fenye'>"; if( !$paged ){ $paged = 1; } if( $paged != 1 ) { echo "<a href='".get_pagenum_link(1) ."' class='extend' title='跳转到首页'>首页</a>"; } previous_posts_link('上一页'); if ( $max_page >$range ) { if( $paged <$range ) { for( $i = 1; $i <= ($range +1); $i++ ) { echo "<a href='".get_pagenum_link($i) ."'"; if($i==$paged) echo " class='current'";echo ">$i</a>"; } }elseif($paged >= ($max_page -ceil(($range/2)))){ for($i = $max_page -$range;$i <= $max_page;$i++){ echo "<a href='".get_pagenum_link($i) ."'"; if($i==$paged)echo " class='current'";echo ">$i</a>"; } }elseif($paged >= $range &&$paged <($max_page -ceil(($range/2)))){ for($i = ($paged -ceil($range/2));$i <= ($paged +ceil(($range/2)));$i++){ echo "<a href='".get_pagenum_link($i) ."'";if($i==$paged) echo " class='current'";echo ">$i</a>"; } } }else{ for($i = 1;$i <= $max_page;$i++){ echo "<a href='".get_pagenum_link($i) ."'"; if($i==$paged)echo " class='current'";echo ">$i</a>"; } } next_posts_link('下一页'); if($paged != $max_page){ echo "<a href='".get_pagenum_link($max_page) ."' class='extend' title='跳转到最后一页'>尾页</a>"; } echo '<span>共['.$max_page.']页</span>'; echo "</div>\n"; } } |
添加好后，把下面的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 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
/*------------------ 分页部分的CSS ------------------*/ .fenye{ height: 25px; line-height: 25px; _background: #F9F9F9; padding: 2px 5px; margin: 20px 4px; _border: solid 1px #ccc; _text-align: center; } .fenye a{ padding:4px 6px 4px 6px; margin:0 2px 0 2px; border:1px solid #aaa; text-decoration:none; color:#333; } .fenye a.current{ background:#ff6f3d; color:#fff; } .fenye a:hover{ background:#ff6f3d; color:#fff; } /*-- footer --*/ .footer { width:100%; height:64px; background:#E6E9ED; border-top: 1px solid #e2e2e3; } /*-- post --*/ .post { background:none; } .post .entry-cnt { height:auto; line-height:2; font-size:14px; border-top-width: 1px; border-top-style: dotted; border-top-color: #eee; padding:15px 0 0; } .post .entry-cnt p { line-height:2; font-size:14px; } .related { padding:10px 5px 10px 5px; border-top:1px solid #eee; border-bottom:1px solid #eee; margin: 20px auto 10px auto; } .r-left { float:left; } .r-right { float:right; } /*-- discuss --*/ .discuss { padding:25px; } |
最后我们在需要添加翻页的位置添加以下的函数。
|
1 |
<?php dawa_pagenavi();?> |
