WordPress分类页面制作

很多CMS程序都有自带的”网站地图”,就是把分类汇总在一个页面,在一个页面清楚的的列出各个主分类、子分类,展示大致的网站构架,而常见的Wordpress”网站地图”类插件多数是搜索引擎地图,只有文章列表。 在用Wordpress实现这个功能的过程中最开始想到的是利用wp_list_categories这个函数,但是他的输出的样式如果用纯粹的CSS十分难控制,本人对JS基本十分不懂,而且在HTML中主分类与子分类中的标签和类是一样的,感觉那种结构即便用JS都挺难控制,于是写了一个输出列表的自定义函数。

添加函数

在functions.php中加入以下代码 

/**
 * 名称:分类列表页面函数
 * 作者:Jarain
 * 网站:http://www.jarain.com/
 */
function wp_navigation_list(){
	global $wpdb;
    $cat = $wpdb--->get_results(" SELECT term_id FROM $wpdb->term_taxonomy WHERE taxonomy='category' AND parent='0' ");//读取主分类ID 
	foreach ((array)$cat as $cat1){ 
		$get_name = get_category($cat1->term_id);//获取分类 
		$name = $get_name ->name ;//获取分类名 
		$url = get_category_link($cat1->term_id);//获取分类网址 
			if ( get_category_children($cat1->term_id) != "" ){ //判断是否有子分类
				echo ".$name.";//主分类标题 
				echo ''; 
				wp_list_cats('child_of=' . $cat1->term_id. '&depth=0&hide_empty=0&orderby=id');//子分类列表
				echo ''; 
			}
		}
	}

前台调用

将page.php中的

替换为以下代码,另存为navigation.php,上传到主题根目录,新建页面模板选择navigation,调用时最好套一个DIV,方便CSS控制内部元素。

样式控制

在style.css中加入,根据需求更改

#navigation li{float:left;padding-right:15px;list-style: none;} 
#list-title {margin:5px 0;background:#EAF3FB;font-size:15px;padding:5px;font-weight:bold;} 
#list-content {padding:10px;float:left} 
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}

效果预览:丝网工厂网 站内导航 >>