wordpress 4.1 调用内置分页导航函数实现网站首页分页导航

wordpress4.1之前的默认主题已经内置分页函数,wordpress4.1之后,分页导航函数成为wordpress的内置默认函数。

wordpress的默认内置分页导航函数为the_posts_pagination()。

在wordpress首页(index.php)和存档页面(archives.php)中替换原来的older posts代码为:

<?php

the_posts_pagination( array(

‘mid_size’           => 8,

‘prev_text’          =>上页,

‘next_text’          =>下页,

‘before_page_number’ => ‘<span class=“meta-nav screen-reader-text”>第 </span>’,

‘after_page_number’ => ‘<span class=“meta-nav screen-reader-text”> 页</span>’,

) );

?>

mid_size指的是当前页码的左右两边要显示多少个页码。

pagination

上图所示的即mid_size设置为9 的时候的显示效果。

如需定制分页导航的显示效果,在wordpress主题文件的style.css中写入相应的css代码即可。

/** 等于或大于550px正常模式 **/

@media screen and (min-width550px) {

.pagination {

float: right;

}

.pagination a, .pagination a:visited {

floatleft;

background#fff;

margin: 0 5px 10px 0;

padding8px 11px;

line-height: 100%;

border1px solid #ebebeb;

border-radius: 2px;

}

.pagination .current, .pagination .dots {

background#fff;

floatleft;

margin: 0 5px 0 0;

padding8px 11px;

line-height: 100%;

border1px solid #ebebeb;

border-radius: 2px;

}

.pagination span.pages {}

.pagination span.current, .pagination a:hover {

background#0088cc;

color#fff;

border1px solid #0088cc;

}

.screen-reader-text, .pages  {

displaynone;

}

}

/** 等于或小于550px用于移动设备 **/

@media screen and (max-width550px) {

.pagination {

background#fff;

border1px solid #ebebeb;

border-radius: 2px;

}

.pagination .nav-links {

min-height30px;

positionrelative;

text-aligncenter;

}

.pagination .current .screen-reader-text {

positionstatic !important;

}

.screen-reader-text {

height1px;

overflowhidden;

positionabsolute !important;

}

.page-numbers {

displaynone;

line-height25px;

padding5px;

}

.pagination .page-numbers.current {

text-transformuppercase;

}

.pagination .current {

displayinlineblock;

}

.pagination .prev,

.pagination .next {

background#0088cc;

color#fff;

displayinlineblock;

height29px;

line-height29px;

overflowhidden;

padding2px 8px;

positionabsolute;

border1px 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-height20px;

padding: 0;

displayinlineblock;

}

.pagination .prev {

left: 0;

}

.pagination .prev:before {

left: –1px;

}

.pagination .next {

right: 0;

}

.pagination .next:before {

right: –1px;

}

}

如果你的主题是非响应式,去掉上面css代码中的媒体查询判断@media screen and……

本站提供的服务

Add a Comment

电子邮件地址不会被公开。 必填项已用*标注