WordPressで目次をサイドバーに固定する方法【JS不要】

WordPress
4407 view

WordPressで目次をサイドバーに固定する方法【JS不要】

最終更新日:2018/12/08

長編記事を読む際に、目次がサイドバーに固定されていると、目的の内容に素早くたどり着けるので便利ですよね。
有名どころだと、Qiitaさんとかが使っていますが、今回はそのような目次をWordPressで、サイドバーに固定する方法を紹介します。

完成系の挙動としては、以下のgifのようになります。
side-bar

必要な作業
Table of Contents Plusのインストール
サイドバーに目次を入れる。
目次を固定する。
まとめ
- - WINDII
  - 最新記事 by WINDII (全て見る)

必要な作業

目次を表示するプラグインTable of Contents Plusの有効化。
ウィジェットのサイドバー部分に目次を入れる。
CSSで親カラムとの高さを調整。
position:stickyでスクロールで目次の場所にきたら固定。

Table of Contents Plusのインストール

WordPressのTable of Contents Plusプラグインをインストールします。
ダッシュボード > プラグイン > 新規追加　より検索窓でTable of Contents Plusと入力し、インストールand有効化してください。

ダッシュボード > 設定 >TOC+でカスタマイズする事ができます。
table-of-contents-plus

以下のコンテンツタイプを自動挿入の部分で、どのページに目次を表示するかを設定できます。
postとは、記事の事で。
pageとは、固定ページの事です。

今回は、記事ページのみに目次を設定したいので、postのみを選択しています。

その他の設定はデフォルトを選択しています。

外観に関しても、好きなものを選択する事ができます。
カスタムを選択すると、背景色や、囲んでいる枠の色を変更する事ができます。
table-layout

上級者向けと書かれているところの設定では、目次に表示する見出しや、表示させたくないものを除外する設定などが、できます。当ブログでは、プロフィールが目次に出現するのを阻止するために設定しています。

サイドバーに目次を入れる。

ダッシュボード > 外観　>ウィジェットに移動してください。

「ウィジェットエリア」とは、Webサイトの表示要素のパーツである「ウィジェット」を配置するために、あらかじめテーマに設定された専用のエリアです。

ウィジェットエリアは、使用しているテーマによって異なると思いますが、利用できるウィジェットの部分に、TOC+が追加されているはずです。
TOC+をサイドバーの表示エリアの再下部に移動して、展開、保存ボタンを選択してください。
記事ページのみで使用するので今回は、ブログ記事ページのPC版の方だけにTOC+を追加しました。

サイドバー追従エリアなどがサポートされているテーマがあります。
そのようなテーマを選択している場合は、これ以降の作業をする事なく、スクロールで目次の位置にまできた時に固定される目次を使用する事ができます。

CSSで親カラムとの高さを調整。
WordPressは、外観 > テーマの編集　>styles.css
よりCSSを編集する事ができます。
外観　> CSS編集がある場合はそちらを使用してください。

早速stickyしたいところですが、position: stickyは要素の親要素のはじまでの粘着です。
なので、親要素が、テキストより短いとstickyを使う事ができません。

残念ながら、今使っているテーマでは、floatで配置されている為left_columnとside_columnの高さが異なっています。

<div class="main_column">
  <div class="left_column"></div>
  <div class="side_column"></div>
</div>

なので、flexboxを使用した配置により、親要素の高さ（サイドバー全体の高さに)をメインコンテンツと合わせる必要性があります。

.main_column{
  display:flex;
  justify-content:space-between;
}

side_columnがleft_columnと同じ高さを持ったため、ようやくposition:stickyを使えるようになりました。

display表示にしたことにより、スマートフォン表示が崩れたため、修正。
テーマによっては、大幅に崩れる事もありますので、対応できそうにない場合は、引くのも手です！

@media screen and (max-width: 767px) {
    #main_column{
        flex-direction:column;
    }
  }
}

目次を固定する。

position: stickyを利用すると、スクロールに応じて要素を固定表示する事ができます。
stickyは英語で粘着という意味です。
目次の表示されている部分に。

position: -webkit-sticky;　//safari対応
position:sticky;
top:140px;//上から何ピクセルの位置に配置するか。

を指定してください。

gifと同様の動きになるはずです！

まとめ

WordPressで目次を使うならTable　Contents　Plus
サイドバーで要素を固定するためには、float配置ではいけない。
Stickyは高さがないと効かない。
スマホでの表示も確認してから。公開をする。

この記事を書いた人
最新の記事

WINDII

WINDII（ウィンディ）は、フリーランスエンジニアが運営するテックメディアです。日々の業務で得た知見を、皆さんに役立つコンテンツにして発信していくので応援よろしくお願いします！また、Slackで無料コミュニティも運営しています。たくさんのエンジニアが参加していて、プログラミングの相談や雑談などをしている楽しいコミュニティなので、興味ある方はぜひお気軽にご参加ください。 Slackコミュニティはこちらから

現役フリーランスエンジニアが運営するテックメディア。日々の業務で得た知識を発信していきます！

WINDIIテック