WordPressの管理画面にCSSファイルを読み込むように設定する | 大阪 ホームページ制作 株式会社TREVOの技術ブログ

技術ブログ

WordPressの管理画面にCSSファイルを読み込むように設定する

2024.12.24.

WordPress

タグ

X Facebook Pocket LINE はてブ

株式会社TREVOの月額制ホームページ制作サービス
PR

WordPress管理画面でカスタムフィールドなどで追加した項目を制御するために、独自のCSSファイルを読み込む方法を紹介します。
この方法を使えば、管理画面のデザインやレイアウトを柔軟にカスタマイズできます。

CSSを読み込む方法

CSSを <head> 内に直接埋め込む

functions.php に以下のコードを記述することで、WordPress管理画面の <head> 内に直接CSSを埋め込むことができます。

function my_admin_style_inline() {
    echo '<style>
        /* ここに管理画面用のCSSを書く */
        .custom-class { color: red; }
    </style>' . PHP_EOL;
}
add_action('admin_print_styles', 'my_admin_style_inline');

外部CSSファイルを読み込む

wp_enqueue_style() を使用して、テーマ内の独自CSSファイルを管理画面に読み込ませます。

function my_admin_style_file() {
    wp_enqueue_style(
        'my_admin_style', // スタイルハンドル名
        get_template_directory_uri() . '/original_style.css', // CSSファイルのパス
        array(), // 依存ファイル(必要に応じて指定)
        null // バージョン(省略可能)
    );
}
add_action('admin_enqueue_scripts', 'my_admin_style_file');

注意点: original_style.css をテーマフォルダ内に保存する必要があります。

JavaScriptを <body> 閉じタグ前に追加する方法

管理画面の <body> 閉じタグ直前にスクリプトを埋め込むには、以下の方法を使用します。

JavaScriptを直接埋め込む

function my_admin_footer_script_inline() {
    echo '<script>
        // ここに管理画面用のJavaScriptを書く
        console.log("管理画面用スクリプトが読み込まれました");
    </script>' . PHP_EOL;
}
add_action('admin_print_footer_scripts', 'my_admin_footer_script_inline');

外部CSSやJSを <body> 閉じタグ前に読み込む

function my_admin_footer_script_file() {
    wp_enqueue_script(
        'my_admin_script', // スクリプトハンドル名
        get_template_directory_uri() . '/custom_script.js', // JavaScriptファイルのパス
        array(), // 依存スクリプト(必要に応じて指定)
        null, // バージョン(省略可能)
        true // `true` にすると `<body>` 閉じタグ前にスクリプトを読み込み
    );
}
add_action('admin_enqueue_scripts', 'my_admin_footer_script_file');

第5引数を true にすると、スクリプトがページの最後(</body> タグの直前)で読み込まれ、HTMLやCSSが先に表示されるため、ページ表示が速くなります。

実用例

カスタムフィールド専用CSSを適用する

特定の管理画面ページ(例: 投稿編集ページ)でのみCSSを適用する場合、以下のように条件を指定します。

function my_admin_style_conditional() {
    $screen = get_current_screen();
    if ($screen->post_type === 'custom_post_type') { // カスタム投稿タイプに限定
        wp_enqueue_style(
            'my_admin_style', 
            get_template_directory_uri() . '/original_style.css'
        );
    }
}
add_action('admin_enqueue_scripts', 'my_admin_style_conditional');

スクリプトの条件付き読み込み

同様に、特定の画面でのみスクリプトを読み込む方法です。

function my_admin_script_conditional() {
    $screen = get_current_screen();
    if ($screen->id === 'post') { // 投稿編集画面に限定
        wp_enqueue_script(
            'my_admin_script', 
            get_template_directory_uri() . '/custom_script.js',
            array('jquery'), // jQueryに依存
            null,
            true
        );
    }
}
add_action('admin_enqueue_scripts', 'my_admin_script_conditional');

注意点

読み込み場所の確認

CSSは通常 <head> 内、JSは <body> 閉じタグ前に読み込むのが推奨されます。

ファイルパスの正確性

get_template_directory_uri() を使用することでテーマ内のファイルパスを正確に取得できます。

特定の画面に限定

必要のない画面で読み込まないように get_current_screen() を活用します。

大阪のホームページ制作会社TREVOでは、ホームページ制作に関する情報を掲載しています。最短2日で仮サイトを公開するサービスやSEO対策に特化したホームページ制作、オリジナルホームページデザイン、ライティング、リスティング広告、WEBマーケティングなどのサービスをご紹介しています。

板浪雅樹 のアバター

経歴: 映像制作の専門学校を卒業後、映像制作(編集・撮影)でのアシスタント、カーナビゲーション用の3DCG制作、PS2用の3DCGゲーム背景制作、16ミリフィルムのデジタル変換業務等を経てWEB制作部門のある会社に就職。株式会社TREVOでディレクション、SEO対策、CMS開発、3DCG制作、映像制作を担当

X Facebook Pocket LINE はてブ
WEB無料相談