WordPress 3D旋转标签云

发布时间:2012-08-20 3:55:06

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

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

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

一,添加生成3D效果的脚本

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

https://pan.baidu.com/s/1hqnP5TM

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

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

wp_enqueue_script( ‘3d’, get_template_directory_uri() . ‘/js/3d.js’ );
或者直接将下面代码加到主题header模板

<script type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?>/js/3d.js”></script>

二,添加样式

将下面的样式添加到主题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 需根据不同情况加以修改,比如查看标签云小工具的网页源代码显示的是:

<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上标签背影色会不显示。

相关文章

写给所有做网站的朋友的一封信

写给所有做网站的朋友的一封信

现在就开始执行“1+N”营销推广和没有开始执行的人,一两天看不出任何区别; 一两个月看来差异也是微乎其微的;但在2-5年的长远时间来看的时候,你的高质 量询盘不断增加,你的互联网资产已经建立完成,对手已经很难匹敌,现在你看到这段文字的时候就是最好的开始,现在就是最好的时候,马上开始“1+N”体系的整体营销推广吧,我们和你一起,开创互联网营销大未来!

点击查看详情

准备开启WordPress网站建设推广?

我们相信高端漂亮的网站不应该是昂贵的,这就是wordpress对每个人都是免费的原因
wordpress建站免费入门,并提供价格合理的wordpress建站套餐。