WordPress小批量定制插件：绿色包装选项管理教程

一、插件开发背景与需求分析

在当今环保意识日益增强的电商环境中，为WordPress网站添加绿色包装选项已成为提升品牌形象和满足客户需求的重要功能。本教程将指导您开发一个小批量定制插件，专门管理绿色包装选项。

需求分析：

1. 允许管理员添加、编辑和删除绿色包装选项
2. 每个包装选项包含名称、描述、环保等级和额外费用
3. 在结账页面显示可选的绿色包装选项
4. 用户选择后，额外费用自动加入订单总额
5. 支持小批量定制场景，适合中小型电商网站

二、插件基础结构搭建

首先，我们需要创建插件的基本文件结构：

green-packaging-manager/
├── green-packaging-manager.php      # 主插件文件
├── includes/
│   ├── class-admin.php              # 后台管理类
│   ├── class-frontend.php           # 前端显示类
│   └── class-database.php           # 数据库处理类
├── assets/
│   ├── css/
│   │   └── admin-style.css          # 后台样式
│   └── js/
│       └── frontend-script.js       # 前端脚本
└── templates/
    └── packaging-options.php        # 前端模板

主插件文件代码 (green-packaging-manager.php)

<?php
/**
 * Plugin Name: 绿色包装选项管理器
 * Plugin URI:  https://example.com/green-packaging-manager
 * Description: 为WooCommerce添加绿色环保包装选项管理功能
 * Version:     1.0.0
 * Author:      您的名称
 * License:     GPL v2 or later
 * Text Domain: green-packaging
 */

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

// 定义插件常量
define('GPM_PLUGIN_PATH', plugin_dir_path(__FILE__));
define('GPM_PLUGIN_URL', plugin_dir_url(__FILE__));
define('GPM_VERSION', '1.0.0');

// 检查WooCommerce是否激活
function gpm_check_woocommerce() {
    if (!class_exists('WooCommerce')) {
        add_action('admin_notices', function() {
            ?>
            <div class="notice notice-error">
                <p><?php _e('绿色包装选项管理器需要WooCommerce插件。请先安装并激活WooCommerce。', 'green-packaging'); ?></p>
            </div>
            <?php
        });
        return false;
    }
    return true;
}

// 初始化插件
function gpm_init() {
    if (!gpm_check_woocommerce()) {
        return;
    }
    
    // 包含必要文件
    require_once GPM_PLUGIN_PATH . 'includes/class-database.php';
    require_once GPM_PLUGIN_PATH . 'includes/class-admin.php';
    require_once GPM_PLUGIN_PATH . 'includes/class-frontend.php';
    
    // 初始化数据库
    GPM_Database::init();
    
    // 初始化管理界面
    if (is_admin()) {
        new GPM_Admin();
    }
    
    // 初始化前端功能
    new GPM_Frontend();
}

add_action('plugins_loaded', 'gpm_init');

// 插件激活时的操作
register_activation_hook(__FILE__, function() {
    require_once GPM_PLUGIN_PATH . 'includes/class-database.php';
    GPM_Database::create_tables();
});

// 插件停用时的操作
register_deactivation_hook(__FILE__, function() {
    // 清理临时数据
    // 注意：这里不删除数据表，以便保留设置
});

三、数据库设计与实现

数据库处理类 (includes/class-database.php)

<?php
/**
 * 数据库处理类
 * 负责创建和管理绿色包装选项的数据表
 */

class GPM_Database {
    
    /**
     * 初始化数据库
     */
    public static function init() {
        // 确保数据表存在
        self::create_tables();
    }
    
    /**
     * 创建数据表
     */
    public static function create_tables() {
        global $wpdb;
        
        $charset_collate = $wpdb->get_charset_collate();
        $table_name = $wpdb->prefix . 'green_packaging_options';
        
        $sql = "CREATE TABLE IF NOT EXISTS $table_name (
            id mediumint(9) NOT NULL AUTO_INCREMENT,
            name varchar(100) NOT NULL,
            description text,
            eco_level tinyint(1) DEFAULT 1 COMMENT '环保等级：1-基础，2-中等，3-高级',
            additional_cost decimal(10,2) DEFAULT 0.00,
            is_active tinyint(1) DEFAULT 1,
            sort_order int(11) DEFAULT 0,
            created_at datetime DEFAULT CURRENT_TIMESTAMP,
            updated_at datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
            PRIMARY KEY (id),
            KEY eco_level (eco_level),
            KEY is_active (is_active)
        ) $charset_collate;";
        
