字段渲染

表单中使用的字段需要在前端有输出。渲染方法用于设置字段在网站前端向用户显示时的代码。

渲染方法

实际生成字段输出的方法称为 render()。在你的字段类中，按如下方式使用此方法：

class Elementor_Test_Field extends \ElementorPro\Modules\Forms\Fields\Field_Base {

	public function render( $item, $item_index, $form ): void {

		echo '<input type="text" class="elementor-test-field" title="Some text...">';

	}

}

• 字段渲染 – render() 方法渲染数据并显示字段输出。

渲染属性

要以“Elementor 的方式”添加属性，不应将 HTML 元素与属性硬编码。应使用 add_render_attribute() 方法。此方法负责以编程方式定义属性及其值。

class Elementor_Test_Field extends \ElementorPro\Modules\Forms\Fields\Field_Base {

	public function render( $item, $item_index, $form ): void {
		$form->add_render_attribute(
			'input' . $item_index,
			[
				'type'        => 'text',
				'class'       => 'elementor-test-field',
				'placeholder' => esc_html__( 'Some placeholder', 'textdomain' ),
			]
		);

		echo '<input ' . $form->get_render_attribute_string( 'input' . $item_index ) . '>';
	}

}

从字段控件获取数据

某些字段具有自定义控件，允许用户自定义字段。在表单小部件中显示用户数据的方式如下：

class Elementor_Test_Field extends \ElementorPro\Modules\Forms\Fields\Field_Base {

	public function render( $item, $item_index, $form ): void {
		$form->add_render_attribute(
			'textarea' . $item_index,
			[
				'class' => 'elementor-test-field',
				'rows'  => $item['textarea-rows'],
				'cols'  => $item['textarea-cols'],
			]
		);

		echo '<textarea ' . $form->get_render_attribute_string( 'textarea' . $item_index ) . '></textarea>';
	}

}