コンテンツへスキップ

トップへ戻るボタンと目次をプラグインなしで実装

トップへ戻るボタンと目次の自作

プラグインを使わなくても’toTop’や’Table of Contents’なら比較的短時間で設置できます。サイトが重くならないよう手動で施策しましたので備忘録としてアップします。

TOCを開く

Originale Table of Contents

サイト作成や運営のためのお約束プラグイン、いろいろあります。しかし気を抜くとあっという間にその数が増え、プラグイン同士の小競り合いも始まり、サイトスピードは遅くなる一方。事態改善のためにと、更なるプラグイン導入…。

こうしたスパイラルに陥ってしまうと二進も三進もいかなくなります。未然に防ぐには、簡単な機能は自分でこしらえるほうが賢明です。

トップへ戻る の設置

ページトップへのリンク設置は、大きく分けて2つの作業があります。

  1. リンクボタン作成
    • クリックの対象となるボタンの作成と配置
  2. jQueryによるスクリプト作成
    • クリックに伴う、スムーススクロールとフェードインアウトのセッティング

まずは、footer.php内、</body>直前に、下記のコードを入れました。a href=”#”については、フラグメントは空ですが、”#”もしくは”#top”であれば、現在のページの先頭にリンクするというHTMLの仕様に沿ったものです。

img src=”･･･”の中身は、Font Awesome IconのSVGをダウンロードし、pngに変換後、アップロードしたものです。CDNから読み込むとサイトが重くなりますので、当サイトでは不使用です。

<a href="#" class="page_top"><img src="・・・" alt="to-page-top" title="・・・"></a>

リンクボタンのCSSファイルと適用後の配置画像は、下図のとおりです。デバイスによってフッターのCopyright © Originale All Rights Reserved.がボタンと一部被ってしまうため、toTOPボタンのopacityは、’.5’にしてあります。

.page_top {
position:fixed;
z-index:100;
bottom:20px;
right:20px;
width: 60px;
height: 60px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
opacity:.5;
color:#fff;
font-size:25px;
text-decoration:none;
background:#333;
text-align: center;
display: grid;
  place-items: center;	
}
トップへ戻るボタン

2.ファイルの設置

スムーススクロールとフェードインアウトには、以下のファイルを使いました。WordPressにデフォルトで読み込まれているjQuery ver=3.6.1で作動します。

jQuery(function () {
        var pageTop = jQuery('.page_top');
        pageTop.hide();
        jQuery(window).scroll(function () {
            if (jQuery(this).scrollTop() > 600) {
                pageTop.fadeIn()
            } else {
                pageTop.fadeOut()
            }
        });
        pageTop.click(function () {
            jQuery('body, html').animate({
                scrollTop: 0
            }, 1500, 'swing');
            return false;
        })
    });

Table of Contents の
設置

では続いて、Table of Contentsの作成に入ります。作業内容は大きく分けて4つです。

  1. 目次の作成
    • WordPress にデフォルトで用意されている「リスト」を使い、目次を作成。その際、H3,H4…に関してはインデントさせ、包含関係を明示。
  2. アンカーポイントの作成
    • 目次を構成する各タイトルからのリンク先となるアンカーポイントを作成。H2,H3,H4…等の見出し作成時には、編集画面右側の「高度な設定」の’V’ボタンを押下し「HTMLアンカー」欄にアンカー名を入力。
  3. アンカーリンクの作成
    • 1.目次の作成　で作成したリスト内のタイトルを編集してリンク作成。
  4. ファイルの作成と設置
    • 目次のタイトルをクリックするとスムーススクロールし、固定ヘッダーに被らない位置でストップするようにセッティング
    • トラブル発生を回避するように施策

1.ブロックエディタ （リスト）による目次の作成

目次を構成する個々の見出しは、ブロックエディタのリストを使うと簡単に作成できます。下図にあるとおり、リスト項目として各タイトルを作成し、リストのインデント機能を使って適宜字下げし、包含関係を持たせます。因みに、H2タイトルは番号、H3タイトル以降はビュレットで識別するようにしてあります。

ブロックエディタリスト

2.アンカーポイントの作成

作成した見出し（下図はH2）のテキスト内にカーソルを置き、編集画面右側の「高度な設定」’V’を押下して、’HTMLアンカー’ボックスにアンカー名を入力します。サンプルでは’back-to-top’と入力してあります。

アンカーポイントの作成

