【Ripro美化】圆角标签云彩色背景效果纯代码实现

  • 正文概述
  • 标签云

     对我们的文章画龙点睛,如果让我们的标签云随机产生彩色效果,更是增加了不是个性化,我们现在抛弃插件,自己动手用代码来DIY自己的彩色标签云。

    教程

    放在你的子主题的functions.php代码末,路径:你的域名/wp-content/themes/ripro/functions.php

    代码

    这里只介绍最简单也最有效的一款代码,其他的也可以在网上搜索,还有很多的,放到子主题的functions.php的末尾处就可以了

    /***圆角背景色标签 - chinu.cn***/
    function colorCloud($text) {
    $text = preg_replace_callback('|<a (.+?)>|i', 'colorCloudCallback', $text);
    return $text;
    }
    function colorCloudCallback($matches) {
    $text = $matches[1];
    $colors = array('48D1CC','a26ff9','fb7da9','666','19B5FE','ff5e5c','ffbb50','1ac756');
    $color=$colors[dechex(rand(0,7))];
    $pattern = '/style=('|")(.*)('|")/i';
    $text = preg_replace($pattern, "style="display: inline-block; *display: inline; *zoom: 1; color: #fff; padding: 6px 6px; margin: 0 5px 5px 0; background-color: #{$color}; border-radius: 5px; -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);
    

     

    赞助VIP 享更多特权,建议使用 QQ 登录
    喜欢我嘛?喜欢就按“ctrl+D”收藏我吧!♡