服务器与VPS
促销优惠信息

wordpress侧边栏3D标签云代码改造 网站动态标签云效果

查看目录
文章目录隐藏
  1. 一、改造CSS代码:
  2. 二、配置JS脚本:
  3. 三、代码修改:
  4. 四、标签云参数设置:

一个好看的动态标签云效果可以让网站页面灵动起来,除了美观还可以吸引用户点击,引导用户尽可能多的浏览网页,降低跳出率对于网站优化也有一定的好处。那么我们怎么让自己的网站拥有这个功能呢?今天就分享WordPress标签云3d旋转效果代码。

一、改造CSS代码:

将下面的代码加入主题的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;
}

二、配置JS脚本:

1、下载文件包,并将JS文件上传到主题的JS文件夹,两种效果任选其一。

3D标签云效果1: https://pan.baidu.com/s/1pKEyfffNJw1JOowl2P1BKA?pwd=qkpp 提取码: qkpp 复制这段内容后打开百度网盘手机App,操作更方便哦

3D标签云效果2:链接: https://pan.baidu.com/s/13asLpvcAtIzLjq25qnLbJw?pwd=gutv 提取码: gutv 复制这段内容后打开百度网盘手机App,操作更方便哦

2、引入JS文件

将下面代码放入主题文件header.php文件中:

<script type="text/javascript" src="<?php%20bloginfo('template_directory');%20?>/js/3d.js"></script>

也可以将下面代码放入主题 functions.php 模板文件

wp_enqueue_script( '3d', get_template_directory_uri() . '/js/3d.js' );

两个旋转标签云效果可以任选其一。

三、代码修改:

代码中的 #tag_cloud-2 需根据不同情况加以修改,比如查看标签云小工具的网页源代码显示的是:

<aside id="tag_cloud-3" class="widget widget_tag_cloud">
<h2 class="widget-title">标签</h2>

你就需要将 CSS代码中的#tag_cloud-2改为#tag_cloud-3,同时将3d.js中的tag_cloud-2也改为tag_cloud-3。

四、标签云参数设置:

有时候我们需要对标签云显示效果做一些修改,比如说标签字体大小、显示顺序之类的,在主题的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主题美化用自定义代码实现彩色标签云

发布时间:     阅读(351)

本文代码来源:https://zmingcx.com/wordpress-3dcumulus.html

楚狂人 » wordpress侧边栏3D标签云代码改造 网站动态标签云效果

相关推荐

  • 暂无文章

评论 抢沙发

  • (必填)
  • (必填)

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

非常感谢你的打赏,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