ページの目次をもっと使いやすくしたい！あなたは他のブログを観るとそうおもうことってないですか？
ブログ運営したての頃に、実装したくなるのが、目次を付けること。最初はこれで十分に思うんですが、最近は目次で飛んだ先からも基に戻りたいという思うようになりました。その方が、使い勝手が良いですから。
今回は、自分のブログに「目次へ戻る」を実装してみたので、ご紹介します。
注意
この記事はWordPressを用いたブログを作成している方向けの記事です
常識の新陳代謝ポイント
旧常識
新常識
こんな方におすすめ
- ブログのユーサビリティーを上げたい方
- 目次へ戻る機能をどうしても実装したい方
目次
テーマに備え付けの機能やプラグインを活用する方法
目次へ戻るの実装方法は色々あります。テーマによっては目次機能が備え付けのものや、追加購入できるプラグインで目次へ戻るが実装出来る場合があります。まずは、テーマに備え付けの機能を利用する方法をご紹介します。
Affinger5：「すごいもくじ（SUGOI MOKUJI）」を使う
Affinger5に導入が出来る「すごいもくじ（SUGOI MOKUJI）[PRO]」を使うコトで目次へ戻るが利用できるようです。
価格は5,980 円（税込）（2019/10/05時点）
時間＞金と考える方にとっては、良い買い物かもしれません。
個人的にはちょっとあこぎな価格設定に感じましたｗ
Cocoon：備え付けの目次機能を使う
Cocoonは目次の自動生成機能が備わったテーマで、この機能を活かして目次へ戻る機能を実装する方法が次の記事で紹介されていますね。
実際にこちらのサイトでは、目次へ戻るのリンクが随所に実装されていました。
JavaScriptで実装する方法と、PHPで実装する方法、テンプレートで実装する方法の３方法が記されています。
AMPやPageSpeed Insights対応を考えると、PHPで実装する方法（function.php）がよさそうですね。
SANGO：ずっといる目次
SANGOも目次の自動生成機能が備わったテーマのようです。
次の記事でお洒落なユーザーインターフェースで、目次へ戻る機能が実装されています。
すごくお洒落で、真似したくなるデザインです。
自分のサイトに実装していない理由は何故だろう？ってちょっと疑問になりました。
独自の実装方法
目次プラグインの選定
テーマに目次の自動生成機能が含まれていない場合、一から作るのはしんどいです。まずは、目次を作成出来るプラグインを選定していきます。
不採用：Easy Table of Contents
上記で紹介されているプラグインやテーマを使っていない人たちが目次を造る際に利用しているプラグインの大半ってEasy Table of Contentsじゃないかと思います。
画像：Wordpress.orgのプラグイン検索画面
このプラグインでも魔改造すれば、目次へ戻る機能の実装はできそうでしたが、SEO対策がちょっとめんどうでした。
画像：PageSpeed Insightsの分析結果
上の画像のように、PageSpeed Insightsでサイトのスピードを改善するときに、他のプラグインと上手くかみ合わなくて、注意されるんです。
改善対応として、headに<link rel="preload"・・・>とか書けば消せるんですが個別対応がちょっと面倒でだったので不採用にしました。
不採用：Table of Contents Plus
「Easy Table of Contents」に並び称されるプラグインとして「Table of Contents Plus」があります。こちらですが、更新が4年間滞っており、WordPressのプラグインから除外されているようです。このプラグイン前提で「目次へ戻る」を実装されている方の記事を見かけたのですが、2019/10/06時点では無価値でした。↓の記事ですね。
採用：LuckyWP Table of Contents
「Easy Table of Contents」の評価が★4.5に対して、「LuckyWP Table of Contents」は★5。利用者数が10分の1位しかいない点が少し気になりましたがこちらを試してみる事にしました。
画像：Wordpress.orgのプラグイン検索画面
使用してみると設定も日本語できちんと表示されます。「Easy Table of Contents」で出来る事は大体設定が出来ます。
今回の「目次へ戻る」機能は、こちらのプラグインを実装していきます。
PC版の実装方法
「目次へ戻る」機能の実装目的は、常に目次に対してアタッチ出来るコトです。PC版ではサイドバーに目次をずっと表示し続けるというコトで、目的が達成出来たので、これで良しとしました。これで、目次の中の見たい箇所に瞬時に移動できます。
設定はスクロール広告用のウィジェットに対して、「LuckyWP Table of Contents」で追加された目次を設定するだけです。
「Easy Table of Contents」でも同様の設定が出来ます。
スマホ版の実装方法
「LuckyWP Table of Contents」で生成される目次には、ページ内遷移する為の、アンカー（目印）がありません。なので、次の手順でアンカー（目次）を設定していきます。
step
1編集ファイル（body.php）を探す
修正の方法としては、「プラグイン」→「プラグインエディタ」あるいは、ftpで該当のphpファイルをダウンロードして編集します。
ココに注意
プラグインを編集するので、動作しなくなった場合に元に戻せるようにする為、body.phpは複製してバックアップを残しておきましょう。
プラグインでの編集する場合の場所
front\views\body.php
FTPでダウンロードしてファイルを直接編集する場合のpath
…public_html\wp-content\plugins\luckywp-table-of-contents\front\views\body.php
step
2body.phpにアンカー（目印）を作る
上図のように24行目あたりにある「lwptoc_title」というclassタグに、「id="mokuji"」を挿入します。
【2021/05/18追記】
バージョン 2.1.4で、body.phpのコードが変わってしまったので、34行目に「id="mokuji"」を刺し込んでます
修正前
1 | <?= $title ? '<b class="lwptoc_title"' . ($titleStyles ? ' style="' . implode('', $titleStyles) . '"' : '') . '>' . $title . '</b>' : '' ?><br> |
修正後
1 | <?= $title ? '<b class="lwptoc_title" id="mokuji"' . ($titleStyles ? ' style="' . implode('', $titleStyles) . '"' : '') . '>' . $title . '</b>' : '' ?> |
ココに注意
「"」と「'」の付け方を注意してください。間違えると挙動が不正になります。
これでページ内リンクの飛び先のアンカー（目印）が作れます。
※ちなみにidに指定するキーワードはページ内で重複しなければ、なんでも良いです。
step
3アンカー（目印）へのリンクを貼る
あとは、ウィジェットなどで固定フッターを実装して、上記で作った「#mokuji」に対するリンクを追加します。
私の場合は、スマートフォンのフッターに固定するウィジェットがあるのですが、そこに対してメニューを作成して設定しています。
メニューはこんな感じです。
ナビゲーションラベルはFont Awesomeでアイコンを付けて装飾しています。
ウィジェットの設定は、テーマによって様々なので、ご自分のテーマに合わせてアレンジしてみてください。
ココに注意
まとめ
目次へ戻るの機能を見てきましたがどうでしたでしょうか？
私の気が変わっていなければ、これを読んでいる皆さんも、この記事の中で目次へ戻るの挙動が確認できると思います。
良いなと思ったら、是非試してみてくださいね！
閲覧者さんが見やすいコンテンツを創っていきましょう！
参考
2021/10/08追記：テーマをAffinger5から6へアップグレードしたタイミングで挙動がおかしくなったので、別のプラグインに載せ替えました
ご閲覧ありがとうございました。
ではでは(^^)/
