WordPressで自動的に目次を追加するならTable of Contents Plusがいい感じ♪

ページに自動的に目次を作ろう！と思って、PHPでコードを書きかけたことがあったのですがなかなか難しくて途中になっていました。プラグインがあるのだろうなとは思っていたのですが、先日ふとしたことで見つけて試しに入れてみたら導入も簡単だったのでそれについて書きます。

Table of Contents Plusのインストールと日本語化

そのプラグインは　Table of Contents Plus　というものです。

ダッシュボード　プラグイン＞新規追加　で

Table of Contents Plus　と入力してリターン

インストールボタンを押して、そのあと有効化します。

日本語化ファイルはこちら、

Table of Contents Plus プラグインが便利過ぎるので日本語化をですね【WordPress】…

にありました。ありがとうございます(^^)/

このページの　日本語ファイルをダウンロード　というあたりからリンクをクリックすると　toc+-ja.mo　ファイルがダウンロード出来ます。このファイルをFTPソフトなどで先ほどインストールした

wp-content\plugins\table-of-contents-plus\languages\

にアップします。

これで日本語化がされて、

こんな感じだった設定画面が

このようになってだいぶ分かりやすくなります(^^)/

どのページに目次を付けるのか、決める

ダッシュボード　設定＞TOC+　をクリックすると設定画面が出ます。

どのページに目次を付けるのか、どんな目次にするかを決めます。このblogの場合はほとんど固定ページ(page)を使っていなくて、毎日のblogページ（投稿　post）に目次を作って分かりやすくしたいので　post　に目次をつけたいです。

page にチェックが付いていたのを外して、postにチェックを入れて

設定を更新　をクリックします。

目次のカスタマイズをします

プラグイン導入前は

このような表示だったのですが

このプラグインを追加すると、

こんな感じに自動的に、目次が付きました。しかし赤で囲った部分は

このように共有したり、関連ページのリンクなので目次には表示したくありません。そこで設定の、

詳細設定　のところにある　表示　をクリックして、

除外する見出し　に　「共有:」「関連」を　|　区切りで入力し、設定を更新　をクリックします。

その結果、

このように、必要な目次だけになりました。

あとはこの目次の表示をカスタマイズします。

見出しの数なのですが今までの投稿を調べてみたところ見出しが3つの投稿もあったので　表示の振り分け　を　3　にします。

目次の見出し文　あたりも日本語にしたかったのでこのようにしてみました

目次の幅もデフォルトだと目次の長さによって長くなるため、長すぎないように　横幅　を　50％　にしてみます。

目次部分の背景色を白に

この状態で　設定を変更　をクリックします。

このように、見た目のカスタマイズも完了しました(^^)/

うまく動かなかった部分

やってみて上手く動かなかった部分がありました。

目次の見出し文　のところにある　最初から目次を隠しておく　にチェックを付けて保存すると、

こんな感じで最初の表示が閉じた状態の目次になるので、こういった表示もいいかなーと思ったんですが、

＋　をクリックしても目次が開きませんでした。他の何かの兼ね合いなのかもしれませんがちょっと上手く動かなかったのでこのオプションは使わないようにしました。

サイトマップの自動作成機能もあります

このプラグインにはサイトマップの自動作成機能もあります。

サイトマップ　タブをクリックして

私の場合、固定ページはダミーがいっぱいあるのでページリストを表示　のチェックを外して、カテゴリーの名前を入れて　設定を更新　をクリック。

固定ページでこのように

ゆーそうとITブログ〜WordPress・Xserver・アイキャッチ画像作成ツール〜(旧:ゆうそうとITブログ)
11月1日の予定
CSSテスト
Forum
Google_Maps_WD　test
OWLテスト
PayPal手数料計算器
RYUS blogへのリクエスト
【無料】テキストロゴ・アイコン画像作成メーカー・ツール【角丸・丸対応】
うさぎコワーキングスペース集中作業席予約
お問い合わせ
お問い合わせ
ゆうそうとITブログについて
アイキャッチ画像作成メーカー・ツール
クリスマスカード
コワーキングスペース八王子 8Beat地図
サイトマップ
タレコミ
タレコミ一覧
プライバシーポリシー
メールマガジン登録
予約フォーム
予約完了
吹き出し会話
日付を編集して曜日と祝日を表示するショートコードの見本
本日からむこう1週間の予定
本日の予定
直近1ヶ月の人気投稿
絵文字表示テスト
集中作業席１の予約
集中作業席１０の予約
集中作業席２の予約
集中作業席３の予約
集中作業席４の予約
集中作業席５の予約
集中作業席６の予約
集中作業席７の予約
集中作業席８の予約
集中作業席９の予約
３Dスキャナーで撮影して、Web用に最適化したデータ(PC専用)

とだけ、入力して表示すると、

サイトマップが自動的に作成されました(^^)/

うわさによるとSEOにも効果があるらしい

確かに今までググって見つけたページにこの機能が組み込まれていると、全体像が把握しやすくたとえばインストールはできたけど使い方がいまいち、みたいなときはインストールを飛ばしてすぐに見たいところが見れるのでいいなぁと思ってました。

ということは　ユーザビリティの向上　につながり　SEO効果　もある、ということになるらしい（？）です。導入はとても簡単でしたのでお勧めします(^^)/