【wordpress/cocoon】jQueryの「$ is not defined」エラーを回避する方法

CocoonでjQueryのエラーを回避CMS
Photo by Markus Spiske on Unsplash

WordPress / Cocoon で jQuery でエラーが出ないようにする技を Sagasoon.

前回、WordPressのCocoonテーマを使っている人向けに書いた 下記の記事について、ウィジェットの箇所を詳しく記載していきます。

【wordpress/cocoonカスタマイズ】Javascriptを触ろうとしたとき、さてどこを触ったらいいか
wordpressを使っていて javascript 部分を触りたくなった時ありますか? Cocoonの便利なテーマを使っている際、そんなことを思ったら、ぜひとも挑戦してみてください。 ウィジェット上で javascript を使うテクニックなどもご紹介いたします。

wordpress上、jQueryでコードを書いたら「$ is not defined」のようなエラーが出てきた方は、特にみて行ってください。

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

前回、ウィジェットに動きを持たたい場合、配置したカスタム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() ); }

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

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

まとめ

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

ご参考になれば!

WordPress関連の記事
WordPressに纏わる記事一覧です。インストール・バックアップ、プラグインの紹介や作成、Javascriptのお話や、その他 WordPressサイトの管理方法。はたまたSEO対策まで記載しています。
探太郎

今すぐ探そう Sagasoon の記事を書いてます。探太郎です。
ご飯の時、無口になりますが、機嫌が悪いんじゃなくて食べるのに忙しいだけですー。
あと、なんか記事のネタないかなーと探してるからかもしれませんー。
よろしくお願いします。

探太郎をフォローする
CMS wordpress Cocoon IT
探太郎をフォローする
SAGASOON

コメント

タイトルとURLをコピーしました