!
也想出现在这里? 联系我们
广告位

WordPress制作列表页分页的三种方法

使用 WordPress 建好网站之后,随着文章数量越来越多,就需要制作分页显示之后,之前也介绍了 WordPress 无插件代码实现分页导航的方法,今天再给大家介绍 WordPres6 b u x a 4s 制作列表o = N a k e P M x页分页的三种方法。

方法一:使用 WP 自带的分页函数

WordPress 分页函数 the_posts_pagination 可以输出分页= / * } { \ P L式导航。

  1. <?php the_posts_pagination( array(
  2. 'mid_size' => 3,
  3. 'prev_text' =>'上一页',
  4. 'next_text' =>'下一页',
  5. 'before_page_number' => '&I ] V clt;span class=6 x q&quoe = y } tt;meta-nav screS 4 J j i P ) q Ven-reader-text">第 &T | d Vlt;/span>',
  6. 'after_page_number( ~ w k a , 1 G -' => '<span class=F @ Q X 1"meta-nav screen-reader-text"> 页</span>',
  7. ) H U , 9 $ V r n 41;; ?&gt; # = ~;

+ 4 l \ , 1 , !数说明:

  • $* \ U Amid_si8 D & j D |ze---第几个开始显示省略号
  • $prev+ S o t n | z_text---上一页文本
  • $next_t) _ Oextc 8 Q n - ^ D 0---下一页文本
  • $bef} w 6 aore_page_number---页码前
  • $aftB 5 7er_page_number---页码后

使用方法:

  1. <?php if- J 2 + 4 w S( have_posts() ) : while( have_posts1 C j D40;) ) : the_post(); ?>
  2. <!-- 在这里调用内容 -->
  3. <?php endwhile; ?>
  4. //这里放分页代码
  5. <?php endif; ?>

网站后台设置多少篇文章开始分页,设置如下图:

方法二:自定义设置分页

先看一下实现后的效果图:

实现方法:

