这个3D标签云可不是N年前的那个Flash版的 wp-cumulus, 这个3D旋转标签云完全使用JS代码编写,很小只有几K,不用担心像垃圾Flash对资源的耗费。
具体效果看本文的侧边栏标签云。
下面以WordPress默认主题Twenty Fifteen为例,将这个炫酷的特效加到你的博客上。
一,添加生成3D效果的脚本
将下载的3d.js脚本放到Twenty Fifteen主题js目录中。
3d.js下载
打开Twenty Fifteen主题 functions.php 模板文件,在大约252行,添加:
wp_enqueue_script('3d',get_template_directory_uri().'/js/3d.js');
或者直接将下面代码加到主题header模板
二,添加样式
将下面的样式添加到主题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;
}
三、修改对应选择器名称
比较麻烦点的是,其中 #tag_cloud-2 需根据不同情况加以修改,比如查看标签云小工具的网页源代码显示的是:
id=”tag_cloud-3″>class=”widgetwidget_tag_cloud”>
标签
你就需要将
#tag_cloud-2
改为#tag_cloud-3>