東京のホームページ制作会社・web制作会社
株式会社シンシエイト

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

WordPress

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

やりたいこと

WordPressのエディタ画面

このエディタ画面内のみにCSSを適用したい。

結論

上記で、./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’) のみでも良いかもしれません。

三上 龍志
この記事を書いた人
三上 龍志
元パンパースのCMモデルがネタの株式会社シンシエイト代表。システムエンジニア出身営業育ち。ビーフジャーキー作りが趣味。webが大好きな2児の父。
関連する記事
【WP】W3Cのマークアップバリデーションエラーを解決する方法
WordPress
NO IMAGE
【WPエラー】Warning: dynamic sitemap generation must have parmalinks enabled.
WordPress
ワードプレスの iPhone アプリ初期設定方法
WordPress
WordPressとは?ワードプレスのメリットとデメリットを徹底解説!
WordPress
WordPressの管理画面にCSSファイルやJSファイルを読み込む方法
WordPress
WordPressのマルチサイト化は超カンタン!初心者でもラクラク設置する5ステップ
WordPress
ワードプレスの Androind アプリ初期設定方法
WordPress
ワードプレスのテーマとは?デザインテンプレートを変更する2つの方法
WordPress
NO IMAGE
WPのiPhoneアプリとウェブブラウザで出来る・出来ない機能比較
WordPress
ワードプレスで最初に設定すべき5つの初期設定 & その他の設定まとめ
WordPress
株式会社シンシエイト ブログ バックエンド WordPress WordPress管理画面のエディタ内だけにCSSを適用する方法

web制作とマーケティングで
貴社の経営課題を解決します

web制作でのブランディングや、コンテンツマーケティング・SEO・ネット広告を中心としたウェブマーケティングを通じて、企業の事業を加速させるご提案をしています。

お電話でのお問い合わせはこちら

現在リモートワーク推進中のため、お電話が繋がりにくくなっております。
受付時間は平日10:00〜18:00です。セールス目的のお電話はご遠慮ください。