customize_preview_init
最后更新于:2021-11-26 04:06:50
do_action( ‘customize_preview_init’, GC_Customize_Manager $this )
Fires once the Customizer preview has initialized and JavaScript settings have been printed.
参数
- $this
-
(GC_Customize_Manager)
GC_Customize_Manager instance.
源文件
文件: gc-includes/class-gc-customize-manager.php
/** * This outputs the javascript needed to automate the live settings preview. * Also keep in mind that this function isn't necessary unless your settings * are using 'transport'=>'postMessage' instead of the default 'transport' * => 'refresh' * * Used by hook: 'customize_preview_init' */ public static function mytheme_customizer_live_preview() { gc_enqueue_script( 'mytheme-themecustomizer', //Give the script an ID get_template_directory_uri().'/assets/js/theme-customizer.js',//Point to file array( 'jquery','customize-preview' ), //Define dependencies '', //Define a version (optional) true //Put script in footer? ); } add_action( 'customize_preview_init', 'mytheme_customizer_live_preview' );
/** * This file adds some LIVE to the Theme Customizer live preview. To leverage * this, set your custom settings to 'postMessage' and then add your handling * here. Your javascript should grab settings from customizer controls, and * then make any necessary changes to the page using jQuery. */ ( function( $ ) { // Update the site title in real time... gc.customize( 'blogname', function( value ) { value.bind( function( newval ) { $( '#site-title a' ).html( newval ); } ); } ); //Update the site description in real time... gc.customize( 'blogdescription', function( value ) { value.bind( function( newval ) { $( '.site-description' ).html( newval ); } ); } ); //Update site title color in real time... gc.customize( 'header_textcolor', function( value ) { value.bind( function( newval ) { $('#site-title a').css('color', newval ); } ); } ); //Update site background color... gc.customize( 'background_color', function( value ) { value.bind( function( newval ) { $('body').css('background-color', newval ); } ); } ); //Update site title color in real time... gc.customize( 'mytheme_options[link_textcolor]', function( value ) { value.bind( function( newval ) { $('a').css('color', newval ); } ); } ); } )( jQuery );