WordPressでJavaScriptファイルを読み込む方法

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

WordPressでJavaScriptファイルを読み込み使用するには、wp_enqueue_script関数を利用します。

具体的には、下記のようにfunctions.phpに記述します。

コードについて少し説明してみます。

簡単に説明すると、アクションフックである「wp_enqueue_scripts」(※複数形になっているので注意が必要)
によってwp_enqueue_script関数が含まれたhoge_scriptを呼び出しています。

続いて、「wp_enqueue_script関数」の引数を確認していきましょう。

  • handle スクリプトのハンドル名。デフォルトのスクリプト名と重ならないようにする
  • src スクリプトのURL
  • deps 依存スクリプト識別名を配列で指定
  • ver バージョン文字列
  • in_footer trueにするとスクリプトがbodyの前で読み込まれる。falseだとheadの前で読み込まれる

ここまでだと具体例がないので少しイメージしづらいと思います。

なので、具体的なjavascriptファイルを試しに読み込ませてみたいと思います。

例としてクリックすると開閉する目次(メニュー)を実現させるjavascriptコードを用意しました。
なお、コードはjQueryを利用しています。

こんな感じです。

「1.HTMLとはなにか? 」「2.CSSとはなにか?」をクリックするとリストが表示されます


1. HTMLとはなにか?

2. CSSとはなにか?


まず、下記のコードをWordPressに投稿ページに追加しましょう。

つぎにWordPressのスタイルシートに下記の追記します。

最後に下記のようなjavascriptファイルを用意します。

上記のファイルは「custom_script.js」というファイル名で
sampleというテーマのフォルダの直下にある「js」フォルダに保存されているとします。

では、さっそくcustom_script.jsを読み込んでみましょう。
functions.phpに下記のコードを追記します。

これでjavascriptコードがWordPressに読み込まれるはずです。

参考

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

コメントを残す

*

CAPTCHA