目次プラグインのアンカーリンクURLでJavaScriptが動かない？

私の管理しているサイトには、少し古いWordPressテーマを使用しているものもあります。

そんな、サイトでは珍しい事象が起こることがあります。

今回経験したのは、ブログでは定番の目次プラグイン導入でJavaScriptが動かないという事象でした。（※投稿ページは問題無いが固定ページやカスタム投稿で不具合が発生する）

目次プラグインを導入した際に、以下の不具合が確認されました。

これらを調査してみると、いずれもJavaScriptに関連するものだと分かりました。

このページではURLを変えないアンカーリンク、目次プラグインの種類、アンカーリンクのURL補正を紹介します。

アンカーリンク時のURLについて

ページ内リンク（アンカーリンク）は目次のようなリンクリストからページの該当の部分にジャンプさせる際に使用します。

ページのURLに「#」を付加して、URLを変えてリンクします。
「#」以降にリンク先のIDを指定します。

例えば、以下のようにリンクします。

<a href="https://www.theme3.net/parent-theme-update/#i-2">アンカーリンク</a>

ただし、アンカーリンクは必ずURLが変わってしまうというものではありません。

URLを変えずにページ内リンクを行うこともできます。

URLを変えないアンカーリンク

ちなみに私はスクラッチでサイトを作成する場合、以下のようなJavaScriptを使っています。

//ページ内リンク
function anchorlink(targetID){
  if( !document.getElementById ) {return true;}
  var step=10;
  var max=50;
  var accel=100;
  var interval=5;
  var current_y = document.body.scrollTop  || document.documentElement.scrollTop;
  var element=document.getElementById(targetID);
  if (!element){return true;}
  var target_y = 0;
  for (i = element;i.offsetParent;i=i.offsetParent ){
    target_y += i.offsetTop;
  }
  var count=0;
  if ( current_y > target_y ){ step = -(step); accel = -(accel);}
  var timerid = setInterval( function(){
    if (step<max) step += (count*accel);
    if ( Math.abs(current_y-target_y) < Math.abs(step) ){
      window.scrollTo((document.body.scrollTop  || document.documentElement.scrollTop),target_y);
      clearInterval(timerid);
      return false;
    }else{
      window.scrollBy(0,step);
      current_y += step;
      count++;
    }
  },interval);
  return false;
}

onclickを使って、該当のidの位置にジャンプさせています。

<!-- リンク部分　-->
<a href="#" onclick="return anchorlink('a01');">アンカーリンク</a>

<!--　リンク先　-->
<div class="wrap" id="a01">
</div>

このようなJavaScriptを使用すれば、URLに影響を与えません。

目次プラグインの導入と事象

しかし、WordPressの定番目次プラグインではURLが変わってしまいました。

以下の3つを試してみました。

それぞれ、どのような不具合が起きたかまとめてみます。

Table of Contents Plusの場合

これらはプラグインで目次を設置した固定ページやカスタム投稿のページで無条件で起こります。

URLとは全く無関係で、「Table of Contents Plus」の目次を設置したことが原因です。

Rich Table of Contentsの場合

「Rich Table of Contents」の目次は何の障害もありませんでした。

しかし、サイトのデザインの問題で、どうしてもリンク位置のズレを補正することができませんでした。

グローバルナビにposition:fixed;を指定していることと、見出しの左横にボーダーを入れていることがあだになりました。

CSSで補正するにしても全てのブラウザーに対応することができませんでした。

通常だと以下のCSSでリンク先位置のズレをなくすことができます。

:target::before {
	    content:"";
	    display:block;
	    height: 120px;
	    margin-top: -120px;
}

※120pxがグローバルナビの高さ

Easy Table of Contentsの場合

この事象が発生するのは、リロードした場合とブラウザー移動ボタンで移動した場合のみです。

事象の対策を決定する

以上のように、それぞれの目次プラグインによって、事象が異なります。

この様な場合が最もメンドウです。

根本的な原因がなんなのか特定することが難しいです。

そこで、対応できそうなもので選ぶことにしました。

「Rich Table of Contents」が近い感じがしました。

しかし、全てのブラウザーで対応することと、デザイン変更を余儀なくされることが、障害となります。

結果、「Easy Table of Contents」を選び、URLからアンカーを除去することにしました。

URLからアンカーを除去する

アンカーリンク時のURLの変更はJavaScriptで行います。

以下の記事がストライクで参考になりました。

teratail.com

ページ内リンクをリロードした時にリセットしたいです。

cont03でリロードした時に、 http://test/#cont03のURLのままリロードされます。 http://test/のよう...

このページでは、リロードのみのURLを変更しています。

しかし、今回の事象ではページ移動も対象にします。

そこで、以下のJavaScriptで対策します。

/*  ページ内リンクのアドレスを削除する
/* ------------------------------------ */	
if(performance.navigation.type != 0 && location.hash){
	location.href = location.href.replace(/#.*/, "");
}

通常のページ遷移以外で「#」付きのURLを変更しています。

このコードを子テーマで読み込ませます。

結果

以上、「Easy Table of Contents」プラグインの利用とJavaScriptの組込によって、問題無く目次を表示することができました。

リロードとページバック時はURLが変わります。

<!-- ページ内リンク後のURL　-->
https://www.theme3.net/parent-theme-update/#i-2

<!-- リロードやページバック後のURL　-->
https://www.theme3.net/parent-theme-update/

これで、全ての不具合はなくなります。

根本的に何が起こっているのか。
それを解決するにはいたっていません。

【PR】「Theme3」では、ブログ用のWordPressテーマに、人気と高機能を誇る「 SWELL 」をオススメしています。

「SWELL」の特徴を見る
「SWELL」の購入はこちら

・ブロックエディター完全対応
・高速化機能を標準搭載
・100%GPL
・企業サイトの制作も可能 他、機能多数。

プロモーション