WordPress 添加3D旋转彩色标签云-夏末浅笑

彩色标签云，为我们的网站标签、文章、导航等增色许多，动态炫酷的效果。

修改默认标签云样式是WordPress爱好者必然的追求，如果加入3D旋转动画效果更是为我们的网站添彩不少，

在知更鸟的网站看到了详细的介绍，但由于用的主题不一样，还是费力很大的时间才成功，在这里和大家一起分享

这个3D旋转标签云完全使用JS代码编写，很小只有几K，不用担心像垃圾Flash对资源的耗费。

静态标签云演示：程序猫博客

动态标签云演示：蚂蚁博客

一，添加3D效果的JS脚本

1）下载 js

将下载的3d-tags-cloud.js脚本放到officefolders主题 /officefolders/script/ 目录中。

3d-tags-cloud.js下载：3d-tags-cloud.js.tar.gz

注：这个3D旋转标签云有两种效果的JS文件，可自行选择使用第一种还是第二种效果。

2）修改主题的 functions.php 模板文件

打开officefolders主题 functions.php 模板文件

cd wp-content/themes/officefolders/
vim functions.php

添加代码如下：

// add 3D tags cloud
wp_enqueue_script('3d',get_template_directory_uri().'/scripts/3d_style_1.js');

或者直接在主题 header.php 模板文件里，添加如下代码

二，添加3D效果的CSS样式

将下面的样式添加到主题style.css最后

vim style.css

#tag_cloud-2 {
    position:relative;
    height:340px;
    margin: 10px auto 0;
}
#tag_cloud-2 a {
    position:absolute;
    color: #fff;
    text-align: center;
    text-overflow: ellipsis;
    whitewhite-space: nowrap;
    top:0px;
    left:0px;
    padding: 3px 5px;
    border: none;
}
#tag_cloud-2 a:hover {
    background: #d02f53;
    display: block;
}
#tag_cloud-2 a:nth-child(n) {
    background: #666;
    border-radius: 3px;
    display: inline-block;
    line-height: 18px;
    margin: 0 10px 15px 0;
}
#tag_cloud-2 a:nth-child(2n) {
    background: #d1a601;
}
#tag_cloud-2 a:nth-child(3n) {
    background: #286c4a;
}
#tag_cloud-2 a:nth-child(5n) {
    background: #518ab2;
}
#tag_cloud-2 a:nth-child(4n) {
    background: #c91d13;
}

三、添加3D效果的标签云函数样式

打开侧边栏的 sidebar.php 模板文件，编辑结果如下：

vim sidebar.php

<li class="widget" id="tags"><h3><?php //_e('Tagcloud'); ?> 标签云</h3>
    <aside id="tag_cloud-2" class="widget widget_tag_cloud">
    <?php wp_tag_cloud('smallest=8&largest=22&number=50&orderby=count'); ?>
</li>

四、修改css标签名称

步骤三中的 id="tag_cloud-2" 标签名称，需要跟步骤二中的 style.css 文件里的 #tag_cloud-2 对应，以及还需要跟步骤一中的 scripts/3d_style_1.js文件内容 oDiv=document.getElementById('tag_cloud-2'); 对应，三者的class名称要完全一致。

比如查看标签云小工具的网页源代码显示的是：

<li class="widget" id="tags"><h3><?php //_e('Tagcloud'); ?> 标签云</h3>
    <aside id="tag_cloud-2" class="widget widget_tag_cloud">
    <?php wp_tag_cloud('smallest=8&largest=22&number=50&orderby=count'); ?>
</li>

说明：

如果要修改将 #tag_cloud-2改为#tag_cloud-3，则需要同时将 scripts/3d_style_1.js 中的style.css文件中的 id="tag_cloud-2" 都修改为tag_cloud-3

这个3D旋转标签云本身是支持低版本IE的，不过本例中配套的样式使用了CSS3特效，所以在低版本IE上标签背影色会不显示。

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

如果需要自定义标签云widget 小工具相关参数，比如说字体大小、显示顺序之类的，对于其默认参数必须有一定的认识。下面结合使用教程来进一步说明：

在主题的functions.php 文件下加入以下代码就可以自定义WordPress 标签云小工具相关参数：

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

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

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

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

参考推荐：

WordPress 3D旋转彩色标签云

WordPress 3D旋转标签云

WordPress 标签云插件WP-Cumulus

WordPress 标签云函数：wp_tag_cloud

文章版权归作者所有，未经允许请勿转载。

THE END