wordpress标签页的制作

最近开始迷恋上豆瓣网,在用标签来搜索豆瓣的电影的时候很方便,并且豆瓣电影有一个单独的标签页,可以列出所有的标签,我觉得这对于用户来说是很方便的。于是我就想,这么有利于用户体验的功能为什么不给自己的网站也做个呢?

wordpress可以使用wp_tag_cloud()函数输出标签云,你可以先看看实际的演示效果:

wp_tag_cloud()函数的参数解说

在sidebar.php模板文件中找到了标签云的输出代码:

<?php wp_tag_cloud('unit=px&smallest=11&largest=20&number=45&orderby=count'); ?>

这是上面代码输出的标签云效果:

wordpress标签页云效果

同志们可能也注意到了上面代码中包含的参数,下面我对wp_tag_cloud()函数的参数做个简单的说明:

unit

(字符)型,设定标签字体的大小使用的单位,可以是CSS的任何长度单位,例如:px、pt、em、%(默认是pt);

smallest

(数值)型,设定标签字体的大小的最小值,就是使用次数最少的标签的字体大小(默认是8);

largest

(数值)型,设定标签字体的大小的最大值,就是使用次数最多的标签的字体大小(默认是22);

number

(数值)型,设定标签显示多少个数(为0时是显示所有的标签);

orderby

(字符)型,设定标签是按照什么顺序来排列:name(默认) 是按照标签名称来排序,count 是按照标签使用的次数来排序;

format

(字符)型,设定标签是按照什么格式来显示:flat(默认) 标签用空格分隔,list 标签用无序列表(ul+li的结构)的格式输出,array 标签保存在数值中;

order

(字符)型,设定标签的排序次序:ASC(默认) 升序,DESC 降序,需要注意的是,这个参数的值都必须大写;

exclude

(数值)型,排除某个或多个标签,例如:exclude=5,27就是排除标签ID为5和27的这两个标签,要排除的ID用逗号分割,默认不排除标签;

include

(数值)型,只显示某个或多个标签,例如:ixclude=5,27就是只显示标签ID为5和27的这两个标签,要显示的ID用逗号分割,默认显示所有标签;

这些都是wp_tag_cloud()函数的常用参数,还有些参数没有一一列出来,因为用得比较少,如果你想了解更详细的函数说明,你可以去看看官方的说明文档

添加标签页面

看了上面简单的wp_tag_cloud()函数的参数说明,相信你对它有了一定的了解,接下来将添加一个标签页面。

新建一个tags的模板页面,至于如何新建不是该文所讨论的范畴,你也可以复制模板文件夹下的links.php文件,然后将文件名改为tags.php,在tags.php适当的位置添加如下代码:

<?php wp_tag_cloud('unit=px&smallest=14&largest=14&number=0&format=list&orderby=count&order=DESC'); ?>

添加好代码后,将tags.php文件复制到模板文件夹的根目录(和links.php同级),然后登录wordpress的后台,选择新建页面→输入页面标题→选择模板:

wordpress新建页面的模板选择

这里选择的就是刚刚新建的tags.php,好了,标签页面添加完毕了。但是现在的页面显示结果比较简单,就是一个标签名称,如果要显示该标签包含有多少篇文章,还得修改下核心文件。

修改核心文件

修改核心文件之前建议先给该文件做个备份,如果以后升级wordpress还得再次修改下这一段代码。找到wp-includes/category-template.php这个文件,你会发现这段代码:

foreach ( $tags as $key => $tag ) {
	$count = $counts[ $key ];
	$real_count = $real_counts[ $key ];
	$tag_link = '#' != $tag->link ? esc_url( $tag->link ) : '#';
	$tag_id = isset($tags[ $key ]->id) ? $tags[ $key ]->id : $key;
	$tag_name = $tags[ $key ]->name;
	$a[] = "$tag_name";
}

switch ( $format ) :
        case 'array' :
		$return =& $a;
		break;
	case 'list' :
		$return = "
    \n\t
  • "; $return .= join( "
  • \n\t
  • ", $a ); $return .= "
  • \n
\n"; break; default : $return = join( $separator, $a ); break; endswitch;

要修改的是变量$a[]的这一段代码,由于侧边栏的标签云和标签页都共用了$a[]这个变量,如果在原来的基础上修改势必会影响到标签云的显示结果,为了不影响,这里可以再添加一个变量$a2[],然后将修改过的代码赋值给新变量$a2[],这样就不会影响原来的结构又达到了修改的目的:

$a2[] = "$tag_name($real_count)";

添加了变量,还得将下面的判断语句修改下:

case 'list' :
	$return = "
    \n\t
  • "; $return .= join( "
  • \n\t
  • ", $a2 ); //将原来的$a改成新增的$a2 $return .= "
  • \n
\n"; break;

到这一步,标签页就制作完成了。我还增加了一段CSS代码让原本一列布局的标签变成了三列布局,这样排列会更漂亮:

.wp-tap-cloud{ width:626px;overflow:hidden}
.wp-tag-cloud li{width:156px; float:left}
.wp-tag-cloud li span{color:#777;font-size:14px}
原载于:雨夜带刀’s Blog
本文链接:https://blog.yiguochen.com/made-wordpress-tagspage.html
如需转载请以链接形式注明原载或原文地址。

“wordpress标签页的制作”目前已有 20 条评论