【WordPress】SWELLのトップページだけでjQueryを使う方法！

先輩ブロガー

SWELLでトップページだけマウススクロールに連動したアニメーションを導入したいの。

新人ブロガー

WordPressでユーザー操作に連動したアニメーションを実現するにはjQueryを使用する方法があるね。

WordPressではjQueryを使うには？

WordPressは、デフォルトではjQueryを読み込まない設定になっています。軽量化の観点による配慮かと思います。

このため、WordPressでjQueryを使ったスクリプトをロードしたい場合、jQueryが前提となったプラグインを使用したい場合は「jQueryを読み込む設定」が必要です。

この記事ではWordPressでjQueryを使う方法を紹介します。

jQueryを使うのに必要な作業は下記の2点です。

WordPressでjQueryを読み込む設定の手順（SWELL）

ケース１．SWELLの設定からjQueryを読み込む手順

まずは、一般的な読み込み方法の紹介。この方法が一番簡単です。

▲WordPressの管理画面　>　「SWELL設定」　>　「jQuery」タブ　>　「jQueryを強制的に読み込む」のチェックをオンします。

ケース２．functions.phpからページを絞ってjQueryを読み込む手順

続いて、functions.phpを使って読み込む手順です。例として、トップページだけでjQueryを読み込むには下記のように設定します。

STEP

子テーマのfunctions.phpの編集画面を開きます。

▲「外観」＞「テーマファイルエディタ」をクリックします。

▲「SWELL_CHILD」を選択　＞　「functions.php」を選択します。

必ず子テーマである「SWELL_CHILD」を選択するようにしてください。誤ったファイルを選択して編集してしまうと不具合がでる可能性があります。

functions.phpのファイルの中身が開きますので、一番下に追記する形でjQueryを読み込むコード（次のステップで紹介）を記述します。

STEP

下記のコードを貼り付けます。

// ここからjQueryをトップページに読み込むコード
function addScript() {
	if ( is_home() ) { /* トップページかどうかを判定 */
		wp_enqueue_script('jquery');
	}	
}
add_action('wp_enqueue_scripts', 'addScript');
// ここまで

▲コードはこちら。「if文でホームページかを判定してトップページであればjQueryを読み込む」というコードです。

先輩ブロガー

jQueryはwp_enqueue_script関数を使って読み込むわよ！

wp_enqueue_script関数とは？

wp_enqueue_script関数とは、スクリプトファイルを”よしなに”読み込んでくれる関数です。

参考：WordPress Codex 日本語版 – 関数リファレンス/wp enqueue script

1つ注意点としては、is_front_page()の部分はWordPressの設定によってis_homeとなる場合ががります。違いは次の項で説明します。

is_front_page()とis_home()の違い。

// ここからjQueryをトップページに読み込むコード
function addScript() {
	if ( is_home() ) { /* トップページかどうかを判定 */
		wp_enqueue_script('jquery');
	}	
}
add_action('wp_enqueue_scripts', 'addScript');
// ここまで

▲もう一度、先程のサンプルコードを確認してみましょう。トップページかどうかをif文の判定条件となっている「is_home()」は、「is_front_page()」にしなければいけないケースがあるので注意してください。

どちらを使うかは、ご自身のWordPress設定が「サイト型トップページにしているかどうか」により異なります。

確認方法は下記です。

サイト型トップページかどうかの確認方法

▲図はWordPressの管理画面の「設定」＞「表示設定」＞「ホームページの表示」画面です。

WordPressインストール当初は「最新の投稿」にチェックが入っているかと思います。

一方、WordPressをサイト型トップページにしている方は「固定ページ」にチェックが入っているかと思います。

先輩ブロガー

かなりざっくり解説すると、「トップページかどうか」の判定は上図の設定によって、下記のように使い分ければOKです。

is_home()かis_front_page()の使い分けポイント

• 「最新の投稿」にチェックが入っている場合（ブログ投稿インデックス：WordPressデフォルト）
  • is_home()
