jQuery スクリプトを WordPress に簡単に追加する方法

公開: 2021-09-21

WordPress は、10 年以上にわたって私たちの周りにありました。 このプラットフォームはアクセスのしやすさで広く知られていますが、WordPress のテーマやプラグインに jQuery を追加することは、多くの開発者にとって懸念事項です。

以前、WordPress のホワイト スクリーン オブ デスなどの問題を修正し、WordPress サイトをメンテナンス モードにするためのガイドを作成しました。 この記事では、WordPress に jQuery を追加する方法を説明しますが、その前に、jQuery の互換モードの概要を簡単に説明します。

jQuery の互換モード

WordPress で jQuery を使い始める前に、jQuery の互換モードを理解することも同様に重要です。

WordPress の jQuery はプリロードされており、コードで使用できます。 ただし、ここでのポイントは、異なるプログラミング言語の他のライブラリとの競合を回避する jQuery の互換モードも付属していることです。

これはごく普通のことのように聞こえるかもしれませんが、この防御メカニズムにはわずかな問題があります。 WordPress で jQuery を使用する場合、古き良き$記号の代わりに「 jQuery 」という用語を使用する必要があります。

この例を見てください。

/* 通常の jQuery */

$('.hideable').on('クリック', function() {

$(これ).hide();

}))

/* 互換モード */

jQuery('.hideable').on('クリック', function() {

jQuery(これ).hide();

}))

ここでの問題はそれほど大きなものではありませんが、あまり楽しいものではありません。 第一に、毎回「 jQuery 」を記述する必要があり、これにはかなりの時間がかかります。第二に、スクリプトが雑然として読みにくくなります。

しかし心配はいりません。いくつかの変更を加えることで、互換性の問題を回避し、古き良き $ 記号を使用できるようになります。

参考までに、$ はjQuery()のエイリアスであり、関数のハンドルです。

基本的な構造は次のようになります。

$(selector).action()

ここで、 $記号は jQuery を指し、 $(selector)は HTML 要素を検索し、 action()はこれらの要素に対して実行されるアクションを定義します。

ここでは、jQuery の互換性の問題を回避するために活用できるテクニックをいくつか紹介します。

jQuery の互換性の問題を克服するには?

  1. 「jQueryステルス」モードに入る
  2. 「衝突なし」モードに入る

jQuery のステルス モードに入る

PBSのロゴ

画像ソース: Podfeet

互換性の問題を回避する最初の最も一般的な方法は、ステルス モードに入る (コードをステルスにする) ことです。

フッターにスクリプトを読み込もうとしているとしましょう。 コードを匿名関数でラップすると、最終的に jQuery が $ にマップされます。

この例を参照してください

(関数($) {

$('.hideable').on('クリック', function() {

$(これ).hide();

}))

})( jQuery );

ここで、ヘッダーにスクリプトを追加する場合は、すべてをドキュメント対応関数でラップし、途中で $ を渡します。

これが例です。

jQuery(document).ready(function( $ ) {

$('.hideable').on('クリック', function() {

$(これ).hide();

}))

});

非競合モードに入る

これは、互換性の問題を回避する非常に簡単な方法です。 スクリプトの先頭でこのコード行を宣言するだけで、デフォルトの $ 記号の代わりに $j を使用できます。

var $j = jQuery.noConflict();

WordPress で jQuery を使用する方法がわかったので、次は本題である jQuery スクリプトを WordPress サイトに追加する方法に移りましょう。

jQuery を WordPress サイトに追加する方法

ワードプレス対jquery

画像ソース: fl1digital.com

jQuery を WordPress に追加することは、 Enqueueingと呼ばれるプロセスによって簡単に行うことができます。

<link>要素を使用して、通常の HTML Web サイトにスクリプトを追加します。 WordPressでも同じことができます。 ただし、それに入るには、WordPress の特別な機能をいくつか実行する必要があります。 これを行うと、すべての依存関係が処理されることに注意してください。

WordPress のテーマを扱っているとしましょう。 functions.phpファイルでこの関数を使用します。

wp_enqueue_script()

これがどのように見えるかです。

