WordPress管理画面のエディタ内だけにCSSを適用する方法

WordPress

WordPressのブログ記事ページを作り込んだ際、管理画面のエディタでも同じように表示したいケースがあると思います。そんな時は管理画面のエディタ内だけにCSSを読み込む方法がありますので、今回はこちらをご紹介します。

やりたいこと

WordPressのエディタ画面

このエディタ画面内のみに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’) のみでも良いかもしれません。

三上 龍志|株式会社シンシエイト
この記事を書いた人
三上 龍志|株式会社シンシエイト
2005年からWeb制作に従事。システム開発ベンチャーでエンジニアとしてWeb開発、Webコンサルティング会社でマーケター・新規事業開発を経て2015年に当社を創業。顧客の成果に顧客よりも本気になることをテーマに、Webを通じて顧客の事業を加速させるために日々奮闘中。
関連する記事
ワードプレスの Android スマホアプリ
ワードプレスの Androind アプリ初期設定方法
WordPress
ワードプレス画面
WordPressとは?ワードプレスのメリットとデメリットを徹底解説!
WordPress
ワードプレス iPhone アプリダウンロード
ワードプレスの iPhone アプリ初期設定方法
WordPress
WordPress
なぜホームページを作るならWordPressがおすすめなのか!
WordPress
WordPress
WordPressのマルチサイト化は超カンタン!初心者でもラクラク設置する5ステップ
WordPress
NO IMAGE
【WPエラー】Warning: dynamic sitemap generation must have parmalinks enabled.
WordPress
WordPress
WordPressの管理画面にCSSファイルやJSファイルを読み込む方法
WordPress
ワードプレスの投稿者アイコンを表示する「Gravatar」にアバターアイコンを登録しよう
WordPress
ワードプレスで最初に設定すべき5つの初期設定 & その他の設定まとめ
WordPress
ワードプレスのテーマとは?デザインテンプレートを変更する2つの方法
WordPress
マーケティングとWeb制作で
貴社の経営課題を解決します

市場調査や競合調査を始め、企業やサービスの優位性を理解した上で、UI/UX設計やコンテンツマーケティング、SEO・ネット広告を中心としたWebマーケティングを通じて、ビジネスを加速させるご提案をしています。