分頁(yè)場(chǎng)景一
例如,查詢cat分類下的文章寨典,可在wp_query
查詢函數(shù)中設(shè)置,
$args = array(
'category__in' => $query_id,
'orderby' => 'meta_value_num',
'meta_key' => 'num',
'order' => 'asc',
'posts_per_page'=>12,
'paged'=> $GLOBALS['paged']
);
$wp_query = new WP_Query($args);
site.com/category/cat
、site.com/category/cat/page/2
翩隧、site.com/category/cat/page/3
,通過(guò)url就能請(qǐng)求對(duì)應(yīng)頁(yè)的文章數(shù)據(jù)呻纹。
分頁(yè)場(chǎng)景二
像上文所說(shuō)堆生,如果是一個(gè)自定義查詢內(nèi)容的頁(yè)面专缠,就無(wú)法通過(guò)WordPress默認(rèn)的函數(shù),使得/page/2
請(qǐng)求頁(yè)面存在淑仆。
比如:
頁(yè)面中展示的是自定義請(qǐng)求的一個(gè)或多個(gè)tag的文章涝婉,此時(shí)通過(guò)js交互查詢的方法可見(tag落地頁(yè)--通過(guò)ajax-post請(qǐng)求數(shù)據(jù)
),那么如何實(shí)現(xiàn)分頁(yè)效果蔗怠?
同樣的需要post請(qǐng)求嘁圈,直接將分頁(yè)結(jié)果返回進(jìn)行展示,操作基本與ajax講解的文章類似蟀淮,但是此時(shí)的分頁(yè)觸發(fā)需要單獨(dú)去寫最住,大致思路如下:
- 點(diǎn)擊某num,請(qǐng)求展示該頁(yè)查詢結(jié)果文章
- 點(diǎn)擊上一頁(yè)怠惶、下一頁(yè)可以進(jìn)行num增減查詢
- 當(dāng)num為1時(shí)涨缚,“上一頁(yè)”不可點(diǎn)擊
- num>最大頁(yè)數(shù)max時(shí),“下一頁(yè)”不可點(diǎn)擊
-
注意展示頁(yè)碼num策治,在1-max范圍內(nèi)脓魏,隨著點(diǎn)擊,動(dòng)態(tài)切換當(dāng)前激活的頁(yè)面在中間位置
-- low版實(shí)現(xiàn)代碼如下:
// php查詢處理:
// 在tagQuery post請(qǐng)求處理回調(diào)函數(shù)中:為js傳來(lái)的page
$page = $_POST['page'];
$tagQur = array(
'tag' => $quyStr,
'orderby' => 'modified',
'order' => 'DESC',
'posts_per_page'=> 12,
'paged'=> $page
);
$wp_query = new WP_Query($tagQur);
$max_page = $wp_query->max_num_pages; // 最大頁(yè)數(shù)
上述請(qǐng)求的就是指定查詢下的指定page的數(shù)據(jù)通惫。
那界面UI需要茂翔,點(diǎn)擊傳遞要查詢的page值:
function pageSet($page,$max_page){
$prev_num = $page -1;
$next_num = $page +1;
$page_num='';
if($prev_num > 0){
$page_num.= "<span class='left-icon icon iconfont icon-Unfold' onclick='changePage($prev_num)'></span>";
}else{
$page_num.= "<span class='un-active-page left-icon icon iconfont icon-Unfold'></span>";
}
if($max_page>1){
if($max_page<=5){
for ($i = 1; $i <= $max_page; $i++) {
if($page == $i){
$page_num.= "<span class='active-page' data-num='$i' onclick='changePage($i)'>".$i."</span> ";
}else{
$page_num.= "<span data-num='$i' onclick='changePage($i)'>".$i."</span> ";
}
}
}elseif($max_page>5){
if($page>3){
$page_one = $page-2;
$page_two = $page-1;
$page_four = $page+1;
$page_five = $page+2;
$page_num.= "<span onclick='changePage($page_one)'>".$page_one."</span> ";
$page_num.= "<span onclick='changePage($page_two)'>".$page_two."</span> ";
$page_num.= "<span class='active-page' class='active-page' onclick='changePage($page)'>".$page."</span> ";
$page_four <= $max_page && $page_num.= "<span onclick='changePage($page_four)'>".$page_four."</span> ";
$page_five<= $max_page && $page_num.= "<span onclick='changePage($page_five)'>".$page_five."</span> ";
}else{
for ($i = 1; $i <= 5; $i++) {
if($page == $i){
$page_num.= "<span class='active-page' data-num='$i' onclick='changePage($i)'>".$i."</span> ";
}else{
$page_num.= "<span data-num='$i' onclick='changePage($i)'>".$i."</span> ";
}
}
}
}
if($next_num <= $max_page){
$page_num.= "<span onclick='changePage($next_num)' class='right-icon icon iconfont icon-Unfold'></span>";
}else{
$page_num.= "<span class='un-active-page right-icon icon iconfont icon-Unfold'></span>";
}
echo '<div class="tag-page-content">'.$page_num.'</div>';
}
}
// js點(diǎn)擊事件處理,操控page值
// 查詢指定page頁(yè)數(shù)據(jù)
function changePage(num){
queryTag(queryTagParam,num);
}