WordPress 3D旋转标签云
发布于
by
这个3D标签云可不是N年前的那个Flash版的 wp-cumulus， 这个3D旋转标签云完全使用JS代码编写…
这个3D标签云可不是N年前的那个Flash版的 wp-cumulus， 这个3D旋转标签云完全使用JS代码编写，很小只有几K，不用担心像垃圾Flash对资源的耗费。
具体效果看本文的侧边栏标签云。
下面以WordPress默认主题Twenty Fifteen为例，将这个炫酷的特效加到你的博客上。
一，添加生成3D效果的脚本
将下载的3d.js脚本放到Twenty Fifteen主题js目录中。
3d.js下载
注：这个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上标签背影色会不显示。
JS源代码：来自互联网
类别：WordPress入门、
本文收集自互联网，转载请注明来源。
如有侵权，请联系 wper_net@163.com 删除。
还没有任何评论，赶紧来占个楼吧！