WordPress Theme Customizer学习笔记 – 应用新创建的选项

上一节学习了如何创建新的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' );