ウィジェットに入れたいとき（少し高度）

前回、ウィジェットに動きを持たたい場合、配置したカスタムHTML上でjQueryは書かないでおきましょうと書きました。
今回は、それを否定します。
jQueryを書けるようにする技です。

後、一度、ウィジェットにjQueryでコードを書いた方で、「$ is not defined」などのエラーが出た方は、これをお試しください。

エラーが出る方は、たいてい jQueryのpluginを、フッターで読み込ませてる方でしょう。もし、ヘッダーで読み込ませているのに動かないという方は、この方法をやっても動きません。
そうゆう方は、wp_head でしっかり jQuery をロードする設定をするところから初めてみてください。その後、ご自身のjQueryのソースを修正しましょう。

ウィジェットに jQuery を入れたいときは、少し小細工をした方が良いです。

ウィジェットに「やりたいこと」の本体を入れる（関数で定義）
外観に「やりたいこと」を呼ぶ（関数を呼び出す）

の手順でやった方が良いかと。

まず、ウィジェットにカスタムHtmlを追加し、下記のようなjavascriptを作成します。

<div id="custom_panel"></div>
<script type="text/javascript">
var widget01 = function() {
 jQuery(document).ready(function($){
  // ↓ javascriptで実施したいことの例
  $("#custom_panel").text("test");
 });
}
if (typeof wordpressBootFunc == 'undefined') { wordpressBootFunc=[]; }
wordpressBootFunc.push(widget01);
</script>

id=”custom_panel”で定義された DIV のタグに、test という文字を入れるだけのサンプルです。

そして、今度は、「外観」から「テーマエディター」を選択し、テーマファイルの「javascript.js」を広げて、ここにこのコードを追加しましょう。

if ( typeof wordpressBootFunc !== 'undefined' ) { wordpressBootFunc.forEach( f => f() ); }

先ほどウィジェット上で定義した関数を呼び出すだけのコードです。

ウィジェットを追加する（複数設置する）場合、一度、外観のところにこのコードを記載してしまえば、２度目以降は書かなくてOKです

まとめ

少し回りくどいことをしてるように見えるかもです。
jQueryを使う場合、ウィジェット上でjQueryのscriptを直接書いてしまうと「$ is not defined」のようなエラーが起きやすいので、わざとこんな感じに書いてます。
もちろん、ウィジェットにscriptを書かずに「外観」のjavascript.js上で一気に書いてもOKですよ！
私の場合ですが、それだと「やりたいこと」と「やりたい場所」が、離れた場所に書かないといけなくなるので、後でわかりにくいかなと思った次第。

ご参考になれば！