Wizhi CMS 文档

Formmanager

Formbuilder 已改用 WordPress FieldManager 的方案, 请参考文档 Fieldmanager

Formbuilder 的数据结构中，很多类型的数据都是以数组的方式保存的，这种方式可能会在获取和更新数据的时候带来一些不便，不过好处在于可以提高性能。

Frommanager 插件支持以 tab 的形式显示自定义字段，对于自定义字段比较多的站点，可以提升后台的用户体验。

自定默认支持的属性

所有自定义字段类型都继承自 Fieldmanager_Field 字段，Fieldmanager_Field 字段的属性也会被自动继承。

属性可见性	属性名称	属性说明
`public static boolean`	$debug	#如果设置为 true，显示调试信息
`public integer`	$limit	#显示多少字段，不限制设置为 0
`public integer`	$minimum_count	#$limit != 1 时最少显示多少个字段, 如果$limit == $minimum_count, 或元素数量少于这个数字时，移除按钮将被隐藏
`public integer`	$extra_elements	#$limit != 1 时显示多少空字段，已加载数据中的元素数量 + $extra_elements > $minimum_count.
`public string`	$add_more_label	#添加更多按钮的文本
`public string`	$name	#表单元素的名称
`public string`	$label	#表单元素的标签
`public boolean`	$inline_label	#如果设置为 true，标签将和元素显示在一行
`public boolean`	$label_after_element	#如果为 true，标签在表单元素后面
`public string`	$description	#表单元素的描述
`public boolean`	$description_after_element	#如果为 true，描述在表单元素后面
`public string or boolean[]`	$attributes	#附加 HTML 元素，设置为 true 应用独立属性，如：'required' => true
`public string`	$field_class	#表单元素的 CSS 类
`public boolean`	$one_label_per_item	#如果是可重复项，是否为每个重复项显示标签
`public boolean`	$sortable	#是否允许为可重复项排序
`public string`	$label_element	#表单标签的 HTML 元素
`public callable`	$sanitize	#净化输入的函数
`public callback[]`	$validate	#验证输入的函数
`public string or array`	$validation_rules	#jQuery 验证规则，输入自负或关联数组，规则会自动被转化为 Javascript format，更多信息参考 jQuery 文档
`public string or array`	$validation_messages	#jQuery 验证规则消息，输入自负或关联数组，规则会自动被转化为 Javascript format，更多信息参考 jQuery 文档
`public boolean`	$required	# 使已经具有内置验证的 WordPress 字段为必填项，仅在添加分类法项目时使用
`public string or null`	$data_type	#表单元素的数据类型，一般会自动设置好
`public integer or null`	$data_id	#$this->data_type 的 ID, 如 $post->ID, 一般会默认设置好
`public boolean`	$save_empty	#如果设置为 true，保存空元素到数据库中 (如果 $this->limit != 1; 单元素值永远保存)
`public boolean`	$skip_save	#不保存此项目 (自定处理数据时使用)
`public boolean`	$index	#Save this field additionally to an index
`public boolean`	$serialize_data	#保存字段的值到他们自己的键中（只在某些情况下有用），默认为 true
`public Fieldmanager_Datasource`	$datasource	#从数据源中获取数据，Fieldmanager_Autocomplete 和 Fieldmanager_Options 使用
`public array[]`	$display_if	#根据条件显示表单元素，如: $element->display_if = array( 'src' => 'display-if-src-element', 'value' => 'display-if-src-value' );
`public string`	$add_more_position	#新项目应该被添加到什么地址（头部或底部）可选的值为 "top 或 bottom"
`public boolean`	$remove_default_meta_boxes	#如果设置为 true, 移除被 Fieldmanager 字段覆盖的默认元数据盒子
`public string`	$template	#字段的模板路径
`public array`	$meta_boxes_to_remove	#如果 $remove_default_meta_boxes 为 true, 这个数组将指定被移除的默认元数据盒子
`public mixed`	$default_value	#表单元素的默认值
`public callable or null`	$index_filter	#解析索引值并返回修改侯的值的功能
`public string`	$input_type	#输入类型，支持所有HTML 5 类型
`public array`	$escape	#标签、描述自定义 escaping，如：$field => $callable 关联数组
`public boolean`	$is_attachment	#是否在编辑媒体页面显示

支持的字段类型

