SWELLでjQueryを使う方法

SWELLは「脱jQuery」テーマです

SWELLは、軽量化のためにjQueryに依存しない設計になっています。

なので、jQueryに依存するプラグインやライブラリなどを利用するには、jQueryを読み込ませる設定が必要です。

SWELLでjQueryを使うには

SWELLでjQueryを読み込ませる方法としては、大きく2つの方法があります。

①「SWELL設定：jQuery」設定で読み込ませる

サイト全体でjQueryを読み込ませたい場合は、「SWELL設定＞jQuery」で共通設定ができます。

ただし、この設定を行うと、jQueryを使用していないページでも読み込まれてしまうため、GoogleのPageSpeed Insightsでページの表示速度に影響がでる場合があります。

SWELLが推進するCWV（コア・ウェブ・バイタル）への対応をきちんと理解した上でjQueryによるカスタマイズが必要かどうかを判断してください。

当ブログでは、上記の設定でjQueryを読み込ませることは推奨していません。

②アクションフックで読み込ませる

「jQueryはトップページだけで使いたい」場合など、特定のページのみに読み込ませる方法です。

当ブログではこちらの方法を使用しています。

アクションフックを使うことで、SWELL設定の「jQueryを強制的に読み込む」にチェックをいれなくても、任意のページのみに読み込ませること可能です。

※以下は、子テーマ「SWELL CHILD」をインストールし有効化している前提での説明です。

アクションフックからjQueryを読み込ませる方法としては、子テーマのfunctions.phpに追記します。

基本的な記述方法としては、

があります。

function 関数名(){
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', '関数名');

add_action('wp_enqueue_scripts', function() {
    wp_enqueue_script('jquery');
});

ちなみに、wp_enqueue_script()関数は「ファイルをキューに追加する」、アクションフックのwp_enqueue_scriptフックは「イベントトリガー」で、表記は一緒ですが意味が異なります。

以下の記述例は、「ホームページ」に設定されているトップページのみにjQueryを読み込ませています。

function addScript() {
	if ( is_home() ) { /* トップページかどうかを判定 */
		wp_enqueue_script('jquery');
	}	
}
add_action('wp_enqueue_scripts', 'addScript');

なお、トップページ以外の固定ページや特定のページが複数ある場合など、以下の記述方法を参考にしてください。

上記スクリプトによって、jQueryが読み込まれます。

<script type=’text/javascript’ src=’https://example.com/wp-includes/js/jquery/jquery.min.js?ver=3.6.0‘ id=’jquery-core-js’></script>

なお、読み込み位置は、「SWELL設定＞jQuery」の「jQueryをwp_footerで登録する」で制御されています。
（$in_footerを変えても設定が優先された）

これで、ページ編集画面の「カスタムCSS＆JS＞JS」に記述したjQueryのコードが実行できます。

wp_enqueue_script('プラグインのハンドル名', 'プラグインファイルのURL', array('jquery'), '', false);

WordPressでのjQueryの記述方法

WordPressでjQueryのコードを記述する場合、記述方法に注意が必要です。

• 一般的なjQueryの記述

$(function(){
  $～処理内容
});

• WordPressの場合の記述

jQuery(function(){
  jQuery～処理内容
});

上記のように、「$」を「jQuery」と記述します。

ただ、これだと処理内容の記述ですべての「$」を「jQuery」に置き換えなきゃいけないので、以下のように「Ready関数」 $(function){}部分を書き換えます。

jQuery(function($){
  $(‘#test’).text();
});

とすることで、jQuery(function($){ ～ });の間は「$」が使えるようになります。

くれぐれもカスタマイズは「自己責任」でお願いします^^;

当ブログでご紹介しているようなカスタマイズ（←本来の意味での）をしなくても、SWELLの基本機能だけで十分オシャレなブログ・サイトが構築できます。

テーマ選びに迷ったらSWELLを選んでおけば間違いないです！

（カスタマイズ沼にハマらないようご注意ください^^;）

WordPressテーマ「SWELL」

17,600円（税込）

シンプル美と機能性の両立。圧倒的な使い心地を追求するWordPressテーマ。ブロックエディター完全対応！

ご購入はこちら

デモサイトを見る

あわせて読みたい

トップページをオシャレに！サイト型でカスタマイズする方法 – SWELLカスタマイズ こんなSWELLユーザーに読んでほしい「SWELLでトップページをサイト型でオシャレにカスタマイズしたい」「トップページをスクロールアニメーションで動きを持たせたい」