SWELLでjQueryプラグインを動かす具体的ステップ7つ

結論からいうと、SWELLでjQueryを使うなら「本当に必要なページだけ読み込む」のが一番バランスがいいです。SWELLにテーマを変えたあと、アニメーションやプラグインが急に動かなくなって戸惑っている人も多いと思います。

読み終わるころには、自分のサイトで「どこに、どのくらいjQueryを使うか」を、感覚ではなく方針として決められるようになるはずです。

SWELLでjQueryを使う前に知っておきたい基本

SWELLが「脱jQuery」テーマと言われる理由

SWELLは、デザインのきれいさだけでなく「表示速度の速さ」も重視して作られているテーマです。その一環として、多くのWordPressテーマが標準で読み込んでいるjQueryを、SWELLでは最初から自動で読み込まないようにしています。

イメージとして、他のテーマと比べると次のような違いがあります。

項目	一般的なテーマ	SWELL
jQueryの初期状態	ほぼ常に読み込み	基本は読み込まない
狙っている方向性	プラグインの互換性重視	高速表示と軽さ重視
カスタマイズの前提	jQuery前提で書かれていることが多い	必要なときだけjQueryを足す設計

そのため、別のテーマから乗り換えると「前のテーマでは動いていたjQueryが、SWELLに変えてから動かない」と感じやすくなります。多くの場合、コードが壊れたのではなく、そもそもjQuery自体が読み込まれていないだけです。

SWELLでjQueryが動かないときによくある原因

実際に相談を受けるとき、SWELLでjQueryが動かない原因はだいたい決まっています。

特に、前のテーマで動いていたコードをそのままコピペしただけのときは、SWELL側の設定を少し見直してあげるだけで、何事もなかったかのように復活することも多いです。

SWELLでjQueryを使うときの基本的な考え方

SWELLでjQueryを扱うときは、次のような考え方で進めるとトラブルが少なくなります。

• まずは「その処理、本当にjQueryが必要か？」を考える
• 必要なら、できるだけページを絞って読み込むようにする
• 特定のプラグインのために必要な場合は、プラグイン単位で整理する
• スクリプトは子テーマや専用のエリアにまとめておき、どこに何があるか分かる状態にしておく

このあと紹介する設定や読み込み方は、すべてこの考え方に沿って進めていきます。

SWELLのjQuery設定を理解して、失敗を減らす

SWELL設定「jQuery」タブの3つのポイント

SWELLの「SWELL設定」の中には、jQueryに関する項目がまとまっているタブがあります。メニューの名前や文言はバージョンなどで多少変わることがありますが、やっていることのイメージはこんな感じです。

項目名（イメージ）	ざっくり意味
jQueryをwp_footerで登録する	jQueryをページの下の方（フッター付近）で読み込むかどうか
jquery-migrateを読み込まない	古いバージョンのjQuery用の互換スクリプトを省くかどうか
jQueryを強制的に読み込む	サイト全体で必ずjQueryを読み込むかどうか

この3つの組み合わせで、「どのタイミングで、どの範囲にjQueryを読み込むか」が決まります。細かい挙動はサイトごとに違う部分もあるので、最初はテスト用のページで動きを確認しながら触るのがおすすめです。

私がよく使うSWELLでのjQuery設定パターン

用途	jQuery強制読み込み	wp_footerで登録	jquery-migrate
速度重視で、ほぼjQuery不要	オフ	オン	オフ
一部プラグインだけjQuery使用	基本オフ（ページ単位で読み込み）	オン	プラグイン次第でオンにする
全ページでjQueryカスタム多め	オン	オン	プラグインの動作を見て判断

いきなり「jQueryを強制的に読み込む」をオンにしてしまうと、どのページでも必ず読み込まれるので、サイトによっては無駄が増えがちです。私は、まずは必要なページだけ読み込む形で運用してみて、それでも管理が大変になってきたら全体読み込みを検討する、という順番をおすすめしています。

プラグイン利用時に見直したい設定

フォーム系やスライダー系など、一部のプラグインは最初からjQueryを前提に作られています。こういったプラグインをSWELLに入れるときは、次のような現象が起きることがあります。

• 送信ボタンを押しても何も起きない
• 入力チェックやエラーメッセージが表示されない
• モーダルウィンドウやアコーディオンが反応しない

