WordPress小批量定制插件支持智能版型生成的集成教程

概述

在当今的WordPress开发环境中，定制化需求日益增长，特别是对于需要小批量定制但又不希望投入大量开发资源的项目。本文将介绍如何创建一个支持智能版型生成的WordPress插件，该插件能够根据用户输入自动生成适合的页面布局和样式，同时保持代码的轻量化和可维护性。

插件架构设计

1. 插件基础结构

首先，我们创建插件的基本文件结构。在WordPress的wp-content/plugins目录下创建一个新文件夹smart-layout-generator，并添加以下文件：

<?php
/**
 * Plugin Name: 智能版型生成器
 * Plugin URI: https://example.com/smart-layout-generator
 * Description: 支持小批量定制的智能版型生成插件
 * Version: 1.0.0
 * Author: 开发者名称
 * License: GPL v2 or later
 * Text Domain: smart-layout-generator
 */

// 防止直接访问
if (!defined('ABSPATH')) {
    exit;
}

// 定义插件常量
define('SLG_VERSION', '1.0.0');
define('SLG_PLUGIN_DIR', plugin_dir_path(__FILE__));
define('SLG_PLUGIN_URL', plugin_dir_url(__FILE__));

// 初始化插件
class SmartLayoutGenerator {
    
    private static $instance = null;
    
    public static function get_instance() {
        if (null === self::$instance) {
            self::$instance = new self();
        }
        return self::$instance;
    }
    
    private function __construct() {
        $this->init_hooks();
    }
    
    private function init_hooks() {
        // 激活/停用钩子
        register_activation_hook(__FILE__, array($this, 'activate'));
        register_deactivation_hook(__FILE__, array($this, 'deactivate'));
        
        // 初始化
        add_action('init', array($this, 'init'));
        
        // 管理界面
        add_action('admin_menu', array($this, 'add_admin_menu'));
        
        // 前端资源
        add_action('wp_enqueue_scripts', array($this, 'enqueue_frontend_assets'));
        
        // 管理资源
        add_action('admin_enqueue_scripts', array($this, 'enqueue_admin_assets'));
    }
    
    public function activate() {
        // 创建必要的数据库表
        $this->create_database_tables();
        
        // 设置默认选项
        $this->set_default_options();
        
        // 刷新重写规则
        flush_rewrite_rules();
    }
    
    public function deactivate() {
        // 清理临时数据
        $this->cleanup_temporary_data();
        
        // 刷新重写规则
        flush_rewrite_rules();
    }
    
    public function init() {
        // 加载文本域
        load_plugin_textdomain('smart-layout-generator', false, dirname(plugin_basename(__FILE__)) . '/languages');
        
        // 注册短代码
        $this->register_shortcodes();
    }
    
    // 其他方法将在后续部分实现
}

// 启动插件
SmartLayoutGenerator::get_instance();
?>

智能版型生成引擎

2. 版型模板系统

智能版型生成的核心是模板系统。我们将创建一个模板管理器，用于存储和检索不同的布局模板。

<?php
// 在SmartLayoutGenerator类中添加以下方法

/**
 * 版型模板管理器
 */
class SLG_Template_Manager {
    
    private $templates = array();
    
    public function __construct() {
        $this->load_templates();
    }
    
    /**
     * 加载所有可用模板
     */
    private function load_templates() {
        // 默认模板
        $default_templates = array(
            'blog-grid' => array(
                'name' => '博客网格布局',
                'description' => '适合博客文章的网格布局',
                'columns' => 3,
                'structure' => $this->get_grid_structure(),
                'styles' => $this->get_grid_styles()
            ),
            'portfolio-masonry' => array(
                'name' => '作品集瀑布流',
                'description' => '适合作品展示的瀑布流布局',
                'columns' => 4,
                'structure' => $this->get_masonry_structure(),
                'styles' => $this->get_masonry_styles()
            ),
            'product-showcase' => array(
                'name' => '产品展示',
                'description' => '适合产品展示的响应式布局',
                'columns' => 2,
                'structure' => $this->get_showcase_structure(),
                'styles' => $this->get_showcase_styles()
            )
        );
        
        // 允许开发者添加自定义模板
        $this->templates = apply_filters('slg_available_templates', $default_templates);
    }
    
