首页 > 主题开发 > cms主题开发 > WordpressCMS主题开发07-制作分页和面包屑导航
2018
06-06

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>

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

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

 

 

 

 

最后编辑:
作者:MrBang
WordPress迷

留下一个回复