jqueryをWordpressで動かす上でカプセル化がうまくいきません。

Question

###前提・実現したいこと
ワードプレスでオリジナルテーマを作成しています。
ワードプレスのJqueryを用いるため
header.php内の<?php wp_head(); ?>より下に
scriptを記述しているのですが、
カプセル化がうまくいっていないようで
chromeのデベロッパーツールでは
「TypeError:$ is not a function」とエラーが出てしまいます。
他のJSはちゃんと動いているのできっとカプセル化に問題が
あるとおもうのですが、いまいちわかりません。
ご助言お願い致します。

###該当のソースコード

<script >
jQuery(window).on('load resize', function($){
var h = $('.relative img').height();
$('.relative').css('height', h-0.5);
});
</script>

###補足情報(言語/FW/ツール等のバージョンなど)
wordpress 4.7.2
PHP 7

Answer 1

jQuery( function( $ ) {
	jQuery( window ).on( 'load resize', function( event ) { // ここはイベントオブジェクトが入る
		var h = $( '.relative img' ).height();
		$( '.relative' ).css( 'height', h - 0.5 );
	} );
} );
```か
```JavaScript
( function( $ ) {
	jQuery( window ).on( 'load resize', function( event ) {
		var h = $( '.relative img' ).height();
		$( '.relative' ).css( 'height', h - 0.5 );
	} );
} )( jQuery );

Comments

[退会済みユーザー]

素早い回答ありがとうございます！！！
御蔭さまで解決しました。
大変助かりました。
初心者でお恥ずかしいのですがカプセル化が良くわからず・・・
下記合わせてお教えいただけるとありがたいです。
$(document).ready(function()から始まっているものは
jQuery(document).ready(function($)に変更でカプセル化できるのですが
これは.readyの場合だけなのでしょうか？

[kei344]

jQuery( function( $ ) {} ); は $(document).ready( function() {} ); の短縮形だったような気がします。

> .readyの場合だけなのでしょうか？
とりあえずそう考えてもらってもいいです。

回答に書いたとおり、「jQuery(window).on('load resize', function($){」の「$」には load/resize イベントのイベントオブジェクトが入ります。jQueryはつなげて書くことが出来るため、最初はわかりにくいかもしれませんが、「別の関数」を実行しているため意味が変わります。

[退会済みユーザー]

ありがとうございます。
なるほど短縮系なのですね、少しすっきりしました。
頂いたヒントを元にもう一度調べなおしてみますね！
本当にありがとうございます。迅速な回答感動しました。