YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » WordPress » 给 WordPress 添加数字分页导航

给 WordPress 添加数字分页导航

制作 BlueNight 主题的工程中积累一些 WordPress 的开发经验,今天这里就把如何给 WordPress 添加数字分页导航的 PHP 代码给出:

<?php
/**
 * Paginate
 */
if (!function_exists('paginate')):
    function paginate($args = null) {
        // 显示数字当行个数的范围基数:默认值 = 3
        $range_gap = 3; 
        
        // 主题设置的值,如果你不是使用的 BlueNight 主题,那么有 $range_gap = 3; 就OK了
        if (get_option('bluenight_paginate_num') != '' && intval(get_option('bluenight_paginate_num')) > 0) {
            $range_gap = intval(get_option('bluenight_paginate_num'));
        }
        
        // 默认的分页的搜索查询参数
        $defaults = array('page'=>null, 'pages'=>null, 'range'=>$range_gap, 'gap'=>$range_gap, 'anchor'=>1, 'echo'=>1);
        
        $r = wp_parse_args($args, $defaults);
        extract($r, EXTR_SKIP);
        
        if (!$page && !$pages) {
            global $wp_query;
            
            // 获得当前页数
            $page = get_query_var('paged');
            $page = ! empty($page) ? intval($page) : 1;
            
            // 每页显示多少篇文章
            $posts_per_page = intval(get_query_var('posts_per_page'));
            // 计算导航的总页数
            $pages = intval(ceil($wp_query->found_posts / $posts_per_page));
        }
        
        $output = "";
        if ($pages > 1) {
            $ellipsis = "<span class='paginate-gap'>...</span>";
            
            // 当前数字页座右显示的数字导航的返回,大于这个值(这里是7),就显示 $ellipsis 省略号
            $min_links = $range * 2 + 1;
            $block_min = min($page - $range, $pages - $min_links);
            $block_high = max($page + $range, $min_links);
            $left_gap = (($block_min - $anchor - $gap) > 0) ? true : false;
            $right_gap = (($block_high + $anchor + $gap) < $pages) ? true : false;
            
            if ($left_gap && !$right_gap) {
                $output .= sprintf('%s%s%s', paginate_loop(1, $anchor), $ellipsis, paginate_loop($block_min, $pages, $page));
            } else if ($left_gap && $right_gap) {
                $output .= sprintf('%s%s%s%s%s', paginate_loop(1, $anchor), $ellipsis, paginate_loop($block_min, $block_high, $page), $ellipsis, paginate_loop(($pages - $anchor + 1), $pages));
            } else if ($right_gap && !$left_gap) {
                $output .= sprintf('%s%s%s', paginate_loop(1, $block_high, $page), $ellipsis, paginate_loop(($pages - $anchor + 1), $pages));
            } else {
                $output .= paginate_loop(1, $pages, $page);
            }
        }
        
        if ($echo) {
            echo $output;
        }
        
        return $output;
    }
endif;


if (!function_exists('paginate_loop')):
    function paginate_loop($start, $max, $page = 0) {
        $output = "";
        for ($i = $start; $i <= $max; $i++) {
            $output .= ($page === intval($i)) ? "<span class='paginate-page paginate-current'>$i</span>" : "<a href='".get_pagenum_link($i)."' class='paginate-page'>$i</a>";
        }
        return $output;
    }
endif;


if (!function_exists('show_paginate')):
    function show_paginate() {
        
?>
<div class="paginate">
    <?php
    // 本来是可以直接在 paginate 函数里实现上下页的导航的,
    // 不过 WordPress 要求必须使用 previous_posts_link() 函数做分页导航
    // 否则连提交代码都提交不了,所以就这么拼接了一下导航
    previous_posts_link(__('&laquo; Previous Page', 'bluenight'), 0);
    if (function_exists("paginate")) {
        paginate();
    }
    next_posts_link(__('Next Page &raquo;', 'bluenight'), 0);
    wp_link_pages();
    ?>
</div>
<?php
}
endif;
?>

将这段代码添加到你的主题的 functions.php 文件中,然后在列表页 index.php、achive.php、tag.php、author.php、category.php、search.php 等页面(有的主题没有这么多列表页不过index.php,search.php是一定有的)加上:

// 输出文章列表
while (have_posts()):
    the_post();
    if (function_exists('show_post_item')) {
        show_post_item();
    }
endwhile;

// 显示分页导航
if (function_exists('show_paginate')) {
    show_paginate();
}

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:给 WordPress 添加数字分页导航

« »

1 条评论

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

    (Spamcheck Enabled)