WordPress 非插件日志分页效果

发布于：电脑网络 2,873 次践踏

我在 WordPress 上坚持非插件的主导原则，常用的非插件的功能也介绍过不少，比如《WordPress 免插件实现图片相关日志》、《WordPress 非插件相关日志的两种方法》、《WordPress 非插件统计网站访问信息》等等。今天就再介绍一下 WordPress 中非插件实现的日志分页吧，这个好像已经有不少高手们都写过了，那我就当再复习一下吧，以下代码是来自于 Zeus 大哥的主题 D&Z themes，而这部分分页代码好像是提取自 pagenavi 插件的，函数部分我也就没啥修改，照搬了上来。

把以下代码复制到主题文件中的 functions.php

function pagenavi($before = '', $after = '') {
    global $wpdb, $wp_query;
    if (!is_single()) {
        $request = $wp_query->request;
        $posts_per_page = intval(get_query_var('posts_per_page'));
        $paged = intval(get_query_var('paged'));
        $numposts = $wp_query->found_posts;
        $max_page = $wp_query->max_num_pages;
        if(empty($paged) || $paged == 0){
            $paged = 1;
        }
        $pages_to_show = intval($pagenavi_options['num_pages']);
        $pages_to_show = intval(3);
        $pages_to_show_minus_1 = $pages_to_show-1;
        $half_page_start = floor($pages_to_show_minus_1/2);
        $half_page_end = ceil($pages_to_show_minus_1/2);
        $start_page = $paged - $half_page_start;
        if($start_page <= 0) {
            $start_page = 1;
        }
        $end_page = $paged + $half_page_end;
        if(($end_page - $start_page) != $pages_to_show_minus_1) {
            $end_page = $start_page + $pages_to_show_minus_1;
        }
        if($end_page > $max_page) {
            $start_page = $max_page - $pages_to_show_minus_1;
            $end_page = $max_page;
        }
        if($start_page <= 0) {
            $start_page = 1;
        }
        if($max_page > 1 || intval($pagenavi_options['always_show']) == 1) {
            $pages_text = str_replace("%CURRENT_PAGE%", number_format_i18n($paged), "页面 %CURRENT_PAGE% / %TOTAL_PAGES%");
            $pages_text = str_replace("%TOTAL_PAGES%", number_format_i18n($max_page), $pages_text);
            echo $before.'<div class="pagenavi">'."\n";
            if(!empty($pages_text)) {
                echo '<span class="pages">'.$pages_text.'</span>';
            }                   
            if ($start_page >= 2 && $pages_to_show < $max_page) {
                $first_page_text = str_replace("%TOTAL_PAGES%", number_format_i18n($max_page), "&laquo; 第一页");
                echo '<a href="'.clean_url(get_pagenum_link()).'" title="'.$first_page_text.'">'.$first_page_text.'</a>';
                echo '<span class="extend">...</span>';
            }
            previous_posts_link("&laquo;");
            for($i = $start_page; $i  <= $end_page; $i++) {                       
                if($i == $paged) {
                    $current_page_text = str_replace("%PAGE_NUMBER%", number_format_i18n($i), "%PAGE_NUMBER%");
                    echo '<span class="current">'.$current_page_text.'</span>';
                } else {
                    $page_text = str_replace("%PAGE_NUMBER%", number_format_i18n($i), "%PAGE_NUMBER%");
                    echo '<a href="'.clean_url(get_pagenum_link($i)).'" title="'.$page_text.'">'.$page_text.'</a>';
                }
            }
            next_posts_link("&raquo;", $max_page);
            if ($end_page < $max_page) {
                echo '<span class="extend">'."...".'</span>';
                $last_page_text = str_replace("%TOTAL_PAGES%", number_format_i18n($max_page), "最后一页 &raquo;");
                echo '<a href="'.clean_url(get_pagenum_link($max_page)).'" title="'.$last_page_text.'">最后一页 &raquo;</a>';
            }
            echo '</div>'.$after."\n";
        }
    }
}

调用的函数也很简单：

<?php pagenavi(); ?>

把以上这句代码插入到 index.php 或者 archive.php 中需要的位置就可以了。

关于这个 CSS 样式嘛，大家可以各自发挥，以下是我现在用的带圆角的样式，可以参考下：

.pagenavi a,.pages,.extend,.current{-moz-border-radius:10px 0;-webkit-border-top-left-radius:10px;-webkit-border-top-right-radius:0;-webkit-border-bottom-left-radius:0;-webkit-border-bottom-right-radius:10px;border-radius:10px 0;}
.pagenavi{float:right;font-size:12px;padding:3px 0;}
.pagenavi a{background:#EAEAEA;border:1px solid #B1BDC7;color:#333;margin:2px;padding:2px 5px 1px;}
.pagenavi a:hover{background:#342D27;border:1px solid #B1BDC7;color:#FFF;}
.pages,.extend{background:#F5F5F5;border:1px solid #B1BDC7;margin:2px;padding:2px 5px 1px;}
.current{background-color:#342d27;border:1px solid #9b999a;color:#fff;font-weight:700;margin:2px 0;padding:2px 5px 1px;}

这个效果嘛，可以看我的首页，最好是用非 IE 核心的浏览器，因为 IE 看不到我用的圆角样式。