WordPress右侧边栏添加彩色标签

摘要:

玩WordPress建博客的朋友都知道标签的重要性,虽然知更鸟的Begin主题自动了非常不错的3D动态标签,不过仍然有人喜欢静态的标签,不过我今天给大家推荐的《右侧边栏添加彩色标签 —— WordPress美化》是由侍魂部落站长爱都娱乐编写的代码。

1、代码部署

风格一、凌乱派

WordPress右侧边栏添加彩色标签

[wm_red]<script type=”text/javascript”>box_width=$(“#cx_tag_cloud-4”).width();len=$(“.tagcloud a”).length-1;$(“.tagcloud a”).each(function(i){var let=new Array(‘c3010a’,’31ac76′,’ea4563′,’31a6a0′,’8e7daa’,’4fad7b’,’f99f13′,’f85200′,’666666′);var random1=Math.floor(Math.random()*9)+0;var num=Math.floor(Math.random()*6+9);$(this).attr(‘style’,’background:#’+let[random1]+”);if($(this).next().length>0){last=$(this).next().position().left}});</script>
<style type=”text/css”>.tagcloud a{color:#fff;}#php_text-24{display:none;}</style>[/wm_red]

风格二、正经派

WordPress右侧边栏添加彩色标签

[wm_red]<script type=”text/javascript”>box_width=$(“#cx_tag_cloud-4”).width();len=$(“.tagcloud a”).length-1;$(“.tagcloud a”).each(function(i){var let=new Array(‘c3010a’,’31ac76′,’ea4563′,’31a6a0′,’8e7daa’,’4fad7b’,’f99f13′,’f85200′,’666666′);var random1=Math.floor(Math.random()*9)+0;var num=Math.floor(Math.random()*6+9);$(this).attr(‘style’,’background:#’+let[random1]+”);if($(this).next().length>0){last=$(this).next().position().left}});</script>
<style type=”text/css”>
.tagcloud a{color:#fff;}
#php_text-24{display:none;}
.tagcloud {padding: 10px 0 10px 10px;}.tagcloud a {padding-right:5px;
padding-left:5px;
overflow:hidden;
display:block;
width:92px;
height:28px;}
</style>[/wm_red]

风格三、圆角型

WordPress右侧边栏添加彩色标签

将上述随意一串代码按照下述安装方法

鼠标右键标签审查元素-然后找到控制的CSS元素,

WordPress右侧边栏添加彩色标签

然后进入后台主题-找到assets文件夹里app.css

快速查找.widget_tag_cloud .tagcloud>a

WordPress右侧边栏添加彩色标签

红圈里面的代码改为20px;将会变为椭圆型

 

2、使用方法:

1、后台→外观→小工具→选择正文侧边栏,然后从左边拖拽:热门标签(小工具)放到正文侧边栏下面,显示数量33(凌乱派风格随便填,正经派建议是3的倍数,多少自己看着舒服就OK)

2、再从左边拖拽:增强文本(小工具)放到刚刚的”热门标签”下方。标题命名:彩色标签,然后复制上方任一风格的代码,放到”增强文本”(小工具)的内容框里面OK。

3、注意事项:有细心的站长会发现,使用后在热门标签下方会有个细长的白色框框(就是刚刚的”增强文本”小工具),怎么隐藏呢?

接着看图:

WordPress右侧边栏添加彩色标签

如图所示,在这个”增强文本”小工具上面右键,然后点击”审查元素”

WordPress右侧边栏添加彩色标签

找到图中红色框中的ID(就是”增强文本”小工具的区位ID),复制下来,换掉上述2个风格代码中的红色部分php-text-24就OK啦!

 

 

 

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务