読者です 読者をやめる 読者になる 読者になる

WordPress Plugin の管理ページで指定の JavaScript と CSSを読み込む

plugin WordPress

WP Social Bookmarking Light の管理ページをつくってるときにハマった点メモ。

メモ

JavaScript と CSS の読み込みには、wp_enqueue_scriptwp_enqueue_style APIを使用する。

管理ページ上で上記 API を反映させる為に、add_actionadmin_print_stylesadmin_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_stylesadmin_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');  
}