当前位置: 首页 > wordpress > 正文
avatar

新版分页导航上面的是电脑版显示状态,下面是移动端显示状态,既然官方默认的都这么漂亮使用那以后就可以丢掉以前自己 […]

新版分页导航上面的是电脑版显示状态,下面是移动端显示状态,既然官方默认的都这么漂亮使用那以后就可以丢掉以前自己美化的样式了!对于wp的这个改变还是非常满意的!

php代码

1
2
3
4
5
6
7
8
    <?php
        the_posts_pagination( array(
           'prev_text' => __( '上一页', 'chenxingweb' ),
        'next_text' => __( '下一页', 'chenxingweb' ),
            'before_page_number' => '<span class="meta-nav screen-reader-text">第 </span>',
            'after_page_number' => '<span class="meta-nav screen-reader-text"> 页</span>',
        ) );
    ?>

把代码放到列表主循环下面即原来放置分页导航的位置即可,由于该分页代码是在wordpress4.1版本集成的,所以4.1之前的版本不能使用!

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
    /** 等于或大于550px正常PC模式 **/
    @media screen and (min-width:550px){
    .pagination{float:rightright;}
    .pagination a,.pagination a:visited{float:left;background:#fff;margin:0 5px 10px 0;padding:8px 11px;line-height:100%;border:1px solid #ebebeb;border-radius:2px;}
    .pagination .current,.pagination .dots{background:#fff;float:left;margin:0 5px 0 0;padding:8px 11px;line-height:100%;border:1px solid #ebebeb;border-radius:2px;}
    .pagination span.pages{}
    .pagination span.current,.pagination a:hover{background:#0088cc;color:#fff;border:1px solid #0088cc;}
    .screen-reader-text,.pages{display:none;}
    }
    /** 等于或小于550px用于移动设备 **/
    @media screen and (max-width:550px){
    .pagination{background:#fff;border:1px solid #ebebeb;border-radius:2px;}
    .pagination .nav-links{min-height:30px;position:relative;text-align:center;}
    .pagination .current .screen-reader-text{position:static !important;}
    .screen-reader-text{height:1px;overflow:hidden;position:absolute !important;}
    .page-numbers{display:none;line-height:25px;padding:5px;}
    .pagination .page-numbers.current{text-transform:uppercase;}
    .pagination .current{display:inline-block;}
    .pagination .prev,.pagination .next{background:#0088cc;color:#fff;display:inline-block;height:29px;line-height:29px;overflow:hidden;padding:2px 8px;position:absolute;border:1px solid #0088cc;}
    .pagination .next{border-radius:0 2px 2px 0}
    .pagination .prev{border-radius:2px 0 0 2px;}
    .pagination .prev a,.pagination .next a{color:#fff;line-height:20px;padding:0;display:inline-block;}
    .pagination .prev{left:0;}
    .pagination .prev:before{left:-1px;}
    .pagination .next{rightright:0;}
    .pagination .next:before{rightright:-1px;}
    }

上面的样式包含了pc端和移动端代码,如果您只是用与pc端的模板上可以把《去掉媒体查询判断@media screen and》删除即可!如果要修改分类导航的颜色只需替换css代码中#0088cc颜色编码即可,默认为蓝色。
来源:本文由晨星博客原创撰写,欢迎分享本文,转载请保留出处和链接!

分享:
---------WwW.13qing.com---------
猜你也喜欢的:

WordPress内置分页导航代码:目前有3 条评论

  1. 来看看,觉得很好,赞赞

    2016-09-14「来自:罗马尼亚 的朋友」下午11:28 [回复]
  2. avatar
    板凳
    OK了啦

    toll囖来咯来咯

    2016-09-01「来自:广东省深圳市 搜搜蜘蛛 的朋友」上午8:01 [回复]
  3. 过来看看

    2016-08-30「来自:黑龙江省佳木斯市 电信 的朋友」下午10:42 [回复]

发表评论