未来の自分のためのWEB制作メモ

WordPressの管理画面に独自のスクリプトやスタイルを読み込ませる方法まとめ

WordPressでテーマやプラグインを開発していると、管理画面に独自のスクリプトやCSSを適用したいケースがでてきます。

ここではその方法をまとめました。

管理画面の全ページに読み込ませたい場合

admin_enqueue_scriptsというフックを使います。管理画面に読み込ませる最も基本的な方法になります。

function my_admin_enqueue() {
	// スクリプト
	wp_enqueue_script(
		'admin-custom',
		get_template_directory_uri() . '/js/ admin-custom.js',
		array('jquery'),
  );
	// CSS
	wp_enqueue_style(
		'custom_css',
		get_template_directory_uri() . '/inc/css/custom.css'
	);
}

add_action( 'admin_enqueue_scripts', 'my_admin_enqueue' );

このフックを使うと管理画面の全ページに読み込まれるので、用途としては例えば管理画面全体のデザインを変えたい場合に使うことができます。

この方法は簡単ですが特定のページでのみ使うスタイルやスクリプトの場合、トラブルを避けるためにも後述する方法でページ毎に出し分けたましょう。

特定のページにのみ読み込ませたい場合

WordPressでは管理画面の各ページには$hook_suffixと呼ばれるユニークな接尾辞が設定されています。それを利用することで特定のページにのみスクリプトやスタイルを読み込ませることができます。

実装方法としては次の2つがあます。

  • フック名に$hook_suffixを使う
  • 読み込み関数内で分岐させる

どちらを使うかはケースバイケースです。メンテナンスしやすい方を選びましょう。

フック名に$hook_suffixを使う

WordPressではadmin_head-$hook_suffixのような形式でフックを指定すると特定のページでのみスクリプトやスタイルを読み込ませることができます。

また、ファイルの読み込みではなくページ内に直接出力したい場合はadmin_print_styles-$hook_suffixadmin_print_scripts-$hook_suffixを使います。こちらでもwp_enqueue_srciptなどを使ってファイルを読み込ませることは可能ですが推奨ではないようです。

// ファイルを読み込む
add_action("admin_head-$hook_suffix", 'my_admin_script');
function my_admin_srcipt() {
	// スクリプト
	wp_enqueue_script( 'admin-custom', get_template_directory_uri() . '/js/ admin-custom.js', array('jquery') );
	// CSS
	wp_enqueue_style( 'custom_css', get_template_directory_uri() . '/inc/css/custom.css' );
}
 
// スタイルを出力
add_action("admin_print_styles-$hook_suffix", 'my_admin_css');
function my_admin_css() {
  echo '<style>
	出力したいCSS
  </style>' . PHP_EOL
}
 
// スクリプトを出力
add_action("admin_print_scripts-$hook_suffix", 'my_admin_script');
function my_admin_css() {
  echo '<script>
	出力したいスクリプト
  </script>' . PHP_EOL
}

例えば投稿編集ページの$hook_suffixpost.phpなので次のように書くと投稿編集ページでのみ読み込まれるようになります。

add_action( 'admin_head-post.php', 'my_admin_scripts' );

ちなみに、これだと同じ投稿編集ページでも新規追加したときのページでは読み込まれません。同じ画面に見えますが、新規追加の$hook_suffixpost-new.phpなのです。そのため新規・既存の両方の編集画面で読み込ませたい場合、次のようにadd_action()を2つ書く必要があります。

add_action( 'admin_head-post.php', 'my_admin_post_scripts' );
add_action( 'admin_head-post-new.php', 'my_admin_post_scripts' );

さらに投稿も固定ページも(ついでにカスタム投稿タイプやメディアの編集画面も)$hook_suffixは全て同じになるため、分けたい場合はフックする関数の中でポストタイプ毎に分岐させる処理が必要になります。

この方法はadd_action()を並べて書くので分かりやすいですが複雑な条件分岐をさせたい場合は次に説明するadmin_enqueue_scriptsを使い関数内で分岐させる方法を使いましょう。Codexを見てもそちらの方が推奨のようです。

admin_enqueue_scripts | Hook | WordPress Developer Resources

関数内で$hook_suffixをつかって分岐させる

admin_enqueue_scriptsフックを使うと引数に$hook_suffixが渡されるので、それを利用して出し分けることができます。この場合add_action()は1つ書くだけで済みます。

先ほど書いた新規と既存の投稿編集画面に読み込ませたい場合は次のようなコードになります。投稿タイプごとに分けるなど複雑な条件分岐をさせたい場合、こちらの書き方が便利です。基本的にはこちらを使いましょう。

function my_admin_enqueue( $hook_suffix ) {
  if ( 'post.php' === $hook_suffix || 'post-new.php' === $hook_suffix ) { 
	    // 投稿の編集と新規投稿画面でのみ読み込むスクリプト
	    wp_enqueue_script(
		    'admin-custom',
		    get_template_directory_uri() . '/js/ admin-custom.js',
		    array('jquery'),
      );
	    // CSS
	    wp_enqueue_style(
		    'custom_css',
		    get_template_directory_uri() . '/inc/css/custom.css'
	    );
   }
}

add_action( 'admin_enqueue_scripts', 'my_admin_enqueue' );

$hook_suffixの調べ方

URLから調べる

一番簡単な調べ方はURLを見ることです。WordPress標準のページでは$hook_suffixの値はページのURLのwp-adimin/?=・・・の間の文字列になります。例えば投稿編集画面では下図のようになります。

