wordpress除了自己定义和编写一个列表分页函数外，其实可以直接调用内置的分页函数：the_posts_pagination()。

  the_posts_pagination( array(
  '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>',
) );

加上CSS美化一下：

/** 等于或大于550px正常模式 **/
@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 {
        right: 0;
    }
    .pagination .next:before {
        right: -1px;
    }
}

在index.php或archive.php中，有需要使用分页的，加上这个函数就OK了。

原文来自https://www.psay.cn/code/60.html