WP管理画面の投稿ページやプラグインで追加されたページにjQuery、CSSを適用させたい
WordPressのテーマと言えば、フロント側のデザインのカスタマイズをするものという印象があるかもしれませんが、テーマファイルの中にあるfunctions.phpは管理画面の全てのページで読み込まれています。
そのため、テーマをインストールして有効化するだけで管理画面のウィジェットを追加したり、投稿画面のカスタムフィールドを追加するといったカスタマイズもできるのです。
今回は管理画面の特定のページにのみ独自jQueryやCSSを埋め込む方法をご紹介します。
WordPress管理画面全体で独自のjQuery、CSSを使う
ページ指定なしで管理画面全体に適用させたい場合は、以下のアクションフックで関数を登録できます。
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_scripts や admin_print_styles の後ろに
ハイフン＋適用させたいページ名 を付け加えるだけです。このページ名は hook_suffix と呼ばれるものです。
hook_suffix を調べたいときは、大抵はそのページのURLを見るだけでOK。
ただ、プラグインページなど例外もあるので、念のため確認してみましょう。
admin_print_styles-{ スタイルを適用させたいhook_suffix }.php
管理画面のプラグインで追加された特定のページで独自のjQuery、CSSを使う
標準で存在するページだけでなく、プラグインで追加されたページにもしっかりフックが存在します。
もしページ名が admin.php?page=xxx など、プラグインで追加されたページの場合は「toplevel_page」を付けます。上記の例では admin_print_scripts-toplevel_page_xxx になります。
うっかり admin.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ファイルを呼び出したい等、色々あるかと思います。
それらはまた後日ご紹介できればと思います。