    /**
     * 获取网格布局结构
     */
    private function get_grid_structure() {
        return array(
            'container' => array(
                'class' => 'slg-grid-container',
                'attributes' => 'data-columns="3"'
            ),
            'item' => array(
                'class' => 'slg-grid-item',
                'wrapper' => '<div class="slg-item-content">%content%</div>'
            ),
            'responsive' => array(
                'breakpoints' => array(
                    'mobile' => array('max-width' => '767px', 'columns' => 1),
                    'tablet' => array('min-width' => '768px', 'max-width' => '1023px', 'columns' => 2),
                    'desktop' => array('min-width' => '1024px', 'columns' => 3)
                )
            )
        );
    }
    
    /**
     * 获取网格布局样式
     */
    private function get_grid_styles() {
        return array(
            'container' => array(
                'display' => 'grid',
                'grid-template-columns' => 'repeat(auto-fill, minmax(300px, 1fr))',
                'gap' => '20px'
            ),
            'item' => array(
                'background' => '#ffffff',
                'border-radius' => '8px',
                'overflow' => 'hidden',
                'box-shadow' => '0 2px 10px rgba(0,0,0,0.1)'
            )
        );
    }
    
    // 其他模板结构方法类似...
    
    /**
     * 根据参数生成版型
     */
    public function generate_layout($template_id, $content_items, $custom_params = array()) {
        if (!isset($this->templates[$template_id])) {
            return false;
        }
        
        $template = $this->templates[$template_id];
        
        // 合并自定义参数
        $params = wp_parse_args($custom_params, array(
            'columns' => $template['columns'],
            'gap' => '20px',
            'responsive' => true
        ));
        
        // 生成HTML结构
        $output = $this->build_layout_html($template, $content_items, $params);
        
        // 生成CSS样式
        $styles = $this->build_layout_css($template, $params);
        
        return array(
            'html' => $output,
            'css' => $styles
        );
    }
    
    /**
     * 构建布局HTML
     */
    private function build_layout_html($template, $content_items, $params) {
        $structure = $template['structure'];
        
        $html = '<div class="' . esc_attr($structure['container']['class']) . '"';
        $html .= ' ' . $structure['container']['attributes'];
        $html .= ' data-layout-id="' . uniqid() . '">';
        
        foreach ($content_items as $index => $item) {
            $item_html = '<div class="' . esc_attr($structure['item']['class']) . '">';
            
            // 使用模板包装器
            if (isset($structure['item']['wrapper'])) {
                $wrapper = str_replace('%content%', $item, $structure['item']['wrapper']);
                $item_html .= $wrapper;
            } else {
                $item_html .= $item;
            }
            
            $item_html .= '</div>';
            $html .= $item_html;
        }
        
        $html .= '</div>';
        
        return $html;
    }
    
    /**
     * 构建布局CSS
     */
    private function build_layout_css($template, $params) {
        $styles = $template['styles'];
        $css = '';
        
        // 容器样式
        if (isset($styles['container'])) {
            $css .= '.' . $template['structure']['container']['class'] . ' {';
            foreach ($styles['container'] as $property => $value) {
                $css .= $property . ': ' . $value . ';';
            }
            $css .= '}';
        }
        
        // 响应式样式
        if ($params['responsive'] && isset($template['structure']['responsive'])) {
            foreach ($template['structure']['responsive']['breakpoints'] as $breakpoint_name => $breakpoint) {
                $css .= '@media (' . $breakpoint['min-width'] ?? '' . ')';
                if (isset($breakpoint['max-width'])) {
                    $css .= ' and (max-width: ' . $breakpoint['max-width'] . ')';
                }
                $css .= ' {';
                $css .= '.' . $template['structure']['container']['class'] . ' {';
                $css .= 'grid-template-columns: repeat(' . $breakpoint['columns'] . ', 1fr);';
                $css .= '}';
                $css .= '}';
            }
        }
        
        return $css;
    }
}
?>

用户界面与交互

3. 管理界面实现

创建用户友好的管理界面，让用户可以轻松选择和定制版型。

<?php
// 在SmartLayoutGenerator类中添加管理界面方法

