WordPress美化右侧边栏彩色标签为固定显示

  • 2
  • 261 views

经常用织梦建站和zblog建站的朋友们可能没那么了解网站标签的作用,但经常用WordPress主题建站的朋友,想必都很清楚标签的重要性。分类标签可以用来帮助梳理文章的,它的根本目标都是把文章进行分类,进而提高网站的易用性,间接点来说可以帮我们很快的找到我们想要的内容。

虽然知更鸟的Begin主题自带了非常不错的3D动态标签,包括叶忠文也不例外,不然也不会在建站后的第一件事就将3D标签添加在首页右侧。但尽管如此,还是有人喜欢静态标签,机缘巧合之下我也在星光博客老哥站内找到了这个实为罕见的教程,着实不易啊!

刚开始以为凭借着自己的小聪明应该很快就能够搞定,想不到实不为然,在折腾了许久之后,还是得麻烦星光老哥的一一指点才能得大功告成。在这里真的要感谢下这位乐于助人的老哥,虽说对于3D动态标签十分喜爱,但静态标签同样也让我爱不释手。

今天就借花献佛,从老哥那偷过来给大家推荐此番教程。其实这静态标签分为两种,一种问凌乱派,一种则为正经派。大家可根据自己的喜好进行增加,先来看凌乱派吧!

凌乱派展示

WordPress美化右侧边栏彩色标签为固定显示

凌乱派代码

<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-3{display:none;}</style>

 

正经派展示

WordPress美化右侧边栏彩色标签为固定显示

正经派代码

<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-3{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>

使用方法

1.首先之前开启了3D标签的,先去后台→外观→主题选项→基本设置,取消3D标签。或在“热门标签”下面的“显示3D特效”。

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

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

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

紧接着看下图:

WordPress美化右侧边栏彩色标签为固定显示

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

WordPress美化右侧边栏彩色标签为固定显示

找到图中红色框中的ID(就是“增强文本”小工具的区位ID),复制下来,换掉上述2个风格代码中的红色部分php-text-3就没问题啦!改好的如下图:(不显示标题是不用划√的,博主此处弄错误了!)

WordPress美化右侧边栏彩色标签为固定显示

其实凌乱派也好,正经派也好,最重要的是自己喜欢,各有各的风格。再有,不建议标签拉的太长,保持在30-40个标签之内最佳!

继续阅读
叶先生
  • 版权声明: 发表于 2019年6月26日08:32:03
  • 转载注明:https://www.japanren.com/1421.html
如何给WordPress博客添加评论输入特效 wordpress主题

如何给WordPress博客添加评论输入特效

人都是比较喜欢炫酷的东西,今天要分享的这个教程是针对于WordPress主题的,可以让我们在日后的内容评论里看到一个输入特效。今天在闲鱼博客里面看到这个教程觉得挺不错的,所以今天就借花献佛的分享给广大...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:2   其中:访客  1   博主  1
    • 仙踪小栈 仙踪小栈 来自天朝的朋友 谷歌浏览器 Windows 7 安徽省淮北市 电信 @回复 2

      下面的截图竟然是我的 :grin:

        • Joson Joson 博主 来自天朝的朋友 火狐浏览器 Windows 7 广东省东莞市 电信 @回复

          @仙踪小栈 这个我是在星光博客老哥那找到的