Text 文本字段

add_action( 'fm_post_post', function() {
    $fm = new Fieldmanager_TextField( array(
        'name' => 'demo-field',
    ) );
    $fm->add_meta_box( 'TextField Demo', array( 'post' ) );
} );

html5 支持

add_action( 'fm_post_post', function() {
    $fm = new Fieldmanager_TextField( array(
        'name' => 'demo-field',
        'input_type' => 'color',
    ) );
    $fm->add_meta_box( 'TextField Demo', array( 'post' ) );
} );

Media 文件上传

add_action( 'fm_post_post', function() {
    $fm = new Fieldmanager_Media( array(
        'name' => 'demo-media',
    ) );
    $fm->add_meta_box( 'Media Field', array( 'post' ) );
} );

带选项

add_action( 'fm_post_post', function() {
    $fm = new Fieldmanager_Media( array(
        'name' => 'demo-media',
        'button_label' => 'Add Icon',
        'modal_title' => 'Select Icon',
        'modal_button_label' => 'Use Image as Icon',
        'preview_size' => 'icon',
    ) );
    $fm->add_meta_box( 'Media Field', array( 'post' ) );
} );

TextArea 多段文本

add_action( 'fm_post_post', function() {
    $fm = new Fieldmanager_TextArea( array(
        'name' => 'demo-field',
    ) );
    $fm->add_meta_box( 'TextArea Demo', array( 'post' ) );
} );

自定义尺寸

add_action( 'fm_post_post', function() {
    $fm = new Fieldmanager_TextArea( array(
        'name' => 'demo-field',
        'attributes' => array(
            'rows' => 3,
            'cols' => 30,
        ),
    ) );
    $fm->add_meta_box( 'TextArea Demo', array( 'post' ) );
} );

RichTextArea 富文本编辑器

add_action( 'fm_post_post', function() {
    $fm = new Fieldmanager_RichTextArea( array(
        'name' => 'demo-field',
    ) );
    $fm->add_meta_box( 'RichTextArea Demo', array( 'post' ) );
} );

编辑器设置

add_action( 'fm_post_post', function() {
    $fm = new Fieldmanager_RichTextArea( array(
        'name' => 'demo-field',
        'editor_settings' => array(
            'media_buttons' => false,
        ),
    ) );
    $fm->add_meta_box( 'RichTextArea Demo', array( 'post' ) );
} );

可视化编辑器可用选项参考：https://codex.wordpress.org/Function_Reference/wp_editor#Arguments

简单编辑器

add_action( 'fm_post_post', function() {
    $fm = new Fieldmanager_RichTextArea( array(
        'name' => 'demo-mini-field',
        'buttons_1' => array( 'bold', 'italic', 'bullist', 'numlist', 'link' ),
        'buttons_2' => array(),
        'editor_settings' => array(
            'quicktags' => false,
            'media_buttons' => false,
        ),
    ) );
    $fm->add_meta_box( 'RichTextArea Demo', array( 'post' ), 'side' );
} );

Radios 单选项

add_action( 'fm_post_post', function() {
    $fm = new Fieldmanager_Radios( array(
        'name' => 'demo-field',
        'options' => array(
            'red' => 'Red',
            'green' => 'Green',
            'blue' => 'Blue',
        ),
    ) );
    $fm->add_meta_box( 'Radio Fields', array( 'post' ) );
} );

数据来源

add_action( 'fm_post_post', function() {
    $fm = new Fieldmanager_Radios( array(
        'name' => 'demo-field',
        'datasource' => new Fieldmanager_Datasource_User,
    ) );
    $fm->add_meta_box( 'Radio Buttons Demo', array( 'post' ) );
} );

Checkbox 选项

add_action( 'fm_post_post', function() {
    $fm = new Fieldmanager_Checkbox( array(
        'name' => 'demo-field',
        'label' => 'Checkbox Label',
    ) );
    $fm->add_meta_box( 'Basic Checkbox', array( 'post' ) );
} );

设置选中项值

add_action( 'fm_post_post', function() {
    $fm = new Fieldmanager_Checkbox( array(
        'name' => 'demo-field',
        'label' => 'Sample Checkbox',
        'checked_value' => 'yes',
        'unchecked_value' => 'no',
    ) );
    $fm->add_meta_box( 'Custom Checkbox Values', array( 'post' ) );
} );

