吾

wordpress 简码-文字展示

作者：

chentushen

在

AI真的太好用了你知道吗？

源码

<?php
// 在主题的functions.php文件中添加以下代码

// 注册所有文字效果简码
function register_text_effects_shortcodes() {
    // 渐变色文字 - 支持嵌套版本
    add_shortcode('gradient_text_n', 'gradient_text_nested_shortcode');
    
    // 打字机效果 - 支持嵌套版本
    add_shortcode('typewriter_text_n', 'typewriter_text_nested_shortcode');
    
    // 文字阴影效果 - 支持嵌套版本
    add_shortcode('shadow_text_n', 'shadow_text_nested_shortcode');
    
    // 霓虹灯文字 - 支持嵌套版本
    add_shortcode('neon_text_n', 'neon_text_nested_shortcode');
    
    // 3D立体文字 - 支持嵌套版本
    add_shortcode('text_3d_n', 'text_3d_nested_shortcode');
    
    // 文字高亮效果 - 支持嵌套版本
    add_shortcode('highlight_text_n', 'highlight_text_nested_shortcode');
}
add_action('init', 'register_text_effects_shortcodes');

// 渐变色文字简码（嵌套版本）
function gradient_text_nested_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'color1' => '#ff0000',
        'color2' => '#0000ff',
        'size' => '24px',
        'align' => 'center'
    ), $atts);
    
    $id = 'gradient-text-' . uniqid();
    
    $output = '<style>
        #' . $id . ' {
            font-size: ' . $atts['size'] . ';
            font-weight: bold;
            background: linear-gradient(45deg, ' . $atts['color1'] . ', ' . $atts['color2'] . ');
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-align: ' . $atts['align'] . ';
            margin: 10px 0;
            display: inline-block;
        }
    </style>';
    
    $output .= '<span id="' . $id . '">' . do_shortcode($content) . '</span>';
    
    return $output;
}

// 打字机效果简码（嵌套版本）
function typewriter_text_nested_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'color' => '#333',
        'size' => '24px',
        'cursor' => 'true'
    ), $atts);
    
    $id = 'typewriter-' . uniqid();
    
    $output = '<style>
        #' . $id . ' {
            font-size: ' . $atts['size'] . ';
            color: ' . $atts['color'] . ';
            font-family: monospace;
            overflow: hidden;
            border-right: ' . ($atts['cursor'] == 'true' ? '3px solid ' . $atts['color'] : 'none') . ';
            white-space: nowrap;
            margin: 0;
            letter-spacing: 2px;
            animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
            display: inline-block;
        }
        
        @keyframes typing {
            from { width: 0 }
            to { width: 100% }
        }
        
        @keyframes blink-caret {
            from, to { border-color: transparent }
            50% { border-color: ' . $atts['color'] . '; }
        }
    </style>';
    
    $output .= '<span id="' . $id . '">' . do_shortcode($content) . '</span>';
    
    return $output;
}

// 文字阴影效果简码（嵌套版本）
function shadow_text_nested_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'color' => '#333',
        'shadow_color' => '#aaa',
        'size' => '32px',
        'blur' => '10px'
    ), $atts);
    
    $id = 'shadow-text-' . uniqid();
    
    $output = '<style>
        #' . $id . ' {
            font-size: ' . $atts['size'] . ';
            color: ' . $atts['color'] . ';
            text-shadow: 2px 2px ' . $atts['blur'] . ' ' . $atts['shadow_color'] . ';
            font-weight: bold;
            margin: 0;
            display: inline-block;
        }
    </style>';
    
    $output .= '<span id="' . $id . '">' . do_shortcode($content) . '</span>';
    
    return $output;
}