関数 my_theme_scripts() {

wp_enqueue_script( 'my-great-script', get_template_directory_uri() . '/js/my-great-script.js', array( 'jquery' ), '1.0.0', true );

}

add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

この関数が取る 5 つの引数を次に示します。

  1. $handle:スクリプトを参照するために使用できる一意のハンドル
  2. $src:スクリプト ファイルの場所
  3. $deps:依存関係の配列を指定するために使用されます
  4. $ver:スクリプトのバージョン番号
  5. $in_footer:スクリプトを配置する場所を WordPress に指示します

デフォルトでは、スクリプトは Web サイトのヘッダーに読み込まれますが、これはサイトの速度に大きく影響するためお勧めできません。

関連: WordPress の編集方法に関する究極のガイド – HTML、CSS、PHP、JavaScript

WordPress 管理者に jQuery スクリプトを追加する方法

同じ関数を使用して、jQuery を WordPress admin に追加できます。 ここで行う必要があるのは、別のフックを使用することだけです。

これが例です

関数 my_admin_scripts() {

wp_enqueue_script( 'my-great-script', plugin_dir_url( __FILE__ ) . '/js/my-great-script.js', array( 'jquery' ), '1.0.0', true );

}

add_action( 'admin_enqueue_scripts', 'my_admin_scripts' );

wp_enqueue_scriptsをadmin_enqueue_scriptsに交換するだけで準備完了です。

WordPress で jQuery の登録を解除する方法

プリロードとは異なるバージョンの jQuery を使用する場合は、WordPress の jQuery の登録を解除する必要があります。

WordPress で jQuery の登録を解除する方法の例を次に示します。

// カスタム jQuery を含める

関数 shapeSpace_include_custom_jquery() {

wp_deregister_script('jquery');

wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js', array(), null, true);

}

add_action('wp_enqueue_scripts', 'shapeSpace_include_custom_jquery');

それは簡単です。 wp_deregister_script()を使用して WordPress の jQuery を登録解除し、必要なスクリプトを含めるだけです。

ここで覚えておくべきことの 1 つは、この例では Google がホストする jQuery ライブラリを追加したことです。 独自のスクリプトの URL で切り替える必要があります。

エンキューする前にスクリプトを登録する必要がありますか?

ページで必要なときにのみスクリプトをロードする場合は、プロセスの早い段階でスクリプトを登録できます。

これが例です

add_action( 'wp_loaded', 'register_all_scripts' );

関数 register_all_scripts()

{

wp_register_script(…);

}

これが完了したら、必要なときにスクリプトをキューに入れます。 方法は次のとおりです。

add_action( 'wp_enqueue_scripts', 'enqueue_front_scripts' );

add_action( 'admin_enqueue_scripts', 'enqueue_back_scripts' );

コンディショナルタグの使用

コンディショナル タグを使用して、必要なときにのみ jQuery を WordPress にロードすることもできます。

この方法は通常、特定のページでのみ必要な管理で使用されますが、帯域幅と処理時間を大幅に節約し、最終的にサイトの読み込み速度を向上させます.

追加のタグの使用に関する詳細については、WordPress の管理エンキュー スクリプトのドキュメントを参照してください。

プラグインを使用して WordPress に jQuery を追加する方法

ワードプレスプラグイン

WordPress は、45000 を超えるプラグインのプラグイン ディレクトリを誇っています。 WordPress サイトで必要な機能のプラグインを見つけることができます。

WordPress サイトのページ、テーマ、投稿などに jQuery を追加する場合も同様です。

ここでは、WordPress に jQuery を追加するための最も人気のあるプラグインをいくつか紹介します。

  • 高度なカスタム フィールド
  • シンプルなカスタム CSS と JS
  • スクリプト N スタイル
  • アセットのクリーンアップ

結論

では、どうぞ。 これで、WordPress jQuery を追加して使用する方法がわかりました。

この知識をプロジェクトに適用すると、優れたプロジェクトを作成するのに役立ちます。 また、JPG 対 JPEG や WordPress ホワイト ラベルなどのテーマに関する決定的なガイドを読んで、知識を高めることもできます。