wordpress5.3主题开发第十课：分页导航在分类模板中的使用

显示文章列表时，经常使用分页导航。下面这个例子显示了某个分类下的文章列表。因为文章数目较多，所以使用了分页导航。

 

 那么在wordpress5.3中如何实现分类导航，有三种办法：

1. 使用内置的函数
2. 自定义导航样式（自己编写函数）
3. 使用wordpress插件

使用内置函数

the_posts_pagination()函数可以用在文章列表之后

<?php
get_header();
?>

<?php
$args = array(
    'cat' => $cat,
    'paged' => $paged,
    'posts_per_page' => 2,
);

$wp_query = new WP_Query($args);

if ($wp_query->have_posts()):
    while ($wp_query->have_posts()):$wp_query->the_post();
        the_title('<li>','</li>');
    endwhile;
endif;

the_posts_pagination(); //显示分页导航

wp_reset_postdata();
?>

<?php
get_footer();

 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>',

    ) );

自定义导航样式

要显示某个分类的文章列表，最简单的办法就是要创建一个category.php的文件。有关分类模板文件的详细介绍，可以参见：

https://www.wpdaxue.com/docs/theme-handbook/template-files-section/taxonomy-templates

下面写出了category.php文件的代码

<?php
get_header();
?>

<?php
$args = array(
    'cat' => $cat,
    'paged' => $paged,
    'posts_per_page' => 2,
);

$wp_query = new WP_Query($args);

if ($wp_query->have_posts()):
    while ($wp_query->have_posts()):$wp_query->the_post();
        the_title('<li>','</li>');
    endwhile;
endif;
mo_paging();
wp_reset_postdata();
?>

<?php
get_footer();

主要介绍$args这个数组， $cat 变量可以自动获取当前栏目的id值，$paged变量可以自动获取当前的页号，'posts_per_page'可以指定每页显示的文章的数目

具体WP_Query()的介绍可以参见：

https://blog.csdn.net/lsmxx/article/details/104182631

mo_paging()函数是在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>';
    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>";
}

有关wordpress分页导航的函数有很多，这是其中一个。它主要实现显示分页导航。

有一点需要注意：

global $wp_query, $paged;

这里的$wp_query 变量一定要和category.php文件中定义的变量$wp_query保持一致

因为我没有写CSS，

第一页效果如下：

 

 第二页效果：

 

使用wordpress插件 

搜索 WP-PageNavi 这个插件进行安装，安装成功后启用。

 

启用插件成功后，在【设置】中出现了【PageNavi】，可以设置分页导航的样式 

 在category.php文件中引用分页导航

<?php
get_header();
?>

<?php
$args = array(
    'cat' => $cat,
    'paged' => $paged,
    'posts_per_page' => 2,
);

$wp_query = new WP_Query($args);

if ($wp_query->have_posts()):
    while ($wp_query->have_posts()):$wp_query->the_post();
        the_title('<li>','</li>');
    endwhile;
endif;
//mo_paging();
wp_pagenavi(); //引用第三方插件的函数
wp_reset_postdata();
?>

<?php
get_footer();

显示效果如下：