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>

儲存，來到網站的前臺，你會發現，麵包屑導航就正常了。

分類頁面就比較完整了。下節課，我們會進行內容頁面的製作。