前に「WordPressのテーマをjQuery初心者がカスタマイズしてみる | Naokix.net」というエントリーでやらかしてしまいましたので、訂正エントリーを書きます。訪問してくれた方々、申し訳ありませんです。
悪い例
外部ファイルにJavaScriptを記述してテーマの header.php の中で、
1 | <?php wp_head(); ?> |
の前に script タグを使って読み込む方法です。
1 | <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/javascript.js"></script> |
CSS だとこうなりましょうか。
1 | <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/style.css"> |
私はこれをやらかした訳ですが、この方法は WordPress の流儀にのっとっていないのでよろしくありません。これだとファイルを重複して読み込んでしまう危険があるため、WordPress では独自の Javascript・CSS 読み込み方法を提供してくれています。
WordPress での正しい読み込み方
wp_enqueue_scripts アクションに対して add_action 関数でフックします。テーマのフォルダの中に「test.js」という外部 Javascript ファイルがあった場合、function.php に次のソースを追記してください。
1 2 3 4 | function test() { wp_enqueue_script('myscript', get_template_directory_uri().'/test.js'); } add_action('wp_enqueue_scripts', 'test'); |
1 2 3 4 5 6 7 | wp_enqueue_script($handle, $src, $deps, $ver, $in_footer); ・$handle：スクリプトの識別名。ハンドル。 ・$src：スクリプトの URL。 ・$deps：依存スクリプト。先に読み込ませたいスクリプト。省略可。 ・$ver：バージョン。省略可。 ・$in_footer：true で </body> の前に読み込んでくれる。デフォルトは false で </head> の前。省略可。 |
第１引数の「$handle」ですが、WordPress がデフォルトで登録している識別名とかぶらない名前にしてください。登録済みの識別名は以下で確認できます。
wp_enqueue_script:WordPress私的マニュアル
上の例では、第３引数から第５引数を省略していますが、これは次のように記述しても同じ結果になります。
1 | wp_enqueue_script('myscript', get_template_directory_uri().'/test.js', array(), false, false); |
メインのスタイルシートとは別に、追加のスタイルシートを読み込ませたい場合も、wp_enqueue_scripts アクションに対してフックを行います。wp_enqueue_script 関数のかわりに wp_enqueue_style 関数を使ってください。
1 2 3 4 | function test() { wp_enqueue_style('mystylesheet', get_template_directory_uri().'/style.css'); } add_action('wp_enqueue_scripts', 'test'); |
1 2 3 4 5 6 7 | wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ・$handle：スタイルシートの識別名。ハンドル。 ・$src：ファイルパスを指定 。 ・$deps：特定のCSSファイルの後に読み込みを行わせたい場合に指定する。省略可。 ・$ver：バージョン。省略可。 ・$media：CSS のメディアタイプを指定。デフォルトは「all」。 |
PC とスマホでスタイルシートを切り替えたり、Web フォントアイコン用のスタイルシートを読み込む場合などに活用してください。
Comment