WordPress：functions.phpでJSやCSSを一元管理する方法とバージョン表記を消す方法

CSSやJavaScriptなどの外部ファイルを読み込む際、全ページ共通で且つよく見かける方法だとheader.phpのhead内に記述するということが多いと思いますが、例えば投稿ページでは使うけど固定ページでは必要ないので読み込ませたくない場合があります。
head内で条件分岐させる方法もありますが、それをfunctions.phpを使って一元管理する方法です。
また、その際に追記されてしまうバージョン表記を消す方法も合わせて紹介します。

JavaScriptを管理する

例としてIDがそれぞれ1～3まで設定されている固定ページに、以下の4つのjsを適応させるという想定で説明していきます。

jquery-1.7.2.min.js（全ページに適応）
common.js（全ページに適応）
slide.js（固定ページ1のみに適応）
lightbox.js（固定ページ2と3に適応）

上記のような振り分けを行いたい場合、wp_print_scripts()というアクションフックを用いて、functions.phpに下記のように記述します。

functions.php

if ( !is_admin() ) {
  function register_script() {
    wp_register_script( 'jquery', get_bloginfo( 'template_directory' ).'/js/jquery-1.7.2.min.js' );
    wp_register_script( 'common', get_bloginfo( 'template_directory' ).'/js/common.js' );
    wp_register_script( 'slide', get_bloginfo( 'template_directory' ).'/js/slide.js' );
    wp_register_script( 'lightbox', get_bloginfo( 'template_directory' ).'/js/lightbox.js' );
  }
  function add_script() {
    register_script();
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'common' );
    if ( is_page( array( 1 ) ) ) {
      wp_enqueue_script('slide');
    } elseif ( is_page( array( 2,3 ) ) ) {
      wp_enqueue_script( 'lightbox' );
    }
  }
  add_action( 'wp_print_scripts', 'add_script' );
}

まずif ( !is_admin() )で管理画面には適応させないという条件分岐をします。

次にwp_register_script()で使用する各JSを登録します。
登録の際はファイル名と同じにするとわかりやすいと思いますが、3行目のjqueryのように違うものにしてももちろん問題はありません。

各JS登録後、次にwpenqueuescript()で、どのページにどのJSを読み込むかを指定します。
今回の例ではjqueryとcommonを全ページ共通で読み込みたいので、まず上記ソースの10～11行目のように指定します。
各ページ専用として使いたいslideとlightboxに関しては、12行目～17行目のようにis_page( array() )でページIDを指定します。
ページIDの指定は、if ( is_page( array( 'hoge' ) ) )のようなスラッグでの指定もできますし、IDではなくトップページのみに適応させたいときにif ( is_home() )、固定ページのみに適応させたいときにif ( is_page() )といったような指定もできます。

最後にwp_print_scripts()で出力します。
wp_print_scriptsで出力したものはhead内に記述されますが、もしこれをフッター部分に出力したいという場合は、ここの記述をwp_print_footer_scripts()に変更することでフッターに出力するように変更できます。

CSSを管理する

CSSもJSと同じ要領でfunctions.phpを使って管理することができます。
例えば「トップページ」「ブログ」「お問い合わせ」の3ページに、共通のCSSと各ページ専用のCSSをそれぞれ読み込ませたい場合、functions.phpには下記のように記述をします。

functions.php

if ( !is_admin() ) {
  function register_style() {
    wp_register_style( 'style', get_bloginfo( 'template_directory' ) . '/css/style.css' );
    wp_register_style( 'home', get_bloginfo( 'template_directory' ) . '/css/home.css' );
    wp_register_style( 'blog', get_bloginfo( 'template_directory' ) . '/css/blog.css' );
    wp_register_style( 'contact', get_bloginfo( 'template_directory' ) . '/css/contact.css' );
  }
  function add_stylesheet() {
    // 共通
    register_style();
    wp_enqueue_style( 'style' );
    // トップページ (ID=home)
    if ( is_page( array( 'home' ) ) ) {
      wp_enqueue_style( 'home' );
    }
    // ブログ (ID=blog)
    elseif ( is_page( array( 'blog' ) ) ) {
      wp_enqueue_style( 'blog' );
    }
    // お問い合わせ (ID=contact)
    elseif ( is_page( array( 'contact' ) ) ) {
      wp_enqueue_style( 'contact' );
    }
  }
add_action( 'wp_print_styles', 'add_stylesheet' );
}

上記コードを見てわかるように基本的にはJSとほぼ同じように記述されていて、下記3箇所の記述がCSS用に変更されています。

wp_register_script → wp_register_style
wp_enqueue_script → wp_enqueue_style
add_action( 'wp_print_scripts', 'add_script' ) → add_action( 'wp_print_styles', 'add_stylesheet' )

バージョン表記を消す

上で紹介した方法で読み込まれるようにはなるのですが、この方法を使うと各ファイルのバージョン表記が追加されます。
例えば、JSの説明の際に例として出したものをソース確認すると、head内に下記のように出力されています。

<script type='text/javascript' src='http://example.com/wp-content/themes/themename/js/jquery-1.7.2.min.js?ver=3.3.2'></script>
<script type='text/javascript' src='http://example.com/wp-content/themes/themename/js/common.js?ver=3.3.2'></script>

このバージョン表記は、どうやらGoogle codeなどの外部から読み込んでいるものはそのファイルのバージョンが表記され、上記のように自作して読み込んだ場合には使用中のWordPressのバージョンが表記されるようです。
これはJSだけではなく、CSSも同じように最後にバージョン表記が追記されます。

これがあることによって特に問題があるわけではないとは思うのですが、例えばremove_action( 'wp_head', 'wp_generator' );などで意図的にWordPressのバージョンを隠していても、この部分でバージョンがわかってしまいますし、僕の場合は単にこの表記を消したいと思いました。
少し調べたらバージョン表記消去のプラグインもあるみたいなんですが、わざわざプラグインを使うほどでもないと思ったので、今回はfunctions.phpに下記を記述してバージョン表記を消しました。
僕と同じように消したいと思っている方は、こちらも合わせて記述してください。

functions.php

function remove_cssjs_ver( $src ) {
  if ( strpos( $src, '?ver=' ) {
    $src = remove_query_arg( 'ver', $src );
  }
  return $src;
}
add_filter( 'script_loader_src', 'remove_cssjs_ver', 10, 2 );
add_filter( 'style_loader_src', 'remove_cssjs_ver', 10, 2 );

上記を記述してソースを確認すると、先程記述されていたバージョン表記が消えたことが確認できると思います。アクションフックをJSでしか使っていない場合はscript_loader_src()だけ追記して、逆にCSSしか使っていない場合はstyle_loader_src()だけを追記すれば大丈夫です。

WordPress › Support » Get rid of ?ver on the end of CSS/JS files?