ワードプレスで目次をどうやって表示させるべきかを検討した結果

この記事のURLとタイトルをコピーする

この記事を読むのに必要な時間は約 9 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)

WordPressでの目次を表示する方法についていろいろとテストを重ね検証してみました。
筆者は、アメブロはてなブログでも目次を表示させていますが、基本的にはHTMLとスタイルシートで表示させています。
筆者が目次に求める条件とは、わかりやすいことと開閉式であること
繰り返し簡単に利用できることの3つの点です。
その中で筆者が最終的に選択した方法とは?

 

 目 次 

アメブロでの表示

アメブロの目次
アメブロでは、基本的にJavaScriptやjQueryが使えません。
HTMLとスタイルシートを使うしかないのです。
ただHTMLでも禁止タグがあり開閉式にするとか
フォントアイコンを使うなどは、あきらめてる感じですね。
できるだけシンプルに表示させてるつもりですが・・・
下記に目次部分のHTMLを表示します。

アメブロの場合は、メルマガ購読で無料で配布している記事テンプレートを使っていただけたらと思います。

テンプレートの使い方は、下記より

 

はてなブログでの表示

はてなブログ 目次閉じている状態
はてなブログではアメブロと違って開閉式ということとフォントアイコンを使うことにもうまくいきました。
上記画像は、目次が閉じている状態です。

はてなブログ 目次表示
目次を表示させた状態が上記画像です。
基本的にはHTMLとスタイルシートで表示しています。

上記のHTMLは、実際に表示しているものと同じHTMLですがはてなブログで使っているテーマは、Brooklynを使っています。
スタイルシートは、Brooklynに合わせて設置しています。

設置したページ

参考にさせていただいた記事

ちなみにアメブロは、この方法ではinputタグが禁止タグになっているので応用できません。筆者としては、理想な形での表示となってます。

 

プラグインを使った方法

Easy Table of Contents
上記は、WordPressプラグインEasy Table of Contentsを使って表示しています。
他にもTable of Contents PlusSimpleTOC – Table of Contents Blockなどがあるのですが筆者としては、あまり気乗りしなかったのです。
理由は、リスト先頭に表示させるマークや必要のない見出しを入れてほしくないということなのです。その他でのプラグインでは、Shortcodes by Angie MakesShortcodes Ultimateなどでアコーディオンの機能を使う方法もありますが・・・プラグインテーマによりうまくいかない場合もあるのです。
可能であれば自作が1番望ましいと思っています。
多くは、開閉式にするかどうかの問題がほとんどですが・・・

Stinger8で目次表示
上記画像は、Stinger8Shortcodes by Angie Makesを使って表示してみました。Lightningでは、いろいろプラグインを入れすぎているせいか開くことができませんでしたが・・・

 

自作での表示

Stiner8目次
上記画像は、Stinger8はてなブログで使った HTML スタイルシートで目次をテストしてみましたが、クリックしても開かなくなりました。
どうもcheckboxを使った方法がうまく機能していないようです。
また、jQueryを使った方法も注意が必要です。
 WordPressのアップデートでjQueryが追加されてからどうもよろしくないようです。

 

まとめ

目次について
筆者の結論は、 WordPressで目次に時間をかけて何かするというのは、非効率であると言うこと
時間ばかりかけて生産性がない
それならプラグインで対応する方がいいというのが結論ですね。
その方が確実に動く可能性が高く時短できると言う意味ではそうするべきだと思いましたね。
下記の記事ではプラグインを使っております。

下記の記事ではテーマに目次を表示できる機能がついてます。

 


 

チャンネル登録

 

WEBのことならくまはちLABにお任せください。
寄付やカンパもお待ちしております。

サービス 制作事例
お問い合わせ
908labo.com
kumahachi.me
インスタフォローしてネ
LINEスタンプ
LINE@友だち追加
Vektor WordPress Solutions
Vektor WordPress Solutions

くまはちLABのご利用ありがとうございます!
くまはちLABの最新情報をフォローしてゲットしてください!