サポート » 使い方全般 » wpでのJSの読み込み方法について

  • 解決済 rala1ria

    (@rala1ria)


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

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

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

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

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

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

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

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

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

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

    (@du-bist-der-lenz)

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

    こんにちは

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

    「wp_enqueue_script」だけで記述する

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

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

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

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

    DRILL LANCER

    (@rickaddison7634)

    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年、 3ヶ月前にDRILL LANCERが編集しました。
    • この返信は5年、 3ヶ月前にDRILL LANCERが編集しました。
    トピック投稿者 rala1ria

    (@rala1ria)

    CG様、munyagu様、RICK様

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

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

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

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

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

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「wpでのJSの読み込み方法について」には新たに返信することはできません。