目次プラグインのアンカーリンク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に影響を与えません。

「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「SOLARIS」のPRを見る

オススメの理由は、以下のページをチェックしてください。

関連記事 企業のWEB担当者にオススメ、ビジネス戦略のPDCAを回すコーポレートサイトの作り方

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

しかし、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の場合

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

「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「SOLARIS」のPRを見る

オススメの理由は、以下のページをチェックしてください。

関連記事 企業のWEB担当者にオススメ、ビジネス戦略のPDCAを回すコーポレートサイトの作り方

事象の対策を決定する

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

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

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

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

「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/

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

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

プロモーション