無料テーマCocoonに目次プラグインRTOCを導入してみました。
正式名称は「Rich Table of Contents」であり、RTOCはその頭文字をとった略称です。日本発のプラグインであり、説明が日本語で大変わかりやすいというのも魅力の1つです。
↓これの導入の仕方です。
プラグインインストール
ワードプレスダッシュボード左メニューから、プラグインの新規追加を選択。
検索ボックスにRTOCと入力すれば出てくるはずです。そしたらインストールして有効化。
有効化した時点で導入は完了です。記事にも反映されているはずです。
カスタマイズ
ここからはカスタマイズについて説明します。
有効化すると、ダッシュボードの左メニューに、RTOC設定が追加されています。
プレビューもあるので直感的に設定できると思います。
Cocoonの目次をオフにする
Cocoonの目次機能をオンにしていると、二重に目次が表示されることになるので、RTOC導入後はオフにしましょう。
ダッシュボード→左側メニューのCocoon設定→目次→目次を表示するのチェックを外します。
チェックを外したら「変更をまとめて保存」を忘れないように。
スクロール追従させる
記事の横に目次を表示させて、スクロールに合わせて目次も動く仕組みを作りたい場合、
外観→ウィジェットから設定します。
「テキスト（PC用）」をつかんで、サイドバースクロール追従のところに置きます。
そしたら、置いた「テキスト（PC用）」のドロップメニューを開いて、
テキストに[rtoc○mokuji]（○は「_」）を入力して保存します。
記事の横に目次メニューが表示されていたら完了です。
スクロールに合わせて追従するだけでなく、今見出しでどの位置にいるのかもわかりますし、クリックでその位置に飛ぶこともできます。デフォルトの目次より省スペースなのも嬉しいですね。
ショートコードについて
[rtoc○mokuji]（○には「_」）は、ショートコードと呼ばれるものです。
この文字列を書くだけで、その位置に目次を表示させることができます。伏せ字を使っているのはこの記事内には表示させたくないからです。
ショートコードに値を追加記載することでカスタマイズができます。
参考例
試しに、先ほどのスクロール追従に貼ったコードに少し値を追加してみましょうか。
値を設定するには、半角スペースで区切って値を入力していきます。
今回は、先ほどのスクロール追従に[rtoc○mokuji title=”てすと”]と追記してみました。）
title=”てすと” （目次タイトル）
するとこんな感じです。
ただしこれだと、文字が2つ重なっているので、タイトルを空欄にして、「てすと」を「目次」にしてみました。
スッキリしたデザインになりました。
ショートコードについて詳しくはRTOC設定のヘルプから確認することができます。
ヘルプにも記載がありますが、サイドバーの目次デザインは統一されているため、今回のようにタイトルをつけるくらいしかカスタマイズできません。記事内では自由です。
表示されない時の解決法一覧
- RTOC設定の表示条件を満たしているか
- RTOC設定の除外するページに入ってないか
- パーマリンクが日本語ではないか
- 投稿タイトルが空白ではないか
- 投稿タイトルの下に空白がないか
この記事を書くにあたっても非表示バグに悩まされましたが、自分の場合、投稿タイトル下の空白や見出しをいじっているうちに直ってました。
簡単導入に感動
めっちゃ見覚えのあるデザインでした…。こういうスタイリッシュなテーマがあるのかと思っていたら、プラグインだったとは。
自分のようなデザインセンスのない者にとって、プラグイン導入だけでこんな素晴らしいデザインが使えるなんて、大変ありがたいです。
コメント