WordPress管理画面のエディタ内だけにCSSを適用する方法
投稿日：
最終更新日：
WordPressのブログ記事ページを作り込んだ際、管理画面のエディタでも同じように表示したいケースがあると思います。そんな時は管理画面のエディタ内だけにCSSを読み込む方法がありますので、今回はこちらをご紹介します。
やりたいこと
このエディタ画面内のみにCSSを適用したい。
結論
// テーマフォルダからのCSSのファイルへのパス
$cssFile = 'css/editor.min.css';
// CSSファイルのURL
$cssFileUrl = sprintf('%s/%s', get_template_directory_uri(), $cssFile);
// CSSファイルの更新日時を取得
$cssFileModified = filemtime(sprintf('%s/%s', get_template_directory(), $cssFile));
// エディタ用CSSの適用
add_editor_style($cssFileUrl . '?' . $cssFileModified);
上記で、./wp-content/themes/my-theme/css/editor.min.css のcssファイルが読み込まれます。
上記プログラムの解説
2行目は、テーマディレクトリからCSSファイルへのパスを変数に代入します。
5行目は、CSSファイルのURLをつくります。これらのURLをそのまま読み込んでも良いのですが、WordPress管理画面はキャッシュされるのでGETパラメーターでファイルの更新日をつけるとより良いでしょう。
8行目は、CSSファイルの最終更新日時を取得しています。
11行目で、CSSファイルの読み込みと、キャッシュ対策としてGETパラメーターで最終更新日時を追加しています。
add_editor_style()の関数でファイルを読み込むのみ
今回はキャッシュされるのを意識して、GETパラメータを追加しました。
あまり更新しない部分でもあるので、GETパラメータをつけずに、add_editor_style(‘file’) のみでも良いかもしれません。
