如何为Elementor页面内的各类内容添加WordPress标签

你已经成功给Page类型启用了post_tag分类法，但Elementor本身不支持给单个页面元素（链接、文本块、图片等）添加标签，以下是自定义实现方案：

一、在Elementor元素编辑面板添加标签字段 #

通过Elementor的钩子，给元素编辑界面添加标签输入控件，支持自定义标签或关联WordPress原生post_tag：

方案1：自定义自由输入标签 #

将以下代码添加到主题functions.php或自定义插件中：

// 在Elementor元素面板插入标签输入字段
add_action('elementor/element/after_section_end', 'add_elementor_element_tags_field', 10, 3);
function add_elementor_element_tags_field($element, $section_id, $args) {
    // 可指定仅给特定元素添加，比如图片、文本编辑器：if (in_array($element->get_name(), ['image', 'text-editor']))
    if ($section_id === '_section_style') { // 把标签字段放在样式设置区之后
        $element->add_control(
            'element_tags',
            [
                'label' => '元素标签',
                'type' => \Elementor\Controls_Manager::TAGS,
                'placeholder' => '输入标签，逗号分隔',
                'description' => '为当前Elementor元素添加自定义标签',
            ]
        );
    }
}

// 保存元素标签到页面元数据
add_action('elementor/element/save', 'save_elementor_element_tags', 10, 2);
function save_elementor_element_tags($element, $args) {
    $tags = $element->get_settings('element_tags');
    $element_id = $element->get_id();
    if (!empty($tags)) {
        update_post_meta($element->get_post_id(), '_elementor_element_' . $element_id . '_tags', $tags);
    } else {
        delete_post_meta($element->get_post_id(), '_elementor_element_' . $element_id . '_tags');
    }
}

方案2：关联WordPress原生post_tag #

如果想复用已有的post_tag分类，修改控件类型为分类选择器：

// 在Elementor元素面板插入原生标签选择字段
add_action('elementor/element/after_section_end', 'add_elementor_element_tags_field', 10, 3);
function add_elementor_element_tags_field($element, $section_id, $args) {
    if ($section_id === '_section_style') {
        $element->add_control(
            'element_tags',
            [
                'label' => '元素标签',
                'type' => \Elementor\Controls_Manager::TAXONOMY,
                'taxonomy' => 'post_tag',
                'multiple' => true,
                'label_block' => true,
                'description' => '选择已有的WordPress标签关联到当前元素',
            ]
        );
    }
}

// 保存选中的原生标签ID到页面元数据
add_action('elementor/element/save', 'save_elementor_element_tags', 10, 2);
function save_elementor_element_tags($element, $args) {
    $tag_ids = $element->get_settings('element_tags');
    $element_id = $element->get_id();
    if (!empty($tag_ids)) {
        update_post_meta($element->get_post_id(), '_elementor_element_' . $element_id . '_tag_ids', $tag_ids);
    } else {
        delete_post_meta($element->get_post_id(), '_elementor_element_' . $element_id . '_tag_ids');
    }
}

二、前端调用并显示元素标签 #

添加以下代码，在前端渲染Elementor元素时输出标签：

对应方案1（自定义标签）： #

add_action('elementor/frontend/element/before_render', 'display_elementor_element_tags', 10, 1);
function display_elementor_element_tags($element) {
    $element_id = $element->get_id();
    $tags = get_post_meta($element->get_post_id(), '_elementor_element_' . $element_id . '_tags', true);
    if (!empty($tags)) {
        $tag_list = explode(',', $tags);
        echo '<div class="element-tags">';
        foreach ($tag_list as $tag) {
            echo '<span class="element-tag">' . esc_html(trim($tag)) . '</span>';
        }
        echo '</div>';
    }
}

对应方案2（原生post_tag）： #

add_action('elementor/frontend/element/before_render', 'display_elementor_element_tags', 10, 1);
function display_elementor_element_tags($element) {
    $element_id = $element->get_id();
    $tag_ids = get_post_meta($element->get_post_id(), '_elementor_element_' . $element_id . '_tag_ids', true);
    if (!empty($tag_ids)) {
        echo '<div class="element-tags">';
        foreach ($tag_ids as $tag_id) {
            $tag = get_term($tag_id, 'post_tag');
            if ($tag && !is_wp_error($tag)) {
                echo '<span class="element-tag">' . esc_html($tag->name) . '</span>';
            }
        }
        echo '</div>';
    }
}

三、自定义标签样式（可选） #

在主题自定义CSS中添加样式美化标签：

.element-tags {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.element-tag {
    background-color: #f1f1f1;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    color: #333;
}

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