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

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

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

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

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

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

追記
作者「サルワカ」さんも「Table of Contents Plus」が更新されないことが気になったらしく、「Easy Table of Contents」も対応するようにアップデートしたそうです。詳しい設定方法は、こちらを参照ください。
さらに追記 2020-02-17
「Table of Contents Plus」が、3年以上ぶりに更新しました! ただ、更新した途端にデザインが崩れたので、修正方法をTable of Contents Plus の見出し位置を修正する方法【更新後に文字が埋もれたので】の記事で紹介しています。

WordPress2大「もくじ」プラグイン

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

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

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

それに比べ、「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」の欄にある「設定」に入りましょう。

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

一般

  • サポートを有効化:固定ページ
  • 自動挿入:空欄
  • 位置:最初の見出しの前(デフォルト)
  • 表示条件:4件以上
  • 見出しラベルを表示:チェックあり
  • 見出しラベル:Table of Contents
  • 折りたたみ表示:チェックあり
  • 初期状態:チェックなし
  • ツリー表示:チェックあり
  • カウンター:小数点表示(デフォルト)
  • スクロールを滑らかにする:チェックあり
  • スクロールを滑らかにする:チェックあり

外観

  • 幅:Auto
  • カスタム幅:275px
  • 回り込み:なし(デフォルト)
  • タイトル文字サイズ:120%
  • タイトル文字の太さ:Medium
  • 文字サイズ:95%
  • テーマ:グレー

高度

  • 小文字:チェックなし
  • ハイフネーション:チェックなし
  • ホームページ:チェックなし
  • CSS:チェックなし
  • 見出し:全てにチェックあり
  • 除外する見出し:空欄
  • スムーズスクロールのオフセット:30px
  • モバイルのスムーズスクロール:0px
  • パス制限:空欄
  • デフォルトのアンカー接頭辞:i
  • ウィジェットの固定セレクタ:空欄
 

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

サポートを有効化

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

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

自動挿入

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

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

位置

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

表示件数

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

見出しラベルを表示

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

見出しラベル

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

折りたたみ表示

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

僕は、「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」を使えるようにはしたんですが、まだまだ課題がある感じですかね

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

関連記事はこちら