WordPressの子テーマ使用時にオリジナルのjsファイルをhead要素内で読み込ませる

WordPressにはjQueryを使うためのプラグインがたくさんありますが、簡単なスクリプトであればオリジナルのjsファイルを読み込ませるだけで充分です。
今回はhead要素に記述する方法でjsファイルを取得してみました。

sponsored link

子テーマのディレクトリURLを取得する

僕は子テーマを作ってカスタマイズしているのでget_stylesheet_directory_uri()というテンプレートタグを使用してURLを取得、それにjsファイルのパスを追加しました。
この場合は子テーマのindex.phpと同じディレクトリにjsフォルダを作成してその中にscript.jsというjQueryを記述するファイルをFTPで設置しています。

子テーマを使用していない場合はget_template_directory_uri()を使用します。

関数リファレンス/get stylesheet directory uri – WordPress Codex 日本語版

jsファイルにjQueryを記述する

WordPressではjQueryの記述方法が変わります。これはJavaScriptのライブラリ(jQueryもそのひとつ)を併用するとコンフリクト(衝突)を起こして正常に動作しなくなってしまうからだそうです。

WordPressでjQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例 – かちびと.net

いくつか書き方はあるようですが、僕はこのようにしました。

今回僕がしたかったのは目次に戻るためのページ内リンクをh2タグの前に自動で生成すること。この場合h2:gt(0)で2つ目以降のh2要素をセレクタとして、.before()内のHTMLをh2タグの前に生成させています。


今まで直書きしていたHTMLは「Search Regex」というプラグインで一括置換して削除しました。