Elementor自定义小部件双图片控件异常问题排查

你的问题根源在于两个图片控件使用了相同的ID（'image'），Elementor会用后一个控件的值覆盖前一个，导致只有第二个图片控件能正常工作。

修改方案： #

给两个控件设置唯一的ID，分别对应各自的分区：

$this->start_controls_section(
    'section_image_one',
    [
        'label'             => esc_html__( 'Image One' , $this->domain ),
    ]
);

$this->add_control(
    'image_one', // 修改为唯一ID
    [
        'label'             => esc_html__( 'Choose Image', $this->domain ),
        'type'              => Controls_Manager::MEDIA,
        'dynamic'       => [
                'active'    => true,
        ],
        'default' => [
                'url'       => Utils::get_placeholder_image_src(),
        ],
    ]
);
$this->end_controls_section();

$this->start_controls_section(
    'section_image_two',
    [
        'label'             => esc_html__( 'Image Two' , $this->domain ),
    ]
);

$this->add_control(
    'image_two', // 修改为唯一ID
    [
        'label'             => esc_html__( 'Choose Image', $this->domain ),
        'type'              => Controls_Manager::MEDIA,
        'dynamic'       => [
                'active'    => true,
        ],
        'default' => [
                'url'       => Utils::get_placeholder_image_src(),
        ],
    ]
);
$this->end_controls_section();

渲染小部件时调用控件值： #

在render()方法里，需要用修改后的ID获取对应图片：

$image_one = $this->get_settings_for_display( 'image_one' );
$image_two = $this->get_settings_for_display( 'image_two' );

// 输出图片示例
if ( ! empty( $image_one['url'] ) ) {
    echo '<img src="' . esc_url( $image_one['url'] ) . '" alt="Image One">';
}
if ( ! empty( $image_two['url'] ) ) {
    echo '<img src="' . esc_url( $image_two['url'] ) . '" alt="Image Two">';
}

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