WordPress:显示tags在一个下拉列表中
标签(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' => 8, 'largest' => 22, 'unit' => 'pt', 'number' => 45, 'format' => 'flat', 'orderby' => 'name', 'order' => 'ASC', 'exclude' => '', 'include' => '' ); $args = wp_parse_args( $args, $defaults ); $tags = get_tags( array_merge($args, array('orderby' => 'count', 'order' => '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' => 8, 'largest' => 22, 'unit' => 'pt', 'number' => 45, 'format' => 'flat', 'orderby' => 'name', 'order' => 'ASC' ); $args = wp_parse_args( $args, $defaults ); extract($args); if ( !$tags ) return; $counts = $tag_links = array(); foreach ( (array) $tags as $tag ) { $counts[$tag->name] = $tag->count; $tag_links[$tag->name] = get_tag_link( $tag->term_id ); if ( is_wp_error( $tag_links[$tag->name] ) ) return $tag_links[$tag->name]; $tag_ids[$tag->name] = $tag->term_id; } $min_count = min($counts); $spread = max($counts) - $min_count; if ( $spread <= 0 ) $spread = 1; $font_spread = $largest - $smallest; if ( $font_spread <= 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) && $wp_rewrite->using_permalinks() ) ? ' rel="tag"' : ''; foreach ( $counts as $tag => $count ) { $tag_id = $tag_ids[$tag]; $tag_link = clean_url($tag_links[$tag]); $tag = str_replace(' ', ' ', wp_specialchars( $tag )); $a[] = "\t<option value='$tag_link'>$tag ($count)</option>"; } switch ( $format ) : case 'array' : $return =& $a; break; case 'list' : $return = "<ul class='wp-tag-cloud'>\n\t<li>"; $return .= join("</li>\n\t<li>", $a); $return .= "</li>\n</ul>\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美化哦!
- 上一篇: WordPress:两个wp的小技巧,非常实用哦!
- 下一篇: 百度:惊叹!通过百度联盟的申请
台湾的空间?打开有点慢哟。
@ 花茶
确实有点慢,下个月就换空间了!!
的确有点小慢…上面的图片开了很久….很想知道那个会换图片的东西是怎么做出来的
@ Mr. B
1.上面的图片确实比较大,加载比较慢;
2.切换效果是用jQuery插件innerfade做出来的,该插件还支持其他的切换效果,不错的!我做的几个站上都在用!
还好了,我的空间都废了~~
有没有效果截图啊。。。
@ 蛋王
没有制作效果,不过步骤这么简单。自己动手测试一下更有影响吧!!
Parse error: syntax error, unexpected ‘=’, expecting ‘)’
提示错误啊