正しくワードプレス上のjQueryのコードを追加する方法

パー ブレアJersyer | WordPress

WordPressは16年以上私たちの生活の一部ですが、テーマやプラグインにスクリプトを追加する方法は、多くの開発者にとって謎のままです。 この記事で、私たちはついに混乱に終止符を打ちました。

これは最も広く使用されている JavaScript ライブラリの XNUMX つであるため、今日は jQuery スクリプトをテーマに追加したり、 WordPressのプラグイン.

jQuery互換モードについて

WordPressへのスクリプトの追加を開始する前に、jQueryの互換モードを理解することが重要です。

ご存知のとおり、WordPressにはjQueryが既に含まれています。

WordPressのjQueryのバージョンにも「 互換モード これは、他のjavascriptライブラリとの競合を回避するためのメカニズムです。

この防御メカニズムの一部は、あなたが ねっpouvezのPAS 使用する $他のプロジェクトと同じように直接署名します。

代わりに、WordPressのjQueryコードを作成するときは、 jQuery.

そのコードの例を次に示します。

/ * JQuery régulier * /
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})

/ * Mode de compatibilité * /
jQuery ( '.hideable' ).on( 'click' , function () {
jQuery( this ).hide();
})

問題は、jQueryを何百万回も書くと時間がかかり、読みにくくなり、スクリプトが重くなる可能性があることです。

良いニュースは？

少し変更するだけで、かわいいドル記号を再び使用できます。

ところで、あなたが jQueryの新機能 、$記号はjQuery（）のエイリアスであり、関数のエイリアスです。

基本的な構造は次のようになります。 $(selector).action()。 ドル記号はjQueryを定義します…「（selector）」はHTML要素を照会または検索します…そして最後に「jQuery（）action」は要素に対して実行されるアクションです。

互換性の問題を回避する方法に戻ります。ここにいくつかの実行可能なオプションがあります。

1. jQueryステルスモードに入る

互換モードを回避する最初の方法は、コードをこっそりとすることです。

たとえば、フッターにスクリプトを読み込む場合、匿名関数でコードをラップできます。これにより、jQueryがマップされます $.

以下の例のように：

( fonction ( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
}) (jQuery);

スクリプトをヘッダーに追加する場合（可能であれば回避する必要があります。詳細は以下を参照）、すべてをドキュメント対応関数でラップして、 $道に沿って。

jQuery( document ).ready( function( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
});

2.「競合なし」モードに入る

jQueryのスペルを回避するもうXNUMXつの簡単な方法は、モードに切り替えることです。 「コンフリクトフリー」 別のショートカットを使用します。

この場合： $jデフォルトの代わりに $.

必要なのは、スクリプトの先頭で宣言するだけです。var $j = jQuery.noConflict();

これで、WordPress 用の有効な jQuery コードの記述について理解が深まりました。 サイトのWeb.

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

jQueryスクリプトをWordPressに追加する最も簡単な方法のXNUMXつは、「設定」と呼ばれるプロセスを使用することです。 待ち行列 '。

例えば、 サイトのWeb 従来の HTML では、  <link> スクリプトを追加するアイテム。 WordPressも同じことをしますが、これを実現するために特別なWP関数を使用します。

このようにして、すべての依存関係を管理します（WP！に感謝します）。

テーマで作業している場合は、関数を使用できます  wp_enqueue_script() あなたの中に  functions.php ファイル。

これは次のようなものです。

function my_theme_scripts () {
wp_enqueue_script('mon-grand-script', get_template_directory_uri(). '/js/my-great-script.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

この関数は XNUMXつの引数：

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

*注意点  $in_footer デフォルトでは、スクリプトがヘッダーにロードされることを意味します。

これは悪い習慣であり、サイトの速度を大幅に低下させる可能性があります。 したがって、スクリプトをフッターに配置する場合は、このパラメーターがtrueに設定されていることを確認してください。

WordPress管理者へのスクリプトの追加

管理者にスクリプトを追加することもできます。 使用される機能はまったく同じです。別のフックを使用する必要があります。

パーexemple：

function 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の購読を解除する方法

しかし、WordPressがプリロードしたものとは異なるバージョンのjQueryを使用したい場合はどうでしょうか？

キューに入れることができます…しかし、それはページにXNUMXつのバージョンのjQueryがあることを意味します。

これを回避するには、WPのバージョンの登録を解除する必要があります。

これは次のようなものです。

//カスタム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（） 以下のために 登録解除 WPのjQuery。追加するjQueryスクリプトを含めます。

上記の例では、 GoogleがホストするjQueryライブラリ 、ただし、明らかにそれを独自のスクリプトのURLに置き換えます。

スクリプトをキューに入れる前に保存するべきではありませんか？

スクリプトをページに直接ロードするのではなく、必要に応じてロードする場合は、スクリプトを以前に保存できます。

たとえば、  wp_loaded:

add_action ('wp_loaded', 'register_all_scripts');
fonction register_all_scripts () {
wp_register_script (…);
}

それが済んだら、必要なときにスクリプトをキューに入れることができます。

add_action（ 'wp_enqueue_scripts'、 'enqueue_front_scripts'）;
add_action（ 'admin_enqueue_scripts'、 'enqueue_back_scripts'）;

他のスクリプトとの衝突を避けるために、同じ名前を使用することを忘れないでください。

コンディショナルタグを使用する

条件付きタグを使用して、必要な場合にのみスクリプトをロードします。

これは、管理者で (管理者全体ではなく) 特定のページでのみスクリプトを使用する場合によく使用されます。 また、帯域幅と処理時間も節約されるため、ロード時間が短縮されます。 サイトのWeb.

を見てください キューイングスクリプトのドキュメント  詳細については、WordPress Codexをご覧ください。

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

WP plugins ディレクトリには、スクリプトを投稿、ページ、または WordPressテーマ.

よく知られているJavaScript / jQueryプラグインの例を次に示します。 高度なカスタムフィールド , シンプルなカスタムCSSとJS , スクリプトスタイルn et リソースのクリーニング。

独自のjQueryプロジェクトを作成する

jQueryをよりよく理解することは、あなたの仕事をよりインパクトのあるものにするだけです。 あなた自身のウェブサイトのためであろうとクライアントプロジェクトのためであろうと。

jQueryはその単純さでよく知られています。この記事で（願わくば）学んだように、簡単なjQueryスクリプトをWordPressに追加するのは、方法がわかれば簡単です。

はい、バニラHTMLを使用する場合と比較して少しオーバーヘッドがありますが、依存関係の管理と明確さという追加の利点もあります。

それだけでなく、jQuery WPのデフォルトの互換性をバイパスするなどのちょっとしたトリックを使用することで、多くの時間、労力、および肥大化したコードを節約できます。

コメントを投稿

あなたのメールアドレスは公開されません。 必須フィールドは、マークされています *

このサイトでは、望ましくないものを減らすためにAkismetを使用しています。 コメントデータの使用方法の詳細.