Wordpress彩色TAG标签云调用
2021-10-18小猴建站 阅读()相关主题:
博客网站比较常见的TAG标签是利于搜素引擎抓取的内容整合,Wordpress自带的TAG标签函数是
<?php wp_tag_cloud('smallest=12&largest=18&unit=px&number=0&orderby=count&order=DESC');?>
代码注释:
smallest表示标签的最小字号 largest表示最大字号 unit=px表示字体使用像素单位 number=0表示显示所有标签,如果为40,表示显示40个 orderby=count表示按照标签所关联的文章数来排列 order=DESC表示降序排序(ASC表示升序排序,DESC表示降序排序)
但函数调出来的都是统一的内容,设计成彩色的TAG标签还是得靠CSS样式,下面提供修改方案。
/* * 彩色标签 */ function colorCloud($text) { $text = preg_replace_callback('|<a (.+?)>|i','colorCloudCallback', $text); return $text; } function colorCloudCallback($matches) { $text = $matches[1]; $color = dechex(rand(0,16777215)); $pattern = '/style=(\'|\")(.*)(\'|\")/i'; $text = preg_replace($pattern, "style=\"color:#{$color};$2;\"", $text); return "<a $text>"; } add_filter('wp_tag_cloud', 'colorCloud', 1);
观察前端知道每个<a>标签都有不同的class,根据这些class写CSS样式即可。
CSS样式
<style type="text/css"> .tag-link{display:inline-block;} .tag-link-1{background:#c00;} .tag-link-2{background:#f96;} </style>
相关文章
- Wordpress栏目用分页插件与其他插件冲突出现404错误解决办法
- Wordpress首页列表页文章根据权重倒序排序
- Wordpress文章缩略图特色图片the_post_thumbnail函数应用
- Wordpress默认编辑器添加文字大小、字体
- Wordpress设置上传图片默认使用全尺寸
- Wordpress自定义字段插件Advanced Custom Fields使用及调用字段亲测有效
- Wordpress函数is_home判断是否首页失效及处理办法
- Wordpress插件contact form 7设置占位符描述文本placeholder
- Wordpress在任意页面调用联系表单简码
- Wordpress反复中毒,如何有效防止利用漏洞安装文件管理插件
- Wordpress调用指定分类有某TAG标签的文章
- Wordpress禁止指定用户名注册及增加邮箱验证