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

2019年6月26日08:32:03 4 509 views 2106字阅读7分1秒

经常用织梦建站和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
如何为WordPress主题添加文章字数和阅读时间 WordPress

如何为WordPress主题添加文章字数和阅读时间

折腾的路上永不止,很奇怪对于一篇文章内的字数和阅读时间有啥用呢,这我也不知道,也不敢问。不过有朋友说人家的主题里都有,叶先生你知道怎么加一个吗?说实话我是不知道的,不过在鸟叔这里看到了这个教程,所以今...
WordPress如何设置只允许游客浏览指定的分类文章 WordPress

WordPress如何设置只允许游客浏览指定的分类文章

有朋友会问,WordPress如何设置只允许游客浏览指定的分类文章,因为有些分类的文章我不想未登录的用户能够浏览。 不知道是心里作怪,还是好奇心里,感叹这个世界奇葩的人还真不少,不过能有什么办法呢,谁...
如何判断网站是否采用织梦Dedecms搭建 网站建设

如何判断网站是否采用织梦Dedecms搭建

今天有朋友来问叶先生,怎么才能够知道一个网站是否采用织梦Dedecms搭建。坦白说,这个不算太高深的技术,一是凭自己的建站经验,二来是从中看一些细节。只要稍微熟悉一点dedecms的站长或者技术人员都...
用PhpStudy如何在本地搭建WordPress WordPress

用PhpStudy如何在本地搭建WordPress

以前在还没用WordPress建站的时候一直想进行尝试,但后面发现不会在本地搭建,只能够购买域名和服务器进行搭建。但是因为网站上线之初因胡乱修改网站版面,导致网站整体崩溃无法进行恢复,所以只能选择删库...
匿名

发表评论

匿名网友 填写信息

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

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

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

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

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

        • Lvtu Lvtu 来自天朝的朋友 Safari浏览器 Mac OS X 10_15_2 中国 移动 4

          这种直接用 CSS 就可以更完美解决【使用nth-child()选择器)】。。。 :razz:

            • 叶先生 叶先生 来自天朝的朋友 火狐浏览器 Windows 10 广东省深圳市宝安区 电信

              回复 Lvtu 有些时候还是有一些代码要处理好,不然还是会有bug