17713433920 info@mac163.com
WordPress主题定制器样板
WordPress主题定制器样板

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

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

我们正在创造什么

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

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

  • customizer.php -这是主要的主题定制样板文件,所述一个,增加了使用数据的部分,设置和控制从选项阵列
  • custom-controls.php –自定义控件类和一个动作挂钩,允许您添加自己的自定义控件
  • helpers.php –帮助程序函数,用于检索主题选项,选项默认值等。
  • options.php –示例选项和过滤器挂钩,可让您编辑options数组并使用自己的字段
  • customizer-controls.css –用于图像替换的无线电自定义控件的基本CSS

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

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

/**
 * Helper function that holds array of theme options.
 *
 * @return	array	$options	Array of theme options
 * @uses	thsp_get_theme_customizer_fields()	defined in customizer/helpers.php
 */
function thsp_get_theme_customizer_fields() {

	/*
	 * Using helper function to get default required capability
	 */
	$required_capability = thsp_settings_page_capability();
	
	$options = array(

		
		// Section ID
		'new_customizer_section' => array(
		
			/*
			 * We're checking if this is an existing section
			 * or a new one that needs to be registered
			 */
			'existing_section' => false,
			/*
			 * Section related arguments
			 * Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_section
			 */
			'args' => array(
				'title' => __( 'New Section Title', 'my_theme_textdomain' ),
				'description' => __( 'New section description', 'my_theme_textdomain' ),
				'priority' => 10
			),
			
			/* 
			 * 'fields' array contains all the fields that need to be
			 * added to this section
			 */
			'fields' => array(
				
				/*
				 * ==========
				 * ==========
				 * Text field
				 * ==========
				 * ==========
				 */
				// Field ID
				'new_text_field' => array(
					/*
					 * Setting related arguments
					 * Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_setting
					 */
					'setting_args' => array(
						'default' => __( 'Default text value', 'my_theme_textdomain' ),
						'type' => 'option',
						'capability' => $required_capability,
						'transport' => 'refresh',
						'sanitize_callback' => 'thsp_sanitize_cb',
					),					
					/*
					 * Control related arguments
					 * Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_control
					 */
					'control_args' => array(
						'label' => __( 'New text control label', 'my_theme_textdomain' ),
						'type' => 'text', // Text field control
						'priority' => 1
					)
				)				

			)
			
		),

	);
	
	/* 
	 * 'thsp_customizer_options' filter hook will allow you to 
	 * add/remove some of these options from a child theme
	 */
	return apply_filters( 'thsp_customizer_options', $options );
	
}

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

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

