WordPress jQuery互換モード(Compatibility Mode)

Last Updated: 2017 年 01 月 21 日 댓글

以下はwpmudevの「How to Properly Add jQuery Scripts to WordPress(WordPressにjQueryスクリプトを正しく追加する方法)「に出てきた内容のうち」jQuery's Compatibility Mode「部分だけ抜粋したのです。

jQueryの互換モード

WordPress コアには、jQueryは基本的に含まれています。 WordPressjQueryのがロードされると、他の言語のライブラリとの衝突を防止するためのメカニズムである 互換モード(Compatibility Mode)が使用されます。 します。

要約すると、他のプロジェクトで使用するように、ドル記号($)を使用することができません。 WordPressに使用jQueryを作成するときに、ドル記号の代わりにjQueryを使用します。 次のコードを見てみれば何の意味を理解することになるでしょう。

/* 일반적인 jQuery */
$('.hideable').on('click', function() {
$(this).hide();
})

/* 호환 모드 */
jQuery('.hideable').on('click', function() {
jQuery(this).hide();
})

幸いなことに、いくつかの方法を使用して、ドル記号を再利用することができます。 jQueryを使いすぎると、コードが長くなって読んでも難しくなります。

よくご存知だと思い、$記号はjQuery()のエイリアス(Alias;エイリアス)であり、関数のエイリアスです。 基本的な構文は、 $(selector).action()입니다。

  • ドル記号 - jQury 定義
  • (選択者) - HTML要素のクエリ(または検索)
  • jQueryアクション() - 要素に対して実行される

スクリプトをフッターにロードする場合、コードを匿名関数(anonymous function)で囲むことができます。 その後、jQueryを $にマッピングします。 方法は次のとおりです。

(function($) {

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

})( jQuery );

スクリプトをヘッダからロードする場合は、(可能な場合は、この方法は、避けなければならない)document-ready関数ですべてを囲むことができます。

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

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

});

コメントを残す

コメント