golem
/
twentyGOLEM
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Twenty Twelve: Add postMessage support in Customizer for fonts, site title and description, and background color body_class value updates. 

Props obenland for first patch and testing. Fixes #21443.


git-svn-id: http://core.svn.wordpress.org/trunk@21411 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
lancewillett 2012-08-02 22:10:03 +00:00
parent cbaf844a8e
commit c8db5f60ba
3 changed files with 75 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
functions.php
View File

@ -111,10 +111,8 @@ function twentytwelve_scripts_styles() {
* Depends on Theme Options setting.
*/
$options = $twentytwelve_options->get_theme_options();
if ( $options['enable_fonts'] ) {
$protocol = is_ssl() ? 'https' : 'http';
wp_enqueue_style( 'twentytwelve-fonts', "$protocol://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700" );
}
if ( $options['enable_fonts'] )
wp_enqueue_style( 'twentytwelve-fonts', $twentytwelve_options->custom_fonts_url() );
/**
* Load our main CSS file.
@ -373,15 +371,4 @@ function twentytwelve_content_width() {
$content_width = 960;
}
}
add_action( 'template_redirect', 'twentytwelve_content_width' );
/**
* Bind JS handler to make Theme Customizer preview reload
* custom background `body_class` value changes asynchronously.
*
* @since Twenty Twelve 1.0
*/
function twentytwelve_customize_preview_js() {
wp_enqueue_script( 'twentytwelve-customizer', get_template_directory_uri() . '/js/theme-customizer.js', array( 'customize-preview' ), '20120725', true );
}
add_action( 'customize_preview_init', 'twentytwelve_customize_preview_js' );
add_action( 'template_redirect', 'twentytwelve_content_width' );

42
inc/theme-options.php
View File

@ -37,9 +37,10 @@ class Twenty_Twelve_Options {
if ( 'twentytwelve' != get_stylesheet() )
$this->option_key = get_stylesheet() . '_theme_options';
add_action( 'admin_init', array( $this, 'options_init' ) );
add_action( 'admin_menu', array( $this, 'add_page' ) );
add_action( 'customize_register', array( $this, 'customize_register' ) );
add_action( 'admin_init', array( $this, 'options_init' ) );
add_action( 'admin_menu', array( $this, 'add_page' ) );
add_action( 'customize_register', array( $this, 'customize_register' ) );
add_action( 'customize_preview_init', array( $this, 'customize_preview_js' ) );
}
/**
@ -203,6 +204,11 @@ class Twenty_Twelve_Options {
* @return void
*/
public function customize_register( $wp_customize ) {
// Add postMessage support for site title and tagline
$wp_customize->get_setting( 'blogname' )->transport = 'postMessage';
$wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';
// Enable Web Fonts
$wp_customize->add_section( $this->option_key . '_enable_fonts', array(
'title' => __( 'Fonts', 'twentytwelve' ),
@ -215,6 +221,7 @@ class Twenty_Twelve_Options {
'default' => $defaults['enable_fonts'],
'type' => 'option',
'capability' => 'edit_theme_options',
'transport' => 'postMessage',
) );
$wp_customize->add_control( $this->option_key . '_enable_fonts', array(
@ -224,4 +231,33 @@ class Twenty_Twelve_Options {
'type' => 'checkbox',
) );
}
/**
* Bind JS handlers to make Theme Customizer preview reload changes asynchronously.
*
* @since Twenty Twelve 1.0
* @access public
*
* @return void
*/
public function customize_preview_js() {
wp_enqueue_script( 'twentytwelve-customizer', get_template_directory_uri() . '/js/theme-customizer.js', array( 'customize-preview' ), '20120725', true );
wp_localize_script( 'twentytwelve-customizer', 'twentytwelve_customizer', array(
'option_key' => $this->option_key,
'link' => $this->custom_fonts_url(),
) );
}
/**
* Create path to load fonts CSS file with correct protocol.
*
* @since Twenty Twelve 1.0
* @access public
*
* @return string Path to load fonts CSS.
*/
public function custom_fonts_url() {
$protocol = is_ssl() ? 'https' : 'http';
return $protocol . '://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700';
}
}

34
js/theme-customizer.js
View File

@ -1,4 +1,36 @@
( function( $ ){
/**
* Theme Customizer enhancements for a better user experience.
*
* Contains handlers to make Theme Customizer preview reload changes asynchronously.
* Things like fonts, site title and description, and background color changes.
*
* See related settings in Twenty_Twelve_Options::customize_preview_js()
*/
( function( $ ) {
// Site title and description.
wp.customize( 'blogname', function( value ) {
value.bind( function( to ) {
$( '.site-title a' ).html( to );
} );
} );
wp.customize( 'blogdescription', function( value ) {
value.bind( function( to ) {
$( '.site-description' ).html( to );
} );
} );
// Custom fonts.
wp.customize( twentytwelve_customizer.option_key + '[enable_fonts]', function( value ) {
value.bind( function( to ) {
if ( to ) {
$( 'head' ).append( '<link rel="stylesheet" id="twentytwelve-fonts-css" href="' + twentytwelve_customizer.link + '" type="text/css" media="all" />' );
} else {
$( '#twentytwelve-fonts-css' ).remove();
}
} );
} );
// Hook into background color change and adjust body class value as needed.
wp.customize( 'background_color', function( value ) {
var body = $( 'body' );