本教程详细介绍了如何在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逻辑。因此，解决方案的关键在于：
在PHP端准备好ID到标题的映射数据。将这些数据以Javascript对象的形式注入到title_field的Underscore模板中。在模板中，利用Select控件的选中值（页面ID）作为键，从注入的Javascript对象中查找并显示对应的页面标题。解决方案详解与示例代码
下面我们将通过具体的代码示例，详细演示如何实现这一功能。
1. 准备Select控件的选项数据
首先，我们需要一个PHP函数来获取WordPress页面列表，并将其格式化为页面ID => 页面标题的关联数组。这个数组将作为Select控件的options，同时也将用于构建title_field中的查找表。
DeepSeek 幻方量化公司旗下的开源大模型平台
10435 查看详情 
<?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。
<?phpuse 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中文网其它相关文章！