public function add_admin_menu() {
    add_menu_page(
        '智能版型生成器',
        '版型生成器',
        'manage_options',
        'smart-layout-generator',
        array($this, 'render_admin_page'),
        'dashicons-layout',
        30
    );
    
    add_submenu_page(
        'smart-layout-generator',
        '版型模板',
        '模板库',
        'manage_options',
        'slg-templates',
        array($this, 'render_templates_page')
    );
    
    add_submenu_page(
        'smart-layout-generator',
        '生成设置',
        '设置',
        'manage_options',
        'slg-settings',
        array($this, 'render_settings_page')
    );
}

public function render_admin_page() {
    ?>
    <div class="wrap slg-admin-wrap">
        <h1>智能版型生成器</h1>
        
        <div class="slg-generator-container">
            <div class="slg-control-panel">
                <h2>版型配置</h2>
                
                <div class="slg-form-section">
                    <label for="slg-template-select">选择模板：</label>
                    <select id="slg-template-select" class="slg-template-select">
                        <option value="blog-grid">博客网格布局</option>
                        <option value="portfolio-masonry">作品集瀑布流</option>
                        <option value="product-showcase">产品展示</option>
                    </select>
                </div>
                
                <div class="slg-form-section">
                    <label for="slg-columns">列数：</label>
                    <input type="number" id="slg-columns" min="1" max="6" value="3">
                </div>
                
                <div class="slg-form-section">
                    <label for="slg-gap">间距(px)：</label>
                    <input type="number" id="slg-gap" min="0" max="50" value="20">
                </div>
                
                <div class="slg-form-section">
                    <label>
                        <input type="checkbox" id="slg-responsive" checked>
                        启用响应式
                    </label>
                </div>
                
                <button id="slg-preview-btn" class="button button-primary">预览版型</button>
                <button id="slg-generate-btn" class="button button-secondary">生成短代码</button>
            </div>
            
            <div class="slg-preview-area">
                <h2>实时预览</h2>
                <div id="slg-preview-container"></div>
            </div>
        </div>
        
        <div id="slg-shortcode-result" class="slg-result-panel" style="display:none;">
            <h3>生成的短代码</h3>
            <textarea id="slg-generated-shortcode" rows="3" readonly></textarea>
            <p class="description">将上述短代码复制到文章或页面中即可使用</p>
        </div>
    </div>
    <?php
}

public function enqueue_admin_assets($hook) {
    if (strpos($hook, 'smart-layout-generator') === false) {
        return;
    }
    
    wp_enqueue_style(
        'slg-admin-style',
        SLG_PLUGIN_URL . 'assets/css/admin.css',
        array(),
        SLG_VERSION
    );
    
    wp_enqueue_script(
        'slg-admin-script',
        SLG_PLUGIN_URL . 'assets/js/admin.js',
        array('jquery'),
        SLG_VERSION,
        true
    );
    
    // 本地化脚本
    wp_localize_script('slg-admin-script', 'slg_admin', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('slg_admin_nonce')
    ));
}
?>

前端集成与短代码

4. 短代码处理器

创建短代码系统，让用户可以在文章或页面中轻松插入生成的版型。

<?php
// 在SmartLayoutGenerator类中添加短代码相关方法

private function register_shortcodes() {
    add_shortcode('smart_layout', array($this, 'handle_layout_shortcode'));
    add_shortcode('slg_container', array($this, 'handle_container_shortcode'));
}

public function handle_layout_shortcode($atts, $content = null) {
    // 解析短代码属性
    $atts = shortcode_atts(array(
        'template' => 'blog-grid',
        'columns' => 3,
        'gap' => '20px',
        'responsive' => 'true',
        'id' => ''
    ), $atts, 'smart_layout');
    
    // 初始化模板管理器
    $template_manager = new SLG_Template_Manager();
    
    // 解析内容项
    $content_items = array();
    if (!empty($content)) {
        // 分割内容为单独项目
        $items = explode('[slg_item]', $content);
        foreach ($items as $item) {
            $item = trim($item);
            if (!empty($item) && $item !== '[/slg_container]') {
                $content_items[] = do_shortcode($item);
            }
        }
    }
    
    // 生成布局
    $layout_params = array(
        'columns' => intval($atts['columns']),
        'gap' => $atts['gap'],
        'responsive' => $atts['responsive'] === 'true'
    );
    
    $layout = $template_manager->generate_layout(
        $atts['template'],
        $content_items,
        $layout_params
    );
    
    if (!$layout) {
        return '<p>错误：无法生成布局，请检查模板名称是否正确。</p>';
    }
    
    // 输出布局
    $output = '<div class="slg-layout-wrapper" data-layout-id="' . esc_attr($atts['id']) . '">';
    
    // 添加样式
    if (!empty($layout['css'])) {
        $output .= '<style>' . $layout['css'] . '</style>';
    }
    
    // 添加HTML结构
    $output .= $layout['html'];
    $output .= '</div>';
    
    return $output;
}

