WordPress4-Paginierung

Ich bin ein Neuling und hoffe, dass ich einander dabei helfen kann, mich mit den Neulingen vertraut zu machen.

Kürzlich habe ich WordPress renoviert. Ich habe meinen eigenen Code geschrieben, um eine Seite zu erstellen.
1. Fügen Sie Folgendes hinzu css zu style.css unter Ihrem Theme

Js-Code

.pagination {
    width: auto;
    display: block;
    text-align: center;
    margin: 30px;
}
.pagination a {
    background-color: #eee;
    text-decoration: none;
    color: #999;
    font-size: 18px;
    padding: 0px 10px;
    line-height: 32px;
    height: 32px;
    margin: 0px 0.5px;
}
.pagination a.page-btn {
    width: 40px;
}
.pagination a.page-btn .icon-prev {
    position: absolute;
    width: 0px;
    height: 0px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #999;
    left: 50%;
    margin-left: -3px;
    top: 50%;
    margin-top: -6px;
    -webkit-transition: all 0.1s ease;
    transition: all 0.1s ease;
}
.pagination a.page-btn .icon-next {
    position: absolute;
    width: 0px;
    height: 0px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-right: none;
    border-left: 6px solid #999;
    left: 50%;
    margin-left: -3px;
    top: 50%;
    margin-top: -6px;
    -webkit-transition: all 0.1s ease;
    transition: all 0.1s ease;
}
.pagination a:hover {
    color: #fff;
}
.pagination a:hover .icon-prev {
    width: 0px;
    height: 0px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
}
.pagination a:hover .icon-next {
    width: 0px;
    height: 0px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-right: none;
    border-left: 6px solid #fff;
}
.pagination span {
    display: inline-block;
    margin: 0px 1px;
    color: #adadad;
    font-size: 18px;
}

2. Kopieren Sie den folgenden Code in die Functions.php Ihres Themes,

PHP-Code

/**
/**
 * @param int $total_pages
 *  总页数
 * @param int $paged
 *  当前页数从1计
 * @param int $visible_count
 *  可见的页码数，接受自定义，如果自定义小于1或者大于max，置为max
 *
 *@author shandaiwang
 */
define('MAX_VISIBLE_PAGE_COUNT', 20);
function pagination($total_pages = 0, $current_page = 1, $visible_count = MAX_VISIBLE_PAGE_COUNT){
    // 入参适配
    if($total_pages <= 1) {
        return;
    }
    if($current_page <= 0) {
        $current_page = 1;
    }
    if($visible_count <= 0 || $visible_count > MAX_VISIBLE_PAGE_COUNT) {
        $visible_count = MAX_VISIBLE_PAGE_COUNT;
    }
    // 入参适配结束
    // 页码列表适配
    $range = ceil(($visible_count + 1) / 2);
    $start = $current_page - $range + 1;
    if($start < 1) {
        $start = 1;
    }
    $end = $start + $visible_count - 1;
    if ($end > $total_pages) {
        $end = $total_pages;
        // 向前反推，尽可能使显示个数为$visible_count
        $start = $end - $visible_count + 1;
        if($start < 1) {
            $start = 1;
        }
    }
    // 页码列表适配结束
    // 渲染
    echo "<div class=&#39;pagination&#39;>";
    if($current_page > 1) { // pre
        echo(&#39;<a href="&#39;.get_pagenum_link($current_page - 1).&#39;" class="common-btn page-btn"> <div class="icon-prev"></div></a>&#39;);
    }
    if($start != 1) {   // first[...]
        echo(&#39;<a href="&#39;.get_pagenum_link(1).&#39;" class="common-btn">1</a>&#39;);
        if ($start != 2) {
            echo(&#39;<span>...</span>&#39;);
        }
    }
    for ($i=$start; $i <= $end; $i++){  // list
        if ($i == $current_page) {
            echo(&#39;<a href="javascript:;" class="common-btn active">&#39;.$i.&#39;</a>&#39;);
        } else {
            echo(&#39;<a href="&#39;.get_pagenum_link($i).&#39;" class="common-btn">&#39;.$i.&#39;</a>&#39;);
        }
    }
    if($end < $total_pages) {   //[...]last
        if ($end + 1 < $total_pages) {
            echo(&#39;<span>...</span>&#39;);
        }
        echo(&#39;<a href="&#39;.get_pagenum_link($total_pages).&#39;" class="common-btn">&#39;.$total_pages.&#39;</a>&#39;);
    }
    if($current_page < $total_pages) { // next
        echo(&#39;<a href="&#39;.get_pagenum_link($current_page + 1).&#39;" class="common-btn page-btn"> <div class="icon-next"></div></a>&#39;);
    }
    echo "</div>\n";
}

3, geben Sie ihn bei Bedarf einfach in der Form

wie Sie an $ kommen total_pages, $current_page, ich verwende WP query in der Form