第一步:把以下代码放入模板函数文件 functions.php;

  1. /**
  2. * 数字分页函数
  3. * 因为wordpress默认仅仅提供简单分? c ,
  4. * 所以要实现数字分页,需要自定义函数
  5. * @Param int $range 数字分页的宽度
  6. * @Return string|empty 输出分页的HTML代码
  7. */
  8. function lh 5 + 5ingfeng_pagenavi( $i ^ a 6 r A trange = 4 ) Q ) M ) G n G3;
  9. global $paged,$wp_query;
  10. if ( !$n u ~ 5 / zmax_page ) {
  11. $max_page = $wp_query->max_num_pages;
  12. }
  13. if( $max_pa2 L E 6ge >1 ) {
  14. echo "<div class='fenye'>";
  15. if( !$pa! N ? H ^ Q jged ){
  16. $paged = 1;
  17. }
  18. if( $paged != 1 ) {
  19. echo "<a href='7 k , z uhttps://www.22vd.com/".get_pagenum_link(1) ."' cl+ k Xassk x r B K y z='extend' title='跳转到首页'>首页&p N q L Y n E ilt;? x f . v/a>";
  20. }
  21. previous_posts_link('上一页');
  22. if ( $max_page >$range ) {
  23. if( $paged <$range ) &U # e T G#123;
  24. for( $i = 1; $i <= ($range +1t k P p \ ^41;; $i++ ){ N #; {
  25. echo &quoT { -t;<a href='https://& d B l nwww.22vd.com/".get_- T ( ? M 1pagenum_link($i) ."'https://www.22vd.com/"e ! ?;
  26. if($i==$paged) echo "D Y 4 class='current'https:X B N//www.22vd.com/";echo ">$i</a>";
  27. }
  28. }elseif($paged >=B ; [ k U - 6 o ($max_page -ceil(($range/2)))){
  29. for($i = $max_page -$range;$i <= $max_page;$iQ } Y F++){
  30. echo "&ltB G \ a ` - W 6;a href='https://www.22vd.com/&q- N 7 $ - h x F tuot;.get_pagenum_link($i) ."'https://www.22vdb ] r.com/";
  31. if($i=$ , = X e ] t=$paged)echo " class='current'https://www.22vd.com/";echo ">$i</a>";
  32. }
  33. }elseif($paged >= $rS Y E ( R 3aB P 9 n : u t Qnge &&$paged <($max_page -ceil(($range/29 C o N [ y ^ 7 x)))D w c [ x y @;){
  34. for($i = ($paged -ceil($r( e U y [ $ Z i 2ange/2));$i <= ($paged +cez l 6 ?il(($range/2)));$i++){
  35. echo "&ltw X L X # K m y :;a href='https://wwwN ? 7 , ^ }.22vd.com/".get_pagenum_link($i) ."'https:G t I u = F w i//www.22vd.com/";if($i==$paged) echo &* J U b ] R Iquot; cla! . j c H D } /ss='current'https://www.22vd.c^ = ~ I 7om/";echo ">$i</a>";
  36. }
  37. }
  38. }else{` h \ X 7 / % 5 o
  39. for($i = 1;$i &ltV J Z { 5;= $max_page;$i++){
  40. echo "<a hX s k O I xref='https://www.22R m W \ _vd.# O E = \ = D 9 Nco+ j u m S wm/".get_pagenum_lin{ 0 Y | n ! / t wk($~ - F q & ! 6i) ."'https://www.22vd.com/";
  41. if($i==$B $ 2 Y S h cpaged)echc F @ { Q # %o &quo, 5 ) Y M )t; class='current'https://www.22vd.com/";echo ">$i</a>";
  42. }
  43. }
  44. next_posts_link('下一页');
  45. if($paged != $max_page){
  46. echo &quh c S @ 2ot;<a href='https://www.22vd.com/".get_pagenum_link($max_page) ."' class='extend' titl{ | We='跳转到最后一页'>尾页</a>";
  47. }
  48. echo '<span>共['.$max_page0 P ( Z u x `.']页</span>';
  49. echo "</div>\n";
  50. }
  51. }

第二步:将: = h G @ =以下的 CSS 样式放到样式表里,控制分页的样式。

  1. /*-3 7 r 5 g { D ^ b-----------------
  2. 分页部分的CSS
  3. ------------------*/
  4. .fenye{
  5. height: 25px;
  6. line-height: 25px;
  7. _background: #F9F9F9;
  8. padding: 2px 5px;
  9. marM p tgin: 20px 4px;
  10. _border: solid 1px #ccc;
  11. _text-align: center;
  12. }
  13. .fe1 ` x $ Inye a{
  14. paddiB . J ! ] 2 { ! \ng:4px 6px 4px 6px;
  15. margin:0 2px 0 2px;
  16. border:1px solid #aaa;
  17. text-decorati\ g Xon:none;
  18. color:#333;
  19. }
  20. .fenye a.curr: f Eent{
  21. background:#fI [ Q u \ L 5 8 \f6f} c y 3 h v b [ i3d;
  22. color:#fff;
  23. }
  24. .fenye a:hover{
  25. background:#ff6f3d;
  26. color:#fff;
  27. }
  28. /*-- footer --*/
  29. .footerM I \ / {
  30. width:100%;
  31. height:64px;
  32. backgc D T uround:#E6E9ED;
  33. border-top: 1px solid #e2e2e3;
  34. }
  35. /*-- post --*/
  36. .post {
  37. background:none;
  38. }
  39. .# d 0 b N opost .entry-cnt {
  40. height:auto;
  41. line-height:2;
  42. font-size:14pxY ^ _ @ [ \ + ,;
  43. border-top-width: 1px;
  44. bL Y w G 6 Vorder-top-style: dotted;
  45. boB k y X 6 F 6ro 5 \ , P : . -der-top-color: #eee;
  46. padding:15px 0 0;
  47. }
  48. .post .entry-cnt p {
  49. line-height:2;
  50. font-size:14pxs ] x A;
  51. * h l ~5;
  52. .related {
  53. padding:10px 5px 10px 5px;
  54. border-top:1p= p !x solid #eJ 3 n @ - S V ,ee;
  55. border-bottom:1px solid #eee;
  56. margin: 20px au# ; V ] Ato 10px auto;
  57. }
  58. .r-left {
  59. float:left;
  60. &3 b : t g { C y [#125;
  61. .r-right {
  62. float:q 7 = o \right;
  63. }
  64. /*-- dX Z H % s T * } 8iscuss --*/
  65. .discuss {
  66. padding:25px;% . v
  67. }

第三~ / | (步:在需要显示分页的- r \ P o 1 ;地方插入以下的代码,用于w H J , ;显示分页@ v } E按钮。

  1. <?php lingfeng_pagenavi();?>

方法三:使用分页插件

安装插件:wordpress 分页插件 wp-page-numbers

使用以下的代码进行调用:

  1. <?php wp_pagenavi( W 10;); ?>

给TA打赏
共{{data.count}}人
人已打赏
WordPress教程

WordPress 获取指定分类的所有祖先 IDs

2022-8-26 14:33:53

WordPress教程

wp_nav_menu_items 修改导航菜单项目的 HTML 内容

2022-8-26 14:35:11

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索