WordPress主题定制器样板

WordPress主题定制器样板
  1. 1个. WordPress主题定制器简介
  2. 2. 与WordPress主题定制器进行交互
  3. 3. 当前阅读: WordPress主题定制器样板
  4. 4. 扩展WordPress主题定制程序样板
  5. 5. 主题定制程序样板–条件选项,子主题和插件

更新:本文已于2013年2月19日进行了编辑,以反映对Theme Customizer Boilerplate所做的更改.


希望您阅读并喜欢主题定制器系列的前两篇文章-WordPress主题定制器简介和与主题定制器进行交互。现在是时候进入主课程并开始组装您可以在主题中使用的Theme Customizer样板了。这篇文章包含一些长长的代码块,因此请注意内联注释.

注意: 如果您只想立即使用样板,则可以从Github下载它并通过挂钩到’thsp_cbp_options_array’过滤钩来更改$ options数组中的字段.

我们正在创造什么

主题定制程序样板目录结构

主题定制程序样板目录结构

  • customr.php –这是主题定制器的主要样板文件,该文件使用选项数组中的数据添加节,设置和控件
  • custom-controls.php –自定义控件类和一个动作挂钩,可让您添加自己的自定义控件
  • helpers.php –帮助程序功能,用于检索主题选项,选项默认值等.
  • options.php –示例选项和过滤器挂钩,可让您编辑选项数组并使用自己的字段
  • Customizer-Controls.css –用于图像替换的无线电自定义控件的基本CSS

整个想法是能够将这些文件复制到主题目录的子目录中,包括来自functions.php的customrizer.php文件,并通过使用主题定制器Boilerplate挂钩来更改您喜欢的任何内容,包括尤其是options数组(说明)在第4部分中). 更新: 以前,您只需要编辑options.php,但是使用钩子可以使事情更简洁.

现在,让我们使用一个真实的示例-我们将在新的“主题定制器”部分中添加文本控件。该数组放置在辅助函数中,并在返回时对其应用了过滤器。这样,您可以从子主题或插件中添加更多选项。这里是:

/ **
*辅助功能,可容纳一系列主题选项.
*
* @return array $ options主题选项数组
* @使用在customizer / helpers.php中定义的thsp_get_theme_customizer_fields()
* /
函数thsp_get_theme_customizer_fields(){

/ *
*使用助手功能获取默认的必需功能
* /
$ required_capability = thsp_settings_page_capability();

$选项=数组(


//区段ID
'new_customizer_section'=>数组(

/ *
*我们正在检查这是否是现有部分
*或需要注册的新密码
* /
'existing_section'=>否,
/ *
*部分相关的论点
*法典-http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_section
* /
'args'=>数组(
'title'=> __('New Section Title','my_theme_textdomain'),
'description'=> __('New section description','my_theme_textdomain'),
'优先级'=> 10
),

/ *
*'fields'数组包含所有需要
*添加到本节
* /
'字段'=>数组(

/ *
* ==========
* ==========
* 文本域
* ==========
* ==========
* /
//栏位ID
'new_text_field'=>数组(
/ *
*设置相关参数
*法典-http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_setting
* /
'setting_args'=>数组(
'默认'=> __('默认文本值','my_theme_textdomain'),
'类型'=>'选项',
'能力'=> $ required_capability,
'运输'=>'刷新',
'sanitize_callback'=>'thsp_sanitize_cb',
),
/ *
*控制相关参数
*法典-http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_control
* /
'control_args'=>数组(
'标签'=> __('新文本控件标签','my_theme_textdomain'),
'type'=>'text',//文本字段控件
'优先级'=> 1
)
)

)

),

);

/ *
*'thsp_customizer_options'过滤器挂钩将使您能够
*从子主题中添加/删除其中一些选项
* /
返回apply_filters('thsp_customizer_options',$ options);

}

更新: 数组保持不变,但是现在您也可以将options数组传递给过滤器挂钩,有关更多详细信息,请参见第4部分。.