この場合は、次の順番で確認していくと原因を追いやすくなります。

• プラグインの説明や公式サイトで、jQueryが必要かどうかを確認する
• SWELLの設定で、そもそもjQueryを読み込むようにしているかチェックする
• 必要なら、そのプラグインを使うページだけjQueryを読み込むように調整する

「よく分からないから全部オン」にするのではなく、「このプラグインのためにこの設定をオンにしている」という意識で管理しておくと、あとから原因を探すときにとても楽です。

SWELLでjQueryを読み込む3つの方法

サイト全体でjQueryを読み込む基本パターン

一番シンプルなのは、「サイト全体でjQueryを読み込む」方法です。設定画面だけで完結するので、コードを書くのに慣れていない場合でも試しやすいです。

項目	メリット	デメリット
初心者向きか	かなり扱いやすい	細かい制御はしにくい
表示速度への影響	設定は簡単	不要なページでも読み込む可能性がある
管理の手間	少ない	どこで使っているか後から把握しづらい

例えば、全ページで共通のヘッダーメニューにアニメーションを入れたい場合など、どうしても全体にjQueryが必要なケースもあります。そういったときは、割り切ってこのパターンを使うのも一つの手です。

特定ページだけjQueryを読み込む方法

ある程度WordPressに慣れているなら、「特定のページだけjQueryを読み込む」方法がおすすめです。フォームページやLPなど、必要なページだけに絞ることができます。

流れとしては、次のようなイメージです。

コード自体は難しいものではありませんが、条件分岐の考え方に少し慣れていると安心です。SWELLでも子テーマを用意して、そこでまとめて管理しておくと、テーマ本体のアップデートの影響も受けにくくなります。

子テーマでjQueryファイルを追加する流れ

自作のjQueryを増やしていく予定があるなら、子テーマに専用のjsファイルを置いて管理する方法がスッキリします。あとから見返したときにも、どこに何があるか分かりやすいです。

ステップ	やること
1	子テーマの中にjsフォルダを用意し、「custom.js」などのファイルを作る
2	custom.jsの中に、フェードインなどのjQuery処理を書く
3	functions.phpでcustom.jsを読み込むように設定する
4	必要なら条件分岐を使って、特定のページだけ読み込むようにする

私は案件ごとに「このサイト固有のjQueryはこのファイルに集める」と決めておくことが多いです。そうしておくと、別の制作者が入ったときや数か月後に自分で触るときにも、迷いにくくなります。

SWELLでjQueryを書く場所と実用サンプル

カスタマイザーでjQueryを書くケース

ちょっとしたコードを試したいときや、挙動を確認したいだけのときは、カスタマイザーの「head直前」「body直前」に用意されているコード入力エリアが便利です。

場所	向いているコード	特徴
head直前	外部ライブラリの読み込み設定など	ページ上部で実行される処理を追加しやすい
body直前	簡単なjQueryスニペット	ページ本体の表示に近いタイミングで動く

私は、まずここにjQueryを書いて動作を確認し、問題なければ子テーマのjsファイルに移す、という流れで使うことが多いです。いきなり本番用のファイルに書くより、気楽に試せるのが大きなメリットです。

投稿・固定ページの「カスタムCSS＆JS」を使うケース

SWELLでは、投稿や固定ページの編集画面に「カスタムCSS＆JS」や「JS用コード」を入力できるエリアが用意されています。ここにjQueryを書くと、そのページだけでスクリプトが動くようになります。

• LPだけ、ボタンにスムーズスクロールのアニメーションをつけたい
• お問い合わせページだけ、フォームの見た目や挙動を少し変えたい

こんなときに、このページごとのJSエリアはとても相性がいいです。コードがページ単位で完結するので、「この処理、どこで読み込んでいたっけ？」と探し回る時間が減ります。

よく使うjQueryカスタマイズ例

最後に、SWELLでjQueryを使うときに、実務でよく見かけるカスタマイズの例をいくつか挙げておきます。

• スクロールに合わせて要素をふわっと表示させるフェードインアニメーション
• カードレイアウトのボックスの高さをそろえるために、matchHeightのようなライブラリを使う
• 「詳しく見る」ボタンを押したときに、ページ内の特定の場所までスムーズスクロールさせる