この場合、$hook_suffixpost.phpなので例えば次のように書くと投稿編集ページでのみ読み込まれるようになります。

add_action( 'admin_head-post.php', 'my_admin_scripts' );

ただ、これはWordPress標準のページではよいですが、プラグインや自分で追加したページの場合には使えません。例えばrevision-controlというプラグインの管理画面のURLは次のようになりますが、options-general.phpではありません。

$hook_suffixを表示させて調べる

自分やプラグインが追加したページの$hook_suffixを確実に調べたい場合は下記のコードをfunctions.phpに追加して管理画面に表示させて調べましょう。

function current_pagehook(){
	global $hook_suffix;
	if( !current_user_can( 'manage_options') ) return;
	echo '<div class="updated"><p>hook_suffix : ' . $hook_suffix . '</p></div>';
}
add_action('admin_notices', 'current_pagehook');

このコードは次のサイトから引用させていただきました。
特定のWordPress管理画面でのみ独自のCSSやJavaScriptを読み込む方法 | WordPress テーマ DigiPress

このコードで調べると、先ほどのrevision-controlプラグインの管理画面の$hook_suffixsettings_page_revision-controlとなります。

WordPress標準の$hook_suffix一覧

WordPress標準の管理画面における各ページの$hook_suffixは次のようになります。

ページ $hook_suffix
ダッシュボード index.php
更新 update-core.php
投稿・固定ページ・カスタム投稿タイプ 一覧 edit.php
新規追加 post-new.php
編集 post.php
カテゴリー・タグ・カスタムタクソノミー 一覧 edit-tags.php
編集 term.php
メディア ライブラリ upload.php
新規追加 media-new.php
編集 post.php
コメント 一覧 edit-comments.php
編集 comment.php
外観 テーマ themes.php
カスタマイズ customize.php
ウィジェット widgets.php
メニュー nav-menus.php
テーマエディター theme-editor.php
プラグイン インストール済みプラグイン plugins.php
新規追加 plugin-install.php
プラグインエディター plugin-editor.php
ユーザー ユーザー一覧 users.php
新規追加 user-new.php
プロフィール profile.php
ツール 利用可能なツール tools.php
インポート import.php
エクスポート export.php
サイトヘルス site-health.php
個人データのエクスポート export-personal-data.php
個人データの消去 erase-personal-data.php
設定 一般 options-general.php
投稿設定 options-writing.php
表示設定 options-reading.php
ディスカッション options-discussion.php
メディア options-media.php
パーマリンク設定 options-permalink.php
プライバシー options-privacy.php

プラグインなどで追加したページの$hook_suffix

標準以外のページの$hook_suffixは次のようなルールで設定されます。

ページの場所 $hook_suffixのルール
サイドバーのトップレベル toplevel_page_{メニュースラッグ}
サブメニュー {トップレベルのメニュー名をsanitize_title()した値}_page_{メニュースラッグ}

サブメニューの場合が少しわかりにくいですね。
例えばプラグインでは独自の設定画面を「設定」メニューのサブメニューへ追加することが多いですが、その場合の$hook_suffixsettings_page_{メニュースラッグ}となります。

自作テーマなどで「外観」メニューに設定画面を追加した場合は、appearance_page_{メニュースラッグ}です。

メニュー名のサニタイズしたタイトルというのは推測しにくいので、自分で追加したページについては先ほどのコードで$hook_suffixを調べるの良さそうです。

カスタマイザーで読み込ませたい場合

カスタマイザーのページでは、customize_controls_enqueue_scriptsという専用のフックが用意されています。$hook_suffixを使ってもできるとは思いますが通常は専用フックを使った方が良いと思います。

ちなみにファイルの読み込みではなく直接スクリプトやCSSを出力させたい場合は次のフックを使います。

customize_controls_print_scripts
customize_controls_print_styles

//カスタマイザーページでファイルを読み込む
add_action( 'customize_controls_enqueue_scripts', 'my_customize_enqueue' );
//カスタマイザーページ内にスクリプトを出力
add_action( 'customize_controls_print_scripts', 'my_customize_script_enqueue' );
//カスタマイザーページ内にスタイルを出力
add_action( 'customize_controls_print_styles', 'my_customize_style_enqueue' );

ちなみにカスタマイザーのライブプレビューに関連するスクリプトはcustomize_preview_initフックを使うことが推奨されています。

Plugin API/Action Reference/customize preview init « WordPress Codex


これで管理画面に独自のスクリプトやスタイルを読み込ませるには迷わないと思います。便利な管理画面をどんどん作っていきましょう。

関連記事

  1. no-image
    IE・Edgeをobject-fitに対応させる(WordPress編)
    WordPressカスタマイズ
  2. no-image
    WordPressでjQuery Migrate を読み込まないようにする方法
    WordPressカスタマイズ
  3. no-image
    WordPressでPHPの値をJavaScriptに渡す方法
    WordPressカスタマイズ
  4. no-image
    WordPressでログインユーザーが管理人かどうか調べる方法
    WordPressカスタマイズ
  5. no-image
    WordPressでパスワード保護されている記事の本文以外も非表示にする方法
    WordPressカスタマイズ
  6. no-image
    WordPressで特定の画像だけscrset属性を無効にする
    WordPressカスタマイズ
  7. no-image
    WordPressのbodyにクラスを追加するbody_class()の使い方
    WordPressカスタマイズ
  8. アラサー表記にも対応!WordPressで年齢を自動更新するショートコード
    WordPressカスタマイズ

コメント

この記事へのコメントはありません。

コメントする

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)