お問い合わせはコチラから

【Easy Table of Contents】日本語見出しのスムーズスクロールが出来ない時の対処方法

サイト運営

Easy Table of ContentsはWordpressの目次プラグインとして有名な1つです。

Easy Table of Contentsプラグインは、あるバージョンから日本語見出しのアンカータグをuriencodeするように変更になりました。

こんな感じです。

<a class="ez-toc-link ez-toc-heading-16" href="#%e3%81%be%e3%81%a8%e3%82%81" title="まとめ">まとめ</a>

アンカータグを多言語化対応して意味のある内容にしたいのだと思いますが、この機能変更以降、日本語見出しの目次からのスムーズスクロールでjqueryがエラーになるようになりました。

もちろん原因はプラグイン内部の機能ではなく、テーマ、もしくは他のプラグインに原因があります。

この記事では、Easy Table of Contentsの日本語見出しジャンプでエラーになった時の対処方法をまとめておきます。

以下の記事は同様の原因だと思います。

Easy Table of Contentsプラグインの不具合なの?

エラーの発生個所はEasy Table of Contentsプラグインではありません。

プラグイン以外のスムーズスクロール等の機能でアンカーを参照する時にエラーが起きました。具体的には、もともとあったテーマ側のスムーズスクロール機能でエラーになっていました。

アンカージャンプでエラーが起きる原因

エラーになったテーマ側の記述は以下の部分です。

container = $(this.hash.replace(/\//g, "")

thisにハッシュ(アンカータグ)が入ってきますが、それをjqueryに渡すと以下のエラーになります。

Uncaught Error: Syntax error, unrecognized expression:%e3%81%be%e3%81%a8%e3%82%81

uriencodeされた『%なんちゃら』が曲者で、jqueryセレクタとしては特殊文字の一つ(%)なので、セレクタに使用する時に特殊文字をエスケープしていない場合、簡単にエラーになります。

The following characters have a special meaning in CSS: !"#$%&'()*+,-./:;<=>?@[\]^`{|}, and ~

プラグインのバージョンアップ前は、アンカーに特殊文字が含まれていなかったのに、バージョンアップ後に特殊文字が含まれるようになったことで今回のエラーと相成りました。

jQueryのエラーの修正方法

原因は単純なので、修正方法は特殊文字を追加でエスケープすればいいです。

%を\%に置き換えます。

//	container = $('this.hash.replace(/\//g, "")');
   	container = $(this.hash.replace(/\//g, "").replace(/\%/g,"\\\%"));

Affinger5でもEasy Table of Contentsのアンカーでエラーが出る

Affinger5のsmoothscroll.jsでもセレクタのエラーが出ます。

hrefに入ってきたhashの特殊文字をエスケープしていないのが原因です。

            var href = $a.attr('href');
            var $target = $(href === '#' || href === '' ? 'html' : href);

以下のように直したら問題ないです。

            var href = $a.attr('href').replace(/\%/g,"\\\%");//変更
            var $target = $(href === '#' || href === '' ? 'html' : href);

(おススメ)Easy Table of Contentsのアンカーを連番に変更する

Easy Table of Contentsのアンカーをuriencodeされたものではなく、単純な文字列に変更すればjavascriptの変なエラーも出なくなります。

uriencodeをやめるとアンカータグが日本語じゃなくなりますが、日本語見出しのアンカーをそのまま使う必要はないので、jsを修正しなくてよいこの方法が一番良いと思います。

add_filter('ez_toc_url_anchor_target', 'toc_anchor_change', 10, 2);

$my_toc_no = 0;

function toc_anchor_change($return, $heading ) {
	global $my_toc_no;
	$my_toc_no = $my_toc_no + 1;
	return "toc___".$my_toc_no;
}

まとめ

シンプルなテーマを使っていれば、起きないエラーだと思いますが、スムーズスクロールが独自に実装されているテーマやプラグインでは、今回のような問題が起きる可能性はあります。

もしjQueryのエラーが出てしまったら、テーマ側のjsを今回のように修正するしかないです。

プラグインが生成するハッシュタグ自体を変更すれば対応できますが、バージョンアップしてアンカータグをuriencodeした旨味がなくなってしまいます。

この記事が気に入ったら フォローしよう
最新情報をお届けします。
この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

オランダで生きていく
タイトルとURLをコピーしました