[wp]追従しつつ閲覧中の見出しをハイライトする目次を設置 Easy Table of Contents

Qiitaとかでよく見るやつ。

情報収集

組み方とかプラグインの鉄板があるようなないようなって感じなのでまずはそれから。

目次は「TOC」「Table of Contents」とかで検索すれば該当する。アルファベットまみれだと外国の記事ばっかりヒットするから日本語を混ぜつつ、「ハイライト」「追従」とか入れると目当てのものに近づける。

動作イメージ

WPの記事内でスクロールに追従して見出しをハイライトする目次がほしい。

追従自体はjsで頑張って組み込んでもいいし、position:fixed;とかでも、最近はposition:sticky;もよく見かけるようになってきた。

position: sticky;の仕組みや実際の使い方をやさしく解説
position: sticky;とは、ヘッダやナビゲーション、サイドバーなど指定した要素をスクロールした際にぴたっと指定した位置に貼り付ける(スティッキー)便利なプロパティです。 position:

ということで追従機能をプラグインに求める必要はない。

プラグイン

脱jQueryとかどうのこうのでスタンドアローンで評価も高いっぽいライブラリがあるんだけど、jQuery使ってるしなとか、解説が英語だったりで時間かかっちゃうなとかで、jQueryプラグインは諦めてwpのプラグインを使うことにした。多分これもjQuery何じゃないですかね、wpはそもそもjQueryが突っ込まれてるんで脱しなくてもいいよね。

ということで「Easy Table of Contents」。

やっていく

そもそもの、「Easy Table of Contents」自体の機能として。

  • 表示位置によって項目をハイライトする。
  • スクロールに追従しない。
  • ウィジェットに突っ込める。

ということで以下の手順になる。

  1. WPテーマに追従するウィジェット枠を作る。
  2. プラグインをインストールする。
  3. ウィジェットにプラグインを追加する。

あとはデザインを好みのものに変えるとかすればおしまい。
簡単ですね。

デザインについて

classが付きまくってるんでカスタマイズはちょっと手間。

デザインを変えたい場合は管理画面でプラグインのCSSを無効化できるので、まあ好き好きだと思うけど、0から組んだほうが楽だと思う。

functions.phpの注意点

もしもこれを書いてたら削除する。

/* 同梱jQuery削除 */
function delete_jquery() {
    if (!is_admin()) {
      wp_deregister_script('jquery');
    }
  }
  add_action('init', 'delete_jquery');

ライブラリを自分で設置する場合に勝手に挿入されるやつを弾く内容だけど、これを書くとプラグインのjsも読まれなくなる。だから消す。

最近のアップデートで標準搭載ライブラリは3.5.1になったらしい。なくていいですね。

スムーススクロールについて

このプラグインにはスムーススクロール機能も搭載されてるんでいいですね。

一つ文句をつけるなら、リンクをクリックするとURLにハッシュタグがつく。動作としては間違ってないけど個人的に好きじゃないんで困る。

既にスムーススクロールを使用している場合

別途スムーススクロールを用意している場合、このプラグインのスムーススクロールとケンカする場合がある。ケンカした。

めんどいので解決方法だけ。

自作スムーススクロールからプラグインのリンクを除外する。つまりプラグインのスクロールだけはプラグイン側のスクロール機能を使う。

除外はこんな感じで。

$(function(){
    //ページ内スクロール
    jQuery('a[href^="#"]').not('a.ez-toc-link').click(function() {
        var speed = 500;
        var href= jQuery(this).attr("href");
        var target = jQuery(href === "#" || href === "" ? 'html' : href);
        var position = target.offset().top;
        jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
        return false;
    });
});

<a>にclassがついてて助かった。

コメント

タイトルとURLをコピーしました