短代码开发

短代码是 WordPress 强大的功能，允许用户通过简单的标签在内容中嵌入动态内容。

📚 短代码基础

注册基本短代码

<?php
// 简单文本短代码
add_shortcode('greeting', 'my_greeting_shortcode');

function my_greeting_shortcode($atts, $content = null) {
    return '<p class="greeting">你好，欢迎访问！</p>';
}

// 使用方式：在文章中输入 [greeting]

带属性的短代码

<?php
// 带属性的短代码
add_shortcode('button', 'my_button_shortcode');

function my_button_shortcode($atts, $content = null) {
    // 定义默认属性
    $atts = shortcode_atts(array(
        'url'    => '#',
        'class'  => 'btn-primary',
        'target' => '_self',
        'style'  => '',
    ), $atts, 'button');
    
    // 生成按钮 HTML
    return sprintf(
        '<a href="%s" class="btn %s" target="%s" style="%s">%s</a>',
        esc_url($atts['url']),
        esc_attr($atts['class']),
        esc_attr($atts['target']),
        esc_attr($atts['style']),
        do_shortcode($content)
    );
}

// 使用方式：[button url="https://example.com" class="btn-red"]点击这里[/button]

封装内容型短代码

<?php
// 封装内容的短代码
add_shortcode('notice', 'my_notice_shortcode');

function my_notice_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'type'    => 'info',  // info, warning, error, success
        'title'   => '',
        'dismissible' => 'false',
    ), $atts, 'notice');
    
    $class = 'notice notice-' . esc_attr($atts['type']);
    if ($atts['dismissible'] === 'true') {
        $class .= ' notice-dismissible';
    }
    
    $html = '<div class="' . $class . '">';
    
    if (!empty($atts['title'])) {
        $html .= '<p class="notice-title"><strong>' . esc_html($atts['title']) . '</strong></p>';
    }
    
    $html .= '<div class="notice-content">';
    $html .= do_shortcode($content);
    $html .= '</div></div>';
    
    return $html;
}

// 使用方式：
// [notice type="warning" title="注意"]这是警告内容[/notice]

🎯 实用短代码示例

显示文章列表

<?php
add_shortcode('recent_posts', 'my_recent_posts_shortcode');

function my_recent_posts_shortcode($atts) {
    $atts = shortcode_atts(array(
        'number' => 5,
        'category' => '',
        'show_date' => 'true',
        'show_thumbnail' => 'true',
    ), $atts, 'recent_posts');
    
    $args = array(
        'posts_per_page' => absint($atts['number']),
        'post_status'    => 'publish',
    );
    
    if (!empty($atts['category'])) {
        $args['category_name'] = sanitize_text_field($atts['category']);
    }
    
    $posts = new WP_Query($args);
    
    if (!$posts->have_posts()) {
        return '<p>暂无文章</p>';
    }
    
    $output = '<ul class="recent-posts-list">';
    
    while ($posts->have_posts()) {
        $posts->the_post();
        
        $output .= '<li class="recent-post-item">';
        
        // 缩略图
        if ($atts['show_thumbnail'] === 'true' && has_post_thumbnail()) {
            $output .= '<div class="post-thumbnail">';
            $output .= '<a href="' . get_permalink() . '">';
            $output .= get_the_post_thumbnail(get_the_ID(), 'thumbnail');
            $output .= '</a></div>';
        }
        
        // 标题和链接
        $output .= '<div class="post-info">';
        $output .= '<h4><a href="' . get_permalink() . '">' . get_the_title() . '</a></h4>';
        
        // 日期
        if ($atts['show_date'] === 'true') {
            $output .= '<span class="post-date">' . get_the_date() . '</span>';
        }
        
        $output .= '</div></li>';
    }
    
    $output .= '</ul>';
    
    wp_reset_postdata();
    
    return $output;
}

// 使用方式：[recent_posts number="3" category="news" show_date="true"]

显示简码按钮

<?php
add_shortcode('code', 'my_code_shortcode');

