WordPress 页面构建器（Elementor/Beaver Builder）二次定制：创建自定义小工具、动态内容与全局样式

页面构建器（Page Builder）如 Elementor、Beaver Builder、Gutenberg 等，已经成为 WordPress 建站的主流工具。对于开发者来说，页面构建器提供了丰富的扩展接口，允许你创建自定义小工具/元素、接入动态数据源、以及控制全局样式。掌握这些定制能力，可以让你在页面构建器的框架下实现任何设计需求。

以 Elementor 为例，它是最流行的页面构建器之一，提供了完善的开发者文档。创建自定义 Elementor 小工具需要创建一个继承 Elementor\Widget_Base 的类：

class Custom_Elementor_Widget extends \Elementor\Widget_Base {
    public function get_name() {
        return 'custom_hero_widget';
    }
    
    public function get_title() {
        return '自定义英雄区';
    }
    
    public function get_icon() {
        return 'eicon-banner';
    }
    
    public function get_categories() {
        return array('general');
    }
    
    protected function _register_controls() {
        $this->start_controls_section('content_section', array(
            'label' => '内容',
            'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
        ));
        $this->add_control('title', array(
            'label' => '标题',
            'type' => \Elementor\Controls_Manager::TEXT,
            'default' => '欢迎来到我们的网站',
        ));
        $this->add_control('subtitle', array(
            'label' => '副标题',
            'type' => \Elementor\Controls_Manager::TEXTAREA,
            'default' => '这是副标题内容',
        ));
        $this->add_control('background_image', array(
            'label' => '背景图片',
            'type' => \Elementor\Controls_Manager::MEDIA,
            'default' => array('url' => ''),
        ));
        $this->end_controls_section();
        
        // 样式控制
        $this->start_controls_section('style_section', array(
            'label' => '样式',
            'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        ));
        $this->add_control('title_color', array(
            'label' => '标题颜色',
            'type' => \Elementor\Controls_Manager::COLOR,
            'default' => '#ffffff',
        ));
        $this->end_controls_section();
    }
    
    protected function render() {
        $settings = $this->get_settings_for_display();
        ?>
        <div class="custom-hero" style="background-image: url(<?php echo esc_url($settings['background_image']['url']); ?>);">
            <h1 style="color: <?php echo esc_attr($settings['title_color']); ?>;"><?php echo esc_html($settings['title']); ?></h1>
            <p><?php echo esc_html($settings['subtitle']); ?></p>
        </div>
        <?php
    }
}

最后注册这个小工具：

add_action('elementor/widgets/widgets_registered', 'register_custom_elementor_widget');
function register_custom_elementor_widget($widgets_manager) {
    require_once(__DIR__ . '/custom-widget.php');
    $widgets_manager->register_widget_type(new Custom_Elementor_Widget());
}

Beaver Builder 的定制方式类似，但接口略有不同。Beaver Builder 的小工具通过 FLBuilder::register_module 注册，配置数组定义控件和渲染回调。

动态内容的接入 是页面构建器高级定制的另一个方向。Elementor 有“动态标签”（Dynamic Tags）系统，允许用户从自定义字段、ACF、或者自定义数据源中拉取内容。注册动态标签需要继承 Elementor\Core\DynamicTags\Tag 类。

全局样式 控制是页面构建器定制的顶端。你可以通过 CSS 钩子或者 JavaScript 过滤器来修改全局设置。例如，在 Elementor 中，你可以使用 elementor/document/config 过滤器修改全局字体、颜色、间距等默认值，让所有页面使用统一的品牌风格。

页面构建器的定制可以让你把复杂的业务组件（比如产品列表、团队介绍、合作伙伴轮播）封装成可视化元素，让内容编辑人员可以像搭积木一样构建页面，无需编写任何代码。对于代理商和建站公司来说，这是一项极具价值的能力。