THE THORで追従サイドバーに目次を設定する手順

THE THORで追従サイドバーに目次を設定する手順

当サイトでは、WordPressテーマにTHE THOR(ザ・トール)を使用しています。

ここでは、当サイトで施しているカスタマイズのうち、

追従サイドバーに目次を設定

する手順について解説しています。

その他のカスタマイズについては、下記ページを参照して下さい。

関連記事

現在、当サイトでは、WordPressテーマに「THE THOR」を使用しています。THE THORは標準で多くの機能を搭載している分、カスタマイズ項目が多いのが特徴です。そのため、THE THORをはじめて使う人やテーマの[…]

THE THORで施しているカスタマイズ一覧

追従サイドバーエリアに目次を設定する

当サイトでは、投稿記事の追従サイドバーに該当ページの目次を表示するようにしています。

追従サイドバーエリアの目次

追従バーに目次を表示させるには以下の手順を踏みます。

Table of Contents Plusのインストール

THE THORの標準には、投稿記事に目次を表示する機能はあっても、追従バーに目次を表示させる機能はありません。

そこで、まずは、Table of Contents Plusという記事の目次を自動生成できるプラグインをインストールして有効化します。

Table of Contents Plusの設定

「設定」-「TOC+」でTable of Contents Plusの設定を行います。

「以下のコンテンツタイプを自動挿入」の箇所で「post」にチェックを入れると投稿ページに目次が表示されます。

同じく「page」にチェックを入れると固定ページにも目次が表示されます。

Table of Contents Plusの設定画面

下方に「上級者向け」がありますが、ここでチェックするのは、「見出しレベル」くらいです。

当サイトでは、「h2とh3」を目次に表示させるように設定しています。

見出しレベルの設定

ウィジェットで「TOC+」を追従サイドバーエリアにセット

設定が終わったらウィジェットで「TOC+」を追従サイドバーエリアにセットします。

これで、追従サイドバーに目次が表示されますが、以下の2点の問題が残ります。

1.スマホでも表示される
2.目次の表示がデザイン的におかしい

そこでこの2点を解決するために以下の対応を行います。

スマホでは表示されないようにする

Widget Logicというプラグインをインストールする

THE THORでは、ウィジェットに追従サイドバーが用意されていますが、ここにセットしたものは、スマホの最後部に表示されてしまいます。

そこで、追従する目次をスマホで表示させないようにするために、Widget Logicというプラグインをインストールします。

Widget Logicは、ウィジェットに条件分岐タグを指定できるWordPressプラグインです。

インストールするとウィジェット毎に表示条件を指定できるようになっています。

これを使って「モバイルの時は表示させない」ように、ウィジェットのロジックの箇所に「!is_mobile()」と記述します。

また、投稿ページの頭にある通常の目次はTHE THORの標準分を表示させていますので、ここでは、「目次をサイドバーのみに表示」にチェックをいれています。

目次の表示のデザインを改善する

標準のままでは、行の間隔が詰まりすぎなのと、見出しのレベルが変わっても全て先頭から表示されるため、これを改善します。

目次の表示のデザインを改善

追従サイドバーの目次のデザインは、THE THOR CHILD(子テーマ)の、style-user.cssにコードを追加することで指定が可能です。

当サイトでは、以下のコードを追加しています。

.toc_widget_list.no_bullets li{
line-height: 23px;
}

.toc_widget>ul>li>a:nth-of-type(n){
font-size:14px;
}

.toc_widget_list.no_bullets ul li:nth-child(n+1){
font-size:14px;
padding:2px 0 5px 12px;
}

.toc_widget_list.no_bullets li a:hover{
color:#aaaaaa;
}

尚、THE THORの場合は、THE THOR CHILD(子テーマ)の、style-user.cssに追加する方法の他に、「外観」-「カスタマイズ」の「追加CSS」に記載することでも対応が可能です。

まとめ

以上、THE THORで追従サイドバーエリアに目次を設定する手順について解説してきました。

参考にして頂くのは光栄ですが、カスタマイズは自己責任でお願いします。

 

関連記事

当サイトでは、WordPressテーマにTHE THOR(ザ・トール)を使用しています。ここでは、当サイトで施しているカスタマイズのうち、・アーカイブページ(カテゴリー・タグ・日付等のアーカイブ)のnoindex対応について[…]

THE THORでカテゴリーなどのアーカイブページをnoindexにする手順
関連記事

当サイトでは、WordPressテーマにTHE THOR(ザ・トール)を使用しています。THE THORを使用していると、特定の箇所の文字のサイズを調整したいと思っている人も少なくないはず。ここでは、当サイトで施しているカス[…]

THE THORで文字のサイズを修正する手順
関連記事

インストールしたWordPress(テーマ)だけでは機能が不足している場合、プラグインをインストールすることで機能を補完することができます。ここでは、最新バージョン5.2以上のWordPressにあると便利なプラグインを紹介していま[…]

最新版WordPressにあったら便利なプラグイン