私も最初は、こういった見た目や操作性を少し良くする程度のjQueryから触り始めました。慣れてきたら、フォームの入力チェックや、タブ切り替えのインターフェースなど、少しずつできることを増やしていくと楽しいです。

SWELLでのjQueryと表示速度・SEOの考え方

jQueryがページの軽さに与える影響

jQueryは非常に便利なライブラリですが、ファイルサイズはゼロではありません。特にSWELLのように軽さを重視したテーマでは、何も考えずに全ページでjQueryを読み込むと、せっかくの軽さを少し損してしまうことがあります。

• 画像が多い記事ページ
• 広告やウィジェットがたくさん並んでいるページ
• フォームやスクリプトが重めのページ

こういったページにまで不要なスクリプトを重ねていくと、体感として「ちょっと重いな」と感じやすくなります。だからこそ、SWELLでは「本当に必要なページだけjQueryを読み込む」という考え方が大事になってきます。

ページ種別ごとのSWELLでのjQueryおすすめ方針

参考までに、私がよく採用している「ページ種別ごとのjQueryの考え方」を表にしておきます。サイトによって事情は違うので、あくまで一つの目安として見てください。

ページ種別	jQueryの読み込み	理由
ブログ記事一覧・詳細	基本オフ	テキスト中心で、なくても困らないことが多い
お問い合わせ・申込フォーム	オン	入力チェックなどがjQuery前提のことがある
LP・キャンペーンページ	必要に応じてオン	アニメーションや動きが多い場合にだけ使う

「全部オン」か「全部オフ」かの二択ではなく、ページごとに役割を見て決めるだけでも、サイト全体の軽さはかなり違ってきます。

よくある質問（SWELLとjQuery）

Q1.SWELLでjQueryが動かないときのチェックポイントは？

A. まずは、SWELL設定のjQueryタブで「jQueryを読み込む設定」が有効になっているか、あるいは子テーマやfunctions.phpでjQueryを読み込むコードを書いているかを確認してみてください。

それでも動かない場合は、次のポイントも見てみましょう。

• ブラウザの開発者ツールのコンソールに「jQuery is not defined」といったエラーが出ていないか
• 自作スクリプトが、jQuery本体より先に読み込まれていないか
• 別のプラグインがエラーを出していて、処理が止まっていないか

SWELLとjQueryの組み合わせでつまずいたときは、「設定」「読み込みの順番」「プラグイン」の三つをセットで確認するのがコツです。

Q2.SWELLでjQueryを使うとSEO的に不利になりますか？

A. jQueryを使っているだけでSEO上の評価が下がる、ということは基本的にありません。ただ、不要なページまでjQueryを読み込んでページが重くなると、結果としてユーザー体験が下がり、間接的な影響が出る可能性はあります。

SWELLでjQueryを使うときは、次の点を意識しておくと安心です。

• 必要なページだけjQueryを読み込むようにする
• 可能ならフッター付近で読み込んで、上の方の表示を邪魔しないようにする
• 重いライブラリをいくつも重ねて入れない

このあたりを押さえておけば、SWELLの軽さを大きく損なうことなく、jQueryの便利さも両立しやすくなります。

Q3.SWELL以外のテーマから移行しても、jQueryはそのまま使えますか？

A. そのままでは動かないケースもありますが、調整すればほとんどの場合は動かせます。前のテーマでは標準でjQueryが読み込まれていたはずなので、SWELLに変えたあとも同じ感覚でいると、「あれ？ 動かない」と感じやすくなります。

移行するときは、次のようなステップで確認していくとスムーズです。

• SWELLの設定で、jQueryを読み込むようにしているか確認する
• 子テーマにjQuery用のファイルを用意して、既存のコードをそこに移す
• 前のテーマで使っていたクラス名やIDを、SWELLの構造に合わせて書き換える

この3つを順番に見ていけば、元のテーマで使っていたjQueryカスタマイズの多くは、SWELLでも再現できるはずです。

SWELLでjQueryを使うときのまとめと、今日からできる一歩

この記事のポイントを整理します

今日からできる最初の一歩として、まずはテスト用の固定ページをひとつ作って、SWELLのjQuery関連の設定を変えながら、どの状態で自分のjQueryが動くかを試してみてください。

本番ページを触る前に「自分のサイトではこういうルールでjQueryを読み込む」という方針を決めておくと、この先のカスタマイズがかなり楽になります。