WordpressCMS主题开发07-制作分页和面包屑导航

现在，我们来学习第7课，制作分页和面包屑导航。

我们先打开分类页面，在这个页面中我们还有2个地方没有做完。

第一个是文章的分页，第二个是面包屑导航，那下面我们开始制作分页

分页的制作

在制作分页的时候，需要用到一个函数文件：也就是functions.php，在wordpress的主题开发中，为了实现一些小功能，我们会写一些自己的代码，这些代码通常都存放到functions.php中。

所以，我们在主题文件夹下，创建一个文件，名为functions.php。

因为他是php的文件，所以我们添加php最基本的元素：<?php ?>

然后，我这里直接贴出分页的代码：

<?php 
//分页
function pagination($query_string){
    global $posts_per_page, $paged;
    $my_query = new WP_Query($query_string ."&posts_per_page=-1");
    $total_posts = $my_query->post_count;
    if(empty($paged))$paged = 1;
    $prev = $paged - 1;
    $next = $paged + 1;
    $range = 6; // 修改数字,可以显示更多的分页链接
    $showitems = ($range * 2)+1;
    $pages = ceil($total_posts/$posts_per_page);

    if(1 != $pages){
        echo "<div class='pagination'>";
        echo ($paged > 2 && $paged+$range+1 > $pages && $showitems < $pages)? "<a href='".get_pagenum_link(1)."'>最前</a>":"";
        echo ($paged > 1 && $showitems < $pages)? "<a href='".get_pagenum_link($prev)."'>上一页</a>":"";

        for ($i=1; $i <= $pages; $i++){
            if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )){
            echo ($paged == $i)? "<span class='current'>".$i."</span>":"<a href='".get_pagenum_link($i)."' class='inactive' >".$i."</a>";
            }
        }

        echo ($paged < $pages && $showitems < $pages) ? "<a href='".get_pagenum_link($next)."'>下一页</a>" :"";
        echo ($paged < $pages-1 &&$paged + $range-1 < $pages && $showitems < $pages) ? "<a href='".get_pagenum_link($pages)."'>最后</a>":"";
        echo "</div>\n";
    }
}
?>

有了分页之后，我们还需要做css的调整：

把以下代码直接粘贴到style.css中：

/** 翻页 **/
.navigation {   float:right;      width:700px;  margin: 5px 0 5px 0;      text-align:right;      }
.navigation_b {      float:right;      width:700px;  text-align:right;      }
.pagination {   line-height:25px;    }
.pagination span, .pagination a {    font-size:12px;       margin: 2px 6px 2px 0;  background:#fff;     border:1px solid #ccc;       color:#787878;       padding:2px 5px 2px 5px;     }
.pagination a:hover {     background: #0196E3;   border:1px solid #fff;     color:#fff;       }
.pagination .current {     background: #0196E3;   color:#fff;       font-size:12px;       padding:2px 5px 2px 5px;     }

接下来，category.php中，删除掉关于分页的固定代码的内容：

<div class="pagination">
共83条记录 1/5页
&nbsp;<a disabled="disabled">首页</a> <a disabled="disabled">上一页</a>&nbsp;<a href="index_2.htm">下一页</a> <a href="index_5.htm">尾页</a>
&nbsp;第<select onChange="if(this.value==1){location='http://www.xuhss.com/seo/index.htm'}else{location='http://www.xuhss.com/seo/index_'+this.value+'.htm'}this.disabled='disabled'">
  <option value="1" selected="selected">1</option>
  <option value="2" >2</option>
  <option value="3" >3</option>
  <option value="4" >4</option>
  <option value="5" >5</option>
</select>页
</div>

然后再这里添加函数的调用代码：

<div class="pagination">
<?php pagination($query_string); ?>
</div>

来到网站前台，刷新：

并没有出现分页：

You must be logged in to view the hidden contents.

再次来到分类页面刷新：

但是这里，你会发现，数量还是不对应：

这是因为我们代码category.php也进行了控制，我们也把它修改为3，点击保存：

<?php } else { ?>
<?php $postsperpage = 3; ?>
<?php } ?>

再次刷新就没有问题了，这里需要同步一下。

面包屑导航的制作

这里我直接粘贴面包屑导航对应的函数代码到functions.php中：

function wheatv_breadcrumbs() {
    $delimiter = ' > ';
    $name = '首页'; //
    if ( !is_home() ||!is_front_page() || is_paged() ) {
        global $post;
        $home = get_bloginfo('url');
        echo '<a href="' . $home . '"  class="gray">' . $name . '</a> ' . $delimiter . ' ';
        if ( is_category() ) {
            global $wp_query;
            $cat_obj = $wp_query->get_queried_object();
            $thisCat = $cat_obj->term_id;
            $thisCat = get_category($thisCat);
            $parentCat = get_category($thisCat->parent);
            if ($thisCat->parent != 0) echo(get_category_parents($parentCat, TRUE, ' ' . $delimiter . ' '));
            echo single_cat_title();
        } elseif ( is_day() ) {
            echo '<a href="' . get_year_link(get_the_time('Y')) . '"  class="gray">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';
            echo '<a href="' . get_month_link(get_the_time('Y'),get_the_time('m')) . '"  class="gray">' . get_the_time('F') . '</a> ' . $delimiter . ' ';
            echo get_the_time('d');
        } elseif ( is_month() ) {
            echo '<a href="' . get_year_link(get_the_time('Y')) . '"  class="gray">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';
            echo get_the_time('F');
        } elseif ( is_year() ) {
            echo get_the_time('Y');
        } elseif ( is_single() ) {
            $cat = get_the_category(); $cat = $cat[0];
            echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
            echo "正文";
        } elseif ( is_page()||!$post->post_parent ) {
            the_title();
        } elseif ( is_page()||$post->post_parent ) {
            $parent_id  = $post->post_parent;
            $breadcrumbs = array();
            while ($parent_id) {
            $page = get_page($parent_id);
            $breadcrumbs[] = '<a href="http://www.wheatv.com/site/wp-admin/ . get_permalink($page->ID) . "  class="gray">' . get_the_title($page->ID) . '</a>';
            $parent_id  = $page->post_parent;
            }
            $breadcrumbs = array_reverse($breadcrumbs);
            foreach ($breadcrumbs as $crumb) echo $crumb . ' ' . $delimiter . ' ';
            the_title();
        } elseif ( is_search() ) {
            echo get_search_query();
        } elseif ( is_tag() ) {
            echo single_tag_title();
        } elseif ( is_author() ) {
            global $author;
            $userdata = get_userdata($author);
            echo '由'.$userdata->display_name.'发表';
        } elseif ( is_404() ) {
            echo '404 错误';
        }

        if ( get_query_var('paged') ) {
            if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ' (';
            echo '第' . ' ' . get_query_var('paged').' 页';
            if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ')';
        }
    }else{
    echo $name;
    }
}

然后在对应的位置category.php添加函数的调用：

    <div class="list_bar" style="width: 680px">
        <?php wheatv_breadcrumbs(); ?>
    </div>

保存，来到网站的前台，你会发现，面包屑导航就正常了。

分类页面就比较完整了。下节课，我们会进行内容页面的制作。