public function handle_container_shortcode($atts, $content = null) {
    // 这个短代码用于包装内容项
    return '<div class="slg-content-item">' . do_shortcode($content) . '</div>';
}

// 添加AJAX处理
public function enqueue_frontend_assets() {
    wp_enqueue_style(
        'slg-frontend-style',
        SLG_PLUGIN_URL . 'assets/css/frontend.css',
        array(),
        SLG_VERSION
    );
    
    // 条件加载脚本
    if (is_singular()) {
        wp_enqueue_script(
            'slg-frontend-script',
            SLG_PLUGIN_URL . 'assets/js/frontend.js',
            array('jquery'),
            SLG_VERSION,
            true
        );
    }
}
?>

使用示例

5. 实际应用案例

以下是如何在WordPress文章中使用本插件的示例：

<?php
/*
在WordPress编辑器中添加以下短代码：

[smart_layout template="blog-grid" columns="3" gap="20px"]

[slg_item]
<h3>文章标题一</h3>
<p>这里是文章摘要内容，展示智能版型生成的效果。</p>
<a href="#" class="slg-read-more">阅读更多</a>
[/slg_item]

[slg_item]
<h3>文章标题二</h3>
<p>第二个内容项，自动适应网格布局。</p>
<a href="#" class="slg-read-more">阅读更多</a>
[/slg_item]

[slg_item]
<h3>文章标题三</h3>
<p>第三个内容项，展示响应式布局效果。</p>
<a href="#" class="slg-read-more">阅读更多</a>
[/slg_item]

[/smart_layout]
*/
?>

扩展与定制

6. 开发者扩展接口

为了让其他开发者能够扩展本插件，我们提供了一系列过滤器(filters)和动作(actions)：

<?php
// 扩展点示例

// 1. 添加自定义模板

function my_custom_slg_templates($templates) {
    $templates['my-custom-layout'] = array(
        'name' => '我的自定义布局',
        'description' => '完全自定义的响应式布局',
        'columns' => 2,
        'structure' => array(
            'container' => array(
                'class' => 'slg-custom-container',
                'attributes' => 'data-custom="true"'
            ),
            'item' => array(
                'class' => 'slg-custom-item',
                'wrapper' => '<div class="custom-content-wrapper">%content%</div>'
            )
        ),
        'styles' => array(
            'container' => array(
                'display' => 'flex',
                'flex-wrap' => 'wrap',
                'justify-content' => 'space-between'
            ),
            'item' => array(
                'flex' => '0 0 48%',
                'margin-bottom' => '30px'
            )
        )
    );
    return $templates;
}
add_filter('slg_available_templates', 'my_custom_slg_templates');

// 2. 修改布局生成参数
add_filter('slg_layout_params', function($params, $template_id) {
    if ($template_id === 'blog-grid') {
        $params['gap'] = '30px'; // 增加间距
        $params['animation'] = 'fade-in'; // 添加动画效果
    }
    return $params;
}, 10, 2);

// 3. 添加自定义CSS类
add_filter('slg_container_classes', function($classes, $template_id) {
    $classes[] = 'custom-additional-class';
    return $classes;
}, 10, 2);

数据库与性能优化

7. 数据存储与缓存机制

为了提高性能，我们实现一个简单的缓存系统：

<?php
// 在SmartLayoutGenerator类中添加数据库和缓存方法