        require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
        dbDelta($sql);
    }
    
    /**
     * 获取所有包装选项
     * @param bool $active_only 是否只获取激活的选项
     * @return array 包装选项数组
     */
    public static function get_packaging_options($active_only = true) {
        global $wpdb;
        $table_name = $wpdb->prefix . 'green_packaging_options';
        
        $where = $active_only ? "WHERE is_active = 1" : "";
        $query = "SELECT * FROM $table_name $where ORDER BY sort_order ASC, eco_level DESC";
        
        return $wpdb->get_results($query, ARRAY_A);
    }
    
    /**
     * 添加新的包装选项
     * @param array $data 选项数据
     * @return int|false 插入的ID或false
     */
    public static function add_packaging_option($data) {
        global $wpdb;
        $table_name = $wpdb->prefix . 'green_packaging_options';
        
        $defaults = array(
            'name' => '',
            'description' => '',
            'eco_level' => 1,
            'additional_cost' => 0.00,
            'is_active' => 1,
            'sort_order' => 0
        );
        
        $data = wp_parse_args($data, $defaults);
        
        return $wpdb->insert($table_name, $data);
    }
    
    /**
     * 更新包装选项
     * @param int $id 选项ID
     * @param array $data 更新数据
     * @return int|false 受影响的行数或false
     */
    public static function update_packaging_option($id, $data) {
        global $wpdb;
        $table_name = $wpdb->prefix . 'green_packaging_options';
        
        return $wpdb->update($table_name, $data, array('id' => $id));
    }
    
    /**
     * 删除包装选项
     * @param int $id 选项ID
     * @return int|false 受影响的行数或false
     */
    public static function delete_packaging_option($id) {
        global $wpdb;
        $table_name = $wpdb->prefix . 'green_packaging_options';
        
        return $wpdb->delete($table_name, array('id' => $id));
    }
}

四、后台管理界面开发

管理类 (includes/class-admin.php)

<?php
/**
 * 后台管理类
 * 处理插件在WordPress后台的管理界面
 */

class GPM_Admin {
    
    public function __construct() {
        // 添加管理菜单
        add_action('admin_menu', array($this, 'add_admin_menu'));
        
        // 注册设置
        add_action('admin_init', array($this, 'register_settings'));
        
        // 加载样式和脚本
        add_action('admin_enqueue_scripts', array($this, 'enqueue_admin_assets'));
    }
    
    /**
     * 添加管理菜单
     */
    public function add_admin_menu() {
        add_submenu_page(
            'woocommerce',
            __('绿色包装选项', 'green-packaging'),
            __('绿色包装', 'green-packaging'),
            'manage_options',
            'green-packaging',
            array($this, 'render_admin_page')
        );
    }
    
    /**
     * 注册设置
     */
    public function register_settings() {
        register_setting('gpm_settings', 'gpm_enable_feature');
        register_setting('gpm_settings', 'gpm_default_option');
    }
    
    /**
     * 加载管理资源
     */
    public function enqueue_admin_assets($hook) {
        if (strpos($hook, 'green-packaging') === false) {
            return;
        }
        
        wp_enqueue_style(
            'gpm-admin-style',
            GPM_PLUGIN_URL . 'assets/css/admin-style.css',
            array(),
            GPM_VERSION
        );
    }
    
