Products
GG网络技术分享 2025-03-18 16:14 2
如果大家有关注知更鸟的博主们都知道，前阵子知更鸟大神分享了一个WordPress添加3D旋转标签云的JS文件和具体的添加办法，所以今天趁着有空我也把这个3D旋转标签云添加到Three主题中测试，现分享具体的操作步骤:
1、将下面的3d.js脚本下载放到Three主题js目录中，即Three\\js。
下载地址
2、删除Three主题 functions.php 模板文件的彩色标签云代码，即删除473至485行。
3、打开Three主题 functions.php 模板文件，在大约260行，添加：
wp_enqueue_script( \'3d\', get_template_directory_uri() . \'/js/3d.js\' );
或者直接将下面代码加到主题header.php的34行上面。
<script type=\"text/javascript\" src=\"<?php bloginfo(\'template_directory\'); ?>/js/3d.js\"></script>
4、登录WordPress后台》外观》小工具》添加“标签云”小工具到指定侧边栏（如首页侧边栏），然后鼠标对着侧边栏的这个标签云小工具右键》查看元素（360浏览器，其他应该差不多）》在浏览器最下方就可以看到这个小工具的名称为：tag_cloud-4。
5、将下面的样式添加到主题style.css的最后即可（PS：如果第3步得到的小工具名称不是4，而是其他数字，则修改CSS代码中相应的数字即可）：
/** 3D旋转标签云 **/
#tag_cloud-4 {
position:relative;
height:340px;
margin: 10px auto 0;
}
#tag_cloud-4 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-4 a:hover {
background: #d02f53;
display: block;
}
#tag_cloud-4 a:nth-child(n) {
background: #666;
border-radius: 3px;
display: inline-block;
line-height: 18px;
margin: 0 10px 15px 0;
}
#tag_cloud-4 a:nth-child(2n) {
background: #d1a601;
}
#tag_cloud-4 a:nth-child(3n) {
background: #286c4a;
}
#tag_cloud-4 a:nth-child(5n) {
background: #518ab2;
}
#tag_cloud-4 a:nth-child(4n) {
background: #c91d13;
}
6、将3d.js文件19行的tag_cloud-2也改为tag_cloud-4即可（PS：如果第3步得到的小工具名称不是4，而是其他数字，则修改CSS代码中相应的数字即可）。
至此，Three主题已经成功添加了3D旋转标签云。不过这个只能添加到首页侧边栏或日志页侧边栏，如果想让这个标签云同时出现在首页和日志页侧边栏，我们还需要添加一个公共侧边栏，步骤如下：
1、打开Three主题 functions.php 模板文件，在48行后面添加以下代码：
register_sidebar( array(
\'name\' => \'公共侧边栏\',
\'id\' => \'sidebar-6\',
\'description\' => \'整站小工具\',
\'before_widget\' => \'<aside id=\"%1$s\" class=\"widget %2$s\">\',
\'after_widget\' => \'<div class=\"clear\"></div></aside>\',
\'before_title\' => \'<h3 class=\"widget-title\"><span class=\"cat\">\',
\'after_title\' => \'</span></h3>\',
) );
2、打开Three主题 sidebar.php 模板文件，在13行后面添加以下代码：
<?php dynamic_sidebar( \'sidebar-6\' ); ?>
3、将刚才在后台》外观》小工具添加的“标签云”拖到“公共侧边栏”即可实现整站显示3D旋转标签云。
彩色标签云我们在很多的网站都可以看到此类效果，这里就来实现wordpress增加彩色标签云效果。
这种彩色标签云效果可以通过修改Simple Tags来显示。
1.在simple-tags.client.php中先找到如下代码:
| function getColorByScale($scale_color, $min_color, $max_color) |
2.注释掉（或者删除）getColorByScale这个function中的以下语句：
| $scale_color = $scale_color / 100; $minr = hexdec(substr($min_color, 1, 2)); $ming = hexdec(substr($min_color, 3, 2)); $minb = hexdec(substr($min_color, 5, 2)); $maxr = hexdec(substr($max_color, 1, 2)); $maxg = hexdec(substr($max_color, 3, 2)); $maxb = hexdec(substr($max_color, 5, 2)); $r = dechex(intval((($maxr - $minr) * $scale_color) + $minr)); $g = dechex(intval((($maxg - $ming) * $scale_color) + $ming)); $b = dechex(intval((($maxb - $minb) * $scale_color) + $minb)); |
3.加上以下代码:
| //Colorful Tag Cloud start $r = dechex(rand(0,255)); $g = dechex(rand(0,196)); $b = dechex(rand(0,255)); |
Colorful Tag Cloud end至于要显示多少个标签，怎么排列，热门标签和普通标签分别为多少大小的字体，可以在后台的Simple Tags的选项中设置。
以上就是WordPress如何实现彩色标签云的详细内容，更多请关注网站的其它相关文章！
Demand feedback