private function create_database_tables() {
    global $wpdb;
    
    $table_name = $wpdb->prefix . 'slg_layouts';
    $charset_collate = $wpdb->get_charset_collate();
    
    $sql = "CREATE TABLE IF NOT EXISTS $table_name (
        id mediumint(9) NOT NULL AUTO_INCREMENT,
        layout_hash varchar(32) NOT NULL,
        template_id varchar(50) NOT NULL,
        layout_params text NOT NULL,
        generated_html longtext NOT NULL,
        generated_css text NOT NULL,
        created_at datetime DEFAULT CURRENT_TIMESTAMP,
        PRIMARY KEY (id),
        UNIQUE KEY layout_hash (layout_hash),
        KEY template_id (template_id)
    ) $charset_collate;";
    
    require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
    dbDelta($sql);
}

/**
 * 获取或生成布局缓存
 */
public function get_cached_layout($template_id, $content_items, $params) {
    global $wpdb;
    
    // 创建布局哈希
    $layout_data = serialize(array(
        'template' => $template_id,
        'content' => $content_items,
        'params' => $params
    ));
    $layout_hash = md5($layout_data);
    
    $table_name = $wpdb->prefix . 'slg_layouts';
    
    // 检查缓存
    $cached = $wpdb->get_row($wpdb->prepare(
        "SELECT generated_html, generated_css FROM $table_name WHERE layout_hash = %s",
        $layout_hash
    ));
    
    if ($cached) {
        return array(
            'html' => $cached->generated_html,
            'css' => $cached->generated_css,
            'cached' => true
        );
    }
    
    // 生成新布局
    $template_manager = new SLG_Template_Manager();
    $layout = $template_manager->generate_layout($template_id, $content_items, $params);
    
    if ($layout) {
        // 缓存布局
        $wpdb->insert($table_name, array(
            'layout_hash' => $layout_hash,
            'template_id' => $template_id,
            'layout_params' => serialize($params),
            'generated_html' => $layout['html'],
            'generated_css' => $layout['css']
        ));
        
        // 清理旧缓存（保留最近1000条）
        $this->cleanup_old_cache();
    }
    
    return $layout;
}

/**
 * 清理旧缓存
 */
private function cleanup_old_cache() {
    global $wpdb;
    
    $table_name = $wpdb->prefix . 'slg_layouts';
    
    // 删除创建时间超过30天的缓存
    $wpdb->query($wpdb->prepare(
        "DELETE FROM $table_name WHERE created_at < DATE_SUB(NOW(), INTERVAL %d DAY)",
        30
    ));
    
    // 如果仍然超过1000条，删除最旧的
    $count = $wpdb->get_var("SELECT COUNT(*) FROM $table_name");
    if ($count > 1000) {
        $wpdb->query(
            "DELETE FROM $table_name ORDER BY created_at ASC LIMIT " . ($count - 1000)
        );
    }
}

/**
 * 清理临时数据
 */
private function cleanup_temporary_data() {
    global $wpdb;
    
    $table_name = $wpdb->prefix . 'slg_layouts';
    
    // 可选的：停用时清空缓存表
    // $wpdb->query("TRUNCATE TABLE $table_name");
}
?>

AJAX接口与实时预览

8. 实时预览功能实现

<?php
// 在SmartLayoutGenerator类中添加AJAX处理方法

public function init() {
    // ... 之前的代码 ...
    
    // 注册AJAX处理
    add_action('wp_ajax_slg_generate_preview', array($this, 'ajax_generate_preview'));
    add_action('wp_ajax_nopriv_slg_generate_preview', array($this, 'ajax_generate_preview'));
    add_action('wp_ajax_slg_get_shortcode', array($this, 'ajax_get_shortcode'));
}

/**
 * AJAX生成预览
 */
