ビジネス向けWEBサイトをつくる

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

本ページはプロモーションが含まれています

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

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

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

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

目次プラグインによって発生した不具合
  • カルーセルが非表示になる
  • グローバルナビゲーションのプルダウンの位置がずれる
  • 検索のフォームが表示できない
  • ページトップに戻るボタンが表示されない

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

lin

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

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

ブロックエディタ対応
カスタム投稿タイプ「お知らせ」「サービス(事業案内)」
SEO機能(metaタグ、OGP、高速化)
他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

アンカーリンク時の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に影響を与えません。

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

レスポンシブ対応
カスタム投稿タイプ「お知らせ」「企業情報」「サービス」「プロジェクト」
高速化設定(絵文字読み込み・コード最適化)
他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

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

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

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

WordPressの目次プラグイン
  • Table of Contents Plus
  • Rich Table of Contents
  • Easy Table of Contents

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

Table of Contents Plusの場合

Table of Contents Plusの不具合
  • カルーセルが非表示になる
  • グローバルナビゲーションのプルダウンの位置がずれる
  • 検索のフォームが表示できない
  • ページトップに戻るボタンが表示されない

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

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

Rich Table of Contentsの場合

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の場合

Easy Table of Contentsの不具合
  • カルーセルが非表示になる
  • グローバルナビゲーションのプルダウンの位置がずれる
  • ページトップに戻るボタンが表示されない

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

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

ブロックエディタ対応
カスタム投稿タイプ「お知らせ」「サービス(事業案内)」
SEO機能(metaタグ、OGP、高速化)
他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

事象の対策を決定する

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

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

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

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

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

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

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

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

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

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

このページでは、リロードのみの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テーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「GENESIS」の詳細をTCDのページで見る

ブロックエディタ対応
カスタム投稿タイプ「お知らせ」「サービス(事業案内)」
SEO機能(metaタグ、OGP、高速化)
他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

プロモーション

戦略的WEBサイト構築方法

戦略的WEBサイト構築方法
WEB担当者にオススメ

WEBサイトをビジネス戦略のPDCAサイクルに組み込むための考え方と、サイトを内製化する方法を分かりやすく解説します。

コメントを残す

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

3 × two =

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

ABOUT US
lin記事を書いている人
はじめまして。「lin」です。クリエイティブディレクター兼グラフィックデザイナーとして活動しています。おかげさまで、キャリア25年以上になりました。「Theme3」は、私が企画デザイン事務所スラッシュディーの仕事で得たノウハウを公開します。
※以下は私が活動している企業情報にリンクしています。