在$选项阵列由段(S)(只有在这种情况下- 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数组中加载正确的字体。您可以看到使用Customizer Boilerplate的此主题的示例。

因此,如果您已经意识到了这三种方法,那么它们都是非常熟悉的。

添加一个复选框控件几乎是相同的,您只需要在’control_args’数组中将’type’更改为’checkbox’:

/*
 * ==============
 * Checkbox field
 * ==============
 */
'new_checkbox_field' => array(
	'setting_args' => array(
		'default' => true,
		'type' => 'option',
		'capability' => $required_capability,
		'transport' => 'refresh',
		'sanitize_callback' => 'thsp_sanitize_cb',
	),					
	'control_args' => array(
		'label' => __( 'New radio control label', 'my_theme_textdomain' ),
		'type' => 'checkbox', // Checkbox field control					
		'priority' => 2
	)
),				

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

/*
 * ===========
 * ===========
 * Radio field
 * ===========
 * ===========
 */
'new_radio_field' => array(
	'setting_args' => array(
		'default' => 'option-2',
		'type' => 'option',
		'capability' => $thsp_cbp_capability,
		'transport' => 'refresh',
	),					
	'control_args' => array(
		'label' => __( 'New radio control label', 'my_theme_textdomain' ),
		'type' => 'radio', // Radio control
		'choices' => array(
			'option-1' => array(
				'label' => __( 'Option 1', 'my_theme_textdomain' )
			),
			'option-2' => array(
				'label' => __( 'Option 2', 'my_theme_textdomain' )
			),
			'option-3' => array(
				'label' => __( 'Option 3', 'my_theme_textdomain' )
			)
		),					
		'priority' => 3
	)
),

/*
 * ============
 * ============
 * Select field
 * ============
 * ============
 */
'new_select_field' => array(
	'setting_args' => array(
		'default' => 'option-3',
		'type' => 'option',
		'capability' => $thsp_cbp_capability,
		'transport' => 'refresh',
	),					
	'control_args' => array(
		'label' => __( 'New select field label', 'my_theme_textdomain' ),
		'type' => 'select', // Select control
		'choices' => array(
			'option-1' => array(
				'label' => __( 'Option 1', 'my_theme_textdomain' )
			),
			'option-2' => array(
				'label' => __( 'Option 2', 'my_theme_textdomain' )
			),
			'option-3' => array(
				'label' => __( 'Option 3', 'my_theme_textdomain' )
			)
		),					
		'priority' => 4
	)
)

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

/*
 * ===========
 * ===========
 * File Upload
 * ===========
 * ===========
 */
'new_file_upload_field' => array(
	'setting_args' => array(
		'default' => '',
		'type' => 'option',
		'capability' => $thsp_cbp_capability,
		'transport' => 'refresh',
	),					
	'control_args' => array(
		'label' => __( 'File upload', 'my_theme_textdomain' ),
		'type' => 'upload', // File upload field control
		'priority' => 5
	)
),

/*
 * ============
 * ============
 * Image Upload
 * ============
 * ============
 */
'new_image_upload_field' => array(
	'setting_args' => array(
		'default' => '',
		'type' => 'option',
		'capability' => $thsp_cbp_capability,
		'transport' => 'refresh',
	),					
	'control_args' => array(
		'label' => __( 'Image upload', 'my_theme_textdomain' ),
		'type' => 'image', // Image upload field control
		'priority' => 6
	)
)

请注意,我在为所有这些字段设置参数时使用了’type’=>’option’。这将允许所有值作为一个值存储在数据库中。替代方法是’type’=>’theme_mod’,但现在让我们坚持使用’option’。

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

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

function thsp_cbp_customize_register( $wp_customize ) {

	/**
	 * Custom controls
	 */	
	require( dirname(__FILE__) . '/custom-controls.php' );


	/*
	 * Get all the fields using a helper function
	 */
	$thsp_sections = thsp_cbp_get_fields();


	/*
	 * Get name of DB entry under which options will be stored
	 */
	$thsp_cbp_option = thsp_cbp_option();


	/**
	 * Loop through the array and add Customizer sections
	 */
	foreach( $thsp_sections as $thsp_section_key => $thsp_section_value ) {
		
		/**
		 * Adds Customizer section, if needed
		 */
		if( ! $thsp_section_value['existing_section'] ) {
			
			$thsp_section_args = $thsp_section_value['args'];
			
			// Add section
			$wp_customize->add_section(
				$thsp_section_key,
				$thsp_section_args
			);
			
		} // end if
		
		/*
		 * Loop through 'fields' array in each section
		 * and add settings and controls
		 */
		$thsp_section_fields = $thsp_section_value['fields'];
		foreach( $thsp_section_fields as $thsp_field_key => $thsp_field_value ) {

			/*
			 * Check if 'option' or 'theme_mod' is used to store option
			 *
			 * If nothing is set, $wp_customize->add_setting method will default to 'theme_mod'
			 * If 'option' is used as setting type its value will be stored in an entry in
			 * {prefix}_options table. Option name is defined by thsp_cbp_option() function
			 */
			if ( isset( $thsp_field_value['setting_args']['type'] ) && 'option' == $thsp_field_value['setting_args']['type'] ) {
				$setting_control_id = $thsp_cbp_option . '[' . $thsp_field_key . ']';
			} else {
				$setting_control_id = $thsp_field_key;
			}
			
			/*
			 * Add default callback function, if none is defined
			 */
			if ( ! isset( $thsp_field_value['setting_args']['sanitize_cb'] ) ) {
				$thsp_field_value['setting_args']['sanitize_cb'] = 'thsp_cbp_sanitize_cb';
			}

			/**
			 * Adds Customizer settings
			 */
			$wp_customize->add_setting(
				$setting_control_id,
				$thsp_field_value['setting_args']
			);

			/**
			 * Adds Customizer control
			 *
			 * 'section' value must be added to 'control_args' array
			 * so control can get added to current section
			 */
			$thsp_field_value['control_args']['section'] = $thsp_section_key;
			
			/*
			 * $wp_customize->add_control method requires 'choices' to be a simple key => value pair
			 */
			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;		
			}
			
			
			// Check control type
			if ( 'color' == $thsp_field_value['control_args']['type'] ) {
				$wp_customize->add_control(
					new 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(
					new 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(
					new WP_Customize_Upload_Control(
						$wp_customize,
						$setting_control_id,
						$thsp_field_value['control_args']
					)
				);
			} else {
				$wp_customize->add_control(
					$setting_control_id,
					$thsp_field_value['control_args']
				);
			}
				
		} // end foreach
		
	} // end foreach	

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

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

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

/**
 * Get Option Values
 * 
 * Array that holds all of the options values
 * Option's default value is used if user hasn't specified a value
 *
 * @uses	thsp_get_theme_customizer_defaults()	defined in /customizer/options.php
 * @return	array									Current values for all options
 * @since	Theme_Customizer_Boilerplate 1.0
 */
function thsp_cbp_get_options_values() {

	// Get the option defaults
	$option_defaults = thsp_cbp_get_options_defaults();
	
	// Parse the stored options with the defaults
	$thsp_cbp_options = wp_parse_args( get_option( thsp_cbp_option(), array() ), $option_defaults );
	
	// Return the parsed array
	return $thsp_cbp_options;
	
}


/**
 * Get Option Defaults
 * 
 * Returns an array that holds default values for all options
 * 
 * @uses	thsp_get_theme_customizer_fields()	defined in /customizer/options.php
 * @return	array	$thsp_option_defaults		Default values for all options
 * @since	Theme_Customizer_Boilerplate 1.0
 */
function thsp_cbp_get_options_defaults() {

	// Get the array that holds all theme option fields
	$thsp_sections = thsp_cbp_get_fields();
	
	// Initialize the array to hold the default values for all theme options
	$thsp_option_defaults = array();
	
	// Loop through the option parameters array
	foreach ( $thsp_sections as $thsp_section ) {
	
		$thsp_section_fields = $thsp_section['fields'];
		
		foreach ( $thsp_section_fields as $thsp_field_key => $thsp_field_value ) {

			// Add an associative array key to the defaults array for each option in the parameters array
			if( isset( $thsp_field_value['setting_args']['default'] ) ) {
				$thsp_option_defaults[$thsp_field_key] = $thsp_field_value['setting_args']['default'];
			} else {
				$thsp_option_defaults[$thsp_field_key] = false;
			}
			
		}
		
	}
	
	// Return the defaults array
	return $thsp_option_defaults;
	
}

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

/**
 * Theme Customizer sanitization callback function
 */
function thsp_sanitize_cb( $input ) {
	
	return wp_kses_post( $input );
	
}

从这里到哪里?

现在,您可以在主题中使用此主题定制程序模板,您所需要做的就是从Github下载它,复制到主题的目录中,并包含来自functions.php的主文件,该文件具有100%的功能,足以满足大多数情况主题。

由于您的主题与“大多数主题”不同,因此下周我们将介绍如何使用其过滤器和动作挂钩来扩展样板。

我很想听听您如何看待可以改进或扩展的样板,因此请在评论中开除。


微信二维码

扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答:WP主题推荐,WP网站建设,Google SEO,百度SEO,专业服务器环境搭建


需要提供WordPress主题/插件的汉化服务可以随时联系我们!另外成品WordPress网站以及半成品WordPress网站建设,海外Google SEO优化托管服务,百度SEO优化托管服务,Centos/Debian服务器WP专用环境搭建,WP缓存服务器搭建,我们都是你的首选,拥有多年WP开源程序服务经验,我们一直在坚持客户体验,没有最好,只有更好!
Mac163网站建设,需要帮助点击我!
  • 17713433920
  • 在线客户
  • 联系邮箱
  • 扫一扫,加好友

关闭搜索
购物车
回到顶部