WEB DESIGN

【WordPress】人気テーマ「JIN」のJSエラーの応急処置

WordPressテーマ「JIN」。

超有名アフィリエイターの方が開発に参加しているとのことで、ブロガーの方々がこぞって利用している大人気テーマです。

右も左もJINだらけです。すごい!

見やすくて良いテーマだな〜と思うのですが、仕事で使う機会があって触っていたところ、特定条件下でサイドバーの追尾ウィジットのせいでエラーが出ることを発見。

開発者さんに問い合わせフォームで報告しようかな〜と思いつつ、ひとまずは対処療法を試みてみましょう。

「JIN」のJSエラーの内容

それではまず、どういったエラーが出ているのか調べていきます。

発生の条件

  • サイドバー追尾【PC】エリアにウィジットを追加
  • 投稿テンプレートで1カラムを選択する

この2点が重なると発生します。

「この記事だけ、固定ページだけ1カラムにしたい」という場合もあると思うので、
このままだとあまりよろしくないかなと思います。

それではソースを見ていきましょう。

エラーの原因はfollowwidget.js

まず本体テーマのfunctions.phpを確認します。

followwidget.jsについての記述を検索。

上記のようになっています。

なるほど、sidebar-trackingのウィジットが有効な場合にfollowwidget.jsを読み込むようにif文が書いてあります。

であるからして、メインカラム、サイドバー、#widget-trackingは必ずあるものと想定されたjsの書き方です。

しかし、1カラムを選択するとテンプレート側でサイドバーを吐き出さないので、
「サイドバー追尾【PC】は有効だが、#widget-trackingは存在しない」という状況が生まれてしまいます。

そのため、変数wrapperが定義されておらず(undefind)、エラーになるわけです。

「JIN」のJSエラー解消方法

ここまでわかれば簡単ですね。

#widget-trackingがundefinedにならなければいいのです。

#widget-trackingが存在するかどうかを判定するように変更する

というわけで、followwidget.jsにif文を追加します。

変数main、side、wrapper、どれが無くてもまずそうなので、
まとめて書いてしまいましょう。

if(main.length && side.length && wrapper.length){
〜〜
}

mainが存在し、かつ、sideが存在し、かつ、wrapperが存在する

この場合だけその下が動くようにしておけば問題なしです。

上のスクショは途中までなので、閉じ}はソース見てここだというところに置いてください。

子テーマを使っている場合

「JIN」はまだ今年リリースされたばかりなので、アップデートも期待できます。

アップデートに備えてテーマ本体を触りたくない場合は、子テーマを使うことになります。
公式も推奨しています。

なのでfollowwidget.jsを子テーマ側にコピーして、上記のif文を追加。

そして子テーマのfunctions.phpで、子テーマのjsの読み込み&親テーマ側のfollowwidget.jsの読み込み停止を行います。

wp_dequeue_script関数で、これが親テーマのfunctions.phpで追加されたfollowwidget.jsを除外します。

これでエラー出なくなりました。

公式のほうで対応があればアップデートされると思うので、解消したら子テーマのfuncitons.phpの記述を削除しましょ〜。

ABOUT ME
ハギシリデザイン
バンドマン時代に独学で身につけたデザインスキルを活かし、異業種・未経験からデザイナーになりました。 新潟出身、埼玉在住。 現在は新宿のIT系企業で主にWordPressを用いたサイト制作を行ってます。

POSTED COMMENT

  1. socrakun より:

    こんにちは。

    私は今まさにこのJSエラーに悩まされており、ハギシリデザインさんの記事を参考にさせていただいています。

    しかし、私のコンソールに表示されているエラーは少し違っており、

    common.js?ver=4.9.8:97 Uncaught TypeError: Cannot read property ‘top’ of undefined
    at HTMLDocument. (common.js?ver=4.9.8:97)
    at i (jquery.min.js?ver=4.9.8:2)
    at Object.fireWith [as resolveWith] (jquery.min.js?ver=4.9.8:2)
    at Function.ready (jquery.min.js?ver=4.9.8:2)
    at HTMLDocument.K (jquery.min.js?ver=4.9.8:2)

    このように、ハギシリデザインさんのエラーでは「followwidget.js」となっている部分が、私のエラーでは「common.js」になっています。
    なので「common.js」に手を加える必要があるのはわかるのですが、問題の「common.js」を見てみたところ、エラーコードで指摘されいる97行目がありませんでした(追尾ウィジェットの部分がごっそりありませんでした)。

    Chromeで表示されているエラーが実際のコードに存在しないのは何故なのでしょうか。
    何か「common.js」に関してわかることがあれば教えていただきたいです。

    長文失礼しました。
    返答よろしくお願いします。

    • ハギシリデザイン より:

      socrakunさん
      コメントありがとうございます。

      エラーメッセージが違うのはバージョンの違いのせいかもしれないです。
      自分初期バージョンからアップデートしてないのですよ。
      ちなみに自分も/js/の中にcommon.jsがありますが、そこには追尾ウィジットの記載がありませんでした。

      さて、JINの公式サイトのサイドバーに掲載されているブログでも同じエラーがたくさん見つかりました。
      それらのブログにsocrakunさんと同じくcommon.jsでエラーを吐いているものがありました。
      https://tsugurism.jp/wordpress-jin-design/

      この方のブログの場合は、common.jsが
      /wp-content/themes/jin/js/common.js?ver=4.9.8
      というふうに/js/のディレクトリにあり、その中に追尾ウィジットの記載があるようです。

      開発者ツールのエラーメッセージのところクリックするとそのjsの中身が見られると思うのですが、
      そこでタブのあたりにマウスポインタを合わせるとパスが表示されるので、そこをご確認いただくのが良いかと思います。

      エラーメッセージが出ている以上は記述があるはずなので、
      例えば「子テーマにあるcommon.jsがエラーを吐いていたけど親テーマのほうを編集していた!」とかいうケアレスミスがあるかもしれません。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です