RIPRO美化-DIY分类页分页导航

实现效果：ripro主题首页ajax加载文章按钮，分类页面数字分页按钮。

废话不多说，教程开始

1.首先在ripro/子主题functions.php添加下面函数代码

// 自定义分类栏目列表分页代码开始
function mo_paging() {
$p = 3;
if ( is_singular() ) return;
global $wp_query, $paged;
$max_page = $wp_query->max_num_pages;
if ( $max_page == 1 ) return;
echo ‘<div class=”pagination”><ul class=”page-numbers”>’;
if ( empty( $paged ) ) $paged = 1;
echo ‘<li class=”prev-page”>’; previous_posts_link(‘上一页’); echo ‘</li>’;
if ( $paged > $p + 1 ) _paging_link( 1, ‘<li>第一页</li>’ );
if ( $paged > $p + 2 ) echo “<li><span>···</span></li>”;
for( $i = $paged – $p; $i <= $paged + $p; $i++ ) {
if ( $i > 0 && $i <= $max_page ) $i == $paged ? print “<li class=\”active\”><span>{$i}</span></li>” : _paging_link( $i );
}
if ( $paged < $max_page – $p – 1 ) echo “<li><span> … </span></li>”;
echo ‘<li class=”next-page”>’; next_posts_link(‘下一页’); echo ‘</li>’;
echo ‘<li><span>共 ‘.$max_page.’ 页</span></li>’;
echo ‘</ul></div>’;
}

function _paging_link( $i, $title = ” ) {
if ( $title == ” ) $title = “第 {$i} 页”;
echo “<li><a href='”, esc_html( get_pagenum_link( $i ) ), “‘>{$i}</a></li>”;
}
// 自定义分类栏目列表分页代码结束

2.在category.php搜索，原版主题未自己改动在31行。

<?php get_template_part( ‘parts/pagination’ ); ?>

3.复制下面短代码替换

<?php mo_paging() ?>

4.最后一步，添加分页导航样式到diy.css，大功告成！赶紧日起来….

/*自定义分类栏目列表分页代码开始*/
.pagination .page-numbers {
text-align: center;
list-style-type: none;
margin: 0;
padding: 0;
}

.pagination ul li {
display: inline-block;
margin: 5px 5px;
}

.pagination ul li.active span {
background: linear-gradient(-125deg,#0295f9 0%,#2f49fd 100%);
color: #fff;
}

.pagination ul li.active span:hover {
background: linear-gradient(225deg,#f857a6,#ff5858);
}

.pagination ul li a {
background-color: #353535;
text-decoration: none;
border: 1px solid #454545;
}

.pagination ul li a:hover {
border: 1px solid #2196f3
}

.pagination ul li a, .pagination ul li span {
display: inline-block;
border-radius: 4px;
padding: .4rem .85rem;
}

.pagination ul li span {
color: #aaa;
cursor: default;
}
/*自定义分类栏目列表分页代码结束*/