• 「固定ページ」にチェックが入っている場合（サイト型トップページ）
  • is_front_page()

先輩ブロガー

ちなみにこのサイトはサイト型トップページにしているので「is_front_page()」を使って判定しています。

参考記事：WordPress Codex 日本語版 – 関数リファレンス/is_home

WordPressデフォルトとは違うバージョンのjQueryを読み込みたい。

上で紹介した２つの方法は、WordPressに含まれるjQueryのバージョンが読み込まれます。

jQueryのバージョンを指定して読み込むには、下記のサイトが参考になるかと思います。

参考：ColdSleep Works – WordPressでスクリプトファイルを読み込むときはwp_enqueue_script関数を使う

jQueryを使ったスクリプトコードを記述する方法

先輩ブロガー

さぁ、ここまでの設定でjQueryを読み込めたわ。

新人ブロガー

やっとコードが書けるね！

先輩ブロガー

さっそく書いていきましょう！

スクリプトを書く場所（SWELLの場合）

jQueryのスクリプトは記事の編集画面にて記述します。

STEP

スクリプトを読み込むページの編集画面を開きます。

いつも記事を書く時と同じように、記事の編集画面を開きましょう。

STEP

JSコードにスクリプトを記述します。

編集画面の下に「JS用コード」というテキストボックスがあります。ここがjQueryスクリプトを書く場所です。

もしこの領域が見つからない場合、閉じて隠れている可能性がありますので下図の「カスタムCSS＆JS」のところをクリックしてみてください。

STEP

サンプルコードを書いてみよう。

サンプルスクリプト

jQuery(document).ready(function($) {
    $('h2').css('color', 'red');
    $('p').css('color', 'red');
});

▲テスト用に下記のサンプルプログラムを用意しました。良かったら使ってください。

適当にh2見出しと段落を含めた記事を書いてみます。

記事を投稿して、記事を表示させてみると、jQueryによって文字色が赤くなっていることが確認できるかと思います。

WordPressでのjQueryスクリプトの書き方

上のサンプルスクリプトを、jQueryを書いたことがある方がみると違和感を感じた方がいるかもしれません。

そうなのです。WordPressでは、一般的なHTMLページを想定したjQueryスクリプトの書き方では動作しません。

WordPressでjQueryを書くには、WordPress特有の書き方があるからです。
（これはWordPressのnoConflict()モードという機能によるためです。）

WordPressでのjQuery書き方1

jQuery(document).ready(function(){
  //ここにスクリプトを書きます。
    jQuery(#somefunction1) ...
    jQuery(#somefunction2) ...
});

▲codexに掲載されている書き方です。すべてのステートメントに「jQuery」を付けてないといけないので面倒です。$を使ってシンプルに書くには次の方法で書きます。

WordPressでのjQuery書き方2（オススメ）

jQuery(document).ready(function($) {
  //ここにスクリプトを書きます。
    $(#somefunction1) ...
    $(#somefunction2) ...
});

▲$を使って書く方法です。

WordPressでのjQuery書き方3

jQuery(function ($) {
  //ここにスクリプトを書きます。
    $(#somefunction1) ...
    $(#somefunction2) ...
});

▲こちらの書き方でも$を使って書けます。

「書き方２」との違いは、ready関数を使っていないのでHTMLがすべて読み込まれていないタイミングでjQueryが実行されてしまう気がします。ですのでCSSを操作する処理は、失敗するかも？

（検証はしていないので詳細はわかりません・・。詳しい方教えてください！）

なのでわたしは2の方法を使って書くようにしています。

参考記事：WordPress Codex 日本語版 – jQuery noConflict ラッパー

まとめ

先輩ブロガー

jQueryをトップページだけ読み込む方法でした☆彡

初心者におすすめのjQueryアニメーション本

▼実践的なコード例があるので、ほぼそのまま使うことができます。

▼おすすめのJQueryのアニメーションの本
動くWebデザイン アイディア帳　実践編