这个3D标签云可不是N年前的那个Flash版的 wp-cumulus, 这个3D旋转标签云完全使用JS代码编写,很小只有几K,不用担心像垃圾Flash对资源的耗费。

下面以WordPress默认主题Twenty Fifteen为例,将这个炫酷的特效加到你的博客上。

添加生成3D效果的脚本

将下载的3d.js脚本放到Twenty Fifteen主题js目录中。

3d效果一下载

3d效果二下载

注:这个3D旋转标签云有两种效果的JS文件,我用的是第二种。

打开Twenty Fifteen主题 functions.php 模板文件,在大约252行,添加:

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>

添加样式

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

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
#tag_cloud-2 {
position:relative;
height:340px;
margin10px auto 0;
}
#tag_cloud-2 a {
position:absolute;
color#fff;
text-align: center;
text-overflow: ellipsis;
whitewhite-space: nowrap;
top:0px;
left:0px;
padding3px 5px;
border: none;
}
#tag_cloud-2 a:hover {
background#d02f53;
display: block;
}
#tag_cloud-2 a:nth-child(n) {
background#666;
border-radius3px;
display: inline-block;
line-height18px;
margin0 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;
}

修改对应选择器名称

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

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

你就需要将 #tag_cloud-2改为#tag_cloud-3,同时将3d.js中的tag_cloud-2也改为tag_cloud-3

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

JS源代码:来自互联网

文章转自:http://zmingcx.com/WordPress-3dcumulus.html