DigiPress

Highly Flexible WordPress Theme

メニュー

特定のWordPress管理画面でのみ独自のCSSやスクリプトを読み込む方法

特定のWordPress管理画面でのみ独自のCSSやスクリプトを読み込む方法

自作でWordPressのテーマやプラグインをつくる場合、管理画面だけに自前のCSSやJavascriptを読み込ませたいときがあります。
そんなときはWordPressのアクションフックを使って色々と方法がありますが、ここでは1回のアクション関数でCSSもスクリプトも読み込んで、さらに対象の管理画面も指定する方法をご紹介します。

テーマ制作時やカスタマイズするときのTipsにどうぞ。

WordPressの管理画面に独自のCSSやJavascriptを読み込む

まずは基本。以下のようなコードをテーマの場合は ”function.php” に追記して管理画面に自前のCSSやスクリプトを組み込むことができます。

// フックする関数
function custom_enqueue($hook_suffix) {
	// 読み込むスクリプトファイル(※依存関係:jquery)
	wp_enqueue_script('custom_js', get_template_directory_uri() . '/inc/js/custom.js', array('jquery'));
	// 読み込むCSSファイル
	wp_enqueue_style('custom_css', get_template_directory_uri() . '/inc/css/custom.css');
}
// "custom_enqueue" 関数を管理画面のキューアクションにフック
add_action( 'admin_enqueue_scripts', 'custom_enqueue' );

投稿ページのみに独自のCSSやJavascriptを読み込む

WordPressの管理画面すべてではなく、例えば 投稿ページ(新規、編集)でのみ自前のスタイルやスクリプトをロードさせるには、WordPressによって割り当てられている現在のページのユニークな接尾辞(hook_suffix)が “post-new.php” か “post.php” であるかをチェックすればOKです。

// フックする関数
function custom_enqueue($hook_suffix) {
	// 新規投稿または編集画面のみ
	if( 'post.php' === $hook_suffix || 'post-new.php' === $hook_suffix ) {
		// 読み込むスクリプトファイル(※依存関係:jquery)
		wp_enqueue_script('custom_js', get_template_directory_uri() . '/inc/js/custom.js', array('jquery'));
		// 読み込むCSSファイル
		wp_enqueue_style('custom_css', get_template_directory_uri() . '/inc/css/custom.css');
	}
}
// "custom_enqueue" 関数を管理画面のキューアクションにフック
add_action( 'admin_enqueue_scripts', 'custom_enqueue' );

“admin_enqueue_scripts” アクションでは 引数(hook_suffix)に現在のページの接尾辞が渡されれるので、この値で管理画面のどのページかを判定することで読み込むスクリプトやスタイルシートを特定のページに限定することができます。

WordPressで安全に任意のスクリプトを読み込むには、”wp_enqueue_script” 関数、CSSを読み込むには “wp_enqueue_style” 関数を使います。

現在の hook_suffix を調べる方法

目的の管理画面の “hook_suffix” がわからない場合は、以下を “function.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');

このコードを使って、例えばカテゴリーの表示順序を変えられる「My Category Order」プラグインの管理画面の hook_suffix は “posts_page_mycategoryorder” であることがわかります。
capture 2014-11-21 13.17.28


DigiPressテーマにも専用の管理画面がありますが、同じように hook_suffix を利用してDigiPress管理画面だけに自前のCSSとスクリプトをキューに追加しています。

Share / Subscribe
Facebook Likes
Tweets
Hatena Bookmarks
Pinterest
Pocket
Feedly