customizer.js
_sで、カスタマイザー画面の非同期処理を行うためのjavascritpファイルです。カスタマイザー画面の非同期処理の実装の流れについては、以下のcodexが分かりやすいです。
Theme Customization API Part 3: Configure Live Preview (Optional)
端的にまとめると、以下のように書くことで、カスタマイザー画面で指定した変更を、その部分に非同期に適用することができるようになります。
wp.customize( '/*変更する部分のID*/', function( value ) {
value.bind( function( /*カスタマイザー画面で新しく変更されたもの*/ ) {
//変更する内容
} );
} );
これを頭に入れてけば、どういうことをしているのか理解できると思います。
/**
* File customizer.js.
*
* Theme Customizer enhancements for a better user experience.
*
* Contains handlers to make Theme Customizer preview reload changes asynchronously.
*/
( function( $ ) {
// Site title and description.
wp.customize( 'blogname', function( value ) {
value.bind( function( to ) {
$( '.site-title a' ).text( to );
} );
} );
wp.customize( 'blogdescription', function( value ) {
value.bind( function( to ) {
$( '.site-description' ).text( to );
} );
} );
// Header text color.
wp.customize( 'header_textcolor', function( value ) {
value.bind( function( to ) {
if ( 'blank' === to ) {
$( '.site-title, .site-description' ).css( {
'clip': 'rect(1px, 1px, 1px, 1px)',
'position': 'absolute'
} );
} else {
$( '.site-title, .site-description' ).css( {
'clip': 'auto',
'position': 'relative'
} );
$( '.site-title a, .site-description' ).css( {
'color': to
} );
}
} );
} );
} )( jQuery );
カスタマイザーの内部的な仕組み
カスタマイザーの内部的な仕組みについては、以下の２つのサイトが大変参考になりました。