目次作成
問題点~手動での目次作成、hタグ未使用~
わたしは目次作成の際、お恥ずかしながら、
目次
1.見出し1
2.見出し2
:
1.見出し1
コンテンツ
2.見出し2
コンテンツ
:
と、 数字+ドット+見出し名 という感じで手動で作成しようとしていた。
※しかも、h1とかh2タグを使っていないので検索エンジンに見出しと見做されないだろう・・・。
作成した見出しにリンクを貼ろうとした際に、プラグインがありそうだとようやく気付いた。
ググったら「Table of Contents Plus」というものに巡り合った。
このプラグインはh1とかh2とかの見出しタグをもとに目次を作ってくれるのだ。
使ってみたら予想以上に格好いい見出しが作れて感激したので記録しておこう。
設定~Table of Contents Plus~
まずはプラグインインストールする。
続いて設定。
項目 | 設定 | 説明 |
---|---|---|
位置 | 最初の見出しの前(デフォルト) | |
表示条件 | 2つ以上見出しがあるとき | |
以下のコンテンツタイプを自動挿入 | [レ] post [レ] page [ ] custom_css [ ] customize_changeset [ ] oembed_cache [ ] user_request [ ] wp_block [ ] cta [ ] post_type_manage | post=投稿 page=固定ページ |
見出しテキスト | [レ] 目次の上にタイトルを表示 [目次] [レ] ユーザーによる目次の表示・非表示を切り替えを許可 テキストを表示 [表示] テキストを非常時 [非表示] [ ] 最初は目次を非表示 | |
階層表示 | [レ] | 見出しタグの数字をもとに階層構造になる |
番号振り | [レ] | 1 見出し 2 見出し のように見出しの前に数字が振られる |
スムーズ・スクロール効果を有効化 | [ ] アンカーリンクにジャンプではなくスクロールする | |
横幅 | 自動(デフォルト) | |
回り込み | なし(デフォルト) | |
文字サイズ | 95% | |
プレゼンテーション | グレー(デフォルト) | |
小文字 | [ ] アンカーに必ず小文字を使用 | |
ハイフン | [ ] アンカーでアンダースコアではなくハイフンを使用 | |
ホームページを含める | [レ] ホームページ上の条件を満たす項目の目次を表示 | トップページ(固定ページ)に目次作成 |
CSS ファイルを除外 | [ ] プラグインの CSS スタイルを読み込まない場合はチェックを入れてください。選択した場合、上の外観設定も無視されます。 | |
テーマの見出し記号を保持 | [ ] お使いのテーマで番号なしリスト要素に背景が含まれている場合、対応させるにはチェックを入れてください。 | |
見出しレベル | [ ] heading 1 - h1 [ ] heading 2 - h2 [レ] heading 3 - h3 [レ] heading 4 - h4 [レ] heading 5 - h5 [レ] heading 6 - h6 | 目次に含めたくないタグを外す |
除外する見出し | [ ] | 個別に除外 |
パス限定 | [ ] | 特定のページのみで表示させたい場合、カンマ(,)区切りでスラッシュ(/)からはじまるパスを設定 |
アンカーのデフォルト接頭辞 | [i] |
ここまで設定したらあとは投稿ページとか固定ページ上で<h3>見出し名</h3>という具合に見出しを作成していくだけ。
すごくカッコよく見出し作ってくれます!
やりたかったこと
挨拶見出し
:
挨拶文
:
目次
:
という感じにしたかった。
よく書籍とかである「はじめに」的なやつがあり、その後目次→コンテンツって感じ。
なのでh1,h2はチェックを外しておきました。
そうしないと一番上に目次が来てしまうので。
あとは上級設定の「ホームページを含める」にチェックを入れておきました。
そうしないと固定ページをトップページに持ってきたときに、見出しがなくなってしまいます。
今後やりたいこと
今回作ったサイトでは見出しは全て並列関係にあったので階層構造を使いませんでしたが(h3タグのみ使用)、よくIT系マニュアルとかだと階層構造になっているので今後使っていきたいです。
また、「WPFront Scroll Top」というページトップに戻るプラグインも併用したほうが良さそうです。
理由として、目次を作るくらいのコンテンツだと結構文章が長くなってくるのでトップに戻るのが面倒になるんですよね。