function my_code_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'language' => 'php',
        'line-numbers' => 'false',
        'theme' => 'github-dark',
    ), $atts, 'code');
    
    // 获取语言
    $language = sanitize_html_class($atts['language']);
    
    // 准备代码内容
    $code = esc_html($content);
    
    // 高亮处理
    $highlighted = highlight_string('<?php ' . $code, true);
    $highlighted = substr($highlighted, strlen('<?php '));
    
    // 输出
    return '<pre class="code-block language-' . $language . '"><code>' . $highlighted . '</code></pre>';
}

// 使用方式：[code language="php"]echo "Hello World";[/code]

相册短代码

<?php
add_shortcode('photo_gallery', 'my_photo_gallery');

function my_photo_gallery($atts) {
    $atts = shortcode_atts(array(
        'ids' => '',  // 图片 ID，逗号分隔
        'columns' => 3,
        'size' => 'medium',
        'link' => 'file',  // file, post, none
    ), $atts, 'photo_gallery');
    
    if (empty($atts['ids'])) {
        return '<p>请提供图片 ID</p>';
    }
    
    $ids = array_map('absint', explode(',', $atts['ids']));
    $columns = absint($atts['columns']);
    $size = sanitize_html_class($atts['size']);
    $link = sanitize_html_class($atts['link']);
    
    $output = '<div class="photo-gallery columns-' . $columns . '">';
    
    foreach ($ids as $id) {
        $image = wp_get_attachment_image($id, $size);
        
        if (!$image) continue;
        
        $output .= '<div class="gallery-item">';
        
        if ($link !== 'none') {
            $image_src = $link === 'file' 
                ? wp_get_attachment_url($id) 
                : get_permalink();
            $output .= '<a href="' . esc_url($image_src) . '">';
        }
        
        $output .= $image;
        
        if ($link !== 'none') {
            $output .= '</a>';
        }
        
        $output .= '</div>';
    }
    
    $output .= '</div>';
    
    return $output;
}

// 使用方式：[photo_gallery ids="123,456,789" columns="4"]

用户信息短代码

<?php
add_shortcode('user_profile', 'my_user_profile_shortcode');

function my_user_profile_shortcode($atts) {
    global $current_user;
    
    $atts = shortcode_atts(array(
        'user_id' => get_current_user_id(),
        'field' => 'display_name',  // display_name, user_email, user_url, etc.
        'format' => 'text',  // text, link
    ), $atts, 'user_profile');
    
    $user_id = absint($atts['user_id']);
    $field = sanitize_html_class($atts['field']);
    
    if ($user_id === 0) {
        return '<p>请登录查看用户信息</p>';
    }
    
    $user = get_userdata($user_id);
    
    if (!$user) {
        return '<p>用户不存在</p>';
    }
    
    $value = $user->get($field);
    
    if ($value === '') {
        return '';
    }
    
    if ($atts['format'] === 'link' && $field === 'user_url') {
        return '<a href="' . esc_url($value) . '">' . esc_html($value) . '</a>';
    }
    
    return '<span class="user-' . $field . '">' . esc_html($value) . '</span>';
}

// 使用方式：[user_profile user_id="1" field="display_name"]

🛡️ 短代码安全

数据验证

<?php
function my_secure_shortcode($atts, $content = null) {
    // 验证属性
    $atts = shortcode_atts(array(
        'url' => '',
        'class' => '',
    ), $atts);
    
    // 转义属性
    $url = esc_url($atts['url']);
    $class = esc_attr($atts['class']);
    
    // 处理内容
    $content = wp_kses_post($content);
    
    return '<div class="' . $class . '"><a href="' . $url . '">' . $content . '</a></div>';
}

禁用短代码解析

<?php
// 移除短代码
remove_shortcode('old_shortcode');

// 移除所有短代码
remove_all_shortcodes();

// 临时禁用短代码
$content = strip_shortcodes($post->post_content);

📚 相关资源

• WordPress 短代码 API
• Shortcode 参数解析
• 内容过滤