如何使用WordPress插件创建Divi自定义模块及WooCommerce产品滑块

安全阿岳

2026-6-27

一、用WordPress插件创建Divi自定义模块

1. 搭建基础插件结构

新建一个插件文件夹（例如divi-custom-modules），在其中创建主文件divi-custom-modules.php，写入基础插件声明：

<?php
/**
 * Plugin Name: Divi自定义模块集合
 * Description: 开发专属Divi自定义模块
 * Version: 1.0
 * Author: 你的名称
 */

// 禁止直接访问文件
if ( ! defined( 'ABSPATH' ) ) exit;

2. 注册自定义模块

在主文件中添加代码，继承Divi核心的ET_Builder_Module类实现模块注册：

add_action( 'et_builder_ready', 'register_my_divi_custom_module' );
function register_my_divi_custom_module() {
    if ( ! class_exists( 'ET_Builder_Module' ) ) return;

    class My_Custom_Divi_Module extends ET_Builder_Module {
        public $slug       = 'my_custom_module';
        public $vb_support = 'on'; // 启用可视化编辑器支持

        public function init() {
            $this->name = esc_html__( '我的自定义模块', 'divi-custom-modules' );
            // 可选：添加模块图标，需提前准备svg文件
            // $this->icon_path = plugin_dir_path( __FILE__ ) . 'icon.svg';
        }

        // 定义模块的设置字段
        public function get_fields() {
            return array(
                'custom_title' => array(
                    'label'           => esc_html__( '自定义标题', 'divi-custom-modules' ),
                    'type'            => 'text',
                    'option_category' => 'basic_option',
                    'description'     => esc_html__( '输入模块的标题内容', 'divi-custom-modules' ),
                    'toggle_slug'     => 'main_content',
                ),
                // 可添加更多字段：文本框、图片选择器、下拉菜单等
            );
        }

        // 渲染模块前端显示内容
        public function render( $attrs, $content = null, $render_slug ) {
            $custom_title = $this->props['custom_title'];
            
            ob_start();
            ?>
            <div class="my-custom-module">
                <?php if ( ! empty( $custom_title ) ) : ?>
                    <h2 class="custom-module-title"><?php echo esc_html( $custom_title ); ?></h2>
                <?php endif; ?>
                <p>这是我的专属自定义模块内容区域</p>
            </div>
            <?php
            return ob_get_clean();
        }
    }

    new My_Custom_Divi_Module();
}

3. 激活插件并测试

将插件文件夹上传到wp-content/plugins/目录，在WordPress后台激活插件。打开Divi Builder后，即可在模块列表中找到「我的自定义模块」，拖拽到页面即可配置使用。

二、在Divi Builder中创建带指定元素的WooCommerce产品滑块

我们通过自定义Divi模块结合Swiper滑块库实现需求，步骤如下：

1. 引入Swiper依赖

在插件主文件中添加代码，加载Swiper的CSS和JS资源：

