wp_enqueue_style,wp_register_scriptの使い方

kentomurata 82views 更新:2016年6月23日

wp_enqueue_style,wp_register_scriptは、WordpressにおいてCSSファイル、JavaScriptファイルを読み込む際に利用出来る関数です。ただファイルを読み込むだけでなく、その前に読み込んでおかなければならないファイルを指定したり、確実に最新のファイルが読み込まれるように指定することが可能です。

関数の使い方

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

第1引数ではスクリプトのハンドルとして用いられる名称を設定します。

第2引数では読み込むファイルのURLを指定します。

第3引数ではその前に読み込むべきファイルのハンドルを指定します。

第4引数ではそのスクリプトのバージョンを指定します。ここで最新のファイルを読み込むよう設定することが可能です。

第5引数ではHTMLドキュメントのどこにスクリプトを置くかを指定します。

使用例

以下が使用例となります。

$dir = get_stylesheet_directory_uri();
wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js');
wp_enqueue_script('script', $dir . '/common/js/hoge.js', array('jquery'), filemtime(get_stylesheet_directory() . '/common/js/hoge.js'));
wp_enqueue_style('town-css', $dir . '/common/css/hoge.css', array(), filemtime(get_stylesheet_directory() . '/common/css/hoge.css'));

get_stylesheet_directory_uriは現在のテーマのスタイルシートが存在するディレクトリのURIを取得する関数です。

wp_enqueue_scriptでは、hoge.jsというjsファイルを読み込んでいます。第3引数ではその1行前で登録した、’jquery’を呼び出しています。

filemtimeは与えられたファイルの最終更新時刻を取得する関数です。第4引数にこれを与えることでバージョンの指定をしています。

wp_enqueue_styleは1行上のwp_enqueue_scriptとほとんど変わりませんが、第4引数を与えるために第3引数に空の配列を与えているところに注意してください。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません