先日、自作テーマ「4536」をカスタマイズし、テーマカスタマイザーの変更値をビジュアルエディタ（投稿画面）に反映させる機能を実装しました。
親テーマや子テーマのCSSは簡単に反映させることができますが、「追加CSSの値を反映させる関数」などはありませんからね。苦労しましたよ。。
ただ、苦労したおかげでコピペで使えるコードが完成しました！
今回はそれをご紹介するので、追加CSSの機能を使っている方や自作テーマの作者さんに参考にしていただければと思います！
追加CSSの値をビジュアルエディタに反映させるコード
以下のコードを親テーマ（または子テーマ）のfunctions.phpにコピペ！以上でカスタマイズは終了です！
function custom_tinymce_css_4536($init) { // 追加CSS
$css = wp_get_custom_css();
?>
<script type="text/javascript">
function add_temp_css_4536( ed ) {
ed.onInit.add( function() {
tinyMCE.activeEditor.dom.addStyle(<?php echo json_encode($css) ?>);
} );
};
</script>
<?php
if (wp_default_editor() == 'tinymce')
$init['setup'] = 'add_temp_css_4536';
return $init;
}
add_filter('tiny_mce_before_init', 'custom_tinymce_css_4536');参考サイト
このコードはこちらのサイトを参考にしました。
参考How to add custom CSS (theme option) to TinyMCE?
テーマカスタマイザーの値も同様に反映可能
今回ご紹介した方法は、追加CSSだけではなく他の値も取得・反映できます。
変更するのは$css = wp_get_custom_css();の部分。
wp_get_custom_cssが追加CSSの値を取得する関数なんですが、これを別の関数や変数（定数）にするだけでOKです。
ただ、echoなどで出力済みの関数を使うとNULLが返ってくるのでご注意ください。
ここら辺、よくわからなければ別記事にまとめるので、テーマカスタマイザーの設定値をビジュアルエディタに反映させたい方はお気軽にご質問いただければと思います。
WordPressの外観→カスタマイズに設定項目を追加する方法！ 
もっと見る
WordPressテーマカスタマイザーの色設定項目の追加方法。 もっと見る
WordPressテーマカスタマイザーでCSSを追加・変更する方法。 もっと見る
まとめ
今は、子テーマのスタイルシートではなく追加CSS（管理画面→外観→カスタマイズの中）を使うことが推奨されているので、今回のカスタマイズはなかなか便利だと思います。
実際のデザインで記事を書いた方がテンションも上がるので、ぜひご活用ください！
