WordPressでcssやjsのファイルを読み込ませるときは<head>
内に直接書かず、functions.php
内でwp_enqueue_stype
やwp_enqueue_script
を使って
読み込ませるのが定石です。
しかし、それでは基本的に全ページに読み込まれてしまうので
特定ページだけ読み込ませるときは制限してあげる必要があります。
私が利用している方法として2種類あるのでご紹介します。
$pagenowをglobalとして読み込んで利用する
グローバル変数の一つである$pagenow
を使用してwp-admin
以下の〇〇.php
部分で条件分岐します
$pagenow
の主な値はこちらに一覧が載っています
サンプルコードはこんな感じです。
<?php
add_action( 'admin_enqueue_scripts', 'my_admin_scripts' );
function my_admin_scripts( ){
// グローバル変数を参照できるようにする
global $pagenow;
// 投稿編集もしくは新規投稿ページのとき
if($pagenow === 'post.php' || $pagenow === 'post-new.php' ) {
wp_enqueue_script( 'admin', get_template_directory_uri() . '/js/admin.min.js', "", false, true );
wp_enqueue_style( 'style', get_template_directory_uri() . '/css/admin.min.css' );
}
// ログインページのとき
if($pagenow === 'wp-login.php' ) {
// 省略
}
// admin.php(プラグインなど)でパラメータがabcの時
if($pagenow === 'admin.php' && strpos($_GET['page'],'abc') !== false) {
// 省略
}
あらゆるページに対して独自のcss,jsを反映することができます
他の人が作ったプラグインに対しても独自のカスタマイズを入れたい時には便利です。(もちろん自己責任ですが)
$hook_suffixを引数にして利用する
$pagenow
と似ていて $hook_suffix
が取得する値も概ね同じなのですが、admin.php
系のプラグインや自作でトップレベルにメニューを追加したりする場合は$pagenow
と異なってくるので注意が必要です。
<?php
add_action( 'admin_enqueue_scripts', 'my_admin_scripts' );
function my_admin_scripts($hook_suffix ){
// 投稿編集もしくは新規投稿ページのとき
if('post.php' === $hook_suffix || 'post-new.php' === $hook_suffix ) {
wp_enqueue_script( 'admin', get_template_directory_uri() . '/js/admin.min.js', "", false, true );
wp_enqueue_style( 'style', get_template_directory_uri() . '/css/admin.min.css' );
}
// ログインページのとき
if('wp-login.php' === $hook_suffix ) {
// 省略
}
// abcプラグインのトップページの時
if('toplevel_page_abc' === $hook_suffix ) {
// 省略
}
// abcプラグインのサブページの時
if('abc_page_sub' === $hook_suffix ) {
// 省略
}
}
$hook_suffix
の値は
プラグインのトップページの場合ではtoplevel_page_ + add_menu_pageの$menu_slug(第4引数)
のようになっているようです。
なので、独自プラグインならpage以下は自由に決めることが出来ます。
また、プラグインのサブページの場合ではadd_menu_pageの$menu_title(第2引数) + _page + add_submenu_pageの$menu_slug (第5引数)
となっています。
…と一応書きましたが、テキストで書かれてもわかりにくいし
他の人が作ったプラグインだと調べるのも面倒なのでvar_dump($hook_suffix)
など
でページ毎に確認するのがてっとり早いと思います。
<?php
add_action( 'admin_enqueue_scripts', 'my_admin_scripts' );
function my_admin_scripts($hook_suffix ){
var_dump($hook_suffix);
// <body>直下あたりに出てくるのでディベロッパーツールなどで確認する
// 例:string(26) "toplevel_page_ai1wm_export"
// 省略
}
まとめ
自作でメニューを追加したり独自プラグインの場合は、そこにだけ適用させたいcssやjsがあるので使えるようになっておくと便利です。
ただ$hook_suffix
がサブページのときに、add_menu_page
の第2引数を利用しているようなのですが、ここはメニューのタイトルにあたるので日本語入れている人も多いかと思います。その場合は文字化けしてしまいます。
何か方法はあるとは思いますが、$pagenow
使えば悩まずできるので今の所は$pagenow
の方が頻度は高めです。
いや$hook_suffix
でやったほうがいいよー、こうやれば文字化けは解決できるから$hook_suffix
一択にしろー、とかあればご教授いただけると大変助かります。