WordPressのテーマカスタマイザーのライブプレビューを実装したいと考え、ビルドイン項目の「サイトのタイトル」で動作させようと考えています。
Codexに書かれた手順通りにfunctions.phpとjsファイルを作成しましたが、うまく動作しません。
組み込みテーマのtwentyfifteenも参考にし、ほとんど同様のソースを記述したはずですが、やはり動作しません。
jsファイルの中にwindow.alertのテストコードを記述したところ、1行目に記述したalertは出力されたため、jsファイルのロードまでは正しく行えているようです。
しかし、wp.customize()内に仕込んだalertは出力されませんでした。
組み込みテーマのtwentyfifteenでも同様のalertによるテストをしたところ、すべて出力されました。
また、twentyfifteenのcustomize_preview_initでエンキューしているjsを下記の私のjsに書き換えてみるとすべてのテスト用window.alertが出力されることがわかりました。
何かコードの不足などがありますでしょうか。
解決策や、ほかにするべき検証等ありましたら、回答をお願いいたします。
以下が記述したコードです。
①functions.php
php
1function mytheme_customize_register( $wp_customize ) 2{ 3 $wp_customize->get_setting( 'blogname' )->transport = 'postMessage'; 4} 5add_action('customize_register', 'mytheme_customize_register'); 6 7function mytheme_customizer_live_preview() { 8 wp_enqueue_script( 9 'mytheme-themecustomizer', //script_id 10 get_template_directory_uri() . '/js/theme-costomizer.js', //jsファイルのパス 11 array( 'jquery', 'customize-preview' ), //必須の依存ファイル 12 true //フッターに出力する場合はtrue 13 ); 14} 15add_action( 'customize_preview_init', 'mytheme_customizer_live_preview' ); 16
javascript
1( function( $ ) { 2 window.alert('loaded'); //☆このアラートは出力される 3 wp.customize( 'blogname', function( value ) { 4 window.alert('function'); //★このアラートは出力されない 5 value.bind( function( newval ) { 6 $( '#site-title a' ).html( newval ); 7 window.alert('binded'); //★このアラートは出力されない 8 } ); 9 } ); 10 } )( jQuery ); 11
あなたの回答
tips
プレビュー