public function ajax_generate_preview() {
    // 验证nonce
    if (!check_ajax_referer('slg_admin_nonce', 'nonce', false)) {
        wp_die('安全验证失败', 403);
    }
    
    $template_id = sanitize_text_field($_POST['template']);
    $columns = intval($_POST['columns']);
    $gap = sanitize_text_field($_POST['gap']);
    $responsive = $_POST['responsive'] === 'true';
    
    // 生成示例内容
    $sample_content = array(
        '<div class="slg-sample-item"><h3>示例标题 1</h3><p>这是智能生成的示例内容，展示版型效果。</p></div>',
        '<div class="slg-sample-item"><h3>示例标题 2</h3><p>响应式设计确保在不同设备上都有良好表现。</p></div>',
        '<div class="slg-sample-item"><h3>示例标题 3</h3><p>支持自定义样式和动画效果。</p></div>',
        '<div class="slg-sample-item"><h3>示例标题 4</h3><p>轻松集成到任何WordPress主题中。</p></div>'
    );
    
    // 获取缓存或生成布局
    $params = array(
        'columns' => $columns,
        'gap' => $gap,
        'responsive' => $responsive
    );
    
    $layout = $this->get_cached_layout($template_id, $sample_content, $params);
    
    if ($layout) {
        wp_send_json_success(array(
            'html' => $layout['html'],
            'css' => $layout['css'],
            'cached' => isset($layout['cached']) ? $layout['cached'] : false
        ));
    } else {
        wp_send_json_error('生成布局失败');
    }
}

/**
 * AJAX获取短代码
 */
public function ajax_get_shortcode() {
    if (!check_ajax_referer('slg_admin_nonce', 'nonce', false)) {
        wp_die('安全验证失败', 403);
    }
    
    $template_id = sanitize_text_field($_POST['template']);
    $columns = intval($_POST['columns']);
    $gap = sanitize_text_field($_POST['gap']);
    $responsive = $_POST['responsive'] === 'true';
    
    // 生成短代码
    $shortcode = '[smart_layout';
    $shortcode .= ' template="' . esc_attr($template_id) . '"';
    $shortcode .= ' columns="' . esc_attr($columns) . '"';
    $shortcode .= ' gap="' . esc_attr($gap) . '"';
    $shortcode .= ' responsive="' . ($responsive ? 'true' : 'false') . '"';
    $shortcode .= ']' . "nn";
    
    // 添加示例内容结构
    $shortcode .= '[slg_item]' . "n";
    $shortcode .= '<!-- 在这里添加您的内容 -->' . "n";
    $shortcode .= '[/slg_item]' . "nn";
    
    $shortcode .= '[slg_item]' . "n";
    $shortcode .= '<!-- 第二个内容项 -->' . "n";
    $shortcode .= '[/slg_item]' . "nn";
    
    $shortcode .= '[/smart_layout]';
    
    wp_send_json_success(array(
        'shortcode' => $shortcode,
        'instructions' => '将短代码复制到文章或页面编辑器中，替换示例内容为您自己的内容。'
    ));
}
?>

前端JavaScript交互

9. 管理界面JavaScript

// assets/js/admin.js
jQuery(document).ready(function($) {
    'use strict';
    
    var SLG_Admin = {
        init: function() {
            this.bindEvents();
            this.generatePreview(); // 初始预览
        },
        
        bindEvents: function() {
            // 表单变化时更新预览
            $('#slg-template-select, #slg-columns, #slg-gap, #slg-responsive').on('change', function() {
                SLG_Admin.generatePreview();
            });
            
            // 预览按钮
            $('#slg-preview-btn').on('click', function(e) {
                e.preventDefault();
                SLG_Admin.generatePreview();
            });
            
            // 生成短代码按钮
            $('#slg-generate-btn').on('click', function(e) {
                e.preventDefault();
                SLG_Admin.generateShortcode();
            });
        },
        
        generatePreview: function() {
            var data = {
                action: 'slg_generate_preview',
                nonce: slg_admin.nonce,
                template: $('#slg-template-select').val(),
                columns: $('#slg-columns').val(),
                gap: $('#slg-gap').val(),
                responsive: $('#slg-responsive').is(':checked')
            };
            
            $('#slg-preview-container').html('<div class="slg-loading">生成预览中...</div>');
            
            $.post(slg_admin.ajax_url, data, function(response) {
                if (response.success) {
                    // 清空容器
                    $('#slg-preview-container').empty();
                    
                    // 添加样式
                    if (response.data.css) {
                        $('<style>').text(response.data.css).appendTo('#slg-preview-container');
                    }
                    
                    // 添加HTML
                    $('#slg-preview-container').append(response.data.html);
                    
                    // 显示缓存状态
                    if (response.data.cached) {
                        $('#slg-preview-container').append('<div class="slg-cache-notice">✓ 使用缓存版本</div>');
                    }
                } else {
                    $('#slg-preview-container').html('<div class="slg-error">生成失败：' + response.data + '</div>');
                }
            }).fail(function() {
                $('#slg-preview-container').html('<div class="slg-error">请求失败，请检查网络连接</div>');
            });
        },
        
        generateShortcode: function() {
            var data = {
                action: 'slg_get_shortcode',
                nonce: slg_admin.nonce,
                template: $('#slg-template-select').val(),
                columns: $('#slg-columns').val(),
                gap: $('#slg-gap').val(),
                responsive: $('#slg-responsive').is(':checked')
            };
            
            $.post(slg_admin.ajax_url, data, function(response) {
                if (response.success) {
                    $('#slg-generated-shortcode').val(response.data.shortcode);
                    $('#slg-shortcode-result').show();
                    
                    // 自动选择文本
                    $('#slg-generated-shortcode').select();
                    
                    // 显示成功消息
                    var $message = $('<div class="notice notice-success is-dismissible"><p>短代码已生成！</p></div>');
                    $('.slg-admin-wrap').prepend($message);
                    
                    // 3秒后消失
                    setTimeout(function() {
                        $message.fadeOut();
                    }, 3000);
                }
            });
        }
    };
    
    // 初始化
    SLG_Admin.init();
});

