如何在WordPress自定义Elementor部件中添加可用户自定义的垂直分隔线

阿华AIGC实验室

2026-4-28

嘿，我懂你碰到的这个坑——Elementor自带的Divider控件其实是个独立的小部件，如果你只是在自定义部件里注册了Divider相关的设置面板，它只会在后台给用户提供调整选项，不会自动帮你在前端渲染出那条线的。咱们得手动把这些设置转化成实际的HTML和样式才行，我给你一步步捋清楚怎么做：

第一步：正确注册垂直分隔线的自定义控件

首先要在你的自定义Widget类的_register_controls方法里，添加专门的设置组，让用户可以调整分隔线的宽度（也就是线条粗细）、高度（线条长度）、颜色和间距。这里不用直接用Elementor的内置Divider控件，而是用Slider、Color这些基础控件来构建我们需要的选项：

protected function _register_controls() {
    // 保留你原本的文本控件等代码...

    // 新增垂直分隔线设置组
    $this->start_controls_section(
        'section_vertical_divider',
        [
            'label' => esc_html__( 'Vertical Divider', 'your-plugin-domain' ),
            'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
        ]
    );

    // 分隔线宽度（线条粗细）
    $this->add_control(
        'divider_width',
        [
            'label' => esc_html__( 'Line Thickness', 'your-plugin-domain' ),
            'type' => \Elementor\Controls_Manager::SLIDER,
            'range' => [
                'px' => [
                    'min' => 1,
                    'max' => 20,
                ],
            ],
            'default' => [
                'unit' => 'px',
                'size' => 2,
            ],
            'selectors' => [
                '{{WRAPPER}} .vertical-divider' => 'width: {{SIZE}}{{UNIT}};',
            ],
        ]
    );

    // 分隔线高度（线条长度）
    $this->add_control(
        'divider_height',
        [
            'label' => esc_html__( 'Line Length', 'your-plugin-domain' ),
            'type' => \Elementor\Controls_Manager::SLIDER,
            'range' => [
                'px' => [
                    'min' => 20,
                    'max' => 500,
                ],
                '%' => [
                    'min' => 10,
                    'max' => 100,
                ],
            ],
            'default' => [
                'unit' => 'px',
                'size' => 100,
            ],
            'selectors' => [
                '{{WRAPPER}} .vertical-divider' => 'height: {{SIZE}}{{UNIT}};',
            ],
        ]
    );

    // 分隔线颜色
    $this->add_control(
        'divider_color',
        [
            'label' => esc_html__( 'Color', 'your-plugin-domain' ),
            'type' => \Elementor\Controls_Manager::COLOR,
            'default' => '#cccccc',
            'selectors' => [
                '{{WRAPPER}} .vertical-divider' => 'background-color: {{VALUE}};',
            ],
        ]
    );

    // 分隔线与前后文本的间距
    $this->add_control(
        'divider_spacing',
        [
            'label' => esc_html__( 'Spacing', 'your-plugin-domain' ),
            'type' => \Elementor\Controls_Manager::DIMENSIONS,
            'size_units' => [ 'px', 'em' ],
            'selectors' => [
                '{{WRAPPER}} .vertical-divider' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            ],
        ]
    );

    $this->end_controls_section();
}

第二步：在部件渲染时输出分隔线HTML

接下来要在Widget的render()方法（前端显示）和_content_template()方法（编辑器预览）里，把分隔线的HTML放在两段文本之间：

protected function render() {
    $settings = $this->get_settings_for_display();

    // 输出第一段文本（假设你已经有first_text控件）
    echo '<div class="widget-text-block">' . wp_kses_post( $settings['first_text'] ) . '</div>';

    // 输出垂直分隔线
    echo '<div class="vertical-divider"></div>';

    // 输出第二段文本（假设你有second_text控件）
    echo '<div class="widget-text-block">' . wp_kses_post( $settings['second_text'] ) . '</div>';
}

// 编辑器预览模板
protected function _content_template() {
    ?>
    <div class="widget-text-container">
        <div class="widget-text-block">{{{ settings.first_text }}}</div>
        <div class="vertical-divider"></div>
        <div class="widget-text-block">{{{ settings.second_text }}}</div>
    </div>
    <?php
}

第三步：添加基础CSS确保布局正确

最后要给部件加一点基础样式，让文本和垂直分隔线能横向对齐，不然分隔线会默认占满一行：

// 注册部件的前端样式
public function get_style_depends() {
    wp_register_style(
        'custom-widget-styles',
        plugins_url( 'css/custom-widget.css', __FILE__ ) // 替换成你插件的CSS路径
    );
    return [ 'custom-widget-styles' ];
}

然后在对应的CSS文件里写：

.widget-text-container {
    display: flex;
    align-items: center; /* 让文本和分隔线垂直居中 */
    flex-wrap: wrap; /* 响应式场景下自动换行 */
}

.widget-text-block {
    font-size: 16px;
    /* 可根据需求添加更多文本样式 */
}

.vertical-divider {
    /* 基础默认样式，会被控件设置覆盖 */
    width: 2px;
    height: 80px;
    background-color: #ccc;
}