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

AI智能摘要

本文介绍如何通过自定义代码实现在WordPress博客中生成具有彩色背景效果的标签云，取代插件实现方式。具体方法包括在functions.php文件中添加两个函数colorCloud和colorCloudCallback，通过正则替换为每个标签设置随机背景色和样式。最终实现标签云圆角背景色及过渡动画效果，并附有效果演示链接：https://mingliang.net.cn/。

— 此摘要由AI分析文章内容生成，仅供参考。

一、前言

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

二、代码部署

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

<?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 );

<?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中调用即可

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

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

🚀 全文 RSS 实时更新：点我订阅（支持 Feedly / Inoreader / 微信读书）

WordPress博客Argon主题美化

Meteor主题友链页面自研

一、前言

二、代码部署

评论列表 (6条)：

延伸阅读: