WordPressでテーマからJavascriptやCSSを読み込む書き方まとめ
Posted by admin at 12:29 日時 2012/03/26
WordPressでテーマを作る場合、Javascriptや外部CSSを使うことも多いと思いますが、テーマのheader.phpに直接書くのではなく、functions.phpから一括で管理する方法です。
WordPressでは、キューに追加されたJavascriptやCSSを wp_head() や wp_footer() の位置で、自動的に適切な順番で出力してくれます。特にjQueryなどのライブラリやjQueryプラグインを使用する場合は、複数のjsファイルに依存関係が発生し、読み込む順番が決まってくる場合があります。こういう時でも、一括管理していればあとあとで変更が楽になります。こんな感じ。
/** * スクリプトとスタイルをキューに入れる */ function my_scripts() { // 管理画面では読み込まない if ( !is_admin() ) { // スタイルシートディレクトリーを取得する。この方法だと子テーマでもそのまま使える $dir = get_stylesheet_directory_uri(); // テーマのjsディレクトリーのmy-script.jsをキューに入れる。 // さらに、jQueryに依存するのでjQueryの後で入れるように指定した場合。 wp_enqueue_script( 'my-script', $dir.'/js/my-script.js', array('jquery')); // jQueryをGoogleがホストするものに差し替える wp_deregister_script( 'jquery' ); wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' ); // Google Maps APIを読み込む // 豆: 第3引数にNULLを入れると末尾に余計な ?ver=xxx が付かない wp_enqueue_script( 'google-maps-api', 'http://maps.google.com/maps/api/js?sensor=false', array(), NULL ); // テーマのjsディレクトリーのmy-map.jsをキューに入れる。 // jQueryとGoogle Maps APIの両方に依存するので、配列で両方を指定した場合。 wp_enqueue_script( 'my-map', $dir.'/js/my-map.js', array('jquery','google-maps-api')); // <head>タグ内ではなく</body>直前にスクリプトを出したい場合は、第4引数にtrue wp_enqueue_script( 'my-footer', $dir.'/js/my-footer.js', array(), false, true ); // 特定のページでスクリプトを出したい場合 if ( is_front_page() ) { wp_enqueue_script( 'my-top', $dir.'/js/my-top.js' ); } // 不要なスクリプトをキューから外す（親テーマやプラグインで要らないのがあったとき等） wp_dequeue_script( 'parent-script' ); // スタイルシートも基本同じように使えます。 wp_enqueue_style( 'my-css', $dir.'/css/my-css.css' ); // 不要なスタイルをキューから外す（親テーマやプラグインで要らないのがあったとき等） wp_dequeue_style( 'parent-style' ); } } add_action( 'wp_enqueue_scripts', 'my_scripts', 50 ); この機能の解説はググると色々あるのですが、コード・スニペットとして使いたかったのでまとめてみました。functions.phpから使う想定にしています。wp_enqueue_scriptsフックで親テーマがキューを追加している際は、add_actionの第3引数でプライオリティを下げて（数値としては増やして）あげれば、子テーマから改変することもできます。
