现在,我们来学习第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页
<a disabled="disabled">首页</a> <a disabled="disabled">上一页</a> <a href="index_2.htm">下一页</a> <a href="index_5.htm">尾页</a>
第<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>
保存,来到网站的前台,你会发现,面包屑导航就正常了。
分类页面就比较完整了。下节课,我们会进行内容页面的制作。