バックストーリー:
ネイティブの WordPress カスタマイザーを使用して、スタイルシート スイッチャーを作成しました。カスタマイザーが正しく機能し、php を介して新しいスタイルシートの選択を保存していますが、.js/jQuery を介したライブ プレビューで問題が発生しています。.js と jQuery はまだ新しいので、いくつかの指針を教えていただければ幸いです。
私の問題
ドロップダウンからスキームを選択し、カスタマイザーで「公開」をクリックして更新すると、変更が表示されるので、php 側では問題ありませんが、WP Customizer Live Preview iframe で選択を行うと、私の変更全く現れません。
コンソールに入ると、選択したスキームが、選択したスタイルシートへの適切な URL パスで選択されていることがわかりますが、画面には何も表示されません。
私の .js/jQuery:
wp.customize( 'my_scheme_switch', function( value ) {
value.bind( function( to ) {
var zScheme;
if ( 'default' === to ) {
zScheme = 'default.css';
} else if ( 'orange' === to ) {
zScheme = 'orange.css';
} else {
zScheme = 'default.css';
}
jQuery( document ).ready( function($) {
var $body = $( 'body' );
var $head = $( 'head' );
var $switcher = $('#my-style-switcher-css', $head );
var schemes = '/wp-content/themes/mytheme/css/schemes/';
var newStyle = location.protocol + "//" + location.host + schemes + zScheme;
$switcher.href = newStyle;
});
});
});