我知道乍一看看起来很复杂,但让我解释一下.

$选项 数组由多个部分组成(本例中只有一个-new_customizer_section),每个部分都有其参数,字段和一个布尔值(existing_section)以指示它是否是新的部分,或者我们只是向现有的部分添加一些字段一. 参数数组与您传递给的数组相同 $ wp_customize-> add_section 方法. 字段数组稍微复杂一点.

更新: 控制参数中的choices数组现在是一个多维数组.

每个字段都包含一个定制程序设置和一个定制程序控件。这就是为什么我们有setting_args和control_args数组的原因. 它们几乎与您传递给的参数数组完全相同 $ wp_customize-> add_setting$ wp_customize-> add_control 方法. 唯一的区别是控制参数中的“选择”数组,$ wp_customize-> add_control要求它是一个简单的键=>值对数组,而我们使用的是多维数组.

这样,就可以将更多数据传递给每个选项,因此,例如,如果您在主题中加载Google字体,则可以有字符串,使您可以在options数组中加载正确的字体。你可以看到一个例子 使用定制程序样板的主题.

因此,如果您已经了解了这三种方法,那就非常熟悉了.

添加复选框控件几乎相同,您只需要在“ control_args”数组中将“类型”更改为“复选框”即可:

/ *
* ==============
*复选框字段
* ==============
* /
'new_checkbox_field'=>数组(
'setting_args'=>数组(
'默认'=> true,
'类型'=>'选项',
'能力'=> $ required_capability,
'运输'=>'刷新',
'sanitize_callback'=>'thsp_sanitize_cb',
),
'control_args'=>数组(
'标签'=> __('新无线电控件标签','my_theme_textdomain'),
'type'=>'checkbox',//复选框字段控件
'优先级'=> 2
)
),

单选和选择控件几乎相同,您只需要指定给定的选择即可:

/ *
* ===========
* ===========
*无线电领域
* ===========
* ===========
* /
'new_radio_field'=>数组(
'setting_args'=>数组(
'默认'=>'选项-2',
'类型'=>'选项',
'功能'=> $ thsp_cbp_capability,
'运输'=>'刷新',
),
'control_args'=>数组(
'标签'=> __('新无线电控件标签','my_theme_textdomain'),
'type'=>'radio',//无线电控制
'选择'=>数组(
'option-1'=>数组(
'标签'=> __('选项1','my_theme_textdomain')
),
'option-2'=>数组(
'标签'=> __('选项2','my_theme_textdomain')
),
'option-3'=>数组(
'标签'=> __('选项3','my_theme_textdomain')
)
),
'优先级'=> 3
)
),

/ *
* ============
* ============
*选择字段
* ============
* ============
* /
'new_select_field'=>数组(
'setting_args'=>数组(
'默认'=>'选项-3',
'类型'=>'选项',
'功能'=> $ thsp_cbp_capability,
'运输'=>'刷新',
),
'control_args'=>数组(
'标签'=> __('新选择字段标签','my_theme_textdomain'),
'type'=>'select',//选择控件
'选择'=>数组(
'option-1'=>数组(
'标签'=> __('选项1','my_theme_textdomain')
),
'option-2'=>数组(
'标签'=> __('选项2','my_theme_textdomain')
),
'option-3'=>数组(
'标签'=> __('选项3','my_theme_textdomain')
)
),
'优先级'=> 4
)
)

最后,WordPress中内置了两种复杂的控件类型-文件上传和图片上传:

/ *
* ===========
* ===========
* 上传文件
* ===========
* ===========
* /
'new_file_upload_field'=>数组(
'setting_args'=>数组(
'默认'=>'',
'类型'=>'选项',
'功能'=> $ thsp_cbp_capability,
'运输'=>'刷新',
),
'control_args'=>数组(
'标签'=> __('文件上传','my_theme_textdomain'),
'type'=>'upload',//文件上传字段控件
'优先级'=> 5
)
),

