WP自定义组件Customizer中的add_control

控件是用于创建UI的主要自定义组件对象。每个控件都必须与一个设置项相关联，以确定空间的唯一性，该设置项会将用户输入的数据从控件保存到数据库（除了在实时预览中显示数据并对其进行清理之外）。控件可以由自定义组件管理器添加，控件能够让用户以最少的工作量组件一组可靠的UI选项。

用法与参数

添加控件的命令

add_control( $id, $args );

add_control参数

• $id （字符串）（必须）一个唯一的id,默认：None
• $args （数组）（必须）

$args 的参数

• label （可选）显示的名称
• description （可选）描述
• section （必须）属于哪个Section
• priority（可选）排序，默认：10
• type （必须）显示的控件类型，可以选择text, email, url, number, hidden, or date. 默认：text
• capability （可选）根据用户的权限控制是否显示，默认：edit_theme_options
• input_attrs （可选）输出一组控件属性，只能用于textarea和input类型

基本控件类型

添加控件时最重要的参数是它的类型（type参数）-这决定了定制器将显示什么类型的UI。基本内置控件类型如下：

input 输入框
checkbox 多选框
textarea 多行文本
radio 单选框
select 下拉列表
dropdown-pages 页面选择器

特别的input控件

输入框本身可以通过自身属性值展现不同的类型数据，对于html支持的任何输入类型input 元素，在添加控件时只需将type属性值传递给type参数。

input支持的type属性值：
text
hidden
number
range
url
tel
email
search
time
date
datetime
week

实例

添加一个滑块控件

$wp_customize->add_control( 'setting_id', array(
  'type' => 'range',
  'section' => 'title_tagline',
  'label' => __( 'Range' ),
  'description' => __( 'This is the range control description.' ),
  'input_attrs' => array(
    'min' => 0,
    'max' => 10,
    'step' => 2,
  ),
) );

添加一个日期选择框

$wp_customize->add_control( 'setting_id', array(
  'type' => 'date',
  'priority' => 10, // Within the section.
  'section' => 'colors', // Required, core or custom.
  'label' => __( 'Date' ),
  'description' => __( 'This is a date control with a red border.' ),
  'input_attrs' => array(
    'class' => 'my-custom-class-for-js',
    'style' => 'border: 1px solid #900',
    'placeholder' => __( 'mm/dd/yyyy' ),
  ),
  'active_callback' => 'is_front_page',
) );

添加一个多行文本控件

$wp_customize->add_control( 'custom_theme_css', array(
  'label' => __( 'Custom Theme CSS' ),
  'type' => 'textarea',
  'section' => 'custom_css',
) );

具备多个可选值单选框控件

$wp_customize->add_control( 'sample_default_radio',
   array(
      'label' => __( 'Standard Radio Control' ),
      'description' => esc_html__( 'Sample description' ),
      'section' => 'default_controls_section',
      'priority' => 10, // Optional. Order priority to load the control. Default: 10
      'type' => 'radio',
      'capability' => 'edit_theme_options', // Optional. Default: 'edit_theme_options'
      'choices' => array( // Optional.
         'captain-america' => __( 'Captain America' ),
         'iron-man' => __( 'Iron Man' ),
         'spider-man' => __( 'Spider-Man' ),
         'thor' => __( 'Thor' )
      )
   ));