WP管理画面の投稿ページやプラグインで追加されたページにjQuery、CSSを適用させたい

php WordPressのカスタマイズ

WordPressのテーマと言えば、フロント側のデザインのカスタマイズをするものという印象があるかもしれませんが、テーマファイルの中にあるfunctions.phpは管理画面の全てのページで読み込まれています。
そのため、テーマをインストールして有効化するだけで管理画面のウィジェットを追加したり、投稿画面のカスタムフィールドを追加するといったカスタマイズもできるのです。

今回は管理画面の特定のページにのみ独自jQueryやCSSを埋め込む方法をご紹介します。

WordPress管理画面全体で独自のjQuery、CSSを使う

ページ指定なしで管理画面全体に適用させたい場合は、以下のアクションフックで関数を登録できます。

admin_print_styles ・・・ 管理画面にスタイルを埋め込む
admin_print_scripts ・・・ 管理画面にスクリプトを埋め込む

管理画面全ページにスタイルを適用する

function custom_admin_style() 
{
echo <<<EOM
	<style type="text/css">
	#adminmenuwrap {
		background: #184c5c !important;
	}
	</script>
EOM;
}
add_action('admin_print_styles', 'custom_admin_style');

管理画面全ページにjQuery、javascriptを適用する

function custom_admin_script() 
{
echo <<<EOM
<script type='text/javascript'>
jQuery(document).ready(function($){
    $('.wp-menu-name').on('click', function({
        alert('click!');
    });
</script>
EOM;
}
add_action('admin_print_scripts', 'custom_admin_script');

全体に適用する場合はこれだけでOKです。特定の画面でのみ埋め込みたい場合はこちら↓

管理画面の投稿、設定画面など、特定のページで独自のjQuery、CSSを使う

上でご紹介したアクションフックを少しカスタマイズします。
例えば投稿画面ならこんな感じ。

jQuery

add_action("admin_print_scripts-post.php", 'custom_admin_script'); // 投稿編集
add_action("admin_print_scripts-post-new.php", 'custom_admin_script'); // 新規投稿

CSS

add_action("admin_print_styles-post.php", 'custom_admin_style'); // 投稿編集
add_action("admin_print_styles-post-new.php", 'custom_admin_style'); // 新規投稿

admin_print_scriptsadmin_print_styles の後ろに
ハイフン+適用させたいページ名 を付け加えるだけです。このページ名は hook_suffix と呼ばれるものです。
hook_suffix を調べたいときは、大抵はそのページのURLを見るだけでOK。
ただ、プラグインページなど例外もあるので、念のため確認してみましょう。

admin_print_scripts-{ jsを適用させたいhook_suffix }.php
admin_print_styles-{ スタイルを適用させたいhook_suffix }.php

管理画面のプラグインで追加された特定のページで独自のjQuery、CSSを使う

標準で存在するページだけでなく、プラグインで追加されたページにもしっかりフックが存在します。
もしページ名が admin.php?page=xxx など、プラグインで追加されたページの場合は「toplevel_page」を付けます。上記の例では admin_print_scripts-toplevel_page_xxx になります。
うっかり admin.php で登録しないように気をつけましょう。

admin_print_scripts-toplevel_page_{ jsを適用させたいpage引数 }.php
admin_print_styles-toplevel_page_{ スタイルを適用させたいpage引数 }.php

jQuery

add_action("admin_print_scripts-toplevel_page_pluginpage", 'custom_admin_script'); // admin.php?page=pluginpage

CSS

add_action("admin_print_styles-toplevel_page_pluginpage", 'custom_admin_style'); // admin.php?page=pluginpage

このページのhook_suffixは?hook_suffixを調べる方法

肝心のページ名もといhook_suffixが分からないとフックの指定ができません。
そんなときはグローバル変数から引っ張ってきて確認しましょう。
管理画面にのみ表示するようにして、下記のコードを functions.php にぺたりです。
hook_suffix を知りたいページにアクセスすれば、画面上部に出ています。

if ( current_user_can( 'manage_options') )
{
	global $hook_suffix;
	echo '<p>このページのhook_suffixは '. $hook_suffix. '</p>';
}

これこそフック使えばいいのかもしれませんが、ただ確認したいだけなのでフックに渡さず直書きです。
確認が終わったら消しておきましょう。

終わりに

jQueryやCSSはheadタグの中で呼び出したいもの、bodyタグを閉じる直前に呼び出したいもの、
直書きのコードではなくJQuery、CSSファイルを呼び出したい等、色々あるかと思います。
それらはまた後日ご紹介できればと思います。

php WordPressのカスタマイズ

関連記事