[wordpress]Easy Table of Contents の導入

それほど記事を長くしない私ですが、やはり目次はあった方が便利です。

なお、(本当は)記事を一定以上長くした方が SEO 的に有利で、前置きから長々と書いた記事の方がより上位に検索されやすいです。

WordPress はよく出来ているので、プラグインを入れるだけでも十分な目次が表示されるのですが、今回は css を編集し、見た目も整えていきましょう。

最終的にはこのページにあるような目次になります。

Table of Contents Plus を選ばないワケ

多くのサイトで紹介されている Table of Contents Plus ですが、現在メンテナンスされていないようです。

今後メンテナンスされる可能性もありますが、同時に消えゆく可能性もあるので、最新の WordPress でもきちんと検証されている Easy Table of Contents を使うことにします。

見た目の整え方(css)は、どちらかで経験していればそれほど違いはありません。

他にも、記事ごとの目次オンオフが出来たり、Table of Contents Plus と比べて利点もあるので、後程紹介します。

インストール、設定

WordPress > プラグイン > 新規追加 > Table Contents で検索 します。

インストール&有効化

WordPress > 設定 > 目次

設定

わからない部分はデフォルトのままでいいと思います。
私がいくつか変更した箇所のみ説明します。

一般 - 見出しラベル

「目次」にしました。英語にする場合「Contents」でしょうか。

一般 - 初期状態

初期状態を「非表示」としました。
理由ですが、短い記事の場合目次は必要ないですし、スマフォで見た時割と目次のスクロールがダルかったりするんですよね……という個人的な感想です。

ここらへんは好みで変えましょう。

外観 - 幅

100% にします。
大きさを固定にしたくない場合、幅はそのままで Alignment を Center にするのもいいかもしれません。

Font Option - Child Font Size

H2 と H3 の文字サイズを変えることができます。私は 70% にしました。
H4 以降を表示していた場合、どんどん小さくなるので程々に。

文字は小さくなるほどデザイン的にひきしまって見えますが、やりすぎて使い勝手が悪くならないようにしましょう。

Theme Options - テーマ

「カスタム」で、色はデフォルトのままです。
これも好みに応じて変えましょう。

高度 - 見出し

細かく目次に出してしまうと、かえって選ぶのに迷ってしまいますよね。
H5、H6は外しました。H4 は消しても残しても……。

高度 - 除外する見出し

目次は H タグに反応して生成されるので、必要のない項目を目次にしてしまうことがあります。
私の場合、この部分。

H3 タグですが、Related Posts はただの関連記事で、目次には表示したくありません。
こういう時、除外する見出しに書いておくと目次から除外することができます。

見た目をカスタマイズする

css をカスタマイズすることで、現在の目次は下のようにすることもできます。

方法については、長くなるので別記事にまとめました。

記事ごとに目次をオンオフする

Easy Table of Contents では記事ごとに目次をオフしたり、見出しを制限したりできます。
現在書いてる記事の一番下に Table of Contents という項目があるので、そこで調整しましょう。
かなり短い記事だから目次いらないよな……なんて時、結構便利です。


返信を残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA