WordPress修改右侧边栏彩色标签为固定显示

2017年11月30日21:33:00 96 10K 1635字阅读5分27秒
摘要

玩WordPress建博客的朋友都知道标签的重要性,虽然知更鸟的Begin主题自带了非常不错的3D动态标签,不过仍然有人喜欢静态的标签,今天给大家推荐的是由仙踪小栈改编的侍魂部落站长爱都娱乐编写的代码。

1、代码部署:

风格一、凌乱派

WordPress修改右侧边栏彩色标签为固定显示

代码如下:

  1. <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>
  2. <style type="text/css">.tagcloud a{color:#fff;}#php_text-3{display:none;}</style>

风格二、正经派

WordPress修改右侧边栏彩色标签为固定显示

代码如下:

  1. <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>
  2. <style type="text/css">
  3. .tagcloud a{color:#fff;}
  4. #php_text-3{display:none;}
  5. .tagcloud {padding: 10px 0 10px 10px;}.tagcloud a {padding-right:5px;
  6. padding-left:5px;
  7. overflow:hidden;
  8. display:block;
  9. width:92px;
  10. height:28px;}
  11. </style>

2、使用方法:

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

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

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

3、注意事项:

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

接着看图:WordPress修改右侧边栏彩色标签为固定显示

如图所示,在这个“增强文本”小工具上面右键,然后点击“审查元素”WordPress修改右侧边栏彩色标签为固定显示

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

改好的如下图:(不显示标题是不用划√的,博主此处弄错误了!)WordPress修改右侧边栏彩色标签为固定显示

 

继续阅读
weinxin
星光博客 站长语录
星光博客,欢迎各位来访!这是我的QQ,扫一扫,加好友。大家一起交流博客建站技术,分享前沿资讯!
知更鸟主题小功能之一:文章添加宽图 WordPress

知更鸟主题小功能之一:文章添加宽图

知更鸟主题小功能之一:文章添加宽图 1、进入文章编辑器,打开“短代码”,找到“综合功能”后选择“添加宽图”。 2、在代码中间位置点击下,插入“媒体文件”。 3、把文章标题复制到“说明”里面。 4、添加...
漂亮的音乐播放器插件Aplayer 资源分享

漂亮的音乐播放器插件Aplayer

Aplayer是一款HTML5的WordPress音乐播放器,界面仿照网易云音乐外链播放器,每个音乐需要填写音乐名称、作者、音乐封面、还有外链地址,添加成功后在音乐列表右侧复制短代码到文章需要显示的位...
知更鸟主题添加设置导航菜单方法 WordPress

知更鸟主题添加设置导航菜单方法

主题支持四个菜单(主要菜单、顶部菜单、移动端菜单和移动端页脚菜单),菜单操作使用方法: 进入WP后台→外观→菜单,点击创建新菜单。 首先输入一个菜单名称,并保存菜单。 菜单支持添加单篇文章、分类、标签...
匿名

发表评论

匿名网友 填写信息

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

评论:96   其中:访客  86   博主  10
    • 大锐锐 大锐锐 2 来自天朝的朋友 谷歌浏览器 Mac OS X 10_15_3 北京市海淀区 联通

      正好需要 正好需要

      • 十四 十四 0 来自天朝的朋友 谷歌浏览器 Windows 10 北京市 移动

        不错,想搞代码玩一下

        • aisney aisney 1 来自天朝的朋友 谷歌浏览器 Windows 7 广东省东莞市 电信

          彩色风格确实有点杀马特,你这个改的我喜欢

          • 分隔符 分隔符 0 来自天朝的朋友 谷歌浏览器 Windows 7 福建省厦门市 移动

            很好的 内容 找了很久

            • 街灯-背影 街灯-背影 0 来自天朝的朋友 谷歌浏览器 Windows 7 安徽省黄山市 电信

              谢谢谢谢谢谢

              • .苦往心里藏 .苦往心里藏 1 来自天朝的朋友 谷歌浏览器 Windows 7 甘肃省武威市 电信

                谢谢正需要!

                • .苦往心里藏 .苦往心里藏 1 来自天朝的朋友 谷歌浏览器 Windows 7 甘肃省武威市 电信

                  逛吃www.wuweishi.com