みなさまお疲れ様です。

ワードプレスの便利なプラグイン「Table of Contents Plus」はご存知ですか？

これは記事の目次を自動生成してくれる素敵なプラグインです。

SEOのために見出しをわけて、たくさんの文字数で記事を書くと、
どんな内容の記事なのか目次があったほうが読む方にとって便利ですよね。

目次は「h2」など見出しタグをページ内リンクにできますし、
検索キーワードによってはディスクリプションにそのままリンク表示されますので、
誘導に効果ありそうですね～。

「Table of Contents Plus」カスタマイズ – 目次リンクをスクロールしても追尾表示したい

「Table of Contents Plus」では、目次リンクを記事内に表示する位置を設定できます。

自分が設定する場合は、最初の「h2」の直前に表示する設定を利用しています。

さて、せっかく便利な目次リンクが生成されるので、
これをスクロールしてもついてくるようにカスタマイズしたいとおもいます。

たとえば、目次リンクをスクロールで通り過ぎたあたりで、
いつでも目次リンクを表示・非表示できるようなリンクボタンを出す…。

これができれば、ページの途中で他の項目を読みたいなあ～、となった時に便利そうです。

jQueryを書き足してなんとかなりそう

ごちゃごちゃしてますが、図のような感じの要素に対して、jQueryで制御すればいけそうです。

jQuery使いやすくて便利です～。

目次リンクの位置・高さを取得、画面スクロールでjs実行！

ひとまず試したい方はコピペしてくださいませ。

js

$(function(){
    //#toc_containerをスクロール位置で固定表示に変える関連
    var $toc_container = $("#toc_container"); /* 目次コンテンツ(#toc_container) */
    var $toc_container_nexts = $("#toc_container").next(); /* 目次コンテンツの次にあるもの */
    var toccon_offset_top = $("#toc_container").offset().top; /* #toc_containerまでの高さ */
    var toccon_hight = $("#toc_container").height(); /* #toc_container自体の高さ */
    var toccon_marbott = parseInt($("#toc_container").css("margin-bottom"), 10); /* #toc_containerのmargin-bottom */
    var toccon_nexts_marbott = parseInt($("#toc_container").next().css("margin-top"), 10); /* 目次コンテンツの次にあるもののmargin-top */
    var toccon_offset_top_hight = toccon_offset_top + toccon_hight; /* #toc_containerの底までの高さ */
    var toccon_nexts_plus = toccon_hight + toccon_marbott + toccon_nexts_marbott; /* 消えた目次コンテンツ分 */
    $toc_container.after('<div id="bt_pageindex" style="display:none;">目次</div>') /* 表示・非表示ボタン追加 */
    var $bt_pageindex = $('#bt_pageindex'); /* 表示・非表示ボタン */
    $(window).scroll(function () {
        if ($(this).scrollTop() > toccon_offset_top_hight) {
            $toc_container_nexts.css("margin-top", toccon_nexts_plus); /* #toc_containerの次の要素にmargin-topでtoc_container */
            $toc_container.addClass("fixed_toccon"); /* #toc_containerに固定変形スタイル付与 */
            $bt_pageindex.css("display" , "block"); /* 表示・非表示ボタン表示 */
        }else{
            $toc_container_nexts.css("margin-top","inherit"); /* #toc_containerの次の要素のmargin-topスタイルを削除 */
            $toc_container.removeClass("fixed_toccon"); /* #toc_containerの固定変形スタイルを削除 */
            $bt_pageindex.css("display" , "none"); /* 表示・非表示ボタン非表示 */
        }
        $toc_container.removeClass("slideon");/* スクロールで目次を非表示 */
    });
    $bt_pageindex.on("click" , function() {
        $toc_container.toggleClass("slideon");/* 表示・非表示ボタンと目次内のリンクをクリックするとスライドが閉じる */
    });
});

「Table of Contents Plus」が生成する目次リンクの位置、
目次リンク自体の高さ、これらが記事によってまちまちなので、

記事ごとに高さを取得するよ～！

画面のスクロール量でjsを実行するよ～！

この2点がポイントです。

あとは、クラスを付けたりはずしたりします。
見た目を変えるのはCSSにおまかせですね～。

css

/* デフォルトの表示・非表示機能は隠す */
#toc_container span.toc_toggle{
    display:none;
}
/* 目次コンテンツ(#toc_container)を固定表示にして隠す */
#toc_container.fixed_toccon{
    position: fixed;
    bottom: 100%;
    z-index: 100;
    left: 0;
    background: rgba(255,255,255,0.9);
    width: 90%;
    margin-left: 5%;
}
/* 目次コンテンツ(#toc_container)を表示するボタン */
#bt_pageindex{
    position: fixed;
    bottom: 0;
    left: 0;
    background: #555;
    padding: 0.5em;
    color: #fff;
    cursor: pointer;
    border-radius: 0 5px 0 0;
    z-index: 1;
}
/* 目次コンテンツ(#toc_container)を表示 */
#toc_container.slideon{
    bottom: 2em;
}
/* スマホ画面のサイズ内でスクロール */
#toc_container.slideon .toc_list{
    overflow: hidden;
    max-height: 350px;
    overflow-y: scroll;
}

「Table of Contents Plus」カスタマイズ – まとめ

簡単かな、と思ったら意外につまずいたので、ほどほどでやめました。

レイアウト調整やらがしっくりいかないので、「.clone()」で目次リンクを複製しようかとも思いました。
しかし、重複をさけるためidを変えるとスタイルも全て設定しなければならず、チョイ足し記述でなくなってくるので断念…。

他にもあちこち断念してます。

ご利用のワードプレスのテーマの状況でも上手くいかない場合もあるかもしれません。
適宜御調整願いますm(_ _ )m

スクロール後に、CSSのposition:fixed;などで固定。
ここまでできれば、あとはどんな風にでもやりたい放題です。

加えて、今どのあたりを読んでいるのか？
目次をハイライトする機能なども追加出来たら、良いですね～。

目次リンク先の見出しには、idがふられるので、
そのidを利用するといけそうです。

だれか頼みます(他人まかせ)。

ではでは～。

関連リンク