WordPress Plugin の管理ページで指定の JavaScript と CSSを読み込む
WP Social Bookmarking Light の管理ページをつくってるときにハマった点メモ。
メモ
JavaScript と CSS の読み込みには、wp_enqueue_script と wp_enqueue_style APIを使用する。
管理ページ上で上記 API を反映させる為に、add_action の admin_print_styles と admin_print_scripts を使用する。
ただし、単純に
add_action('admin_print_styles', 'myplugin_admin_print_styles');
add_action('admin_print_scripts', 'myplugin_admin_print_scripts');
とすると、他のプラグインの管理ページにも同様に指定の JavaScript と CSS が反映されてしまい、競合等の迷惑をかける可能性がある。
この問題は、例えばこのように
$page = add_options_page('myplugin', 'myplugin', 'manage_options', __FILE__, 'myplugin_admin_page');
add_action('admin_print_styles-'.$page, 'myplugin_admin_print_styles');
add_action('admin_print_scripts-'.$page, 'myplugin_admin_print_scripts');
add_options_page 等の戻り値を admin_print_styles や admin_print_scripts のお尻に加えてあげると回避できる。
全体像
WP Social Bookmarking Light からソースコード抜粋。
function wp_social_bookmarking_light_admin_print_scripts()
{
wp_enqueue_script('jquery');
wp_enqueue_script('jquery-ui-core');
wp_enqueue_script('jquery-ui-tabs');
}
function wp_social_bookmarking_light_admin_print_styles()
{
wp_enqueue_style('jquery-ui-tabs', WP_SOCIAL_BOOKMARKING_LIGHT_URL."/libs/jquery/css/pepper-grinder/jquery-ui-1.8.6.custom.css");
}
if( function_exists('add_options_page') ){
$page = add_options_page( 'WP Social Bookmarking Light',
'WP Social Bookmarking Light',
'manage_options',
__FILE__,
'wp_social_bookmarking_light_options_page' );
add_action('admin_print_styles-'.$page, 'wp_social_bookmarking_light_admin_print_styles');
add_action('admin_print_scripts-'.$page, 'wp_social_bookmarking_light_admin_print_scripts');
}