魔扣论坛

魔扣源码论坛业务
查看: 1171|回复: 6

[经验交流] WordPress教程:添加彩色标签云

[复制链接]
  • TA的每日心情

    17 小时前
  • 签到天数: 2951 天

    [LV.Master]开坛老将

    7万

    主题

    227

    回帖

    27万

    积分

    管理员

    Rank: 30Rank: 30Rank: 30Rank: 30Rank: 30Rank: 30Rank: 30Rank: 30

    魔扣币
    745583
    贡献
    157867
    威望
    32799

    最佳新人活跃会员热心会员推广达人宣传达人突出贡献优秀版主荣誉管理论坛元老

    发表于 2017-6-5 20:52:34 | 显示全部楼层 |阅读模式
    魔扣币兑换比例:【 50以下 : ¥1 = 10 魔扣币 】丨【 50 - 100 :¥1 = 20 魔扣币】丨【 100以上:¥1 = 30 魔扣币 】

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有账号?立即注册

    x
    标签云是很多WordPress主题都有的一个主题元素,今天就讲讲如何为你的主题添加彩色标签云,包括边栏调用和页面调用。
    1.调用标签云
    我们可以使用 wp_tag_cloud() 函数实现标签云的调用。比如下面的样例:
    <?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表示降序排序)
    更多 wp_tag_cloud() 参数,请参考 WordPress文档 wp tag cloud
    2.添加彩色功能
    根据上面的参数,你已经可以调用出标签云了,将下面的代码添加到wordpress企业主题的 functions.php 的最后一个 ?> 前面即可实现彩色:
    //边栏彩色标签
    1. function colorCloud($text) {
    2.     $text = preg_replace_callback('|<a (.+?)>|i','colorCloudCallback', $text);
    3.     return $text;
    4. }
    5. function colorCloudCallback($matches) {
    6.     $text = $matches[1];
    7.     $color = dechex(rand(0,16777215));
    8.     $pattern = '/style=(\'|\”)(.*)(\'|\”)/i';
    9.     $text = preg_replace($pattern, "style="color:#{$color};$2;"", $text);
    10.     return "<a $text>";
    11. }
    12. add_filter('wp_tag_cloud', 'colorCloud', 1);
    复制代码


    3.制作标签云页面
    你可以看看主题猫的标签云页面:http://bbs.morko.net
    1)复制你主题的 page.php 文件,在该文件的顶部添加:
    <?php
    /*
    Template Name: Tags
    */
    ?>
    2)使用下面的代码替换page.php中的 :
    <?php wp_tag_cloud('smallest=12&largest=18&unit=px&number=0&orderby=count&order=DESC');?>
    3)该页面一般不需要评论功能,删除 page.php 中下面的代码:
    <?php if (comments_open()) comments_template( '', true ); ?>
    4)你还可以根据自己的需要,删除page.php中的某些功能,最后将该文件另存为 page-tags.php ,这样,一个标签云模板就做好了。
    5)访问 WP后台-页面-新建页面,页面名称自己填,只需要在 页面属性 中,选择 tags 模板即可:

    WordPress教程:添加彩色标签云

    WordPress教程:添加彩色标签云

    4.边栏中调用标签云
    你可以使用下面的函数调用,具体的修改方法,就靠你自己折腾主题了:
    <?php wp_tag_cloud('smallest=12&largest=18&unit=px&number=20');?>
    不过,一般制作比较规范的WordPress主题,都支持 Widget小工具,你可以在 WP后台-外观-小工具 中查看是否支持 标签云小工具。
    说明:本文只是告诉你如何实现彩色标签云,以及如何调用。但是具体的样式,就要靠你自己通过CSS代码实现了。


    会员购买:>> 点击购买 << | 魔扣币购买:>> 点击购买 <<
    承接业务:服务器代维丨网站托管丨SEO
    联系客服:微信:morko-net | QQ:1367681973

    该用户从未签到

    2

    主题

    244

    回帖

    492

    积分

    中级魔扣

    Rank: 3Rank: 3

    魔扣币
    246
    贡献
    246
    威望
    0
    发表于 2017-6-5 22:31:47 | 显示全部楼层
    感恩无私的分享与奉献 魔扣源码论坛是我心中的神!

    该用户从未签到

    0

    主题

    275

    回帖

    551

    积分

    高级魔扣

    Rank: 4

    魔扣币
    276
    贡献
    276
    威望
    0
    发表于 2017-6-26 21:58:15 来自手机 | 显示全部楼层
    为你这无私奉献的精神所深深的折服,特此颁发好人证,以此鼓励!

    该用户从未签到

    0

    主题

    244

    回帖

    488

    积分

    中级魔扣

    Rank: 3Rank: 3

    魔扣币
    244
    贡献
    244
    威望
    0
    发表于 2017-11-9 11:57:21 | 显示全部楼层
    人世间的每一分温暖和友情,朋友间的每一个牵挂和祝福,都是心灵与心灵的交融!我珍惜我生命中每一个与我有缘的朋友!魔扣源码论坛让我们在交流中理解,在理解中前行!

    该用户从未签到

    1

    主题

    241

    回帖

    484

    积分

    中级魔扣

    Rank: 3Rank: 3

    魔扣币
    242
    贡献
    242
    威望
    0
    发表于 2018-5-13 18:39:49 | 显示全部楼层
    这么强,支持楼主,佩服

    该用户从未签到

    0

    主题

    259

    回帖

    518

    积分

    高级魔扣

    Rank: 4

    魔扣币
    259
    贡献
    259
    威望
    0
    发表于 2018-8-10 08:25:00 来自手机 | 显示全部楼层
    一声问候,让我们不再陌生;一句祝福,魔扣源码论坛,让我们不再遥远;留言中有你,感觉温馨;交流中有你,感觉亲切;空间有你,感觉精彩。

    该用户从未签到

    2

    主题

    224

    回帖

    450

    积分

    中级魔扣

    Rank: 3Rank: 3

    魔扣币
    224
    贡献
    224
    威望
    0
    发表于 2019-1-23 14:26:52 | 显示全部楼层
    情是心中的向往,是灵感的碰撞,是感觉的共鸣,是电光的闪耀,是甜蜜的琼浆,是醉人的纯酒。魔扣源码论坛祝愿你快乐!但愿你的心中也有我!
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    • 联系我们
    • 新浪微博 :
    • 在线客服 :魔扣科技 
    • 源码QQ群 :魔扣源码论坛官方总群
    • 联系邮箱 :charlin#morko.net
    • 微信扫一扫
    快速回复 返回顶部 返回列表