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マーケティングなどのサービスをご紹介しています。