WordPress

WordPressでJavaScriptやCSSをインクルードする正しい方法

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
WordPress

WordPressのテーマやプラグインをカスタマイズしてJavaScriptやCSS(スタイルシート)をインクルードする「正しい」方法をご紹介します。

例えば、jQueryやBootstrapなど自分のテーマやプラグインで使いたいことってあると思います。
そのとき、まず思いつくのがファイルを直接いじる方法です。
header.phpやfooter.phpの中に
<script src=”hoge.js” type=”text/javascript”>

<link rel=’stylesheet’ href=’hoge.css’ />
と追加すればいいじゃない、と。

確かにこれでも一応は動きます。でも本当はダメなんです。Bad Practiceです。

WordPressには様々なテーマやプラグインが存在しています。ユーザーが自由にそれらを選択することで、デザインを切り替えたり、機能を追加したり、柔軟性があるフレームワークを実現しています。

でも開発者からすると、いろいろな組み合わせで使われる可能性があるということでもあるんですね。
各々のテーマやプラグインが好き勝手にインクルードしまくったら、コンフリクト(衝突)を起こし正常に動作しなくなる可能性があります。

例えば、あなたのプラグインがjQueryをインクルードして、別のプラグインが(jQueryとコンフリクトを起こす)prototype.jsなどをインクルードしていたら。
他のテーマやプラグインがどんなものをインクルードするのか分からない以上、好き勝手にインクルードするのはリスクが生じるわけです。

こういうコンフリクトを避けるために、WordPressではお作法が存在します。
みんながハッピーになるためには、みんながお行儀良くお作法に従わないといけません。実社会と同じですね。

今回は、WordPress Codexで推奨されているJavaScriptやCSS(スタイルシート)をインクルードするお作法をご紹介します。

WordPressでインクルードする手順

WordPressでは、インクルードするJavaScriptやCSS(スタイルシート)はWordPress側で一元管理しています。
インクルードさせたいスクリプトを以下の手順でWordPressに教えてあげる必要があります。

  1. インクルードしたいファイルの情報を登録する
  2. インクルード待ちリスト(キュー)に追加する

JavaScriptをインクルードしてみよう

百聞は一見にしかず。まずはソースをご紹介します。

↓ テーマもしくはプラグインの中に追記して、インクルードしたいファイル名をWordPressに登録します。

function custom_script_loader()
{
    // (プラグインの場合)pluginフォルダからJavaScriptを読み込みます
    wp_register_script( 'custom-script', plugins_url( '/js/custom-script.js', __FILE__ ) );
    // もしくは
    // (テーマの場合)pluginフォルダからJavaScriptを読み込みます
    wp_register_script( 'custom-script', get_template_directory_uri() . '/js/custom-script.js' );

    // 登録したJavaScriptをインクルード待ちリスト(キュー)に追加する
    wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'wptuts_scripts_basic' );

wp_register_scriptという関数が出てきました。これはJavaScript情報を登録する関数です。
WordPressにJavaScriptの存在を教えてあげることができます。

wp_register_script( $handle, $src, $deps, $ver, $in_footer );
$handle
スクリプトのハンドル名(自分で自由に付けられます)
$src
スクリプトのソースパス
$deps
依存するスクリプトのハンドル名が格納された配列
$ver
スクリプトのバージョン。ブラウザキャッシュの制御のために使います。デフォルトではWordPressのバージョンになります。
$in_footet
フッター内でロードするか?デフォルトではfalseでヘッダー内でロードします。

プラグインからインクルードする場合と、テーマからインクルードする場合で、スクリプトのURLパスを取得する方法が若干異なっています。

プラグインフォルダにある’/js/custom-script.js’のURLを取得しています。

plugins_url( '/js/custom-script.js', __FILE__ )

テンプレートフォルダの中にある’/js/custom-script.js’のURLをを取得しています。

get_template_directory_uri() . '/js/custom-script.js'

いずれの場合も、取得したスクリプトパスを’custom-script’というハンドル名でWordPressに登録しています。

次に、登録した’custom-script’というスクリプトをインクルードしてもらうために、待ちリスト(キュー)に追加します。

wp_enqueue_script( 'custom-script' );

これであとはWordPressが自動的にスクリプトを読み込んでくれます。
↓のように、HTMLのヘッダーからJavaScriptがインクルードされるようになりました。

<script type="text/javascript" src="http://hogehoge.com/wp-content/plugins/hogeplugin/js/custom-script.js?ver=3.3.1"></script>

CSS(スタイルシート)をインクルードしてみよう

CSSの場合もほとんど同じです。関数名が少し違うだけ。

function custom_style_loader()
{
    // (プラグインの場合)pluginフォルダからCSSを読み込みます
    wp_register_style( 'custom-style', plugins_url( '/css/custom-style.css', __FILE__ ), array(), '20141208', 'all' );
    // もしくは
    // (テーマの場合)pluginフォルダからCSSを読み込みます
    wp_register_style( 'custom-style', get_template_directory_uri() . '/css/custom-style.css', array(), '20141208', 'all' );

    // 登録したCSSをインクルード待ちリスト(キュー)に追加する
    wp_enqueue_style( 'custom-style' );
}
add_action( 'wp_enqueue_scripts', 'custom_style_loader' );

wp_register_styleという関数はCSS(スタイルシート)情報を登録する関数です。

wp_register_style( $handle, $src, $deps, $ver, $media );

使い方はwp_register_scriptとほとんど同じですが、最後の$media引数だけが違っています。

$media
メディアのタイプを指定します。’all’、’screen’、’handheld’、’print’、またはW3Cで認められているその他のタイプがサポートされています。

↓のように、HTMLのヘッダーからCSSがインクルードされるようになりました。

<link rel='stylesheet' id='custom-style-css'  href='http://hogehoge.com/wp-content/plugins/hogeplugin/css/custom-style.css?ver=20141208' type='text/css' media='all' />

まとめ

header.phpやfoote.phpに直接<script></script>タグや<link />タグを埋め込むやり方は、記述が分散するだけでなく、他のプラグインや子テーマと組み合わせた場合、思わぬ問題が発生しかねません。

WordPressのAPIを使うことで、他のプラグインやテーマとコンフリクトすることなく、安全にJavaScriptやCSSのインクルードできるようになります。ヘッダーで読み込むか、フッターで読み込むかについてもAPIなら簡単に変更できます。また他のファイルとの依存性やバージョンの情報などを登録することで、常に適切にインクルードされることが保障されます。

functions.phpなどにまとめて記述するだけで、安全で便利にインクルードしてくれるわけですから、気軽にどんどん使っていきたいですね。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメントを残す

*