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

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

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

ちなみにiframeの場所はココです
iframeの場所はココです

ちなみになぜ<html>タグにCSSを付けたかったのかというと、CSSプロパティのrem単位を扱いたかったからです。

投稿エディタのiframe内にCSSを出力する

エディタのiframe内にCSSを出力するソースコードは以下です。functions.phpに記述して使います。

出力したいCSSを7~10行目の間に書きましょう。この例では<html>タグにフォントサイズや行の高さを指定しています。こうするとirameの<head>タグ内にCSSを出力してくれます。

ソースコードを公開してくれた方に感謝です!

参考: WordPress › Support » Custom/Dynamic CSS in TinyMCE

おまけ:CSSファイルを用意する方法

おまけでCSSファイルを用意する方法について。というか通常はこちらの方法が主流でしょう(上記のはイレギュラーだと思います)。

エディターページでCSSファイルを読み込めるadd_editor_style()を使います。この関数は以下のように、テーマのセットアップアクションにフックして使います。

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

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

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

コメント

「何かそこ違うよ」「こうした方が良い」っていう部分があったら指摘して頂けると嬉しいです。

トラックバック

トラックバックは現在ありません。

Trackback: https://increment-log.com/wordpress-tinymce-css/trackback/