WordPress纯代码实现圆角彩色背景标签云

一、前言

**标签云 **对我们的文章画龙点睛，如果让我们的标签云随机产生彩色效果，更是增加了不是个性化，我们现在抛弃插件，自己动手从网上学习DIY自己的彩色标签云。

二、代码部署

代码需放入主题目录下的tag-color-cloud.php文件中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?php
/**
 * 彩色圆角标签云
 */
if ( ! defined( 'ABSPATH' ) ) { exit; }

function colorCloud( $text ) {
    return preg_replace_callback(
        '|<a (.+?)>|i',
        function ( $m ) {
            $colors = array( 'F99', 'C9C', 'F96', '6CC', '6C9', '37A7FF', 'B0D686', 'E6CC6E' );
            $color  = $colors[ array_rand( $colors ) ];

            // 去掉原有的 style 属性（若有）
            $attrs = preg_replace( '/style=(["\'])(.*?)\1/i', '', $m[1] );

            // 追加新样式
            $style  = "display:inline-block;color:#fff;padding:1px 5px;margin:0 5px 5px 0;";
            $style .= "background-color:#{$color};border-radius:3px;";
            $style .= "transition:background-color .4s linear;";

            return '<a ' . $attrs . ' style="' . $style . '">';
        },
        $text
    );
}
add_filter( 'wp_tag_cloud', 'colorCloud', 10 );

最后在functions.php中调用即可

1
2
/* 彩色圆角标签云 */
require_once get_template_directory() . '/self-innovate/tag-color-cloud.php';