CheckBoxes 多选项

add_action( 'fm_post_post', function() {
    $fm = new Fieldmanager_Checkboxes( array(
        'name' => 'demo-field',
        'options' => array(
            'red' => 'Red',
            'green' => 'Green',
            'blue' => 'Blue',
        ),
    ) );
    $fm->add_meta_box( 'Checkboxes Demo', array( 'post' ) );
} );

数据来源

add_action( 'fm_post_post', function() {
    $fm = new Fieldmanager_Checkboxes( array(
        'name' => 'demo-field',
        'datasource' => new Fieldmanager_Datasource_User,
    ) );
    $fm->add_meta_box( 'Checkboxes Demo', array( 'post' ) );
} );

Select 下拉选择

add_action( 'fm_post_post', function() {
    $fm = new Fieldmanager_Select( array(
        'name' => 'demo-field',
        'options' => array(
            'red' => 'Red',
            'green' => 'Green',
            'blue' => 'Blue',
        ),
    ) );
    $fm->add_meta_box( 'Select Demo', array( 'post' ) );
} );

第一项为空

add_action( 'fm_post_post', function() {
    $fm = new Fieldmanager_Select( array(
        'name' => 'demo-field',
        'first_empty' => true,
        'options' => array(
            'red' => 'Red',
            'green' => 'Green',
            'blue' => 'Blue',
        ),
    ) );
    $fm->add_meta_box( 'Select Demo', array( 'post' ) );
} );

数据来源

add_action( 'fm_post_post', function() {
    $fm = new Fieldmanager_Select( array(
        'name' => 'demo-field',
        'datasource' => new Fieldmanager_Datasource_User,
    ) );
    $fm->add_meta_box( 'Select Demo', array( 'post' ) );
} );

下拉选择多选

add_action( 'fm_post_post', function() {
    $fm = new Fieldmanager_Select( array(
        'name' => 'demo-field',
        'multiple' => true,
        'attributes' => array(
            'size' => 3,
        ),
        'options' => array(
            'red' => 'Red',
            'green' => 'Green',
            'blue' => 'Blue',
        ),
    ) );
    $fm->add_meta_box( 'Select Demo', array( 'post' ) );
} );

使用 Choosen 效果

add_action( 'fm_post_post', function() {
    $fm = new Fieldmanager_Select( array(
        'name' => 'demo-field',
        'type_ahead' => true,
        'options' => array(
            'red' => 'Red',
            'green' => 'Green',
            'blue' => 'Blue',
        ),
    ) );
    $fm->add_meta_box( 'Select Demo', array( 'post' ) );
} );

Color Picker 颜色选择

$fm = new Fieldmanager_Colorpicker( array(
    'name' => 'basic_colorpicker',
) );
$fm->add_meta_box( 'Basic Colorpicker', 'post' );

Date Picker 日期选择

add_action( 'fm_post_post', function() {
    $fm = new Fieldmanager_Datepicker( array(
        'name' => 'demo-field',
    ) );
    $fm->add_meta_box( 'Datepicker Demo', array( 'post' ) );
} );

带时间

add_action( 'fm_post_post', function() {
    $fm = new Fieldmanager_Datepicker( array(
        'name' => 'demo-field',
        'use_time' => true,
    ) );
    $fm->add_meta_box( 'Datepicker Demo', array( 'post' ) );
} );

自定义日期格式

add_action( 'fm_post_post', function() {
    $fm = new Fieldmanager_Datepicker( array(
        'name' => 'demo-field',
        'date_format' => 'Y-m-d',
        'js_opts' => array(
            'dateFormat' => 'yy-mm-dd',
        ),
    ) );
    $fm->add_meta_box( 'Datepicker Demo', array( 'post' ) );
} );

Hidden 隐藏字段

add_action( 'fm_post_post', function() {
    $fm = new Fieldmanager_Hidden( array(
        'name' => 'demo-field',
    ) );
    $fm->add_meta_box( 'Uninteresting Demo', array( 'post' ) );
} );

Link 链接

add_action( 'fm_post_post', function() {
    $fm = new Fieldmanager_Link( array(
        'name' => 'demo-link',
    ) );
    $fm->add_meta_box( 'Basic Link Field', array( 'post' ) );
} );

Password 密码