    /**
     * 渲染管理页面
     */
    public function render_admin_page() {
        // 处理表单提交
        $this->handle_form_submissions();
        
        // 获取所有包装选项
        $options = GPM_Database::get_packaging_options(false);
        
        ?>
        <div class="wrap gpm-admin-wrap">
            <h1><?php _e('绿色包装选项管理', 'green-packaging'); ?></h1>
            
            <!-- 添加新选项表单 -->
            <div class="gpm-form-section">
                <h2><?php _e('添加新包装选项', 'green-packaging'); ?></h2>
                <form method="post" action="">
                    <?php wp_nonce_field('gpm_add_option', 'gpm_nonce'); ?>
                    <input type="hidden" name="action" value="add_packaging_option">
                    
                    <table class="form-table">
                        <tr>
                            <th scope="row">
                                <label for="option_name"><?php _e('选项名称', 'green-packaging'); ?></label>
                            </th>
                            <td>
                                <input type="text" id="option_name" name="option_name" 
                                       class="regular-text" required>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">
                                <label for="option_description"><?php _e('描述', 'green-packaging'); ?></label>
                            </th>
                            <td>
                                <textarea id="option_description" name="option_description" 
                                          rows="3" class="large-text"></textarea>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">
                                <label for="eco_level"><?php _e('环保等级', 'green-packaging'); ?></label>
                            </th>
                            <td>
                                <select id="eco_level" name="eco_level">
                                    <option value="1"><?php _e('基础环保', 'green-packaging'); ?></option>
                                    <option value="2"><?php _e('中等环保', 'green-packaging'); ?></option>
                                    <option value="3"><?php _e('高级环保', 'green-packaging'); ?></option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">
                                <label for="additional_cost"><?php _e('额外费用', 'green-packaging'); ?></label>
                            </th>
                            <td>
                                <input type="number" id="additional_cost" name="additional_cost" 
                                       step="0.01" min="0" value="0.00" required>
                                <p class="description"><?php _e('单位：元', 'green-packaging'); ?></p>
                            </td>
                        </tr>
                    </table>
                    
                    <?php submit_button(__('添加选项', 'green-packaging')); ?>
                </form>
            </div>
            
            <!-- 现有选项列表 -->
            <div class="gpm-list-section">
                <h2><?php _e('现有包装选项', 'green-packaging'); ?></h2>
                
                <?php if (empty($options)): ?>
                    <p><?php _e('暂无包装选项。', 'green-packaging'); ?></p>
                <?php else: ?>
                    <table class="wp-list-table widefat fixed striped">
                        <thead>
                            <tr>
                                <th><?php _e('ID', 'green-packaging'); ?></th>
                                <th><?php _e('名称', 'green-packaging'); ?></th>
                                <th><?php _e('环保等级', 'green-packaging'); ?></th>
                                <th><?php _e('额外费用', 'green-packaging'); ?></th>
                                <th><?php _e('状态', 'green-packaging'); ?></th>
                                <th><?php _e('操作', 'green-packaging'); ?></th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach ($options as $option): ?>
                                <tr>
                                    <td><?php echo esc_html($option['id']); ?></td>
                                    <td>
                                        <strong><?php echo esc_html($option['name']); ?></strong>
                                        <?php if ($option['description']): ?>
                                            <p class="description"><?php echo esc_html($option['description']); ?></p>
                                        <?php endif; ?>
                                    </td>
                                    <td>
                                        <?php 
                                        $levels = array(
                                            1 => __('基础', 'green-packaging'),
                                            2 => __('中等', 'green-packaging'),
                                            3 => __('高级', 'green-packaging')
                                        );
                                        echo esc_html($levels[$option['eco_level']] ?? '-');
                                        ?>
                                    </td>
                                    <td><?php echo wc_price($option['additional_cost']); ?></td>
                                    <td>
                                        <?php if ($option['is_active']): ?>
                                            <span class="status-active"><?php _e('激活', 'green-packaging'); ?></span>
                                        <?php else: ?>
                                            <span class="status-inactive"><?php _e('未激活', 'green-packaging'); ?></span>
                                        <?php endif; ?>
                                    </td>
                                    <td>
                                        <form method="post" action="" style="display: inline;">
                                            <?php wp_nonce_field('gpm_toggle_option', 'gpm_nonce'); ?>
                                            <input type="hidden" name="action" value="toggle_packaging_option">
                                            <input type="hidden" name="option_id" value="<?php echo $option['id']; ?>">
                                            <button type="submit" class="button button-small">
                                                <?php echo $option['is_active'] ? __('停用', 'green-packaging') : __('启用', 'green-packaging'); ?>
                                            </button>
                                        </form>
                                        
                                        <form method="post" action="" style="display: inline;">
                                            <?php wp_nonce_field('gpm_delete_option', 'gpm_nonce'); ?>
                                            <input type="hidden" name="action" value="delete_packaging_option">
                                            <input type="hidden" name="option_id" value="<?php echo $option['id']; ?>">
                                            <button type="submit" class="button button-small button-danger" 
                                                    onclick="return confirm('<?php _e('确定要删除这个选项吗？', 'green-packaging'); ?>')">
                                                <?php _e('删除', 'green-packaging'); ?>
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                <?php endif; ?>
            </div>
        </div>
        <?php
    }
    
