投稿画面でウィジウィグ内のスタイルを変更する

2017.08.31

WordPressの投稿画面でウィジウィグの表示を実際のサイトの表示に合わせたいという要望がたまにあるので、ウィジウィグ内でスタイルを設定する方法をメモしておきます。

サンプルコード

まずは特に設定していない場合の見出し2(h2)と通常のテキストをみてみます。

テーマディレクトリ直下にeditor-style.cssというファイルを作成して、その中にウィジウィグ用のスタイルを用意します。

body {
    font-family: "メイリオ", Meiryo;
}
h2 {
    border-left: #f00 5px solid;
    padding-left: 5px;
}

今回は全体のfont-familyとh2のスタイルを用意しました。
次にfunctions.phpに今用意したCSSファイルを追加する処理を記述します。

function add_wysiwyg_style() {
    add_editor_style();
}
add_action( 'admin_init', 'add_wysiwyg_style' );

これでウィジウィグ内にスタイルの追加ができました。

【参考サイト】

土