/ *
* ============
* ============
*图片上传
* ============
* ============
* /
'new_image_upload_field'=>数组(
'setting_args'=>数组(
'默认'=>'',
'类型'=>'选项',
'功能'=> $ thsp_cbp_capability,
'运输'=>'刷新',
),
'control_args'=>数组(
'标签'=> __('图像上传','my_theme_textdomain'),
'type'=>'image',//图片上传字段控件
'优先级'=> 6
)
)

请注意,我曾经 ‘类型’=>‘选项’ 为所有这些字段设置参数。这将允许所有值作为一个值存储在数据库中。替代方法是 ‘type’=>‘theme_mod’ 但现在让我们坚持使用“选项”.

使用选项数组添加自定义程序部分,设置和控件

如果您不确定如何与WordPress Theme Customizer交互,请检查一下,因为这就是我们现在要做的。唯一的区别是,我们不会一次添加一个部分,设置和控件,而是会使用我们创建的序列化数组自动执行该过程。让我们跳进去吧:

函数thsp_cbp_customize_register($ wp_customize){

/ **
*自定义控件
* /
require(dirname(__ FILE__)。'/custom-controls.php');


/ *
*使用帮助功能获取所有字段
* /
$ thsp_sections = thsp_cbp_get_fields();


/ *
*获取将在其中存储选项的数据库条目的名称
* /
$ thsp_cbp_option = thsp_cbp_option();


/ **
*遍历数组并添加Customizer部分
* /
foreach($ thsp_sections as $ thsp_section_key => $ thsp_section_value){

/ **
*添加“自定义程序”部分(如果需要)
* /
if(!$ thsp_section_value ['existing_section']){

$ thsp_section_args = $ thsp_section_value ['args'];

//添加部分
$ wp_customize-> add_section(
$ thsp_section_key,
$ thsp_section_args
);

} // 万一

/ *
*在每个部分中循环遍历“字段”数组
*并添加设置和控件
* /
$ thsp_section_fields = $ thsp_section_value ['fields'];
foreach($ thsp_section_fields as $ thsp_field_key => $ thsp_field_value){

/ *
*检查是否使用'option'或'theme_mod'来存储选项
*
*如果未设置任何内容,则$ w​​p_customize-> add_setting方法将默认为'theme_mod'
*如果将“选项”用作设置类型,则其值将存储在
* {prefix} _options表。选项名称由thsp_cbp_option()函数定义
* /
if(isset($ thsp_field_value ['setting_args'] ['type'])&&'option'== $ thsp_field_value ['setting_args'] ['type']){
$ setting_control_id = $ thsp_cbp_option。 '['。 $ thsp_field_key。 ']';
}其他{
$ setting_control_id = $ thsp_field_key;
}

/ *
*添加默认回调函数(如果未定义)
* /
if(!isset($ thsp_field_value ['setting_args'] ['sanitize_cb'])){
$ thsp_field_value ['setting_args'] ['sanitize_cb'] ='thsp_cbp_sanitize_cb';
}

/ **
*添加自定义程序设置
* /
$ wp_customize-> add_setting(
$ setting_control_id,
$ thsp_field_value ['setting_args']
);

/ **
*添加自定义程序控件
*
*必须将'section'值添加到'control_args'数组中
*因此可以将控件添加到当前部分
* /
$ thsp_field_value ['control_args'] ['section'] = $ thsp_section_key;

/ *
* $ wp_customize-> add_control方法要求“选择”是一个简单的键=>值对
* /
if(isset($ thsp_field_value ['control_args'] ['choices'])){
$ thsp_cbp_choices = array();
foreach($ thsp_field_value ['control_args'] ['choices'] as $ thsp_cbp_choice_key => $ thsp_cbp_choice_value){
$ thsp_cbp_choices [$ thsp_cbp_choice_key] = $ thsp_cbp_choice_value ['label'];
}
$ thsp_field_value ['control_args'] ['choices'] = $ thsp_cbp_choices;
}


//检查控件类型
if('color'== $ thsp_field_value ['control_args'] ['type']){
$ wp_customize-> add_control(
新的WP_Customize_Color_Control(
$ wp_customize,
$ setting_control_id,
$ thsp_field_value ['control_args']
)
);
} elseif('image'== $ thsp_field_value ['control_args'] ['type']){
$ wp_customize-> add_control(
新的WP_Customize_Image_Control(
$ wp_customize,
$ setting_control_id,
$ thsp_field_value ['control_args']
)
);
} elseif('upload'== $ thsp_field_value ['control_args'] ['type']){
$ wp_customize-> add_control(
新的WP_Customize_Upload_Control(
$ wp_customize,
$ setting_control_id,
$ thsp_field_value ['control_args']
)
);
}其他{
$ wp_customize-> add_control(
$ setting_control_id,
$ thsp_field_value ['control_args']
);
}

} //结束foreach

} //结束foreach

}
add_action('customize_register','thsp_cbp_customize_register');

