我正在尝试使用WP Customizer为WordPress站点上的特定元素（站点标题）设置背景颜色和图像控件。
背景图像运行良好-预览和实际将CSS写入头部。但是对于背景色，只有预览可以工作，但实际上并没有应用。单击“保存”后（&A）；“发布”按钮和X按钮，浏览器显示：
单击“离开此页面”时，自定义程序中设置的背景色不会显示在的前端。站点标题元素。
函数中的代码。php：
/**
* HEX Color sanitization callback example.
*
* - Sanitization: hex_color
* - Control: text, WP_Customize_Color_Control
*
* Note: sanitize_hex_color_no_hash() can also be used here, depending on whether
* or not the hash prefix should be stored/retrieved with the hex color value.
*
* @see sanitize_hex_color() https://developer.wordpress.org/reference/functions/sanitize_hex_color/
* @link sanitize_hex_color_no_hash() https://developer.wordpress.org/reference/functions/sanitize_hex_color_no_hash/
*
* @param string $hex_color HEX color to sanitize.
* @param WP_Customize_Setting $setting Setting instance.
* @return string The sanitized hex color if not null; otherwise, the setting default.
*/
function sk_sanitize_hex_color( $hex_color, $setting ) {
// Sanitize $input as a hex value without the hash prefix.
$hex_color = sanitize_hex_color( $hex_color );
// If $input is a valid hex value, return it; otherwise, return the default.
return ( ! null( $hex_color ) ? $hex_color : $setting->default );
}
/**
* Image sanitization callback example.
*
* Checks the image\'s file extension and mime type against a whitelist. If they\'re allowed,
* send back the filename, otherwise, return the setting default.
*
* - Sanitization: image file extension
* - Control: text, WP_Customize_Image_Control
*
* @see wp_check_filetype() https://developer.wordpress.org/reference/functions/wp_check_filetype/
*
* @param string $image Image filename.
* @param WP_Customize_Setting $setting Setting instance.
* @return string The image filename if the extension is allowed; otherwise, the setting default.
*/
function sk_sanitize_image( $image, $setting ) {
/*
* Array of valid image file types.
*
* The array includes image mime types that are included in wp_get_mime_types()
*/
$mimes = array(
\'jpg|jpeg|jpe\' => \'image/jpeg\',
\'gif\' => \'image/gif\',
\'png\' => \'image/png\',
\'bmp\' => \'image/bmp\',
\'tif|tiff\' => \'image/tiff\',
\'ico\' => \'image/x-icon\'
);
// Return an array with file extension and mime_type.
$file = wp_check_filetype( $image, $mimes );
// If $image has a valid mime_type, return it; otherwise, return the default.
return ( $file[\'ext\'] ? $image : $setting->default );
}
/**
* Customizer: Add Sections
*
* This file demonstrates how to add Sections to the Customizer
*
* @package code-examples
* @copyright Copyright (c) 2015, WordPress Theme Review Team
* @license http://www.gnu.org/licenses/old-licenses/gpl-2.0.html GNU General Public License, v2 (or newer)
*/
/**
* Theme Options Customizer Implementation.
*
* Implement the Theme Customizer for Theme Settings.
*
* @link http://ottopress.com/2012/how-to-leverage-the-theme-customizer-in-your-own-themes/
*
* @param WP_Customize_Manager $wp_customize Object that holds the customizer data.
*/
function sk_register_theme_customizer( $wp_customize ) {
/*
* Failsafe is safe
*/
if ( ! isset( $wp_customize ) ) {
return;
}
/**
* Add Header Section for General Options.
*
* @uses $wp_customize->add_section() https://developer.wordpress.org/reference/classes/wp_customize_manager/add_section/
* @link $wp_customize->add_section() https://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_section
*/
$wp_customize->add_section(
// $id
\'sk_section_header\',
// $args
array(
\'title\' => __( \'Header Background\', \'theme-slug\' ),
\'description\' => __( \'Set background color and/or background image for the header\', \'theme-slug\' ),
// \'panel\' => \'sk_panel_general\'
)
);
/**
* Header Background Color setting.
*
* - Setting: Header Background Color
* - Control: WP_Customize_Color_Control
* - Sanitization: hex_color
*
* Uses a color wheel to configure the Header Background Color setting.
*
* @uses $wp_customize->add_setting() https://developer.wordpress.org/reference/classes/wp_customize_manager/add_setting/
* @link $wp_customize->add_setting() https://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_setting
*/
$wp_customize->add_setting(
// $id
\'header_background_color\',
// $args
array(
\'default\' => \'\',
\'type\' => \'theme_mod\',
\'capability\' => \'edit_theme_options\',
\'sanitize_callback\' => \'sk_sanitize_hex_color\',
\'transport\' => \'postMessage\'
)
);
/**
* Header Background Image setting.
*
* - Setting: Header Background Image
* - Control: WP_Customize_Image_Control
* - Sanitization: image
*
* Uses the media manager to upload and select an image to be used as the header background image.
*
* @uses $wp_customize->add_setting() https://developer.wordpress.org/reference/classes/wp_customize_manager/add_setting/
* @link $wp_customize->add_setting() https://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_setting
*/
$wp_customize->add_setting(
// $id
\'header_background_image\',
// $args
array(
\'default\' => \'\',
\'type\' => \'theme_mod\',
\'capability\' => \'edit_theme_options\',
\'sanitize_callback\' => \'sk_sanitize_image\',
\'transport\' => \'postMessage\'
)
);
/**
* Core Color control.
*
* - Control: Color
* - Setting: Header Background Color
* - Sanitization: hex_color
*
* Register "WP_Customize_Color_Control" to be used to configure the Header Background Color setting.
*
* @uses $wp_customize->add_control() https://developer.wordpress.org/reference/classes/wp_customize_manager/add_control/
* @link $wp_customize->add_control() https://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_control
*
* @uses WP_Customize_Color_Control() https://developer.wordpress.org/reference/classes/wp_customize_color_control/
* @link WP_Customize_Color_Control() https://codex.wordpress.org/Class_Reference/WP_Customize_Color_Control
*/
$wp_customize->add_control(
new WP_Customize_Color_Control(
// $wp_customize object
$wp_customize,
// $id
\'header_background_color\',
// $args
array(
\'settings\' => \'header_background_color\',
\'section\' => \'sk_section_header\',
\'label\' => __( \'Header Background Color\', \'theme-slug\' ),
\'description\' => __( \'Select the background color for header.\', \'theme-slug\' )
)
)
);
/**
* Image Upload control.
*
* Control: Image Upload
* Setting: Header Background Image
* Sanitization: image
*
* Register "WP_Customize_Image_Control" to be used to configure the Header Background Image setting.
*
* @uses $wp_customize->add_control() https://developer.wordpress.org/reference/classes/wp_customize_manager/add_control/
* @link $wp_customize->add_control() https://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_control
*
* @uses WP_Customize_Image_Control() https://developer.wordpress.org/reference/classes/wp_customize_image_control/
* @link WP_Customize_Image_Control() https://codex.wordpress.org/Class_Reference/WP_Customize_Image_Control
*/
$wp_customize->add_control(
new WP_Customize_Image_Control(
// $wp_customize object
$wp_customize,
// $id
\'header_background_image\',
// $args
array(
\'settings\' => \'header_background_image\',
\'section\' => \'sk_section_header\',
\'label\' => __( \'Header Background Image\', \'theme-slug\' ),
\'description\' => __( \'Select the background image for header.\', \'theme-slug\' )
)
)
);
}
// Settings API options initilization and validation.
add_action( \'customize_register\', \'sk_register_theme_customizer\' );
/**
* Registers the Theme Customizer Preview with WordPress.
*
* @package sk
* @since 0.3.0
* @version 0.3.0
*/
function sk_customizer_live_preview() {
wp_enqueue_script(
\'sk-theme-customizer\',
get_stylesheet_directory_uri() . \'/js/theme-customizer.js\',
array( \'customize-preview\' ),
\'0.1.0\',
true
);
} // end sk_customizer_live_preview
add_action( \'customize_preview_init\', \'sk_customizer_live_preview\' );
/**
* Writes the Header Background Color and/or Image out to the \'head\' element of the document
* by reading the value(s) from the theme mod value in the options table.
*/
function sk_customizer_css() {
?>
<style type="text/css">
.site-header {
background-color: <?php echo get_theme_mod( \'header_background_color\' ); ?>;
}
<?php if ( 0 < count( strlen( ( $header_background_image_url = get_theme_mod( \'header_background_image\' ) ) ) ) ) { ?>
.site-header {
background-image: url( <?php echo $header_background_image_url; ?> );
}
<?php } // end if ?>
</style>
<?php
} // end sk_customizer_css
add_action( \'wp_head\', \'sk_customizer_css\');
js/主题定制器中的代码。js公司：
(function( $ ) {
"use strict";
// Header Background Color - Color Control
wp.customize( \'header_background_color\', function( value ) {
value.bind( function( to ) {
$( \'.site-header\' ).css( \'backgroundColor\', to );
} );
});
// Header Background Image - Image Control
wp.customize( \'header_background_image\', function( value ) {
value.bind( function( to ) {
$( \'.site-header\' ).css( \'background-image\', \'url( \' + to + \')\' );
} );
});
})( jQuery );
有什么想法吗？
我跟着http://code.tutsplus.com/series/a-guide-to-the-wordpress-theme-customizer--wp-33722 和https://github.com/WPTRT/code-examples/tree/master/customizer.
