Elementor Repeater控件：从Select字段动态设置标题

本教程详细介绍了如何在elementor repeater控件中，利用underscore.js模板和php的`json_encode`功能，将repeater内部select控件所选wordpress页面的标题动态地显示为repeater项的标题。通过将页面id与标题的映射关系注入到javascript模板中，实现了repeater项的直观命名，极大地提升了后台编辑的用户体验和可读性。

Elementor是一款功能强大的页面构建器，其Repeater控件允许开发者创建可重复的字段组，极大地增强了内容的灵活性。在开发自定义Elementor控件时，我们经常会遇到需要将Repeater内部某个Select控件所选值的“标签”作为Repeater项标题显示的需求。例如，在一个Repeater中，如果有一个Select字段用于选择WordPress页面，我们希望Repeater的每个子项标题直接显示为所选页面的名称，而不是其ID。

核心问题分析

当Repeater内部包含一个Select控件，其选项（options）是ID => Title形式的键值对时，如果直接将title_field设置为{{{ select_field_name }}}，它只会显示所选选项的ID，而非用户友好的标题。要显示标题，我们需要一种机制，能够根据Select控件返回的ID，查找到对应的标题文本。

Elementor的title_field属性支持Underscore.js模板语法，这意味着我们可以在其中嵌入JavaScript逻辑。因此，解决方案的关键在于：

1. 在PHP端准备好ID到标题的映射数据。
2. 将这些数据以JavaScript对象的形式注入到title_field的Underscore模板中。
3. 在模板中，利用Select控件的选中值（页面ID）作为键，从注入的JavaScript对象中查找并显示对应的页面标题。

解决方案详解与示例代码

下面我们将通过具体的代码示例，详细演示如何实现这一功能。

1. 准备Select控件的选项数据

首先，我们需要一个PHP函数来获取WordPress页面列表，并将其格式化为页面ID => 页面标题的关联数组。这个数组将作为Select控件的options，同时也将用于构建title_field中的查找表。

灵感PPT

AI灵感PPT - 免费一键PPT生成工具

282

查看详情

<?php
// 假设 Core_Elementor_Extensions::core_get_pages() 是一个辅助函数，
// 它返回一个WordPress页面列表，格式为 [ 'page_id' => 'Page Title', ... ]
// 示例：
// function core_get_pages() {
//     $pages = get_pages();
//     $page_list = [];
//     foreach ($pages as $page) {
//         $page_list[$page->ID] = $page->post_title;
//     }
//     return $page_list;
// }
$page_list = \Core_Elementor_Extensions::core_get_pages();

// $page_list 示例结构：
// [
//     '11' => '关于我们',
//     '22' => '服务项目',
//     '33' => '联系我们'
// ]
?>

2. 定义Repeater内部的Select控件

接下来，在定义Repeater字段时，添加一个类型为Controls_Manager::SELECT的控件，并使用上面准备好的$page_list作为其options。

<?php
use Elementor\Controls_Manager;
use Elementor\Repeater;

// 实例化Repeater对象
$repeater = new Repeater();

$repeater->add_control(
    'posts_pages', // 这个字段名将用于在title_field模板中获取选中值
    [
        'label' => esc_html__('选择页面', 'core'),
        'type' => Controls_Manager::SELECT,
        'options' => $page_list, // 使用准备好的页面列表
        'label_block' => true,
        'multiple' => false,
    ]
);
?>

3. 配置Repeater的title_field

这是实现动态标题的核心步骤。我们需要将$page_list数组通过json_encode转换为JSON字符串，然后将其注入到title_field的Underscore.js模板中。

<?php
// ...（前述代码：$page_list 和 $repeater 定义）...

$this->add_control(
    'core_page_list',
    [
        'label' => __('内容列表', 'core'),
        'type' => Controls_Manager::REPEATER,
        'fields' => $repeater->get_controls(),
        // 核心部分：title_field 的配置
        'title_field' => "<# "
            // 1. 将PHP的$page_list数组通过json_encode转换为JSON字符串，
            //    并在JavaScript模板中赋值给pageLabels变量。
            //    例如：let pageLabels = {"11":"关于我们", "22":"服务项目"};
            . "let pageLabels = " . json_encode($page_list) . "; "

            // 2. 'posts_pages'是Repeater内部Select控件的字段名。
            //    其当前选中的值（即页面ID）在Underscore模板中是直接可用的变量。
            . "let selectedPageId = posts_pages; "

            // 3. 使用选定的页面ID作为键，从pageLabels对象中获取对应的页面标题。
            //    如果selectedPageId不存在于pageLabels中，则默认显示“未选择页面”。
            . "let pageTitle = pageLabels[selectedPageId] ? pageLabels[selectedPageId] : '未选择页面'; "
            . "#>"
            // 4. 使用{{{ pageTitle }}}在Repeater项的标题区域显示获取到的页面标题。
            //    三重花括号表示不转义输出，适用于纯文本。
            . "{{{ pageTitle }}}",
    ]
);
?>

工作原理分析

• json_encode($page_list): 这个PHP函数至关重要。它将PHP关联数组$page_list（如['11' => '关于我们']）转换为一个JSON格式的字符串（如{"11":"关于我们"}）。当这个字符串被嵌入到title_field中时，JavaScript引擎会将其解析为一个可用的JavaScript对象。
• <# ... #>: 这是Underscore.js模板的执行代码块语法。所有包含在此块中的内容都会被当作JavaScript代码执行。我们在这里声明了pageLabels、selectedPageId和pageTitle变量。
• posts_pages: 在Repeater的title_field模板中，Repeater内部所有控件的字段名都会作为变量直接可用。posts_pages即代表了名为posts_pages的Select控件当前选中的值（也就是页面ID）。
• pageLabels[selectedPageId]: 利用JavaScript对象的键值查找特性，我们通过selectedPageId（页面ID）从pageLabels对象中精确地获取到对应的页面标题。
• {{{ pageTitle }}}: 这是Underscore.js模板的非转义输出语法。它会将pageTitle变量的值直接插入到HTML中，而不会对其进行HTML实体转义。这适用于显示纯文本内容。

注意事项

• 数据结构: 确保$page_list数组的键是Select控件实际返回的值（通常是ID），值是您希望显示的标题。
• json_encode的正确使用: json_encode是确保PHP数据正确转换为JavaScript可识别格式的关键。务必将其结果直接拼接在JavaScript变量赋值的右侧。
• 字段名匹配: title_field模板中使用的变量名（如posts_pages）必须与Repeater内部Select控件的实际字段名（name属性）完全一致。
• 性能考量: 如果$page_list包含成千上万条数据，将其全部json_encode并注入到每个Repeater项的title_field中，可能会对页面加载和编辑器性能产生轻微影响。对于极端大量的数据，可能需要考虑其他优化策略，例如按需加载或更复杂的客户端查找。
• 默认值/错误处理: 在示例中，我们添加了pageLabels[selectedPageId] ? pageLabels[selectedPageId] : '未选择页面'，这是一种简单的错误处理，以防selectedPageId在pageLabels中找不到对应项（例如，页面已被删除）。

总结

通过上述方法，我们成功地解决了Elementor Repeater控件中从Select字段动态设置标题的问题。这种技术不仅提升了Elementor后台编辑的直观性和用户体验，也展示了Elementor控件开发中PHP与JavaScript（Underscore.js模板）结合的强大能力。掌握这种模式，将有助于开发者构建更加灵活和用户友好的Elementor自定义控件。

以上就是Elementor Repeater控件：从Select字段动态设置标题的详细内容，更多请关注php中文网其它相关文章！