WordPressのエディタにCSSを適用したいこと、ありますよね。CSSをエディタに適用すると、実際のブログでのスタイリングを確認しながらブログを書けるので便利です。
これにはCSSファイルを用意する方法があります。今回はエディタを形作っているiframe内の<html>タグをスタイリングしたかったのですが、この方法では上手くいかず。そこで発見したのがjQueryを使ってCSSをiframe内に出力する方法。ただし、普通の手法ではないのでメモしておきます。
ちなみになぜ<html>タグにCSSを付けたかったのかというと、CSSプロパティのrem単位を扱いたかったからです。
タグにCSSを付けたかったのかというと、CSSプロパティのrem単位を扱いたかったからです。
投稿エディタのiframe内にCSSを出力する
エディタのiframe内にCSSを出力するソースコードは以下です。functions.phpに記述して使います。
function my_custom_editor_stylesheet( $editor_id ){
if ( 'content' !== $editor_id )
return;
echo '<div id="my_unique_stylesheet_id" style="display: none !important;">
html {
font-size: 62.5%;
line-height: 1.8rem;
}
</div>';
echo '
<script type="text/javascript">
(function(){
var checkInterval = setInterval( function() {
if ( typeof(tinyMCE) !== "undefined" ) {
if ( tinyMCE.activeEditor && ! tinyMCE.activeEditor.isHidden() ) {
jQuery( "#content_ifr" ).contents().find( "head" ).append( "<style type=\'text/css\'>" + jQuery( "#my_unique_stylesheet_id" ).text() + "</style>" );
clearInterval( checkInterval );
}
}
}, 500);
}());
</script>';
}
add_action('media_buttons', 'my_custom_editor_stylesheet');出力したいCSSを7~10行目の間に書きましょう。この例では<html>タグにフォントサイズや行の高さを指定しています。こうするとirameの<head>タグ内にCSSを出力してくれます。
ソースコードを公開してくれた方に感謝です！
参考： WordPress › Support » Custom/Dynamic CSS in TinyMCE
おまけ：CSSファイルを用意する方法
おまけでCSSファイルを用意する方法について。というか通常はこちらの方法が主流でしょう（上記のはイレギュラーだと思います）。
エディターページでCSSファイルを読み込めるadd_editor_style()を使います。この関数は以下のように、テーマのセットアップアクションにフックして使います。
function theme_setup() {
//投稿編集画面にCSSを適用
add_editor_style();
}
add_action('after_setup_theme', 'theme_setup');これをfunctions.phpに記述し、テーマフォルダ内に「editor-style.css」という名前のCSSファイルを用意しましょう。そうすると投稿編集ページでこのCSSファイルが読み込まれますので、ブログの記事スタイルを書き込みます。
他のCSSファイルを読み込ませたい場合はadd_editor_style()の引数にCSSファイルまでのパスを文字列で渡します。詳しい使い方はこちらのページが参考になるでしょう。