WordPress无插件+带优化教程实现主题颜色标签云的两种方法

郑重承诺丨优站网提供安全交易、信息保真!
增值服务:
自动发货
网盘下载
安装指导
环境配置
二次开发
网站建设
¥ 0 (VIP免费升级VIP开通VIP尊享优惠特权
立即下载 升级会员 购买教程 售后支持
详情介绍

如果你急于给自己的主题添加WordPress颜色标签云,可以跳过前面的技术概述,直接跳到最后用php实现WordPress颜色标签云的方法

从WordPress版本开始,使用wp_tag_cloud函数调用文章标签显示列表。WP博主可以轻松设置wp_tag_cloud功能的标签参数属性,实现标签的多样化显示。相信大家都见过各种五颜六色的标签云,但是我们以前做标签字体颜色。今天,我们将与您分享如何自定义标签的背景颜色。

WordPress无插件+带优化教程实现主题颜色标签云的两种方法

实现方法:
想要实现多彩的WP标签云背景,方法有很多,包括jscss、php。今天,我们介绍css和php:

利用css实现彩色标签云背景色
这个方法是由css的:第n个子伪类实现的。

php中随机标签云背景色的实现
该方法通过与wp关联的php内置的wp_tag_cloud函数来调整wp的默认参数,实现随机标记云背景色,使用灵活,可自定义颜色范围。

评价:使用方便,设置简单,随机显示。

看完这两种方法的介绍,可以根据自己网站的实际情况选择适合自己的方法。接下来,为了方便大家,我将这两种方法的实现步骤写出来。

怎么叫标签云?
生成标记云我们可以使用WP的内置函数wp_tag_cloud($args),如下所示:

<aside class="tags"><?php wp_tag_cloud('smallest=12&largest=12&number=45&order=DESC'); ?></aside>

Smash = 12定义标签云的最小字体;
最大=12定义标签云的最大字体;
Number=45定义要显示的数字;
Order=DESC定义了标签云的排序方法;
如果在使用过程中不需要随机的字体大小,我们可以将最小和最大的值设置为相同。

一种利用CSS实现彩色背景标签云方法
我们先来看看WP生成的标签的html格式:

<aside class="tags">
        <a href="http://www.zhanceo.com/wp-pic/tag/chagnfa/">长发美女</a>
        <a href="https://www.zhanceo.com/wp-pic/tag/xiaohua/">校花美女</a>
        <a href="https://www.zhanceo.com/wp-pic/tag/keting/">客厅</a>
</aside>

有了上面的格式,我们可以得出结论,用css实现标签云的多彩背景是通过控制标签选择器下的A标签来实现的,然后结合前面提到的:第n个子伪类就可以实现这个功能。

实现代码

/* 定义 标签云a标签的通用属性*/
.tags a{color: #fff;background-color: #428BCA;display: inline-block;margin: 0 5px 5px 0;padding: 0 6px;line-height: 21px}
/* 使用nth-child定义 标签云每个a标签的独立属性*/
.tags a:nth-child(9n){background-color: #4A4A4A;}
.tags a:nth-child(9n+1){background-color: #428BCA;}
.tags a:nth-child(9n+2){background-color: #5CB85C;}
.tags a:nth-child(9n+3){background-color: #D9534F;}
/* 定义标签云鼠标经过a标签的属性*/
.tags a:hover{opacity: 1;filter:alpha(opacity=100);}

代码描述:

标签a:第n个子标签(9n)是WP标签云中第一个标签的背景颜色,然后。标签a:第n个子标签(9n+2)是第二个标签的背景颜色,依此类推。

所以我们得出一个结论,那就是我们必须定义。标记a:第n个子(9n+n)属性的次数与我们生成的次数一样多,这降低了灵活性。

一种在php中实现彩色背景标签云方法
这个方法比较简单,就是根据代码的不同,通过一个php部分来控制生成标签云时WP使用什么格式:

/* 彩色静态标签云 Color Tag Cloud 
/* -------------------------------- */
function colorCloud($text) {
  $text = preg_replace_callback('|<a (.+?)>|i', 'colorCloudCallback', $text);
  $text=preg_replace('/<a /','<a ',$text);
  return $text;
}
function colorCloudCallback($matches) {
  $text = $matches[1];
//这里定义我们背景色的范围,如果不想设置背景色的输出范围我们可以使用
//$color = dechex(rand(0,16777215));从所有颜色中随机出一个
  $a = array('8D7EEA','F99FB2','AEE05B','E8D368','F75D78','55DCAB','F75DB1','ABABAF','7EA8EA');
  $co = array_rand($a,2);
  $color = $a[$co[0]];
//随机颜色代码结束,下面开始吧颜色赋值给每个标签生成背景色
  $pattern = '/style=(\'|\")(.*)(\'|\")/i';
  $text = preg_replace($pattern, "style=\"background:#{$color};\"", $text);
  return "<a $text>";
}
//把php代码挂载到wp_tag_cloud钩子上
add_filter('wp_tag_cloud', 'colorCloud', 1);

通过将上述代码添加到functions.php文件中,我们可以简单地实现WP多彩背景云标签的功能。请给自己定一个。

这种丰富的颜色标签云是用php方法实现的,简单方便,但是添加之后需要稍微调整一下样式代码才能达到理想状态:

查看元素并向中添加装饰样式,如填充。tagcloud一个标签;2px增加内边距以缩进字体,并调整字体大小。常规字体大小属性一般为12-14px。

其中,上面提到的php方法

$a = array('8D7EEA','F99FB2','AEE05B','E8D368','F75D78','55DCAB','F75DB1','ABABAF','7EA8EA');

里面的颜色值可以根据自己爱好调整,具体参考下面图表:

HTML CSS颜色对照表

FFFFFF #DDDDDD #AAAAAA #888888 #666666 #444444 #000000
#FFB7DD #FF88C2 #FF44AA #FF0088 #C10066 #A20055 #8C0044
#FFCCCC #FF8888 #FF3333 #FF0000 #CC0000 #AA0000 #880000
#FFC8B4 #FFA488 #FF7744 #FF5511 #E63F00 #C63300 #A42D00
#FFDDAA #FFBB66 #FFAA33 #FF8800 #EE7700 #CC6600 #BB5500
#FFEE99 #FFDD55 #FFCC22 #FFBB00 #DDAA00 #AA7700 #886600
#FFFFBB #FFFF77 #FFFF33 #FFFF00 #EEEE00 #BBBB00 #888800
#EEFFBB #DDFF77 #CCFF33 #BBFF00 #99DD00 #88AA00 #668800
#CCFF99 #BBFF66 #99FF33 #77FF00 #66DD00 #55AA00 #227700
#99FF99 #66FF66 #33FF33 #00FF00 #00DD00 #00AA00 #008800
#BBFFEE #77FFCC #33FFAA #00FF99 #00DD77 #00AA55 #008844
#AAFFEE #77FFEE #33FFDD #00FFCC #00DDAA #00AA88 #008866
#99FFFF #66FFFF #33FFFF #00FFFF #00DDDD #00AAAA #008888
#CCEEFF #77DDFF #33CCFF #00BBFF #009FCC #0088A8 #007799
#CCDDFF #99BBFF #5599FF #0066FF #0044BB #003C9D #003377
#CCCCFF #9999FF #5555FF #0000FF #0000CC #0000AA #000088
#CCBBFF #9F88FF #7744FF #5500FF #4400CC #2200AA #220088
#D1BBFF #B088FF #9955FF #7700FF #5500DD #4400B3 #3A0088
#E8CCFF #D28EFF #B94FFF #9900FF #7700BB #66009D #550088
#F0BBFF #E38EFF #E93EFF #CC00FF #A500CC #7A0099 #660077
#FFB3FF #FF77FF #FF3EFF #FF0 0FF #CC00CC #990099 #770077
资源下载此资源仅限注册用户下载,请先
客服QQ:1427707223
收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

免责声明   ⚠️ 1. 本站所有资源来源于网络收集,若资源侵犯了您的合法权益, 请来信通知我们(Email: 1427707223@qq.com),我们会及时删除,给您带来的不便,我们深表歉意! 2. 分享目的仅供大家学习和交流,若使用商业用途,请购买正版授权! 否则产生的一切后果将由下载用户自行承担! 3. 会员不得使用于非法商业用途,不得违反国家法律。否则后果自负! 4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解! 5. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需! 6. 因源码具有可复制性,一经购买 ,不得以任何形式退款。 7.更多详情请点击查看

优站网 wordpress美化 WordPress无插件+带优化教程实现主题颜色标签云的两种方法 https://www.zhanceo.com/21427.html

诚乃立身之本、信为道德之基

常见问题
  • 如果付款后没有弹出下载页面,多刷新几下,有问题联系客服!
查看详情
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情

相关文章

联系官方客服

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

WordPress无插件+带优化教程实现主题颜色标签云的两种方法-海报