【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の記述を削除しましょ〜。