    /**
     * 处理表单提交
     */
    private function handle_form_submissions() {
        if (!isset($_POST['action']) || !isset($_POST['gpm_nonce'])) {
            return;
        }
        
        // 验证nonce
        $action = sanitize_text_field($_POST['action']);
        $nonce_field = '';
        
        switch ($action) {
            case 'add_packaging_option':
                $nonce_field = 'gpm_add_option';
                break;
            case 'toggle_packaging_option':
                $nonce_field = 'gpm_toggle_option';
                break;
            case 'delete_packaging_option':
                $nonce_field = 'gpm_delete_option';
                break;
        }
        
        if (!wp_verify_nonce($_POST['gpm_nonce'], $nonce_field)) {
            wp_die(__('安全验证失败', 'green-packaging'));
        }
        
        // 处理不同操作
        switch ($action) {
            case 'add_packaging_option':
                $this->handle_add_option();
                break;
            case 'toggle_packaging_option':
                $this->handle_toggle_option();
                break;
            case 'delete_packaging_option':
                $this->handle_delete_option();
                break;
        }
    }
    
    /**
     * 处理添加选项
     */
    private function handle_add_option() {
        $data = array(
            'name' => sanitize_text_field($_POST['option_name']),
            'description' => sanitize_textarea_field($_POST['option_description']),
            'eco_level' => intval($_POST['eco_level']),
            'additional_cost' => floatval($_POST['additional_cost'])
        );
        
        if (GPM_Database::add_packaging_option($data)) {
            add_settings_error(
                'gpm_messages',
                'gpm_message',
                __('包装选项添加成功！', 'green-packaging'),
                'success'
            );
        } else {
            add_settings_error(
                'gpm_messages',
                'gpm_message',
                __('添加失败，请重试。', 'green-packaging'),
                'error'
            );
        }
    }
    
    /**
     * 处理切换选项状态
     */
    private function handle_toggle_option() {
        $option_id = intval($_POST['option_id']);
        $option = GPM_Database::get_packaging_options(false);
        
        // 这里简化处理，实际应该查询当前状态
        $new_status = 0; // 默认设为未激活
        
        if (GPM_Database::update_packaging_option($option_id, array('is_active' => $new_status))) {
            add_settings_error(
                'gpm_messages',
                'gpm_message',
                __('选项状态已更新！', 'green-packaging'),

            'success'
        );
    }
}

/**
 * 处理删除选项
 */
private function handle_delete_option() {
    $option_id = intval($_POST['option_id']);
    
    if (GPM_Database::delete_packaging_option($option_id)) {
        add_settings_error(
            'gpm_messages',
            'gpm_message',
            __('包装选项已删除！', 'green-packaging'),
            'success'
        );
    }
}

}

## 五、前端功能实现

### 前端类 (includes/class-frontend.php)

<?php
/**

• 前端功能类
• 处理绿色包装选项在前端的显示和交互
  */