// 霓虹灯文字简码（嵌套版本）
function neon_text_nested_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'color' => '#fff',
        'glow_color' => '#0ff',
        'size' => '40px'
    ), $atts);
    
    $id = 'neon-text-' . uniqid();
    
    $output = '<style>
        #' . $id . ' {
            font-size: ' . $atts['size'] . ';
            color: ' . $atts['color'] . ';
            text-shadow: 0 0 5px ' . $atts['color'] . ', 0 0 10px ' . $atts['color'] . ', 0 0 20px ' . $atts['glow_color'] . ', 0 0 40px ' . $atts['glow_color'] . ', 0 0 80px ' . $atts['glow_color'] . ';
            font-weight: bold;
            margin: 0;
            display: inline-block;
            animation: neon-flicker 2s infinite alternate;
        }
        
        @keyframes neon-flicker {
            0%, 18%, 22%, 25%, 53%, 57%, 100% {
                text-shadow: 0 0 5px ' . $atts['color'] . ', 0 0 10px ' . $atts['color'] . ', 0 0 20px ' . $atts['glow_color'] . ', 0 0 40px ' . $atts['glow_color'] . ', 0 0 80px ' . $atts['glow_color'] . ';
            }
            20%, 24%, 55% {
                text-shadow: none;
            }
        }
    </style>';
    
    $output .= '<span id="' . $id . '">' . do_shortcode($content) . '</span>';
    
    return $output;
}

// 3D立体文字简码（嵌套版本）
function text_3d_nested_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'color' => '#3498db',
        'depth' => '5',
        'size' => '36px'
    ), $atts);
    
    $id = 'text-3d-' . uniqid();
    
    $output = '<style>
        #' . $id . ' {
            font-size: ' . $atts['size'] . ';
            color: ' . $atts['color'] . ';
            font-weight: bold;
            text-transform: uppercase;
            position: relative;
            margin: 0;
            display: inline-block;
            letter-spacing: 2px;
            transform: perspective(500px) rotateX(25deg);
        }
        
        #' . $id . ':before {
            content: "' . esc_attr(do_shortcode($content)) . '";
            position: absolute;
            top: ' . $atts['depth'] . 'px;
            left: 0;
            color: rgba(0,0,0,0.2);
            z-index: -1;
            transform: skewX(45deg) translateZ(-10px);
            filter: blur(2px);
            width: 100%;
        }
    </style>';
    
    $output .= '<span id="' . $id . '">' . do_shortcode($content) . '</span>';
    
    return $output;
}

// 文字高亮效果简码（嵌套版本）
function highlight_text_nested_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'color' => '#ffeb3b',
        'text_color' => '#000',
        'padding' => '5px 10px'
    ), $atts);
    
    $id = 'highlight-text-' . uniqid();
    
    $output = '<style>
        #' . $id . ' {
            background-color: ' . $atts['color'] . ';
            color: ' . $atts['text_color'] . ';
            padding: ' . $atts['padding'] . ';
            border-radius: 4px;
            display: inline-block;
            font-weight: bold;
            position: relative;
            overflow: hidden;
        }
        
        #' . $id . ':after {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            animation: shine 3s infinite;
        }
        
        @keyframes shine {
            0% { left: -100%; }
            100% { left: 100%; }
        }
    </style>';
    
    $output .= '<span id="' . $id . '">' . do_shortcode($content) . '</span>';
    
    return $output;
}
PHP

使用指南

WordPress文字效果演示

WordPress文字效果简码演示

基本效果展示

渐变色文字

这是渐变色文字效果
[gradient_text_n color1=”#ff0000″ color2=”#0000ff”]这是渐变色文字效果[/gradient_text_n]

打字机效果

这是打字机效果文字
[typewriter_text_n]这是打字机效果文字[/typewriter_text_n]

霓虹灯效果

霓虹灯文字
[neon_text_n color=”#fff” glow_color=”#0ff”]霓虹灯文字[/neon_text_n]

嵌套效果示例

渐变色 + 高亮嵌套

这是渐变色文字，里面包含高亮效果
[gradient_text_n color1=”#ff0000″ color2=”#0000ff”]这是渐变色文字，里面包含[highlight_text_n]高亮效果[/highlight_text_n][/gradient_text_n]

阴影 + 打字机嵌套

阴影文字中的打字机效果
[shadow_text_n shadow_color=”#aaa”]阴影文字中的[typewriter_text_n]打字机效果[/typewriter_text_n][/shadow_text_n]

多重嵌套效果

渐变色中的霓虹灯和高亮效果
[gradient_text_n color1=”#ff0000″ color2=”#0000ff”]渐变色中的[neon_text_n]霓虹灯[/neon_text_n]和[highlight_text_n]高亮[/highlight_text_n]效果[/gradient_text_n]

使用说明

  • 将PHP代码添加到主题的functions.php文件中
  • 在文章或页面中使用相应的简码
  • 所有嵌套版本简码名称以”_n”结尾
  • 支持任意层次的嵌套组合
  • 每个效果都有可自定义的参数

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

更多文章