WordPressカスタマイズ事例

Jqueryを使うプラグイン(たとえばContact form 7)でWordPress標準のJqueryではなく、別バージョンのを読み込ませるようにする

サイトにちょっとした気の利いた動きを出そうと思ったら Jquery ですね。
WordPress内にも 標準でJquery を持っています。(wp-includes内)
プラグインなどはこちらの標準Jquery を呼び出して使用しているものが多いです。Contact form 7もそのひとつ。
ただ、ここで呼び出されるJqueryのバージョンは1.12.4(2019.2.25現在)。
古いですね。

最新のJqueryプラグインを使っていたりして新しいバージョンのJqueryを参照してしまっているサイトの場合、Contact form 7を使った問い合わせページでコンフリクトが起きます。Contact form 7が標準の(古い)Jqueryを勝手に呼び出してしまっているからです。場合によっては、他のページでは動いていたコンテンツが問い合わせページでは動かなくなる、ということもありえます。
そこで、Contact form 7ではJqueryを読み込ませないようにすることで、コンフリクトを防止することができます。

function.php に以下を記述します。

add_action('wp_enqueue_scripts', 'my_enqueue_scripts');
function my_enqueue_scripts() {
    wp_deregister_script('jquery');
}

これでJqueryは呼び出されなくなり、コンフリクトはなくなります。
ただ、今度はcontact form 7がうまく動かなくなるかもしれません。
 
そこで、もう一歩考慮を進めて、それならhtmlに埋め込んでいるJquery参照記述を削除し、WordPress側の標準にしてしまう方法もあります。
function.php に以下を記述します。

add_action('wp_enqueue_scripts', 'my_enqueue_scripts');
function my_enqueue_scripts() {
    wp_deregister_script('jquery');
    wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js', array(), '3.3.1');
}

これでContact form 7などJquery参照を必要とするプラグインがwp-includesにある古いJqueryを呼び出すことはなくなり、代わりにjquery ver3.3.1を読み込んでくれるようになります。
 
 
同様に、WordPress標準のJqueryプラグインではなく別バージョンのプラグインを定義することができます。
imagesloadedの場合なら function.php に以下のように記述しましょう。

function imagesloaded_scripts_method() {
    wp_deregister_script('imagesloaded');
	wp_enqueue_script(
		'imagesloaded',
		get_template_directory_uri() . '/assets/js/imagesloaded.pkgd.min.js',
		array( 'jquery' )
	);
}
add_action( 'wp_enqueue_scripts', 'imagesloaded_scripts_method' );

WordPress本体のバージョンアップなどで Jquery や Jqueryプラグインがアップグレードされると動かなくなる可能性のあるスクリプトを書いてたりする場合は、この方法で対応できますね。


関連するWordPressカスタマイズ事例