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を通じて顧客の事業を加速させるために日々奮闘中。
関連する記事
ワードプレス iPhone アプリダウンロード
ワードプレスの iPhone アプリ初期設定方法
WordPress
ワードプレスの Android スマホアプリ
ワードプレスの Androind アプリ初期設定方法
WordPress
WordPress
WordPressのマルチサイト化は超カンタン!初心者でもラクラク設置する5ステップ
WordPress
ワードプレスのテーマとは?デザインテンプレートを変更する2つの方法
WordPress
NO IMAGE
WPのiPhoneアプリとウェブブラウザで出来る・出来ない機能比較
WordPress
WordPress
なぜホームページを作るならWordPressがおすすめなのか!
WordPress
WordPress
【WP】W3Cのマークアップバリデーションエラーを解決する方法
WordPress
NO IMAGE
【WPエラー】Warning: dynamic sitemap generation must have parmalinks enabled.
WordPress
ワードプレスの投稿者アイコンを表示する「Gravatar」にアバターアイコンを登録しよう
WordPress
ワードプレスで最初に設定すべき5つの初期設定 & その他の設定まとめ
WordPress
マーケティングとWeb制作で
貴社の経営課題を解決します

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