样式表文件

10. 基础样式设计

/* assets/css/admin.css */
.slg-admin-wrap {
    max-width: 1200px;
    margin: 20px auto;
}

.slg-generator-container {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 30px;
    margin: 30px 0;
}

.slg-control-panel {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.slg-form-section {
    margin-bottom: 20px;
}

.slg-form-section label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

.slg-template-select,
.slg-form-section input[type="number"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.slg-preview-area {
    background: #f5f5f5;
    padding: 20px;
    border-radius: 8px;
    min-height: 500px;
}

#slg-preview-container {
    background: white;
    padding: 20px;
    border-radius: 4px;
    min-height: 400px;
}

.slg-loading {
    text-align: center;
    padding: 50px;
    color: #666;
}

.slg-error {
    color: #dc3232;
    padding: 20px;
    background: #f8d7da;
    border-radius: 4px;
}

.slg-cache-notice {
    font-size: 12px;
    color: #666;
    text-align: right;
    margin-top: 10px;
}

.slg-result-panel {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

#slg-generated-shortcode {
    width: 100%;
    font-family: monospace;
    padding: 10px;
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* assets/css/frontend.css */
.slg-grid-container {
    transition: all 0.3s ease;
}

.slg-grid-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.slg-grid-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}

.slg-content-item {
    padding: 20px;
}

.slg-read-more {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 16px;
    background: #0073aa;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.3s ease;
}

.slg-read-more:hover {
    background: #005a87;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .slg-generator-container {
        grid-template-columns: 1fr;
    }
    
    .slg-control-panel,
    .slg-preview-area {
        width: 100%;
    }
}

总结与最佳实践

11. 部署与维护建议

1. 性能优化：

   • 启用缓存机制减少数据库查询
   • 使用CSS压缩和合并
   • 懒加载图片和内容

2. 安全性考虑：

   • 所有用户输入都经过验证和清理
   • 使用nonce保护AJAX请求
   • 限制短代码执行权限

3. 可维护性：

   • 保持代码模块化
   • 提供详细的文档注释
   • 使用WordPress编码标准

4. 扩展性：

   • 提供丰富的过滤器和动作钩子
   • 支持子主题覆盖模板
   • 允许开发者添加自定义模板

12. 使用场景示例

// 在主题文件中直接调用
if (class_exists('SmartLayoutGenerator')) {
    $slg = SmartLayoutGenerator::get_instance();
    $template_manager = new SLG_Template_Manager();
    
    $args = array(
        'template' => 'blog-grid',
        'columns' => 4,
        'gap' => '15px'
    );
    
    $content = array();
    while (have_posts()) {
        the_post();
        $content[] = get_the_title() . get_the_excerpt();
    }
    
    $layout = $template_manager->generate_layout('blog-grid', $content, $args);
    echo $layout['html'];
}

通过本教程，您已经学会了如何创建一个完整的WordPress智能版型生成插件。这个插件不仅支持小批量定制，