脱离插件-使用代码实现WordPress分页导航功能
2018-09-26

什么是一个好的主题?应该是使用者拿过来主题后就能正常使用主题的各项功能,而不用漫山遍野的去下载安装主题必须安装的插件,否则主题的XX功能将无法实现。因此在设计一个好的主题之前,设计者应该考虑到方方面面的问题。正如前面说的,主题脱离插件的支持,就需要有相应的代码实现需要的功能,将代码集成到主题文件中,方便用户使用。

WordPress默认的分页类型是[上一页]、[下一页],对于博客有十几页的博文来说,不管博主还是游客都需要一页一页的翻,翻到你手抽筋,极其不人性化,在格外注重游客体验度的今天,该默认分页功能需要升级了。

想到WordPress扩展功能,很多童鞋不自觉的想到使用插件。没错,WP-PageNavi是一个功能强大的分页插件,但是偶米工作室作为一个讲解WordPress技术为重点的博客,同时为了期望主题开发者做出好的主题,在这里使用代码来替代WP-PageNavi插件,最终实现下图分页效果,满足大家的功能需要。

使用代码实现WordPress分页导航功能效果图
/* Mini Pagenavi v1.0 by Willin Kan. Update 2010.6.13 */
if ( !function_exists('pagenavi') ) {
    function pagenavi( $p = 2 ) { // 取当前页前后各 2 页,根据需要改
        if ( is_singular() ) return; // 文章与插页不用
        global $wp_query, $paged;
        $max_page = $wp_query->max_num_pages;
        if ( $max_page == 1 ) return; // 只有一页不用
        if ( empty( $paged ) ) $paged = 1;
        echo '<span class="pages">Page: ' . $paged . ' of ' . $max_page . ' </span> '; // 显示页数
        if ( $paged > $p + 1 ) p_link( 1, '最前页' );
        if ( $paged > $p + 2 ) echo '... ';
        for( $i = $paged - $p; $i <= $paged + $p; $i++ ) { // 中间页
            if ( $i > 0 && $i <= $max_page ) $i == $paged ? print "<span class='page-numbers current'>{$i}</span> " : p_link( $i );
        }
        if ( $paged < $max_page - $p - 1 ) echo '... ';
        if ( $paged < $max_page - $p ) p_link( $max_page, '最后页' );
    }
    function p_link( $i, $title = '' ) {
        if ( $title == '' ) $title = "第 {$i} 页";
        echo "<a class='page-numbers' href='", esc_html( get_pagenum_link( $i ) ), "' title='{$title}'>{$i}</a> ";
    }
}
/* -- END Mini Pagenavi v1.0------------------------------------- */

将上面的分页代码拷贝到主题文件夹中的functions.php 里面(如果没有改文件,请新建一个),注意要将代码放在 <?php ... ?> 里面,然后在页面(index.php、home.php、archive.php等)的适当位置添加分页函数调用,代码如下:
<!--?php if (function_exists('pagenavi')) { pagenavi(); } ?-->
刷新页面看看是不是有了分页效果?

注:如果你没有看到分页,可能是你的文章过少(WordPress默认最多每页显示10篇文章,如果你的文章少于10篇,还不够一页,当然看不到分页了,(^o^)/~),请在WordPress后台【常规】→【阅读】选项中,将“博客页面至多显示XX篇文章”设置为1,然后即可看到分页。

WordPress阅读选项设置

现在看到了分页,但是是不是很丑陋?没关系,下面我们继续进行。

为了实现美化效果,还需要有CSS的支持,以下分页CSS样式仅供参考使用,请拷贝到style.css文件中。

.page-numbers{line-height:16px;margin:0;padding:3px 5px;text-decoration:none;background:#fff;border-top:2px solid #fff;}
.page-numbers:hover{border-top:2px solid #ff00a4;}
.current,.current:hover{color:#fff;background:#45b9f6;border-top:2px solid #45b9f6;}
.current:hover{border-top:2px solid #00679d;}

完工,使用代码实现WordPress分页功能搞定。

如果自己添加代码有难度,可以联系偶米工作室,我们为您提供主题个性化修改服务。

相关知识