JavaScriptを読み込む – [04]WordPressテーマ制作レッスン

このレッスンでは、前回のスタイルシートをハードコーディングで読み込む方法と同じように、JavaScriptファイルを読み込む記述を追加して、動作を確認していきます。

動画

レッスンの準備

Olein-jp/wp-theme-develop-lesson

Contribute to Olein-jp/wp-theme-develop-lesson development by creating an account on GitHub.

github.com

このレッスンでは、上記リポジトリのwp-lesson-04というディレクトリにあるファイルを使って学習を進めていきます。

WordPressのルートディレクトリにあるwp-contentの中のthemesにwp-lesson-04ディレクトリを設置しましょう。

index.phpを開く

今回は、

• jQuery CDN
• テーマ固有のJavaScriptファイルscript.js

これらをハードコーディングで読み込んでいます。

</body>タグの直前に挿入していく

まず、jQuery CDNを読み込んでいきます。</body>の直前に以下のコードをコピー＆ペーストしてみましょう。

動画では「直後」と言ってしまっているところが有りますが、テロップにもあるように間違いです。失礼しました。

<script
		src="https://code.jquery.com/jquery-1.12.4.min.js"
		integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
		crossorigin="anonymous"></script>

Google Chromeなどの開発者ツールなどで読み込みを確認してみましょう。

次に、テーマ固有のJavaScriptファイルscript.jsを読み込みます。先ほど入力したコードの下（</body>タグの直前）に以下のコードを挿入します。

<script src="/wp-content/themes/wp-lesson-04/js/script.js"></script>

再度、Google Chromeなどの開発者ツールで読み込みを確認しましょう。

また、動作としては、ブラウザ幅をスマートフォン幅程度に縮小させた際に、画面右上にハンバーガーボタンが表示されます。そちらをクリックした際にナビゲーションが左からスライドしてくることが確認できると思います。

このJavaScriptでは、ハンバーガーボタンとナビゲーション部分にCSSクラスをアクションに応じて追加・削除するための記述がされています。興味がある方は簡単なコードですので確認してみてください。

まとめ

今回は、前回のスタイルシートの読み込み方法と同じような形で、JavaScriptファイルをハードコーディングで読み込んでみました。

実際に、このようにソースコードをWordPressテンプレートファイルでも読み込めてしまうということを確認できたはずです。

WordPressテーマ制作においては、この方法は非推奨とされています。正しい読み込み方法は後ほどのセクションでご紹介します。

以上でこのレッスンは終わりです。引き続き、WordPressテーマ制作レッスンを進めていきましょう！