【WordPress】3D旋转彩色标签云
彩色标签云为我们的网站标签文章导航方便了很多,修改默认的标签云样式是我们WORDPRESS爱好者必然追求的,如…
彩色标签云为我们的网站标签文章导航方便了很多,修改默认的标签云样式是我们WORDPRESS爱好者必然追求的,如果加入3D旋转动画效果更是为我们的网站添彩不少,在知更鸟的网站看到了详细的介绍,但由于用的主题不一样,还是费力很大的时间才成功,在这里和大家一起分享
这个3D标签云可不是N年前的那个Flash版的 wp-cumulus, 这个3D旋转标签云完全使用JS代码编写,很小只有几K,不用担心像垃圾Flash对资源的耗费。
具体效果看本文的侧边栏标签云。
下面以WordPress默认主题Twenty Fifteen为例,将这个炫酷的特效加到你的博客上。
一,添加生成3D效果的脚本
将下载的3d.js脚本放到Twenty Fifteen主题js目录中。
下载地址:http://download.csdn.net/detail/xiaokui_wingfly/9496992
注:这个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上标签背影色会不显示。
四、自定义WordPress 标签云小工具相关参数
如果你需要自定义标签云widget 小工具相关参数,比如说字体大小、显示顺序之类的,对于其默认参数必须有一定的认识。下面结合使用教程来进一步说明:
在主题的functions.php 文件下加入以下代码就可以自定义WordPress 标签云小工具相关参数:
//custom widget tag cloud add_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的标签。
这样就可以让你灵活的修改标签云的相关参数样式了。
教程视频:http://www.ibloger.net/article/1343.html
记得订阅哦,谢谢
以上代码步骤来自互联网摘录
本文收集自互联网,转载请注明来源。
如有侵权,请联系 wper_net@163.com 删除。
评论功能已经关闭!