class GPM_Frontend {

public function __construct() {
    // 在结账页面添加包装选项
    add_action('woocommerce_after_order_notes', array($this, 'add_packaging_options_to_checkout'));
    
    // 处理包装选项的选择
    add_action('woocommerce_checkout_update_order_meta', array($this, 'save_packaging_option'));
    
    // 计算包装额外费用
    add_action('woocommerce_cart_calculate_fees', array($this, 'add_packaging_fee'));
    
    // 加载前端脚本
    add_action('wp_enqueue_scripts', array($this, 'enqueue_frontend_assets'));
    
    // 在订单详情页显示包装选项
    add_action('woocommerce_order_details_after_order_table', array($this, 'display_packaging_option_in_order'));
}

/**
 * 加载前端资源
 */
public function enqueue_frontend_assets() {
    if (!is_checkout()) {
        return;
    }
    
    wp_enqueue_script(
        'gpm-frontend-script',
        GPM_PLUGIN_URL . 'assets/js/frontend-script.js',
        array('jquery'),
        GPM_VERSION,
        true
    );
    
    wp_localize_script('gpm-frontend-script', 'gpm_ajax', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('gpm_frontend_nonce')
    ));
}

/**
 * 在结账页面添加包装选项
 */
public function add_packaging_options_to_checkout($checkout) {
    $options = GPM_Database::get_packaging_options();
    
    if (empty($options)) {
        return;
    }
    
    echo '<div id="gpm-packaging-options">';
    echo '<h3>' . __('选择环保包装', 'green-packaging') . '</h3>';
    
    // 获取已保存的选择
    $selected_option = $checkout->get_value('green_packaging_option') ?: 0;
    
    foreach ($options as $option) {
        $option_id = $option['id'];
        $checked = ($selected_option == $option_id) ? 'checked' : '';
        $cost_display = wc_price($option['additional_cost']);
        
        echo '<div class="gpm-option">';
        echo '<input type="radio" id="gpm_option_' . $option_id . '" 
               name="green_packaging_option" value="' . $option_id . '" ' . $checked . '>';
        echo '<label for="gpm_option_' . $option_id . '">';
        echo '<strong>' . esc_html($option['name']) . '</strong>';
        echo '<span class="gpm-eco-badge level-' . $option['eco_level'] . '">';
        echo $this->get_eco_level_label($option['eco_level']);
        echo '</span>';
        
        if ($option['description']) {
            echo '<p class="gpm-description">' . esc_html($option['description']) . '</p>';
        }
        
        if ($option['additional_cost'] > 0) {
            echo '<span class="gpm-cost">(+' . $cost_display . ')</span>';
        } else {
            echo '<span class="gpm-cost free">' . __('免费', 'green-packaging') . '</span>';
        }
        
        echo '</label>';
        echo '</div>';
    }
    
    // 不选择包装的选项
    echo '<div class="gpm-option">';
    echo '<input type="radio" id="gpm_option_none" 
           name="green_packaging_option" value="0" ' . ($selected_option == 0 ? 'checked' : '') . '>';
    echo '<label for="gpm_option_none">';
    echo '<strong>' . __('不使用环保包装', 'green-packaging') . '</strong>';
    echo '</label>';
    echo '</div>';
    
    echo '</div>';
}

/**
 * 获取环保等级标签
 */
private function get_eco_level_label($level) {
    $labels = array(
        1 => __('基础环保', 'green-packaging'),
        2 => __('中等环保', 'green-packaging'),
        3 => __('高级环保', 'green-packaging')
    );
    
    return $labels[$level] ?? '';
}

/**
 * 保存包装选项到订单
 */
public function save_packaging_option($order_id) {
    if (!empty($_POST['green_packaging_option'])) {
        $option_id = intval($_POST['green_packaging_option']);
        
        if ($option_id > 0) {
            $options = GPM_Database::get_packaging_options();
            $selected_option = null;
            
            foreach ($options as $option) {
                if ($option['id'] == $option_id) {
                    $selected_option = $option;
                    break;
                }
            }
            
            if ($selected_option) {
                update_post_meta($order_id, '_green_packaging_option_id', $option_id);
                update_post_meta($order_id, '_green_packaging_option_name', $selected_option['name']);
                update_post_meta($order_id, '_green_packaging_option_cost', $selected_option['additional_cost']);
            }
        } else {
            // 用户选择不使用环保包装
            update_post_meta($order_id, '_green_packaging_option_id', 0);
        }
    }
}

