分页场景一

例如，查询cat分类下的文章，可在wp_query查询函数中设置，

 $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，通过url就能请求对应页的文章数据。

分页场景二

像上文所说，如果是一个自定义查询内容的页面，就无法通过WordPress默认的函数，使得/page/2请求页面存在。
比如：

image

页面中展示的是自定义请求的一个或多个tag的文章，此时通过js交互查询的方法可见（tag落地页--通过ajax-post请求数据
），那么如何实现分页效果？

同样的需要post请求，直接将分页结果返回进行展示，操作基本与ajax讲解的文章类似，但是此时的分页触发需要单独去写，大致思路如下：

image

• 点击某num，请求展示该页查询结果文章
• 点击上一页、下一页可以进行num增减查询
• 当num为1时，“上一页”不可点击
• num>最大页数max时，“下一页”不可点击

• 注意展示页码num，在1-max范围内，随着点击，动态切换当前激活的页面在中间位置
  image

-- low版实现代码如下：

// php查询处理：
// 在tagQuery post请求处理回调函数中：为js传来的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; // 最大页数

上述请求的就是指定查询下的指定page的数据。

那界面UI需要，点击传递要查询的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点击事件处理，操控page值
 // 查询指定page页数据
  function changePage(num){
    queryTag(queryTagParam,num);
  }