WordPress:显示tags在一个下拉列表中

分类:Hack技巧 发表时间:2009年07月24日 字体大小:12号14号

标签(tags)在博客中很实用,每个博客中都有一个标签列表或标签云。你若只有几十个标签的话,页面看起来还是比较好的,但若你有上百个标签的话,那么你的标签将会变得非常难看和难读。这样对你的读者不友好,不便于他们查找。

现在很多的博客上的标签都是以a标签内联显示或者漂亮点的标签使用li标签制作成一个列表显示,另外就是利用插件动态地falsh显示。用a标签内联显示时若设置wp_tag_cloud()的smallest和largest参数值不相等,那么这个标签云显示的就比较丑陋的;而用li标签显示上百个标签的话,会占据很大的页面,不友好;而使用插件flash动态显示确实很美观,但加载速度明显降低,而且会出现不同浏览器层次的bug。若刚好这个flash标签云的上方刚好有个鼠标移动上去的下拉菜单,说不定在不同的浏览器下,有的是现实在flash上层,有的却是跑到了flash的下面去了。这个现象很常见哦!

今天在国外的网站上看到了这个解决方案,觉得很是不错,它将标签显示在一个下拉列表框中,这样既不占据很大的页面,经css美化的话显示器来也很不错哦!

步骤一:添加功能函数到function.php文件中,具体代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
< ?php
function dropdown_tag_cloud( $args = '' ) {
	$defaults = array(
		'smallest' =&gt; 8, 'largest' =&gt; 22, 'unit' =&gt; 'pt', 'number' =&gt; 45,
		'format' =&gt; 'flat', 'orderby' =&gt; 'name', 'order' =&gt; 'ASC',
		'exclude' =&gt; '', 'include' =&gt; ''
	);
	$args = wp_parse_args( $args, $defaults );
 
	$tags = get_tags( array_merge($args, array('orderby' =&gt; 'count', 'order' =&gt; 'DESC')) ); // Always query top tags
 
	if ( empty($tags) )
		return;
 
	$return = dropdown_generate_tag_cloud( $tags, $args ); // Here's where those top tags get sorted according to $args
	if ( is_wp_error( $return ) )
		return false;
	else
		echo apply_filters( 'dropdown_tag_cloud', $return, $args );
}
 
function dropdown_generate_tag_cloud( $tags, $args = '' ) {
	global $wp_rewrite;
	$defaults = array(
		'smallest' =&gt; 8, 'largest' =&gt; 22, 'unit' =&gt; 'pt', 'number' =&gt; 45,
		'format' =&gt; 'flat', 'orderby' =&gt; 'name', 'order' =&gt; 'ASC'
	);
	$args = wp_parse_args( $args, $defaults );
	extract($args);
 
	if ( !$tags )
		return;
	$counts = $tag_links = array();
	foreach ( (array) $tags as $tag ) {
		$counts[$tag-&gt;name] = $tag-&gt;count;
		$tag_links[$tag-&gt;name] = get_tag_link( $tag-&gt;term_id );
		if ( is_wp_error( $tag_links[$tag-&gt;name] ) )
			return $tag_links[$tag-&gt;name];
		$tag_ids[$tag-&gt;name] = $tag-&gt;term_id;
	}
 
	$min_count = min($counts);
	$spread = max($counts) - $min_count;
	if ( $spread &lt;= 0 )
		$spread = 1;
	$font_spread = $largest - $smallest;
	if ( $font_spread &lt;= 0 )
		$font_spread = 1;
	$font_step = $font_spread / $spread;
 
	// SQL cannot save you; this is a second (potentially different) sort on a subset of data.
	if ( 'name' == $orderby )
		uksort($counts, 'strnatcasecmp');
	else
		asort($counts);
 
	if ( 'DESC' == $order )
		$counts = array_reverse( $counts, true );
 
	$a = array();
 
	$rel = ( is_object($wp_rewrite) &amp;&amp; $wp_rewrite-&gt;using_permalinks() ) ? ' rel="tag"' : '';
 
	foreach ( $counts as $tag =&gt; $count ) {
		$tag_id = $tag_ids[$tag];
		$tag_link = clean_url($tag_links[$tag]);
		$tag = str_replace(' ', '&nbsp;', wp_specialchars( $tag ));
		$a[] = "\t&lt;option value='$tag_link'&gt;$tag ($count)&lt;/option&gt;";
	}
 
	switch ( $format ) :
	case 'array' :
		$return =& $a;
		break;
	case 'list' :
		$return = "&lt;ul class='wp-tag-cloud'&gt;\n\t&lt;li&gt;";
		$return .= join("&lt;/li&gt;\n\t&lt;li&gt;", $a);
		$return .= "&lt;/li&gt;\n&lt;/ul&gt;\n";
		break;
	default :
		$return = join("\n", $a);
		break;
	endswitch;
 
	return apply_filters( 'dropdown_generate_tag_cloud', $return, $tags, $args );
}
?>

步骤二:安放下拉列表框的代码,调用功能函数

完成上面的步骤后,只需要在你需要安放下拉列表框的地方调用该功能函数即可(通常会放在siderbar.php文件中)。在其中放入如下代码

1
2
3
4
<select name="tag-dropdown" onchange="document.location.href=this.options[this.selectedIndex].value;">
	<option value="#">Liste d'auteurs</option>
	< ?php dropdown_tag_cloud('number=0&order=asc'); ?>
</select>

那么这样子你就有了一个下拉列表的标签,这样阅读起来更加友好吧。当然自己可以针对该列表框使用css美化哦!

不错不错,已经有 个评论!
  1. 台湾的空间?打开有点慢哟。

  2. @ 花茶
    确实有点慢,下个月就换空间了!!

  3. 的确有点小慢…上面的图片开了很久….很想知道那个会换图片的东西是怎么做出来的

  4. @ Mr. B
    1.上面的图片确实比较大,加载比较慢;
    2.切换效果是用jQuery插件innerfade做出来的,该插件还支持其他的切换效果,不错的!我做的几个站上都在用!

  5. 还好了,我的空间都废了~~

  6. 有没有效果截图啊。。。

  7. @ 蛋王
    没有制作效果,不过步骤这么简单。自己动手测试一下更有影响吧!!

  8. hjzgc

    Parse error: syntax error, unexpected ‘=’, expecting ‘)’
    提示错误啊

我要评论

  • * *