浏览所有部分,添加尚不存在的部分,然后遍历每个部分的所有字段,为每个部分添加设置和控件。这就是这里要做的一切.

还记得我们为所有设置都使用了’type’=>’option’吗?这就是为什么我们现在有 “ my_theme_options [$ thsp_field_key]” 对于设置和部分。这会将所有值存储为一个序列化数组,您可以使用进行检索 get_option(‘my_theme_options’). 或者,您可以只使用在中定义的辅助函数 helpers.php 检索所有字段的当前值和默认值:

/ **
*获取期权价值
*
*包含所有选项值的数组
*如果用户未指定值,则使用选项的默认值
*
* @使用在/customizer/options.php中定义的thsp_get_theme_customizer_defaults()
* @return数组所有选项的当前值
* @自Theme_Customizer_Boilerplate 1.0起
* /
函数thsp_cbp_get_options_values(){

//获取默认选项
$ option_defaults = thsp_cbp_get_options_defaults();

//使用默认值解析存储的选项
$ thsp_cbp_options = wp_parse_args(get_option(thsp_cbp_option(),array()),$ option_defaults);

//返回解析后的数组
返回$ thsp_cbp_options;

}


/ **
*获取选项默认值
*
*返回一个数组,其中包含所有选项的默认值
*
* @使用在/customizer/options.php中定义的thsp_get_theme_customizer_fields()
* @return array $ thsp_option_defaults所有选项的默认值
* @自Theme_Customizer_Boilerplate 1.0起
* /
函数thsp_cbp_get_options_defaults(){

//获取包含所有主题选项字段的数组
$ thsp_sections = thsp_cbp_get_fields();

//初始化数组以保留所有主题选项的默认值
$ thsp_option_defaults = array();

//遍历选项参数数组
foreach($ thsp_sections作为$ thsp_section){

$ thsp_section_fields = $ thsp_section ['fields'];

foreach($ thsp_section_fields as $ thsp_field_key => $ thsp_field_value){

//为参数数组中的每个选项向默认数组添加一个关联数组键
if(isset($ thsp_field_value ['setting_args'] ['default'])){
$ thsp_option_defaults [$ thsp_field_key] = $ thsp_field_value ['setting_args'] ['default'];
}其他{
$ thsp_option_defaults [$ thsp_field_key] = false;
}

}

}

//返回默认数组
返回$ thsp_option_defaults;

}

我只需要提到一件事-我们在“ setting_args”数组中指定的清理回调函数。函数在extend.php中定义,并且仅通过 wp_kses_post 功能:

/ **
* Theme Customizer清理回调函数
* /
函数thsp_sanitize_cb($ input){

返回wp_kses_post($ input);

}

从这里到哪里?

现在,您可以在主题中使用此主题定制程序样板,只需从Github下载它,复制到主题的目录中,并包含来自functions.php的主文件,即可正常运行100%的功能,并且对大多数情况都足够好主题.

由于您的主题与大多数主题都不一样,因此下周我们将介绍如何使用其过滤器和操作钩来扩展样板.

我很想听听您如何认为可以改进或扩展此样板,因此请在评论中辞职.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map