• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧
您的位置:首页 > CMS教程 >WordPress > WordPress无插件实现主题彩色标签云的N种方法总结

WordPress无插件实现主题彩色标签云的N种方法总结

作者:小兽 字体:[增加 减小] 来源:互联网 时间:2018-11-02

小兽向大家介绍了WordPress无插件实现主题彩色标签云的N种方法总结等相关知识,希望对您有所帮助

标签云 对我们的文章画龙点睛,如果让我们的标签云随机产生彩色效果,更是增加了不是个性化,我们现在抛弃插件,自己动手从网上学习DIY自己的彩色标签云。
一、网上通用方法
1、在你的主题文件夹中 functions.php 文件中加入以下代码:

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);
代码中 $color = dechex(rand(0,16777215));作用是定义标签随机颜色的十进制数值范围,0 等于 #000000,16777215 等于 #ffffff,你也可以重定义标签云显示的颜色范围,只要查找出相应颜色的十六进制转换为相应的十进制就可以了。
2、自定义WordPress 标签云小工具相关参数

//custom widget tag cloud
add_filter( ‘widget_tag_cloud_args’, ‘theme_tag_cloud_args’ );
function theme_tag_cloud_args( $args ){
$newargs = array(
‘smallest’ => 8, //最小字号
‘largest’ => 22, //最大字号
‘unit’ => ‘pt’, //字号单位,可以是pt、px、em或%
‘number’ => 45, //显示个数
‘format’ => ‘flat’,//列表格式,可以是flat、list或array
‘separator’ => “\n”, //分隔每一项的分隔符
‘orderby’ => ‘name’,//排序字段,可以是name或count
‘order’ => ‘ASC’, //升序或降序,ASC或DESC
‘exclude’ => null, //结果中排除某些标签
‘include’ => null, //结果中只包含这些标签
‘link’ => ‘view’, //taxonomy链接,view或edit
‘taxonomy’ => ‘post_tag’, //调用哪些分类法作为标签云
);
$return = array_merge( $args, $newargs);
return $return;
}
强烈建议您阅读: WordPress函数:wp_tag_cloud(标签云)详解和举例
上诉代码中的数组可适当取舍,如果要采用默认的参数,就可以将相关自定义的参数(数组)删除。
默认参数解析:
smallest:标签文字最小字号,默认为8pt;
largest:标签文字最大字号,默认为22pt;
unit:标签文字字号的单位,默认为pt,可以为px、em、pt、百分比等;
number:调用的标签数量,默认为45个,设置为“0”则调用所有标签;
format:调用标签的格式,可选“flat”、“list”和“array”,默认为“flat”平铺,“list”为列表方式;
orderby:调用标签的排序,默认为“name”按名称排序,“count”则按关联的文章数量排列;
order:排序方式,默认为“ASC”按正序,“DESC”按倒序,“RAND”按任意顺序。
exclude:排除部分标签,输入标签ID,并以逗号分隔,如“exclude=1,3,5,7”不显示ID为1、3、5、7的标签;
include:包含标签,与exclude用法一样,作用相反,如“include=2,4,6,8”则只显示ID为2、4、6、8的标签。
3、wordpress彩色标签云小工具调用。
修改完成后,直接在仪表盘的”外观—>小工具”中把”标签云”小工具拖动到右侧小工具中就可以了。
也可以在主题需要调用的地方添加下面这行代码调用:
在边栏中的调取方法,添加如下代码(具体参数自己修改,smallest表示最小字体,largest表示最大字体,unit表示字体单位pt/px,number表示调取标签的数量):

<?php wp_tag_cloud(‘smallest=12&largest=18&unit=px&number=20’);?>
二、WordPress彩色背景标签云实现
下面所介绍的方法实际是实现标签云背景的彩色,而并非标签本身彩色
1、在调用的地方加入以下代码:

<aside class=”tags”><?php wp_tag_cloud(‘smallest=12&largest=12&number=45&order=DESC’); ?></aside>
你的标签不同的话,请设置class为tags
如果你想在边栏中通过文本小工具直接添加的话,需要文本小工具支持PHP代码,实现的方法阅读文章 让你的WordPress文本小工具运行PHP,这样的话更加方便灵活。
2、在你的主题style.css添加以下css样式

.tags{padding: 12px 13px 10px 15px;}
.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;}
.tags a:nth-child(9n+4){background-color: #567E95;}
.tags a:nth-child(9n+5){background-color: #B433FF;}
.tags a:nth-child(9n+6){background-color: #00ABA9;}
.tags a:nth-child(9n+7){background-color: #B37333;}
.tags a:nth-child(9n+8){background-color: #FF6600;}
.tags a{opacity: 0.80;filter:alpha(opacity=80);color: #fff;background-color: #428BCA;display: inline-block;margin: 0 5px 5px 0;padding: 0 6px;line-height: 21px}
.tags a:hover{opacity: 1;filter:alpha(opacity=100);}
三、wordpress纯代码实现圆角彩色背景标签云
原理与添加彩色标签云相似,在当前主题目录下面的functions.php里面加入以下代码:

//圆角背景色标签
function colorCloud($text) {
$text = preg_replace_callback(‘|<a (.+?)>|i’, ‘colorCloudCallback’, $text);
return $text;
}
function colorCloudCallback($matches) {
$text = $matches[1];
$colors = array(‘F99′,’C9C’,’F96′,’6CC’,’6C9′,’37A7FF’,’B0D686′,’E6CC6E’);
$color=$colors[dechex(rand(0,7))];
$pattern = ‘/style=(\’|\”)(.*)(\’|\”)/i’;
$text = preg_replace($pattern, “style=\”display: inline-block; *display: inline; *zoom: 1; color: #fff; padding: 1px 5px; margin: 0 5px 5px 0; background-color: #{$color}; border-radius: 3px; -webkit-transition: background-color .4s linear; -moz-transition: background-color .4s linear; transition: background-color .4s linear;\””, $text);
$pattern = ‘/style=(\’|\”)(.*)(\’|\”)/i’;
return “<a $text>”;
}
add_filter(‘wp_tag_cloud’, ‘colorCloud’, 1);

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

相关文章

  • 2018-11-02WordPress 媒体库无法显示图片
  • 2018-11-02优化网站图片的三种WordPress插件
  • 2018-11-02推荐WordPress 必备的常用插件及插件功能介绍
  • 2018-11-02wordpress如何获取当前页面的子页面
  • 2017-05-13wordpress获取文章评论数过滤掉作者代码分享
  • 2018-11-02wordpress 自定义字段查询 meta_query 参数中使用like和in来进行查询
  • 2017-05-13wordpress在lighttpd下的重写规则及注意细节
  • 2018-11-02WordPress 在线浏览PDF插件:PDFjs Viewer
  • 2017-05-13禁用wordpress gravatar使用本地头像提高网页打开速度
  • 2017-05-13控制好你的 Wordpress 侧边栏

文章分类

  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧

最近更新的内容

    • wordpress随机调用显示文章的方法总结
    • wordpress 为主题添加AJAX提交评论功能的php代码
    • wordpress教程之 WordPress 添加类别
    • 搜索引擎优化WordPress的7个步骤
    • WordPress如何简单设置全站链接都新窗口打开
    • 如何设置WordPress图片防盗链方法 推荐
    • 如何将WordPress博客订阅到QQ邮箱具体该怎么操作
    • 如何挑选WordPress主机?
    • WordPress的.htaccess优化技巧
    • WordPress添加前台注册功能的方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有