Sangoの目次をEasy Table of Contentsに変更してみた

このブログは有料テーマの「Sango」をベースに、ちょいちょいカスタマイズしたり機能を停止させたりしています。

そんな中、今回は「もくじ」にスポットを当てて紹介したいと思います。
 

というのも、「Sango」ではプラグイン「Table of Contents Plus」を導入すると、テーマに合ったデザインで自動的に表示されるようになっています。

ただ、このプラグインがもう３年も更新されていない！
 

非常に気になる部分なので、別のプラグイン「Easy Table of Contents」を利用してみることにしました。

[box class="box26" title="追記"]

[/box]

[box class="box26" title="さらに追記 2020-02-17"]

[/box]

WordPress２大「もくじ」プラグイン

これまでは、「もくじ」のプラグインといえば必ずと言って良いほど紹介されてきた「Table of Contents Plus」と「Easy Table of Contents」。
 

ただ、先ほども言ったように「Table of Contents Plus」が３年以上も更新していないんですよ。

これは、怖い！ いろんな意味で。
 

それに比べ、「Easy Table of Contents」は現在進行形で頻繁にシステム更新をしてくれています。

「Sango」では「Table of Contents Plus」を使えば自動的にデザインが合うけど、「Easy Table of Contents」は自分でカスタマイズをする必要が...
 

と思ったんですが、システム更新されない部分に無視もできない。

というワケで、デザインを少し寄せる感じで表示させてみるコトにしました。

Easy Table of Contentsをインストール

この記事を読んで頂いているくらいですから説明は不要だと思いますが、一応プラグインのインストール手順を紹介します。（もちろん知っている人は飛ばしちゃってください。）

プラグインから検索

プラグインの「新規追加」に進んで、「Easy Table of Content」と検索します。

インストール＆有効化

「Easy Table of Content」が見つかったら、「今すぐインストール」を押して、その後に「有効化」すれば完了です！

プラグインのメイン設定

プラグインを「有効化」したら、さっそくメニューから「設定 > 目次」、またはプラグインから「Easy Table of Content」の欄にある「設定」に入りましょう。

有効化すると、下記の内容でデフォルト設定されています。

一般

[box class="box3"]

[/box]

外観

[box class="box3"]

[/box]

高度

[box class="box3"]

[/box]
 

できる人はどんどん好きに設定して良いと思いますが、変更するコトが多そうなポイントだけ絞って紹介しましょうかね。

サポートを有効化

ここのチェックを入れると、投稿画面に「もくじ」を利用するかどうかの設定項目が表示されるようになります。

僕は投稿画面はなるべくスッキリさせたいので、全てのチェックを外しました。

自動挿入

ここにチェックを入れた部分は、設定した内容で自動的に「もくじ」が表示されるようになります。

僕の場合は、ブログ記事だけに表示させたいので「投稿」のみにチェックを入れました。

位置

この位置は、デフォルトの「最初の見出しの前」で良いんじゃないですかね。

表示件数

これは、「見出しタグ」が記事に何個以上あると表示するのかを設定する項目。ここはもう、好きな数字を選んじゃってください。

見出しラベルを表示

基本的にチェックを入れたままだと思いますが、「もくじ」とかの文字を入れたくないって人は外しちゃいましょう。

見出しラベル

ここには、「もくじ」とか「目次」とかの見出しを入力します。

折りたたみ表示

これは、閲覧者が「もくじ」好きに折りたたんだりできるようにするボタンを表示させます。

僕は、「Sango」のデザインと合わなかったのでチェックを外しました。まあ、「もくじ」をわざわざ折りたたむ人はあまりいないとも思ったので。

初期状態

ここにチェックを入れると、「もくじ」が最初から折りたたまれた状態で表示されます。

ただ、「折りたたみ表示」にチェックを外している場合には、ここもチェックを外しておかないといけませんね。

ツリー表示

これは、「もくじ」の表示が「見出しタグ」によって少しずれて表示する設定です。基本的には、チェックを入れたままで良いでしょう。

カウンター

「もくじ」を表示させると、数字が先頭についた状態でリストができます。その時に、小数点を外したり、ローマ数字で表示させたりを設定できます。

スクロールを滑らかにする

文字通り、チェックを入れておくとスクロールが滑らかになります。ただ、重くなったりする要因になる場合もあるので、SEO的には外しておくと良いかもしれません。

テーマ

基本的に外観で設定を変更するとしたら、「テーマ」の部分じゃないかと思います。これを「カスタマイズ」にすると、下の部分の色を反映させるコトができます。

css

あとでcssを追加するんですが、プラグインのcssスタイルを変更するのでチェックは外したままにします。

見出し

基本的に「h2」が一番大きな見出しになると思うので、「h1」は外せば良いと思います。

僕の場合は、「h5」以降も目次には入れる必要がないと思ったので「h5」と「h6」も外しました。

除外する見出し

最後の締めとして「最後に」とか「まとめ」などの「見出し」を入れるような人は、ここでそれらの単語を入れると良いでしょう。

cssを追加してカスタマイズ

基本の設定が終わってから「もくじ」の表示を確認してみると、なんか文字とかが詰まったコンパクトなモノが出ているはずです。

そこで、「Sango」でも違和感がないような感じになるよう css を追加してみましょうか。
 

下記のコードを丸っとコピーして、カスタマイズにある「追加css」に貼っちゃっても良いです。
 

> GitHub でコードを確認する
 

あとは、色なり幅なりを好きなように変更しちゃってください。
 

ただ、ここで「あれ？」ってコトがあると思います。それは、枠線が表示されているってコト。

そう、「Sango」ではリスト表示すると自動的に薄いグレーの枠線が表示されます。

この薄いグレーの枠線を消したい場合は、下記のコードも「追加css」にコピペしちゃってください。
 

> GitHub でコードを確認する
 

これで、綺麗に「もくじ」が表示されるようになります。

利用する前の注意点！

最後の最後に注意点かよと思われるかもしれませんが、上記の内容で「Easy Table of Contents」を利用すれば「もくじ」を表示できます。
 

ただ、この記事を読んでいる時に「あるコト」に気づいた人っています？

この記事にも「もくじ」が自動で設定されているはずなんですが、実はソースコードを表示させると「もくじ」が表示されなかったんです。

なので、画像を貼りました。（現在は「Table of Contents Plus」に戻したので、目次の画像は削除しています。）

あと、枠線を非表示にするcssを追加しているので、「Sango」独自ショートコードを使ったボックスなどが表示されないのも何個かあります。

僕はあまりボックスを使わないのでココはパスできるとして、ボックスをよく使うという人は「Easy Table of Contents」がオススメではないかもしれないですね。

さいごに

以上で、「Table of Contents Plus」から「Easy Table of Contents」について紹介しました。
 

まあ、ある程度「Easy Table of Contents」を使えるようにはしたんですが、まだまだ課題がある感じですかね。

もっと良い「もくじ」のプラグインが見つかったり、もっと良いカスタマイズが見つかったら更新したいと思います。