如何在Elementor钩子中获取列的自定义CSS ID？

开发者阿泽

2026-7-10

如何获取Elementor列的自定义CSS ID并添加Iframe？

问题场景

在Elementor编辑器中给特定列设置了自定义CSS ID「custom_iframe」，希望通过elementor/frontend/column/after_render钩子在该列下方插入Iframe，但调用$element->get_ID()返回的是Elementor自动生成的内部ID，无法匹配自定义ID。

问题原因

$element->get_ID()方法返回的是Elementor为元素生成的唯一内部标识，并非你在「编辑列>高级>布局>CSS ID」中设置的自定义ID。自定义CSS ID存储在元素的设置参数里，需要从设置数组中读取。

解决方案

通过$element->get_settings()方法获取元素的设置数组，其中自定义CSS ID对应的键为_css_id。修改代码如下：

function add_custom_script_below_custom_column($element)
{
    if (is_page('careers')) {
        // 获取自定义CSS ID
        $custom_id = $element->get_settings('_css_id');
        // 检查自定义ID是否存在且匹配目标值
        if (!empty($custom_id) && $custom_id == 'custom_iframe') {
            echo '<iframe id="grnhse_iframe" width="100%" frameborder="0" scrolling="auto" allow="geolocation" onload="window.scrollTo(0,0)" title="Greenhouse Job Board" src="https://boards.greenhouse.io/embed/job_app?for=rfcareers&token=5746638003" height="100vh"></iframe>';
        }
    }
}
add_action('elementor/frontend/column/after_render', 'add_custom_script_below_custom_column');