上一节学习了如何创建新的Theme Customizer选项,现在就来研究如何应用新创建的选项。首先要实现用户保存设置后前台可以看到效果,然后更进一步地增加实时预览的功能。

Step 1. 创建新选项

以twenty twelve为例,创建修改header背景的选项,用option方式存储,以refresh方式显示。具体见上一节

//Part 1: Create setting and control for header background color
function sg_customize_register( $wp_customize ) {
    $wp_customize->add_setting( 'sg_style_options[header_bgcolor]', array(
        'default'        => '#3c85ca',
        'type'           => 'option',
        'capability'     => 'edit_theme_options',
        'transport'      => 'refresh'
    ) );
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_bgcolor_html_id', array(
        'label'        => __( 'Header Background Color', 'your_textdomain' ),
        'section'    => 'colors',
        'settings'   => 'sg_style_options[header_bgcolor]',
    ) ) );
}
add_action( 'customize_register', 'sg_customize_register' );

Step 2. 读取并应用选项

控制header背景色只需要产生一段css代码即可,这里用到钩子wp_head

//Part 2: Generating Live CSS
function sg_customize_css()
{
    $options = get_option('sg_style_options');
    ?>
         <style type="text/css">
             .site-header { background-color:<?php echo  $options['header_bgcolor']; ?>; }
         </style>
    <?php
}
add_action( 'wp_head', 'sg_customize_css');

这段代码首先读取用户选择的header背景色,然后动态在<head></head>中产生一段css代码

使用option存储,所以要用get_option()函数获取数据库记录。

如果使用theme_mod存储, 则读取方式如下

$options = get_theme_mod('sg_style_options');
$header_bgcolor = $options['header_bgcolor'];

此时,用户访问Customizer选项,调整header background color, 页面就会刷新后展示结果,当然,没有点击保存前,结果是不会应用的。

Theme Customizer
当用户通过颜色选择器改变Header Background Color的值时,网站Header的背景也会变化,只不过需要刷新页面

Step 3. 实时预览结果

刷新页面终归对用户不太友好,所以可以使用实时预览的方式。要使用实时预览,首先要将第一步中transport参数的值改为postMessage,即

'transport'      => 'postMessage'

然后在主题js文件目录下创建一个新的js脚本命名为mytheme-customizer.js,脚本内容如下

( function( $ ) {	
	//Update header background in real time...
	wp.customize( 'sg_style_options[header_bgcolor]', function( value ) {
		value.bind( function( newval ) {
			$('.site-header').css('background-color', newval );
		} );
	} );
} )( jQuery );

读取sg_style_options[header_bgcolor]的值,然后修改.site-header的background-color属性,.site-header是Header的class

最后,还要将这个脚本引入,使用钩子customize_preview_init

//Part 3: Configure Live Preview
function sg_customize_preview_js() {
    wp_enqueue_script( 'theme-customizer', get_template_directory_uri() . '/js/mytheme-customizer.js', array( 'jquery','customize-preview' ), '20121213', true );
}
add_action( 'customize_preview_init', 'sg_customize_preview_js' );

这样当用户在Customizer中修改Header背景色时,就可以试试预览结果了。

完整代码

//Part 1: Create setting and control for header background color
function sg_customize_register( $wp_customize ) {
    $wp_customize->add_setting( 'sg_style_options[header_bgcolor]', array(
        'default'        => '#3c85ca',
        'type'           => 'option',
        'capability'     => 'edit_theme_options',
        'transport'      => 'postMessage'
    ) );
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_bgcolor_html_id', array(
        'label'        => __( 'Header Background Color', 'your_textdomain' ),
        'section'    => 'colors',
        'settings'   => 'sg_style_options[header_bgcolor]',
    ) ) );
}
add_action( 'customize_register', 'sg_customize_register' );

//Part 2: Generating Live CSS
function sg_customize_css()
{
    $options = get_option('sg_style_options');
    ?>
         <style type="text/css">
             .site-header { background-color:<?php echo  $options['header_bgcolor']; ?>; }
         </style>
    <?php
}
add_action( 'wp_head', 'sg_customize_css');

//Part 3: Configure Live Preview
function sg_customize_preview_js() {
    wp_enqueue_script( 'theme-customizer', get_template_directory_uri() . '/js/mytheme-customizer.js', array( 'jquery','customize-preview' ), '20121213', true );
}
add_action( 'customize_preview_init', 'sg_customize_preview_js' );