title: "字段内容模板" post_status: publish comment_status: open taxonomy: category: - elementor-developers-docs post_tag: - Form Fields - Src - Repos
字段内容模板
在渲染小部件时,我们有一个 PHP 模板和一个 JS 模板。然而,表单字段渲染只有 PHP 模板,没有 JS 模板。外部开发者可以使用一种变通方法来克服这个障碍。
渲染 JS 模板
以下代码是一个简单的变通方法,用于在 Elementor 编辑器中渲染 JS 模板。
<?php
class Elementor_Test_Field extends \ElementorPro\Modules\Forms\Fields\Field_Base {
public function __construct() {
parent::__construct();
add_action( 'elementor/preview/init', [ $this, 'editor_preview_footer' ] );
}
public function editor_preview_footer(): void {
add_action( 'wp_footer', [ $this, 'content_template_script' ] );
}
public function content_template_script(): void {
?>
<script>
jQuery( document ).ready( () => {
elementor.hooks.addFilter(
'elementor_pro/forms/content_template/field/<?php echo $this->get_type(); ?>',
function ( inputField, item, i ) {
const fieldType = 'text';
const fieldId = `form_field_${i}`;
const fieldClass = `elementor-field-textual elementor-field ${item.css_classes}`;
const title = "<?php echo esc_html__( 'Some text...', 'textdomain' ); ?>";
return `<input type="${fieldType}" id="${fieldId}" class="${fieldClass}" title="${title}">`;
}, 10, 3
);
});
</script>
<?php
}
}
::: warning 请注意
1. 上述描述的变通方法是一个临时解决方案。
2. 我们可能会引入一个官方的 content_template() 方法来渲染 JS 模板,就像为 Elementor 小部件所做的那样。
3. 为确保您的代码具有未来兼容性,请确保您的字段类没有名为 content_template() 的方法。
:::