wpでのJSの読み込み方法について

解決済 rala1ria
(@rala1ria)

5年、 10ヶ月前

お世話になっております。

wpでjsを読み込もうとfunctions.phpにコードを書いているのですが
なかなかうまくいかず。。

こちらのサイトを参考にさせていただきました。
https://affiliate150.com/function-javascript

読み込みたいjsファイルは4つほどございます。

色んなサイトを見ていても、１つのファイルの読み込み方法しかわからず。。

jsが詳しくないため、どう書いていいかわかりません(涙)

どなたかわかりやすいコードを教えてくださると幸いです。

また、functions.phpに書き込んだjsは全てのページに読み込まれてしまうのでしょうか？

すみませんが、よろしくお願いいたします。

4件の返信を表示中 - 1 - 4件目 (全4件中)

CG
(@du-bist-der-lenz)

5年、 10ヶ月前

全体に適応させる場合は有効ですが、CSSやJSは、適当に書いているとメンテナンス性が悪くなりますし、たとえば固定ページのみに表示させる、問い合わせページのみに適用させたいJSがある、といった用途で利用する場合は、テンプレートで振り分けるのが良いでしょう。

munyagu
(@munyagu)

5年、 10ヶ月前

こんにちは

参考にされたベージにある、

「wp_enqueue_script」だけで記述する

の箇所に書かれている方法で読み込んでください。
１つしか読み込めないのは、ハンドル名を同じにしているからと思います。
読みこむ JavaScript 毎に別々のハンドル名にしてください。

また、特定のページで必要なだけ読み込みたい場合、以下のような方法で出し分けるのが一般的だと思います。

1.条件分岐タグで現在のページを判断し、必要なもののみ enqueue する。
2.グローバル変数の $post で現在のページを判断し、必要なもののみ enqueue する。
3.get_query_var で現在のページを判断し、必要なもののみ enqueue する。
4.function.php ではなく表示するテンプレートの get_header();以前に記述する。

どれが正解というものはありません。
その時に最適な方法を選んで使用して下さい。
DRILL LANCER
(@rickaddison7634)

5年、 10ヶ月前
wp_enqueue_scriptの使い方はここを参照すると良いでしょう。

参考までに私がprism.jsを導入する際に記述したコードを書いておきます。
```
function prism_scripts() {
	// JavaScriptを読み込む.
	wp_enqueue_script( 'clipboard.js', get_stylesheet_directory_uri() . '/library/clipboard.js/js/clipboard.min.js', array(), '2.0.0', true );
	wp_enqueue_script( 'prism.js', get_stylesheet_directory_uri() . '/library/prism.js/js/prism.js', array( 'clipboard.js' ), '1.15.0', true );
}
add_action( 'wp_enqueue_scripts', 'prism_scripts' );
```
子テーマ上にファイルがあるのでget_stylesheet_directory_uri()を使用しています。
親テーマ上にファイルがある場合はget_template_directory_uri()を使用しましょう。
- この返信は5年、 10ヶ月前にDRILL LANCERが編集しました。
- この返信は5年、 10ヶ月前にDRILL LANCERが編集しました。
トピック投稿者 rala1ria
(@rala1ria)

5年、 10ヶ月前

CG様、munyagu様、RICK様

詳しく教えていただきありがとうございます。

固定ページのみに表示させる場合は
やはり個別に対応するなどした方がいいですね。

おかげさまで、ひとまずjsの読み込み自体はできました！

munyagu様に教えていただいた
条件分岐タグも、参考サイトを見ながら勉強したいと思います。

ありがとうございました。