您现在的位置是:首页 > 网站制作 > WordpressWordpress
WordPress 3D旋转彩色标签云
杰帅2023-06-26【Wordpress】人已围观
简介彩色标签云为我们的网站标签文章导航方便了很多,修改默认的标签云样式是我们WORDPRESS爱好者必然追求的,如果加入3D旋转动画效果更是为我们的网站添彩不少,在知更鸟的网站看到了详细的介绍,但由于用的主题不一样,还是费力很大的时间才成功,在这里和大家一起分享,特别感谢知更鸟。
彩色标签云为我们的网站标签文章导航方便了很多,修改默认的标签云样式是我们WORDPRESS爱好者必然追求的,如果加入3D旋转动画效果更是为我们的网站添彩不少,在知更鸟的网站看到了详细的介绍,但由于用的主题不一样,还是费力很大的时间才成功,在这里和大家一起分享,特别感谢知更鸟。
具体效果看本文的侧边栏标签云。
一、添加生成3D效果的脚本
将下载的3d.js脚本放到你的主题js目录中。
3d1.js下载 3d2.js下载
注:这个3D旋转标签云有两种效果的JS文件,你可以都试一下,选择一个你喜欢的效果,本站用的是第二种。
打开你的主题 functions.php 模板文件,引入js添加:
wp_enqueue_script( '3d', get_template_directory_uri() . '/js/3d.js' );
或者直接将下面代码加到主题header模板
从引入js的速度来说,建议还是第一种吧,可能这样速度会快点。
二、添加样式
#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 需根据不同情况加以修改,比如查看标签云小工具的网页源代码显示的是:
标签
你就需要将 #tag_cloud-2改为#tag_cloud-3,同时将3d.js中的tag_cloud-2也改为tag_cloud-3.
这个3D旋转标签云本身是支持低版本IE的,不过本例中配套的样式使用了CSS3特效,所以在低版本IE上标签背影色会不显示。
JS源代码:来自互联网
四、自定义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的标签。
这样就可以让你灵活的修改标签云的相关参数样式了。
如果你不想采用3D效果只想实现彩色标签云的话,建议您阅读:WordPress无插件实现主题彩色标签云的N种方法总结
Tags:wordpress教程 小工具 标签云
很赞哦! ()
相关文章
随机图文
-
wordpress发布文章HTML标签被自动过滤掉该如何处理?
wordpress发布文章时很多html标签都会自动过滤掉,造成了文章中无法添加<style></style><script></script>等标签。那么该如何如何处理呢? 解决方法一: 将wp-includes文件夹下 -
WordPress 页面模板(Page Template)下拉列表不显示的原因及解决方法
WordPress 的自定义页面模板是一个非常强大好用的功能,使用它新建一些静态页面(Page),添加上一些数据调用的函数,再在网页上做一个导航连接到对应的页面就可以实现很多自定义的功 -
wp_reset_postdata 和 wp_reset_query 的作用与区别
什么时候使用wp_reset_query,什么时候用wp_reset_postdata? -
wordpress 上传的图片不显示的问题 base64,data:image/gif
文章评论
本站推荐
标签云
猜你喜欢
- 做外贸,知道这些外贸搜索引擎的搜索指令你就牛了
- WordPress过滤器(Filters):apply_filters和add_filter 用法和实例
- WordPress网站重复内容的SEO优化终极教程
- 加密隐藏WordPress后台登录地址后忘记路径怎么办?
- SEO江湖传言,共同引用有利于SEO,真的吗?
- Elementor与Visual Composer在WooCommerce上的速度测试对比
- WordPress搜索结果怎么屏蔽Page页面和指定分类
- WordPress性能优化
- Speed Index速度指数:什么是速度指数以及如何优化你的WordPress网站
- 如何修复WordPress 429太多请求错误