再びリストで作成した目次に戻り、該当するタイトルをクリックし、リンクボタンを押下します。すると下図のような設定ボックスが現れますので、TEXTには目次名を、URLには＃に続きアンカー名を入力し、キーボードのEnterキーを押下します。

アンカーリンクが設定され、以後、各目次タイトルをクリックするとリンク先に一気に飛びます。

アンカーリンクの作成

4.ファイル作成と設置

以下のファイル作成と設置方法は、2023年3月1日現在、他のファイルと差し替えています。
詳しい情報は、投稿記事：固定ヘッダー設置サイトでページ内外アンカーリンクを上手くコントロールする（別タブで開きます。）に纏めてありますので、よろしければご確認ください。

ファイル作成時の留意点-1

当サイトのように、’ position:fixed ‘によって固定ヘッダーを設定している場合、スクロール時、見出し（H2,H3,H4…）が固定ヘッダーの裏側に隠れてしまいます。

ヘッダーの高さ分、下方にオフセットする方法は様々ですが、ヘッダーの高さがデバイスによって変化する点を勘案し、ファイル内にて調整することにしました。

以下のファイルを使用しました。

jQuery(function(){
    jQuery('a[href^="#"]').click(function() {
      var adjust = jQuery('#header-grid').height();
      var speed = 800;
       var href= jQuery(this).attr("href");
       var target = jQuery(href == "#" || href == "" ? 'html' : href);
       var position = target.offset().top - adjust;
       jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
       return false;
    });
 });

上図3行目に、var adjust = jQuery(‘#header-grid’).heights();　とありますが、この、#header-gridは、固定ヘッダーが持つID名です。

(‘#header-grid’).height()とは、固定ヘッダーの高さを指します。

var adjust = jQuery(‘#header-grid’).height();によって、

固定ヘッダーの高さをデバイスに応じて柔軟に取得し、変数 adjust内に入れてくれます。

7行目の、var position = target.offset().top – adjust;で、

クリック時、固定ヘッダーの高さ分を差し引いてスクロールするよう指定してあります。

固定ヘッダーと被らせない施策には、この方法が一番シンプルです。

ファイル作成時の留意点-2

ところで、上述のスムーススクロール用のファイルですが、このままでは当サイトで弊害が生じます。固定ヘッダー右側に配置されているルーペアイコン（検索ボタン）ですが、クリックしても反応しなくなるのです。

その理由はスクリプト2行目の ‘a[href^=”#”]’ にあります。

aタグの属性が[・・・]内に指定されています。[href^=“#”]です。属性hrefと値”#”を、^=　で結んで記述しています。

^=“#”　の意味は、[・・・]内のhref属性の値で、#から始まる要素（前方一致）を選択するという意味です。

つまり、a[href^=“#”] と記述すると、aタグ[ ]内のhref属性で、 “#” で始まる要素がすべて取得されます。

実は、下図、マーカーで赤く塗られた部分にあるとおり、ルーペアイコン（検索ボタン）も、元々href=”#”を有しています。それで、#から始まる要素（前方一致）を選択する指定が適用され、ルーペアイコン（検索ボタン）本来の動きを失ってしまうのです。本来の検索用途に使用するには、フィルタしなければなりません。

検索ボタンのソース

下記2行目をご覧ください。.not(‘.nv-icon’).on(　を追記しています。上図のとおり ‘.nv-icon’ は、ルーペアイコン（検索ボタン）が持つクラス名で、この追記によって、’.nv-icon’というクラス名を持つルーペアイコン（検索ボタン）はフィルタされ、取得対象から外されるのです。

蛇足ですが、フィルタする要素は、カンマで区切れば、複数指定も可能です。

 jQuery(function(){
    jQuery('a[href^="#"]').not('.nv-icon').on('click',function() {
      var adjust = jQuery('#header-grid').height();
      var speed = 800;
       var href= jQuery(this).attr("href");
       var target = jQuery(href == "#" || href == "" ? 'html' : href);
       var position = target.offset().top - adjust;
       jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
       return false;
    });
 });

以上で、Table of Contentsの完成です。

TOC 開閉ボタン
について

目次を開く

アイコンをクリックするたびに、tocが開閉しますが、これもjQeryで作成してあります。今回はご紹介できませんが、後発の投稿で取り上げる予定です。初心者でも実現可能な開閉機能についてご紹介します。

お願い：この投稿は備忘録として作成されたもので、コード等の記述は当サイトの仕様に合わせてありますので、コピー等はお控えいただく方が賢明です。ご参考の折は、諸先輩方のサイト情報と比較考量の上、自己責任にてご活用ください。

to page top