WordPressでプラグインから出力されるjQueryライブラリやCSSを整理する

WordPressでプラグインから出力されるjQueryライブラリやJSやCSS、自分で指定したjQueryライブラリを
整理したい場合があります。wp_enqueue_script関数を使用する前に調整する方法を調べてみました。

１．WordPress内でエンキュされているJSとCSSのハンドル名をリストアップする。

■ functions.phpに下記を追加する。

/**
 * Make the list of enqueued resources
 **/
function my_get_dependency( $dependency ) {
    $dep = "";
    if ( is_a( $dependency, "_WP_Dependency" ) ) {
        $dep .= "$dependency->handle";
        $dep .= " [" . implode( " ", $dependency->deps ) . "]";
        $dep .= " '$dependency->src'";
        $dep .= " '$dependency->ver'";
        $dep .= " '$dependency->args'";
        $dep .= " (" . implode( " ", $dependency->extra ) . ")";
    }
    return "$dep\n";
}

function my_style_queues() {
    global $wp_styles;
    echo "<!-- WP_Dependencies for styles\n";
    foreach ( $wp_styles->queue as $val ) {
        echo my_get_dependency( $wp_styles->registered[ $val ] );
    }
    echo "-->\n";
}
add_action( 'wp_print_styles', 'my_style_queues', 9999 );

function my_script_queues() {
    global $wp_scripts;
    echo "<!-- WP_Dependencies for scripts\n";
    foreach ( $wp_scripts->queue as $val ) {
        echo my_get_dependency( $wp_scripts->registered[ $val ] );
    }
    echo "-->\n";
}
add_action( 'wp_print_scripts', 'my_script_queues', 9999 );

２．１.の指定でページにリストアップされたものを参照して、どのjQueryライブラリなどを使用するかを決定する。プラグインで使用している不用CSSのハンドル名ををリストアップする。

<!-- WP_Dependencies for styles
wp-pagenavi [] 'http://wordpress.local/wp-content/plugins/wp-pagenavi/pagenavi-css.css' '2.70' 'all' ()
wordpress-popular-posts [] 'http://wordpress.local/wp-content/plugins/wordpress-popular-posts/style/wpp.css' '3.0.3' 'all' ()
msl-main [] 'http://wordpress.local/wp-content/plugins/master-slider/public/assets/css/masterslider.main.css' '1.3.4' 'all' ()
msl-custom [msl-main] 'http://wordpress.local/wp-content/uploads/master-slider/custom.css' '2' 'all' ()
-->
<link rel='stylesheet' id='wp-pagenavi-css' href='http://wordpress.local/wp-content/plugins/wp-pagenavi/pagenavi-css.css?ver=2.70' type='text/css' media='all' />
<link rel='stylesheet' id='wordpress-popular-posts-css' href='http://wordpress.local/wp-content/plugins/wordpress-popular-posts/style/wpp.css?ver=3.0.3' type='text/css' media='all' />
<link rel='stylesheet' id='msl-main-css' href='http://wordpress.local/wp-content/plugins/master-slider/public/assets/css/masterslider.main.css?ver=1.3.4' type='text/css' media='all' />
<link rel='stylesheet' id='msl-custom-css' href='http://wordpress.local/wp-content/uploads/master-slider/custom.css?ver=2' type='text/css' media='all' />
<!-- WP_Dependencies for scripts
jquery [] 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' '1.7.1' '' ()
masterslider-core [jquery jquery-easing] 'http://wordpress.local/wp-content/plugins/master-slider/public/assets/js/masterslider.min.js' '1.3.4' '' (1)
-->
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script>var ms_grabbing_curosr = 'http://wordpress.local/wp-content/plugins/master-slider/public/assets/css/common/grabbing.cur', ms_grab_curosr = 'http://wordpress.local/wp-content/plugins/master-slider/public/assets/css/common/grab.cur';</script>
<!-- WP_Dependencies for scripts
jquery [] 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' '1.7.1' '' ()
masterslider-core [jquery jquery-easing] 'http://wordpress.local/wp-content/plugins/master-slider/public/assets/js/masterslider.min.js' '1.3.4' '' (1)
-->

３．ハンドル名を指定して不用JSとCSSを削除する。

■ functions.phpに下記を追加する。

/**
 * Dequeue resources
 **/
function my_dequeue_styles() {
    wp_dequeue_style( 'wp-pagenavi' ); //不用CSSを削除
    wp_dequeue_style( 'wordpress-popular-posts' );
    wp_dequeue_style( 'wp-social-bookmarking-light' );
    wp_dequeue_style( 'msl-main' );
    wp_dequeue_style( 'msl-custom' );
}
add_action( 'wp_print_styles', 'my_dequeue_styles' );

function my_dequeue_scripts() {
    wp_dequeue_script( 'masterslider-core' );  //不用JSを削除 (例)
}
add_action( 'wp_print_scripts', 'my_dequeue_scripts' );

４．jQueryライブラリは基本的にfunction.phpで関数で参照するようにする。

function load_cdn() {
  if ( !is_admin() ) {　//管理画面以外の場合
    wp_deregister_script('jquery');　//Wordpress内で参照しているjQueryは使用しない
    wp_enqueue_script('jquery', 'http://code.jquery.com/jquery-1.7.2.min.js', array(), '1.7.2'); //jQuery CDNを使用する
    wp_enqueue_script( 'mytheme-js', get_template_directory_uri().'/js/mytheme.js', array('jquery'), '1.0' );
  }
}
add_action('init', 'load_cdn');

５．再度、エンキューされたリストを見て調整する。

※ハンドル名がリストアップされない、プラグインもあります。
そういう場合は、プラグインのソースをJSのファイル名で検索してハンドル名を調べる方法もあります。
※自分で作成したjQueryで、プラグインから出力されるQueryライブラリを使用するためには、自分で作成したjQueryよりプラグインから出力されるjQueryライブラリを先に読み込ませる必要があります。
※wp_enqueue_script関数を使用するとWordPress側で依存関係に従った適切なタイミングでファイルを生成してくれます。

参考：） ■ハンドル名をリストアップする http://tokkono.cute.coocan.jp/blog/slow/index.php/wordpress/concatenate-resources/#define-groups ■WordPressでjQueryを使う2つの方法と注意点 http://xtw.me/XyRjWVI ■関数リファレンス/wp_enqueue_script http://xtw.me/XfHWA0D ■関数リファレンス/wp_enqueue_style https://codex.wordpress.org/Function_Reference/wp_dequeue_style ■関数リファレンス/wp_dequeue_script https://codex.wordpress.org/Function_Reference/wp_dequeue_script