/**
 * 添加包装费用到购物车
 */
public function add_packaging_fee($cart) {
    if (is_admin() && !defined('DOING_AJAX')) {
        return;
    }
    
    if (!isset($_POST['post_data'])) {
        return;
    }
    
    // 解析结账页面数据
    parse_str($_POST['post_data'], $post_data);
    
    if (!empty($post_data['green_packaging_option'])) {
        $option_id = intval($post_data['green_packaging_option']);
        
        if ($option_id > 0) {
            $options = GPM_Database::get_packaging_options();
            
            foreach ($options as $option) {
                if ($option['id'] == $option_id && $option['additional_cost'] > 0) {
                    $fee_label = sprintf(
                        __('环保包装: %s', 'green-packaging'),
                        $option['name']
                    );
                    
                    $cart->add_fee($fee_label, $option['additional_cost']);
                    break;
                }
            }
        }
    }
}

/**
 * 在订单详情页显示包装选项
 */
public function display_packaging_option_in_order($order) {
    $option_id = get_post_meta($order->get_id(), '_green_packaging_option_id', true);
    
    if ($option_id && $option_id > 0) {
        $option_name = get_post_meta($order->get_id(), '_green_packaging_option_name', true);
        $option_cost = get_post_meta($order->get_id(), '_green_packaging_option_cost', true);
        
        echo '<section class="woocommerce-order-packaging-details">';
        echo '<h2>' . __('环保包装信息', 'green-packaging') . '</h2>';
        echo '<table class="woocommerce-table woocommerce-table--packaging-details">';
        echo '<tbody>';
        echo '<tr>';
        echo '<th>' . __('包装类型', 'green-packaging') . ':</th>';
        echo '<td>' . esc_html($option_name) . '</td>';
        echo '</tr>';
        
        if ($option_cost > 0) {
            echo '<tr>';
            echo '<th>' . __('包装费用', 'green-packaging') . ':</th>';
            echo '<td>' . wc_price($option_cost) . '</td>';
            echo '</tr>';
        }
        
        echo '</tbody>';
        echo '</table>';
        echo '</section>';
    }
}

}

## 六、前端交互脚本

### 前端JavaScript (assets/js/frontend-script.js)

/**

• 绿色包装选项前端交互脚本
• 处理包装选项的实时更新和费用计算
  */

jQuery(document).ready(function($) {

// 包装选项变化时更新费用
$('input[name="green_packaging_option"]').on('change', function() {
    updatePackagingFee();
});

/**
 * 更新包装费用
 */
function updatePackagingFee() {
    // 获取选中的包装选项
    var selectedOption = $('input[name="green_packaging_option"]:checked').val();
    
    // 触发购物车更新
    $('body').trigger('update_checkout');
}

// 监听购物车更新完成
$(document.body).on('updated_checkout', function() {
    highlightSelectedOption();
});

/**
 * 高亮显示选中的包装选项
 */
function highlightSelectedOption() {
    $('.gpm-option').removeClass('selected');
    $('input[name="green_packaging_option"]:checked').closest('.gpm-option').addClass('selected');
}

// 初始高亮显示
highlightSelectedOption();

/**
 * AJAX方式获取包装选项（备用方案）
 */
function getPackagingOptionsViaAjax() {
    $.ajax({
        url: gpm_ajax.ajax_url,
        type: 'POST',
        data: {
            action: 'get_packaging_options',
            nonce: gpm_ajax.nonce
        },
        success: function(response) {
            if (response.success) {
                // 处理返回的包装选项数据
                console.log('包装选项加载成功', response.data);
            }
        },
        error: function(xhr, status, error) {
            console.error('获取包装选项失败:', error);
        }
    });
}

// 页面加载时获取包装选项（如果需要）
// getPackagingOptionsViaAjax();

});

## 七、样式美化

### 后台样式 (assets/css/admin-style.css)

/**

• 绿色包装选项管理器 - 后台样式
  */

