WordPressの管理画面にCSSファイルやJSファイルを読み込む方法

WordPress

WordPressをクライアント向けにカスタマイズする時に、特定の項目を非表示にしたかったり、サイズを変更したかったりということがあります。

これらの対策に管理画面にCSSファイルやJSファイルを読み込む方法を共有します。

やりたいこと

WordPressの管理画面(/wp-admin/*)にCSSファイルとJSファイルを読み込む。

結論

add_action('admin_enqueue_scripts', function()
{
    // CSSとJSのファイル名
    $cssFile = 'css/admin.min.css';
    $jsFile = 'js/admin.min.js';

    // 各ファイルのURL
    $cssFileUrl = sprintf('%s/%s', get_template_directory_uri(), $cssFile);
    $jsFileUrl = sprintf('%s/%s', get_template_directory_uri(), $jsFile);

    // 各ファイルの更新日時を取得
    $cssFileModified = filemtime(sprintf('%s/%s', get_template_directory(), $cssFile));
    $jsFileModified = filemtime(sprintf('%s/%s', get_template_directory(), $jsFile));

    // 各ファイルの読み込み
    wp_enqueue_style('app-admin-style', $cssFileUrl . '?' . $cssFileModified);
    wp_enqueue_script('app-admin-script', $jsFileUrl . '?' . $jsFileModified, ['jquery']);
});

このPHPをfunction.phpなどに追記すれば管理画面にCSSとJSファイルが読み込まれます。コピペでOKという方はコピペでそのまま使ってください。

上記プログラムの解説

4・5行目は、テーマディレクトリからのCSSとJSのファイルパスをそれぞれ変数に代入します。

8・9行目は、CSSとJSそれぞれのURLをつくります。これらのURLをそのまま読み込んでも良いのですが、WordPress管理画面はキャッシュされるのでGETパラメーターでファイルの更新日をつけるとより良いでしょう。

12・13行目は、各ファイルの最終更新日時を取得しています。

16・17行目で、各ファイルの読み込みと、キャッシュ対策としてGETパラメーターで最終更新日時を追加しています。

今回のWordPress開発のポイント

やりたいことはそんなに難しくないのですが、WordPressの管理画面で読み込むファイルはキャッシュが強めです。

ですのでCSSやJSファイルを更新してアップロードしたけれど、サイトには反映されない、などということが頻繁に起こり得ます。

そのためGETパラメータで予め更新日時を送ってあげるとキャッシュされずに便利に使えます。

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

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