WordPressのエディタにCSSを適用する。主にiframe内のhtmlタグに

  • 更新日:
  • 公開日:

WordPressのエディタにCSSを適用したいこと、ありますよね。CSSをエディタに適用すると、実際のブログでのスタイリングを確認しながらブログを書けるので便利です。

これにはCSSファイルを用意する方法があります。今回はエディタを形作っているiframe内の<html>タグをスタイリングしたかったのですが、この方法では上手くいかず。そこで発見したのがjQueryを使ってCSSをiframe内に出力する方法。ただし、普通の手法ではないのでメモしておきます。

ちなみにiframeの場所はココです
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');
PHP

出力したい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');
PHP

これをfunctions.phpに記述し、テーマフォルダ内に「editor-style.css」という名前のCSSファイルを用意しましょう。そうすると投稿編集ページでこのCSSファイルが読み込まれますので、ブログの記事スタイルを書き込みます。

他のCSSファイルを読み込ませたい場合はadd_editor_style()の引数にCSSファイルまでのパスを文字列で渡します。詳しい使い方はこちらのページが参考になるでしょう。

関数リファレンス/add editor style – WordPress Codex 日本語版

書いた人

Symbol Mark

Ryoichi（しつ）

除菌ティッシュを買い込んで使いきれずによく乾かす人。

療養目的で退職し、どうやって生きていくか模索中。最近は勉強目的でLaravelやVue.js弄ったり、趣味で音で遊んでます。

※2019年10月16日現在ブログリニューアル中です。崩れなどが発生していたらすみません。

うぇぶ: @s_ryone