SANGOに目次を設定する方法【クラシックエディタ利用の場合】

今回は、クラシックエディタ（レガシーエディタ）を利用されている方向けに、WordPressテーマ「SANGO」に目次を設定する方法を紹介します。

クラシックエディタを利用している場合、標準では目次を設定する機能が搭載されていません。
そこで、プラグインをインストールして設定することになります。

おすすめのプラグインはこちら。

■Easy Table of Contents

一応、人気の目次プラグインには「Table of Contents Plus（TOC+）」もあります。
「Table of Contents Plus（TOC+）」を利用しても問題ないですが、個人的には「Easy Table of Contents」の方がシンプルなのでおすすめしています。。

ただ、「Easy Table of Contents」のデフォルトのデザインはとてもシンプルです。
そこで、SANGOでは「Easy Table of Contents」のデザインを、SANGOのデザインに合った見た目になるように作り込まれています。
↓

これで、目次のデザインが気に入らないということもなくなります。
ありがたいですよね！

今回は、この「Easy Table of Contents」を使用して目次を設定する方法を解説していきます。

コケ太郎

因みに、今回はクラシックエディタを利用されている人向けの目次設定になるコケ～

ブロックエディタを利用されている方は、こちらの記事を参考にしてください。
>> SANGOに目次を設定する方法【ブロックエディタ利用】

Easy Table of Contentsのインストール

まずは、「Easy Table of Contents」のインストールから行います。
といっても、プラグインのインストールは簡単です。

WordPress管理画面の左メニューに「プラグイン」という項目があるので、その画面の中にある「新規追加」をクリックしてください。

プラグインの新規インストール画面に遷移するので、検索ボックスに「Easy Table of Contents」と入力してください。
左上に「Easy Table of Contents」が出てくるので、「今すぐインストール」ボタンをクリックするとインストールが開始してください。

インストールは、通常は10秒程度で終了します。

インストールが完了したらボタンの表示が「有効化」に変わるので、あとは「有効化」ボタンをクリックしてインストールは終了です。

簡単ですね。

次は、「Easy Table of Contents」の設定について説明していきます。

Easy Table of Contentsの設定方法

「Easy Table of Contents」は、インストールしただけでは目次は表示されず、いくつかの設定が必要になります。

管理画面の左メニューから「設定」→「目次」と移動してください。
「目次（Easy Table of Contents）」の設定画面が開きます。

設定内容は、これから説明するようにして貰えば基本はOKです。

まずは、「自動挿入」という項目の設定です。

ここは、記事を投稿すると自動で目次を表示するのか、それとも、記事毎に目次の表示設定を行うのか、についての設定です。

ここにチェックを入れておくと、記事を投稿すれば自動的に目次を設定してくれるので、記事毎に設定するのが面倒という方はチェックを入れておきましょう。

ただし、記事によっては目次を付けたくない場合もある方は、「自動挿入」のチェックは外しておいた方がいいです。
記事毎に、目次を設定するかの判断を行いましょう。

「自動挿入」のチェックを外した場合の設定は、こちらの記事の後半で説明しています。
→ 自動挿入を設定しない場合

次は「表示条件」と「見出しラベル」の設定です。

「表示条件」とは、見出し（hタグ）がいくつ記事内にある場合に目次を表示させるのか、という設定になります。
私の場合は、いつも「3」に設定することが多いです。

こうしておけば、記事内に見出し（hタグ）が3つ以上ある時にのみ目次が表示されます。

「見出しラベル」というのは、「目次」部分の表示タイトルのようなものです。
デフォルトのままでもいいですが、分かりやすいように「目次」などほかの表示に変更しておいた方がいいです。

さらに下の方にスクロールすると、「CSS」と「見出し:」という項目があります。

目次のデザインはSANGOオリジナルにカスタマイズされているので、「プラグインの CSS スタイルの読み込みを禁止します。」のチェックは外しておきましょう。
こうすることで、プラグインデフォルトのCSSが読み込まれなくなります。

また、「見出し:」は、目次に使用する見出しタグのレベルを設定する項目になっています。
h4タグまで目次に設定すると目次が長くなりすぎることもあるので、おすすめはh2、h3タグのみの設定です。

こうしておけば、h2タグとh3タグの見出しのみが目次に使用されます。

これで「目次（Easy Table of Contents）」の基本的な設定は完了です。

その他の設定

他にも多くの設定項目がありますが、それらはデフォルトのままでも問題ないです。
もし気になる方は、画面を見れば何の設定か大体分かると思うので、自分なりにカスタマイズしてみてください。

例えば、「目次表示の折りたたみを許可します。」のチェックを外すと、訪問ユーザーが目次を閉じれなくなります。

また、「初期状態で目次を非表示にします。」にチェックを入れておくと、ユーザーがページを開いた時点では目次が閉じた状態になっています。
こんな風に。

このように自分なりのカスタマイズを簡単に行えます。

「自動挿入」を設定しなかった場合

「自動挿入」を設定しなかった場合についても説明しておきます。

記事個別画面の下の方に「目次（Easy Table of Contents）」の設定項目が表示されているので、そこで設定を行います。

この画面上で目次の表示・非表示も切り替えてください。

サイドバーにも目次を表示する方法

「Easy Table of Contents」では、WordPressのウィジェット機能を利用してサイドバーにも目次を表示させることができます。

表示はこのようになります。

まず、ウィジェットの設定画面（「外観」→「ウィジェット」）へ移動してください。
「利用できるウィジェット」の中に「目次」が追加されているので探してください。

この目次ウィジェットを「サイドバー」もしくは「追尾サイドバー（PCのみ）」へ追加してください。
※おすすめは「追尾サイドバー（PCのみ）」への追加です。

追加したら、「タイトル」と「閲覧中セクションのハイライト色」の設定を行ってください。
私の場合の設定はこちら。

ただ、実はこのままだと「ハイライト色」は反映されません。
原因は、「Easy Table of Contents」の設定画面の中で「プラグインの CSS スタイルの読み込みを禁止します。」にチェックを入れたためです。