WordPress 3D旋转彩色标签云

具体效果看本文的侧边栏标签云。

添加生成3D效果的脚本

将下载的3d.js脚本放到你的主题js目录中。
3d1.js下载 3d2.js下载
注:这个3D旋转标签云有两种效果的JS文件,你可以都试一下,选择一个你喜欢的效果,本站用的是第二种。
打开你的主题 functions.php 模板文件,引入js添加:

  1. wp_enqueue_script( '3d', get_template_directory_uri() . '/js/3d.js' );

或者直接将下面代码加到主题header模板

  1. <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/3d.js"></script>

从引入js的速度来说,建议还是第一种吧,可能这样速度会快点。

添加样式

  1. #tag_cloud-2 {
  2.     position:relative;
  3.     height:340px;
  4.     margin: 10px auto 0;
  5. }
  6. #tag_cloud-2 a {
  7.     position:absolute;
  8.     color: #fff;
  9.     text-align: center;
  10.     text-overflow: ellipsis;
  11.     whitewhite-space: nowrap;
  12.     top:0px;
  13.     left:0px;
  14.     padding: 3px 5px;
  15.     border: none;
  16. }
  17. #tag_cloud-2 a:hover {
  18.     background: #d02f53;
  19.     display: block;
  20. }
  21. #tag_cloud-2 a:nth-child(n) {
  22.     background: #666;
  23.     border-radius: 3px;
  24.     display: inline-block;
  25.     line-height: 18px;
  26.     margin: 0 10px 15px 0;
  27. }
  28. #tag_cloud-2 a:nth-child(2n) {
  29.     background: #d1a601;
  30. }
  31. #tag_cloud-2 a:nth-child(3n) {
  32.     background: #286c4a;
  33. }
  34. #tag_cloud-2 a:nth-child(5n) {
  35.     background: #518ab2;
  36. }
  37. #tag_cloud-2 a:nth-child(4n) {
  38.     background: #c91d13;
  39. }

修改对应选择器名称

比较麻烦点的是,其中 #tag_cloud-2 需根据不同情况加以修改,比如查看标签云小工具的网页源代码显示的是:

  1. <aside id="tag_cloud-3" class="widget widget_tag_cloud">
  2. <h2 class="widget-title">标签</h2>

你就需要将 #tag_cloud-2改为#tag_cloud-3,同时将3d.js中的tag_cloud-2也改为tag_cloud-3.
这个3D旋转标签云本身是支持低版本IE的,不过本例中配套的样式使用了CSS3特效,所以在低版本IE上标签背影色会不显示。
JS源代码:来自互联网

自定义WordPress 标签云小工具相关参数

如果你需要自定义标签云widget 小工具相关参数,比如说字体大小、显示顺序之类的,对于其默认参数必须有一定的认识。下面结合使用教程来进一步说明:
在主题的functions.php 文件下加入以下代码就可以自定义WordPress 标签云小工具相关参数:

  1. //custom widget tag cloud
  2. add_filter( 'widget_tag_cloud_args', 'theme_tag_cloud_args' );
  3. function theme_tag_cloud_args( $args ){
  4. 	$newargs = array(
  5. 		'smallest'    => 8,  //最小字号
  6. 		'largest'     => 22, //最大字号
  7. 		'unit'        => 'pt',   //字号单位,可以是pt、px、em或%
  8. 		'number'      => 45,     //显示个数
  9. 		'format'      => 'flat',//列表格式,可以是flat、list或array
  10. 		'separator'   => "\n",   //分隔每一项的分隔符
  11. 		'orderby'     => 'name',//排序字段,可以是name或count
  12. 		'order'       => 'ASC', //升序或降序,ASC或DESC
  13. 		'exclude'     => null,   //结果中排除某些标签
  14. 		'include'     => null,  //结果中只包含这些标签
  15. 		'link'        => 'view', //taxonomy链接,view或edit
  16. 		'taxonomy'    => 'post_tag', //调用哪些分类法作为标签云
  17. 	);
  18. 	$return = array_merge( $args, $newargs);
  19. 	return $return;
  20. }

上诉代码中的数组可适当取舍,如果要采用默认的参数,就可以将相关自定义的参数(数组)删除。

  1. 默认参数解析:
  2. smallest:标签文字最小字号,默认为8pt
  3. largest:标签文字最大字号,默认为22pt
  4. unit:标签文字字号的单位,默认为pt,可以为px、em、pt、百分比等;
  5. number:调用的标签数量,默认为45个,设置为“0”则调用所有标签;
  6. format:调用标签的格式,可选“flat”、“list”和“array”,默认为“flat”平铺,“list”为列表方式;
  7. orderby:调用标签的排序,默认为“name”按名称排序,“count”则按关联的文章数量排列;
  8. order:排序方式,默认为“ASC”按正序,“DESC”按倒序,“RAND”按任意顺序。
  9. exclude:排除部分标签,输入标签ID,并以逗号分隔,如“exclude=1,3,5,7”不显示ID为1357的标签;
  10. include:包含标签,与exclude用法一样,作用相反,如“include=2,4,6,8”则只显示ID为2468的标签。

这样就可以让你灵活的修改标签云的相关参数样式了。

如果你不想采用3D效果只想实现彩色标签云的话,建议您阅读:WordPress无插件实现主题彩色标签云的N种方法总结


发布日期:

所属分类: JavaScript/jquery, Wordpress 综合 标签: