それでもわたしはおうちにいたい

おうちが大好きな私がなるべく楽しく暮らすためのブログ

WordPressでJSファイルを読み込ませる方法

f:id:alysantwanet:20170701200324j:plain
初心者すぎて色々とつまずいたのでメモ。
WordPressでサイトを作成中にJSファイルをソースコードに追加する方法です。
今回は管理のことも考えてfunctions.phpに書きます。

詳しいことはもちろんCodexに載っていますが、たくさん文字があって初心者には難しいことも色々書いているので、ここでは簡単にわかりやすく書いてみようと思います。
関数リファレンス/wp enqueue script - WordPress Codex 日本語版

JSファイルを読み込ませる時はfunctions.php内にwp_enqueue_scriptを書きます。

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

$handle・・・任意の名前※必須項目
$src・・・ファイルのURL
$deps・・・依存しているスクリプト
$ver・・・スクリプトのバージョン
$in_footer・・・スクリプトの読み込み位置(trueだと前、falseだと前。初期値だとfalseなので、headに読み込まれます。)

テーマ内に置いているファイルのURLは直接書かないでget_template_directory_uriなどを使って適切な URL を取得します。
Codexにも書いていましたが『ローカルスクリプトの URL は絶対に直接書き込むべきではない。』そうです。

例えばの直前にfuga.jsを読み込ませたい場合は下記のように書きます。

function hoge_script() {
wp_enqueue_script( 'fuga', get_template_directory_uri().'/js/fuga.js',array(),'',true );
}
add_action( 'wp_enqueue_scripts', 'hoge_script' );

URLの指定は、テーマファイル内のjsフォルダを指定しています。
依存スクリプト($deps)とスクリプトのバージョン($ver)を特に指定せずに初期値にしてます。
読み込み位置($in_footer)はの直前にしたいのではtrueにしています。何も書かなかったらhead内に書かれます。


下記の記事がとてもわかりやすくて、初心者の私としてはとても助かりました。
memocarilog.info

works.coldsleep.jp

広告を非表示にする