プラグインを使わずに、ヘッダーファイルを介さないで、JSファイルやcssファイルを組み込む方法

jsファイルやcssファイルを組み込む場合に、ヘッダーファイルもプラグインも使わずやれれば、ファイルがぐちゃぐちゃにもならず高速に出来る。その方法を紹介!

Initializing...

どうしてもこれがやりたかった背景

最近、マイブームなのが子テーマをつかって既存のテーマファイルをカスタマイズすることです。つい先日得た知識で、子テーマを使うと結構乱雑になりがちなソースファイルがかなりコンパクトでわかりやすくなっています。そうなるとテーマファイル内に散在しがちな修正コードをなるべく一本化しなければなりません。ちょっとアクセス解析をしようとかデザイン変更しようとかすると、必ずjsとcssの追加はついて回ります。通常はヘッダーファイル(head.php)に組み込むのですが、これをfunctions.php内で納めるのがここに紹介する方法です。

functions.phpに記述することでjsとcssをヘッダーに追加する

これまでWordpressのテーマファイルの一つであるfunctions.phpを編集した経験があれば、すごく簡単です。次の記述をfunctions.phpのどこかに追加してください。

function my_enqueue_scripts() {
wp_enqueue_script("analystics", get_stylesheet_directory_uri() ."/js/analysticstracking.js");
wp_enqueue_style("customcss", get_bloginfo('template_directory').'/css/mycustom.css' );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

説明

上記の例では、analysticstracking.jsとmycustom.cssの2つのファイルをヘッダーに追加しているところです。add_action関数で、head.phpでwp_head関数が呼ばれるタイミングで定義した関数my_enqueue_scriptsが動きます。 jsファイルを追加したい場合は、上記のwp_enqueue_script関数で追加するjsファイルを指定しています。この関数は、

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

5つのパラメータのうち、$handleと$srcは必須パラメータでその他は省略してもかまいません。

パラメータ 内容
$handle 他と重ならない一意のidを指定します。
$src 追加するjsファイルを指定します。上記のget_stylesheet_directory_uri()は、テーマファイルのルートを指定し絶対パスにて指定しています。

※参考:wordpress関数リファレンス – wp_enqueue_script cssファイルを追加したい場合は、上記のwp_enqueue_style関数で追加するjsファイルを指定しています。もっともcssファイルの追加は、style.cssに@importで追加してもいいのですが。この関数の使い方は、

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

これも5つのパラメータのうち、$handleと$srcは必須パラメータでその他は省略してもかまいません。

パラメータ 内容
$handle 他と重ならない一意のidを指定します。
$src 追加するcssファイルを指定します。上記のget_stylesheet_directory_uri()は、テーマファイルのルートを指定し絶対パスにて指定しています。

※参考:wordpress関数リファレンス – wp_enqueue_style

注意事項!それぞれ複数ファイルを指定する場合は、同一ファイル同士の依存関係に注意し、どのファイルを先に読み込まれるべきかに注意してください。この場合は、上記に参考としてあげた関数リファレンスをお読みになり、上記の第3パラメータを指定することになります。

テーマフォルダー内には3つのファイルだけ!

この方法を使うことにより、私のテーマファイルは上記で追加したjsとcss以外は、以下の3つだけです。

  • style.css(必須)
  • functions.php
  • single.php

子テーマ手法をつかって、親テーマファイルをそのまま利用して必要なファイルだけ定義するとこうなります。これまで十数本あったテーマファイルがたった3本。まぁ良く使うリスト構造はプラグイン化して数種類用意してウィジットに入れ込んでます。 もし子テーマに興味がある方は、こちらの記事も読んでみてください。

3本とはちょっと大げさ過ぎたかもしれません。大事な大事なトップページはどうするかって質問きそうですが、固定ページを使おうと思っています。 ではでは!

コメント

タイトルとURLをコピーしました