久しぶりのブログはやっぱりWordPressについてになりました。ゆひゃです。最近このブログが伸びてるようで記事を増やしたり、デザインを刷新したり、使いやすく見やすいサイトに変えてこうって動きが身内で発生しています。大問題です。
WordPressで用意されているJavaScriptやCSSのファイルをHTMLに直書きしない、便利な管理方法を紹介します。
HTML直書きする読み込み方法はしないで
WordPressのデザインを変更する際には、JavaScriptとCSSファイルを読み込ませる必要があります。サイト制作経験のある方ならお馴染みですが、本来サイトを作る際はCSSファイルを読み込ませるなら<link>タグ、JavaScriptを読み込ませるなら<script src...>タグをHTMLの中にぶち込んでサイトを構築します。<head>内がごちゃついたり、</body>タグの直前に書いたり色々コツがあるわけですが、キャッシュ削除が必要で書き換えたりと考えると結構管理がめんどくさかったりします。
さらに既存テンプレートを自分で変更するというのは結構リスクのある行為です。思わぬ挙動にもつながる可能性があります。
JavaScriptファイルを読み込ませる
それではどのように読み込ませるのが良いのか見ていきます。今回はテンプレートフォルダ内にjsフォルダを作成し、その中のmy-script.jsというファイルを読み込ませることを想定します。
functions.phpに以下のコードを入力してください。
function my_script_init () {
wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/my-script.js', array(), null, 'all' );
}
add_action( 'wp_enqueue_scripts', 'my_script_init' );これだけ。my-script.jsと書いてある部分を書き換えて使えます。
CSSファイルを読み込ませる
次にCSSファイルを読み込ませます。テンプレートフォルダ内にcssフォルダを作成し、その中のmy-style.cssというファイルを読み込ませることを想定します。
function my_script_init () {
wp_enqueue_style( 'my-style', get_template_directory_uri() . '/css/my-style.css', array(), null, 'all' );
}
add_action( 'wp_enqueue_scripts', 'my_script_init' );
これだけ。JavaScript同様my-style.cssと書いてある部分を二箇所書き換えることで使えます。
J SとCSSの両方を読み込ませる時の注意
上記のコードはよく見ると同じ関数であることがわかります。なのでJavaScriptとCSSの両方を読み込ませたいときは上の二つのコードを二つコピペしてもうまく作動しません。
その時は以下のようにコードを書きます。
function my_script_init () {
wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/my-script.js', array(), null, 'all' );
wp_enqueue_style( 'my-style', get_template_directory_uri() . '/css/my-style.css', array(), null, 'all' );
}
add_action( 'wp_enqueue_scripts', 'my_script_init' );wp_enqueue_scriptタグとwp_enquieue_styleの二種類の関数を同じ関数内に羅列させていくだけで読み込ませることができます。wp_enqueue_style関数をもう一つ追加してmy-style-2.cssを読み込ませる場合も同じ関数内に追加していくだけで、簡単に追加されていきます。
ちなみに上記のコードでは自動的にcssファイルは<head>タグ内に、jsファイルは</body>タグの直前に出力されるようになっています。
ファイルのバージョン管理方法
jsファイルとcssファイルはキャッシュのためにバージョン管理をすることが多いと思います。この関数ではバージョンを入力する引数も用意されています。上記のコードのnullの部分です。
バージョンを一括で管理する場合は以下のようにすると手軽です。
function my_script_init () {
$version = "1.14.26";
wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/my-script.js', array(), $version, 'all' );
wp_enqueue_style( 'my-style', get_template_directory_uri() . '/css/my-style.css', array(), $version, 'all' );
wp_enqueue_style( 'my-style-2', get_template_directory_uri() . '/css/my-style-2.css', array(), $version, 'all' );
}
add_action( 'wp_enqueue_scripts', 'my_script_init' );あらかじめ$versionという変数を用意しておけばその変数の値を変更するだけで全てのファイルのバージョンを更新することができるようになります。
まとめ
今回はCSSとJavaScriptのファイルを管理するフックである、wp_enqueue_scriptsにアクションフックを追加することで簡単にファイル管理バージョン管理ができる方法を紹介しました。WordPressには管理が簡単になる方法が他にも色々用意されています。管理を楽にしておくことで、将来サイトを修正する必要が出たときの手間がグッと減るので意識して制作していきたいですね。
