WordPress 添加3D旋转彩色标签云

热门标签

, , , , , , , , , , , , , , , , , , , , , , , , , , , ,

@西城知道

知道君想做你的男闺蜜,和你聊聊情感、风月、人间事,以及生活的一点趣致...

前往微博

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

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

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

WordPress 添加3D旋转彩色标签云

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

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

WordPress 添加3D旋转彩色标签云

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

WordPress 添加3D旋转彩色标签云

一,添加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 模板文件里,添加如下代码

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

二,添加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 cloudadd_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

本文最后更新于2018年7月21日,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言xichengyouju#163.com(#换成@)反馈,我们会及时处理,谢谢!

未经允许不得转载:作者:知道君, 转载或复制请以 超链接形式 并注明出处 夏末浅笑
原文地址:《WordPress 添加3D旋转彩色标签云》 发布于2018-07-21

分享到:
赞(0) 喝一杯咖啡

评论 抢沙发

评论前必须登录!

  注册



觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

下载说明
评论下载是需要人工审核后才能下载的!!!建议QQ授权登录后再评论。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册