.gpm-admin-wrap {

max-width: 1200px;
margin: 20px auto;

}

.gpm-form-section,
.gpm-list-section {

background: #fff;
padding: 20px;
margin-bottom: 20px;
border: 1px solid #ccd0d4;
box-shadow: 0 1px 1px rgba(0,0,0,.04);

}

.gpm-form-section h2,
.gpm-list-section h2 {

margin-top: 0;
padding-bottom: 10px;
border-bottom: 1px solid #eee;

}

/ 状态标签 /
.status-active {

color: #46b450;
font-weight: bold;

}

.status-inactive {

color: #dc3232;
font-weight: bold;

}

/ 环保等级徽章 /
.gpm-eco-badge {

display: inline-block;
padding: 2px 8px;
margin-left: 10px;
border-radius: 3px;
font-size: 12px;
font-weight: normal;

}

.gpm-eco-badge.level-1 {

background: #e1f5e1;
color: #2e7d32;

}

.gpm-eco-badge.level-2 {

background: #e3f2fd;
color: #1565c0;

}

.gpm-eco-badge.level-3 {

background: #f3e5f5;
color: #7b1fa2;

}

/ 危险按钮 /
.button-danger {

background: #dc3232;
border-color: #dc3232;
color: #fff;

}

.button-danger:hover {

background: #a00;
border-color: #a00;

}

/ 响应式表格 /
@media screen and (max-width: 782px) {

.wp-list-table th,
.wp-list-table td {
    display: block;
    width: 100%;
}

.wp-list-table th {
    padding-top: 10px;
    padding-bottom: 0;
}

}

## 八、插件使用与测试

### 安装与配置步骤：

1. **安装插件**：
   - 将插件文件夹上传到 `/wp-content/plugins/` 目录
   - 在WordPress后台激活插件

2. **添加包装选项**：
   - 进入 WooCommerce → 绿色包装
   - 填写包装选项信息并保存

3. **前端测试**：
   - 添加商品到购物车
   - 进入结账页面
   - 选择绿色包装选项
   - 确认费用正确计算

### 测试要点：

1. **功能测试**：
   - 包装选项的添加、编辑、删除
   - 选项状态的切换
   - 费用计算的准确性

2. **兼容性测试**：
   - 与不同WordPress主题的兼容性
   - 与其他WooCommerce插件的兼容性

3. **性能测试**：
   - 大量包装选项时的加载速度
   - 结账页面的响应时间

## 九、扩展与优化建议

### 1. 高级功能扩展：

// 示例：添加包装选项的库存管理
add_action('woocommerce_checkout_process', function() {

$selected_option = isset($_POST['green_packaging_option']) ? intval($_POST['green_packaging_option']) : 0;

if ($selected_option > 0) {
    // 检查库存逻辑
    $stock = get_option('gpm_stock_' . $selected_option, 0);
    if ($stock <= 0) {
        wc_add_notice(__('该环保包装暂时缺货，请选择其他选项。', 'green-packaging'), 'error');
    }
}

});

### 2. 性能优化建议：
- 添加包装选项缓存机制
- 使用AJAX懒加载包装选项
- 优化数据库查询

### 3. 用户体验改进：
- 添加包装选项的图片支持
- 实现包装选项的预览功能
- 添加环保效益计算器

## 十、总结

通过本教程，我们成功开发了一个完整的WordPress绿色包装选项管理插件。该插件具有以下特点：

1. **模块化设计**：清晰的代码结构，便于维护和扩展
2. **完整功能**：从前端展示到后台管理的完整解决方案
3. **用户友好**：直观的界面和流畅的用户体验
4. **可扩展性**：预留了扩展接口，方便添加新功能

这个插件特别适合中小型电商网站，能够有效提升网站的环保形象，同时满足消费者对绿色包装的需求。开发者可以根据实际需求进一步定制和扩展功能，打造更完善的环保电商解决方案。

**注意事项**：
- 在生产环境使用前，请进行充分测试
- 定期备份数据库
- 关注WooCommerce更新，确保插件兼容性
- 考虑添加多语言支持以服务国际客户