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

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

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

少し前ですが、NxWorldをプチリニューアルしました。
リニューアルといっても見た目はほとんど変えず、プラグインやソースを見直すのが主な目的だったのですが、今回紹介する方法もその際のメモでもあります。

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

  1. JavaScriptを管理する
  2. CSSを管理する
  3. バージョン表記を消す

1. 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がない場合は作成してください。

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

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

目次へ

2. CSSを管理する

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

functions.php

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_scriptwp_register_style
  • wp_enqueue_scriptwp_enqueue_style
  • add_action( 'wp_print_scripts', 'add_script' );add_action( 'wp_print_styles', 'add_stylesheet' );

目次へ

3. バージョン表記を消す

上で紹介した方法で読み込まれるようにはなるのですが、この方法を使うと各ファイルのバージョン表記が追加されます。
例えば、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()だけを追記すれば大丈夫です。

目次へ

Close the search window,
please press close button or esc key.