WordPressの管理画面にCSSファイルを読み込むように設定する
2005年から WEB 業界一筋。500サイト超を手がける SEO・WordPress のエキスパート。「公開後こそ本番」を掲げ、データ分析とユーザー視点で成果を引き出す運用を提案。
2005年に制作会社へ入社後、プログラマーからキャリアをスタート。サーバー構築・データベース設計で培った技術を強みに、WordPress テーマ／プラグイン開発やサイト移行の難案件を多数担当してきました。
2010年以降は SEO エンジニアとしても活動領域を拡大。コンテンツ設計・内部リンク最適化・高速化チューニングにより、競合の激しいビッグキーワードで上位獲得を実現してきました。
現在は TREVO のウェブディレクターとして、要件定義から運用改善まで一気通貫でリード。AI ライティングや GA4／Looker Studio を活用したレポーティング手法を開発し、「数字で説明できるサイト運用」をポリシーにクライアントの ROI 最大化を支援しています。
趣味／強み：筋トレとランニングで日々の集中力をキープ。複雑な課題を“仕組み”で解決するのが得意。
モットー：「サイトは資産。改善を止めた瞬間から価値は目減りする」
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() を活用します。