add_action( 'wp_enqueue_scripts', 'enqueue_swiper_for_product_slider' );
function enqueue_swiper_for_product_slider() {
    // 仅在前端且使用Divi Builder时加载
    if ( ! is_admin() && function_exists( 'et_builder_is_used' ) && et_builder_is_used() ) {
        wp_enqueue_style( 'swiper-css', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css' );
        wp_enqueue_script( 'swiper-js', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js', array(), '11.0.0', true );
        
        // 初始化滑块的自定义脚本
        wp_add_inline_script( 'swiper-js', "
            document.addEventListener('DOMContentLoaded', function() {
                new Swiper('.wc-product-slider', {
                    slidesPerView: 3,
                    spaceBetween: 20,
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true,
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                    // 响应式适配
                    responsive: [
                        {
                            breakpoint: 768,
                            settings: { slidesPerView: 2 }
                        },
                        {
                            breakpoint: 480,
                            settings: { slidesPerView: 1 }
                        }
                    ]
                });
            });
        " );
    }
}

2. 创建产品滑块模块

在之前的模块注册函数中，添加新的产品滑块模块类：

class WC_Product_Slider_Module extends ET_Builder_Module {
    public $slug       = 'wc_product_slider';
    public $vb_support = 'on';

    public function init() {
        $this->name = esc_html__( 'WooCommerce产品滑块', 'divi-custom-modules' );
        $this->description = esc_html__( '展示包含价格、SKU和加购按钮的产品滑块', 'divi-custom-modules' );
    }

    // 定义模块配置字段
    public function get_fields() {
        return array(
            'product_count' => array(
                'label'           => esc_html__( '产品数量', 'divi-custom-modules' ),
                'type'            => 'number',
                'default'         => 6,
                'option_category' => 'basic_option',
                'description'     => esc_html__( '设置要展示的产品数量', 'divi-custom-modules' ),
                'toggle_slug'     => 'main_content',
            ),
            'product_category' => array(
                'label'           => esc_html__( '产品分类', 'divi-custom-modules' ),
                'type'            => 'taxonomy',
                'taxonomy'        => 'product_cat',
                'option_category' => 'basic_option',
                'description'     => esc_html__( '可选：筛选指定分类的产品', 'divi-custom-modules' ),
                'toggle_slug'     => 'main_content',
            ),
        );
    }

    // 渲染产品滑块内容
    public function render( $attrs, $content = null, $render_slug ) {
        $product_count = $this->props['product_count'];
        $product_category = $this->props['product_category'];

        // 构建产品查询参数
        $args = array(
            'post_type' => 'product',
            'posts_per_page' => $product_count,
            'post_status' => 'publish',
        );

        if ( ! empty( $product_category ) ) {
            $args['tax_query'] = array(
                array(
                    'taxonomy' => 'product_cat',
                    'field' => 'term_id',
                    'terms' => $product_category,
                ),
            );
        }

        $products = new WP_Query( $args );

        if ( ! $products->have_posts() ) {
            return '<p>暂无产品可展示</p>';
        }

        ob_start();
        ?>
        <div class="wc-product-slider swiper">
            <div class="swiper-wrapper">
                <?php while ( $products->have_posts() ) : $products->the_post(); global $product; ?>
                    <div class="swiper-slide product-slide">
                        <div class="product-image">
                            <?php echo woocommerce_get_product_thumbnail(); ?>
                        </div>
                        <div class="product-info">
                            <h3 class="product-title"><?php the_title(); ?></h3>
                            <div class="product-price"><?php echo $product->get_price_html(); ?></div>
                            <div class="product-sku">SKU: <?php echo $product->get_sku() ?: '无'; ?></div>
                            <div class="add-to-cart-btn">
                                <?php echo do_shortcode( '[add_to_cart id="' . get_the_ID() . '"]' ); ?>
                            </div>
                        </div>
                    </div>
                <?php endwhile; wp_reset_postdata(); ?>
            </div>
            <!-- 滑块分页与导航 -->
            <div class="swiper-pagination"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
        <?php
        return ob_get_clean();
    }
}

new WC_Product_Slider_Module();

3. 添加基础样式（可选）

在插件文件夹中创建style.css文件，添加滑块的基础样式：

.wc-product-slider {
    margin: 40px 0;
}
.product-slide {
    text-align: center;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 8px;
    transition: all 0.3s ease;
}
.product-slide:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.product-image {
    margin-bottom: 15px;
}
.product-title {
    font-size: 18px;
    margin-bottom: 10px;
}
.product-price {
    font-size: 16px;
    color: #e74c3c;
    margin-bottom: 8px;
}
.product-sku {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
}

然后在主插件文件中引入该样式：

add_action( 'wp_enqueue_scripts', 'enqueue_product_slider_styles' );
function enqueue_product_slider_styles() {
    wp_enqueue_style( 'wc-product-slider-style', plugin_dir_url( __FILE__ ) . 'style.css' );
}

4. 测试滑块

激活插件后，在Divi Builder中找到「WooCommerce产品滑块」模块，拖拽到页面后配置产品数量、分类等参数，保存页面后刷新即可看到包含产品图片、价格、SKU和加购按钮的滑动产品列表。

内容的提问来源于stack exchange，提问作者developer786

如何使用WordPress插件创建Divi自定义模块及WooCommerce产品滑块

1. 搭建基础插件结构 #

2. 注册自定义模块 #

3. 激活插件并测试 #

1. 引入Swiper依赖 #

2. 创建产品滑块模块 #

3. 添加基础样式（可选） #

4. 测试滑块 #