add_action( 'fm_post_post', function() {
    $fm = new Fieldmanager_Password( array(
        'name' => 'demo-password',
    ) );
    $fm->add_meta_box( 'Password Field', array( 'post' ) );
} );

Autocomplete 自动完成

$fm = new Fieldmanager_Autocomplete( array(
    'name' => 'size',
    'datasource'  => new Fieldmanager_Datasource( array(
        'options' => array( 'Small', 'Medium', 'Large' ),
    ) ),
) );
$fm->add_meta_box( 'Autocomplete Field', 'post' );

数据来源

$fm = new Fieldmanager_Autocomplete( array(
    'name' => 'related_post',
    'show_edit_link' => true,
    'datasource' => new Fieldmanager_Datasource_Post( array(
        'query_args' => array( 'post_type' => 'post' ),
    ) ),
) );
$fm->add_meta_box( 'Related Post', 'post' );

元数据盒子显示的位置

文章类型

$fm->add_meta_box( 'Basic Field', 'post' );

分类项目

$fm->add_term_meta_box( 'Basic Field', 'category' );

子菜单页面

if ( function_exists( 'fm_register_submenu_page' ) ) {
    fm_register_submenu_page( 'my_fields', 'tools.php', 'Meta Fields' );
}
add_action( 'fm_submenu_my_fields', function() {
    $fm = new Fieldmanager_TextField( array(
        'name' => 'my_fields',
    ) );
    $fm->activate_submenu_page();
} );

用户资料

$fm-> add_user_form( 'Basic Field' );

文章快速编辑

$fm->add_quickedit_box( 'Basic Field', 'post', function( $values ) {
    return ! empty( $values['demo'] ) ? $values['demo'] : '';
} );

字段组

add_action( 'after_setup_theme', function() {
    $fm = new Fieldmanager_Group( array(
        'name' => 'demo-group',
        'serialize_data' => false,
        'add_to_prefix'  => false,
        'children' => array(
            'field-one' => new Fieldmanager_TextField( 'First Field' ),
            'field-two' => new Fieldmanager_TextField( 'Second Field' ),
        ),
    ) );
    $fm->add_meta_box( 'Basic Group', array( 'post' ) );
} );

上面的代码中：

name: 字段组的名称，children 以数组的形式保存为自定义字段。
serialize_data: 是否序列化字段组的数据，不序列化方便访问自断组中的数据，序列化提高访问效率，酌情使用。
add_to_prefix: 序列化后，是否添加前缀。
children: 字段组中的字段
array('post'): 字段支持的自定义文章类型

字段组字段带选项

add_action( 'after_setup_theme', function() {
    $fm = new Fieldmanager_Group( array(
        'name' => 'demo-group',
        'serialize_data' => false,
        'add_to_prefix'  => false,
        'children' => array(
            'field-one' => new Fieldmanager_TextField( 'First Field' ),
            'field-two' => new Fieldmanager_RichTextArea( [
                        'label'      => '使用方法',
                        'attributes' => [
                            'rows'     => 5,
                            'cols'     => 50,
                            'readonly' => true,
                        ],
                    ] ),
        ),
    ) );
    $fm->add_meta_box( 'Basic Group', array( 'post' ) );
} );

带选项卡的自定义字段盒子

add_action( 'after_setup_theme', function() {
    $fm = new Fieldmanager_Group( array(
        'name'           => 'tabbed_meta_fields',
        'tabbed'         => 'vertical',
        //'tabbed'         => 'horizontal',
        'serialize_data' => false,
        'add_to_prefix'  => false,
        'children'       => array(
            'tab-1' => new Fieldmanager_Group( array(
               'serialize_data' => false,
               'add_to_prefix'  => false,
                'label'          => 'First Tab',
                'children'       => array(
                    'text' => new Fieldmanager_Textfield( 'Text Field' ),
                )
            ) ),
            'tab-2' => new Fieldmanager_Group( array(
                'label'          => 'Second Tab',
               'serialize_data' => false,
               'add_to_prefix'  => false,
                'children'       => array(
                    'textarea' => new Fieldmanager_TextArea( 'TextArea' ),
                    'media'    => new Fieldmanager_Media( 'Media File' ),
                )
            ) ),
        )
    ) );
    $fm->add_meta_box( 'Tabbed Group', 'post' );
} );