目次をサイドバーに表示　Cocoon設定

やろうとしていること

WordPressの機能で[目次を表示する]という機能がありますが、通常は表示位置はタイトルの下の本文中です。ページが長い場合（目次を配置するページはたいてい長い）スクロールすると目次が見えなくなります。

わざわざ上に戻って目次を確認するよりもサイドバーのスクロールに追従して配置されるといいなと思ったのでやってみました。

ウィンドウ幅が狭くなったときはサイドバーを非表示としています。その時は通常の位置に表示位置はタイトルの下の本文中に表示するように対応しました。

現状→サイドバーに目次は表示しない。

修正後→サイドバーに目次を表示し本文中には表示しない。

目次の設定をやっていきます

WordPressテーマの確認

[外観]→①[テーマ]をクリック
Cocoon と Cocoon Child をインストールしています。どちらも無料です。

[[C]目次]ウィジェットの配置

左サイドのメニューで[外観]を選択
①[ウィジェット]をクリック
②[利用できるウィジェット]の中から[[C]目次]をクリック

①[C目次]をクリック

①[サイドバースクロール追従]をクリック
②[ウィジェットを追加]をクリック

画面右側の列の[サイドバースクロール追従]に[[C]目次]が追加されます。

サイドバーの一番上に表示するために並び順を入れ替えます。
並び順はドラッグ＆ドロップで変えられます。

①[[C]目次]の[▼]をクリックして詳細を表示します。

[タイトル]、[目次表示の深さ]は好きなものを設定します。
①[表示設定]をクリックすると、設定項目が表示されます

①[ウィジェットの表示]→チェック・入力したページで表示
②[ページ]タブを選択
③[投稿]をチェック
※[投稿]以外にチェックを入れても大丈夫です。
④[保存]をクリック

①「保存しました」が表示されたら、
②[完了]をクリック

Cocoonの設定 - [全体]タブ

サイドバーを表示する設定にしていなければ、サイドバーに目次を配置しても表示されません。
ということで、サイドバーを表示するように設定します。

左サイドのメニューで①[Cocoon設定]を選択
「Cocoon設定」が表示されたら
②[全体]タブをクリック

下へスクロールします。
①[サイドバーの位置]を選択します。
※ここでは[サイドバー右]を選択していますが、左でもOkです。
②[変更をまとめて保存]をクリック

Cocoonの設定 - [目次]タブ

ウィンドウ幅が狭くサイドバーが非表示になったとき、本文中に目次を表示する設定をします。

左サイドのメニューで①[Cocoon設定]を選択
「Cocoon設定」が表示されたら
②[目次]タブをクリック
③[目次の表示]→目次を表示する をチェック
④[表示ページ]→投稿ページ をチェック
※投稿ページ以外にチェックを入れてもOKです。
下へスクロールします。

他の項目は好みに応じて設定します。
①[変更をまとめて保存]をクリック

投稿記事の目次表示設定

ウィンドウ幅が狭くサイドバーが非表示になったとき、本文中に目次を表示する設定です。

投稿記事の編集画面を開きます。
右側の[ページ設定]→①[目次を表示しない]のチェックを外します。
②[更新]をクリック

本文中の目次の表示設定

サイドバーに目次が表示されているとき、本文中の目次を非表示にする設定をします。

ブラウザで投稿記事のページを開きます。
キーボードで[F12]を押下します。
右側にHTMLが表示されます。
①のボタンをしてクリックして、目次が表示されている当たり(②)をクリックします。
③id を確認します。

が設定されています。

スタイルシートにtocの表示・非表示を設定します。
①[外観]→②[テーマファイルエディタ]をクリック
③[スタイルシート]をクリック

[選択したファイルの内容]に[スタイルシート]が表示されます。

[選択したファイルの内容]に以下を入力します。（画像内①参照）

ウィンドウ幅が1024px以上になるとサイドバーが表示されるので
1024px以上で本文中の目次を非表示にします。

/1024px以上/
@media screen and (min-width: 1024px){
  toc {
    display: none;
    margin: 0;
  }
}

②[ファイルを更新]をクリック

①のメッセージが表示されればOKです。

目次の表示を確認

ウィンドウ幅が広いとき（1024px以上）
目次はサイドバーに表示されます。本文中の目次は非表示。

ウインドウ幅を狭いとき（1024px以下）
本文中に目次が表示されます。サイドバー自体が非表示です。

さらにモバイル（タブレット、スマホ）で表示
本文中に目次が表示されます。サイドバー自体が非表示です。

番外編

失敗作です。
スタイルシートの設定時に本文中の目次を非表示にする最小ウィンドウ幅を 1023px としたため、サイドバーと本文中の両方に目次が表示されました。
ウィンドウ幅が 1024px の場合、両方に表示されます。

こうやって試行錯誤しながらやってます。