デザイン制作、Web制作、ブログ運営などのノウハウを配信するサイト

WordPressにjQueryを読み込む方法


【更新情報】2017年6月8日 ブログタイトルの変更、説明文言等を追記・修正しました。
こんにちは、koheiです。
WordPressにjQueryを読み込みたいけど、色んなやり方があって、よく分からない方多いのではないでしょうか?
私も最初は混乱しましたが、ようやく整理できたので紹介します。

ちなみに、jQueryは、Webページにさまざまな効果や動きを付けられるJavaScriptライブラリーです。jQueryが使えると、色んな動的なWebサイトが作れるようになります!

スポンサーリンク

【パターン1】PHPファイル内で読み込む場合

まずは、PHPファイル内にjQueryを読み込む方法をご紹介します。
WordPressにjQueryを読み込むには、header.phpののwp_head()上に以下を記載しましょう。

実際のスクリプト処理は、以下のようにphpファイル内に記載し、scriptタグで囲みます。(以下参照)

ただし、この方法は、jQueryのスクリプトをphpファイル内に記載していくので、処理が増えていくと分かりにくくなり、あまりオススメしません。

【パターン2】自分のjQuery用のファイル読み込む場合

ここからは、自分のjQuery用のファイルを作成し、それを読み込む方法を紹介します。
後々、スクリプト処理が増えていくことを考えると、自分のjQuery用ファイルを作成することを強くオススメします。

自分のjQuery用ファイルを作成

別ファイル化2

まずは、自分のテーマファイルの中にjsフォルダを作り、その中にjQuery用ファイルを作ります。
※私は、my_script.jsというファイル名にしました。

functions.phpにjQuery読み込み処理を追加

以下の処理をfunctions.phpに追加します。

自分が作ったjQueryファイルを読み込むには、
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );を使用します。
この関数は、スクリプトファイルを適切な順番で重複せずに読み込んでくれるようです。

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
各引数の意味は以下です。

・$handle・・・スクリプトの識別名
※私は、my_scriptという識別名をつけました。
 
・$src・・・スクリプトのパス 
※get_template_directory_uri()関数で、テンプレートのURLを取得し、そこから自分が置いたスクリプトファイルを指定しています。
 
・$deps・・・依存スクリプト
※jQueryを使うので、array(jquery)としました。
 
・$ver・・・スクリプトのバージョン
※今回は特に指定しませんでした。
 
・$in_footer・・・スクリプトの読み込み位置
true⇒</body> 終了タグの前に配置される
false⇒head内に配置される

jQueryスクリプト処理の書き方

jQueryの読み込みが出来たので、jQueryのスクリプト処理の書き方を説明しておきます。
自分で作成したmy_script.jsに以下のように記載します。

※WordPressのjQueryスクリプトでは、他のパッケージとの競合を防ぐ為、通常のjQueryで記載する「$」マークを「jQuery」という記載に書き換える必要があります。
※パターン1のphpファイル内に読み込んだ時は、scriptタグで囲んでいましたが、jQuery用ファイルでは、scriptタグは不要です。

実際のスクリプト処理は、本ブログでもいくつか紹介しています。
みなさんもjQuery処理にチャレンジしてみてください!

jQueryが使えれば以下のような制作が出来ます!!(参考にどうぞ)
カルーセルパネルの制作
スライドショーの制作
アコーディオンパネルの制作
タブパネルの制作
ドロップダウンメニューの制作
SVGアニメーションの制作
ページめくり「turn.js」の使い方
トップへ戻るボタン制作
WaypointsとAnimate.cssでスクロールアニメーション制作

ちなみに、jQueryの基礎を勉強するには、以下の本がおすすめです!

最後に

以上、WordPressにjQueryを読み込む方法を紹介しました。
jQueryが使えれば、Webサイトの表現が広がります。
ぜひチャレンジしてみてくださいね!

以上、少しでも参考になれば幸いです。

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で

ブログ用WordPress無料テーマ
「chameleon(カメレオン)」

WordPressテーマ(chameleon)は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。
初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください!

ブログ用無料WordPressテーマ

士業用WordPress無料テーマ
「InomaExpertBasic」

士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ページトップボタン