ワードプレスで目次をどうやって表示させるべきかを検討した結果
この記事を読むのに必要な時間は約 9 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)
WordPressでの目次を表示する方法についていろいろとテストを重ね検証してみました。
筆者は、アメブロやはてなブログでも目次を表示させていますが、基本的にはHTMLとスタイルシートで表示させています。
筆者が目次に求める条件とは、わかりやすいことと開閉式であること
繰り返し簡単に利用できることの３つの点です。
その中で筆者が最終的に選択した方法とは？
アメブロでの表示
アメブロでは、基本的にJavaScriptやjQueryが使えません。
HTMLとスタイルシートを使うしかないのです。
ただHTMLでも禁止タグがあり開閉式にするとか
フォントアイコンを使うなどは、あきらめてる感じですね。
できるだけシンプルに表示させてるつもりですが・・・
下記に目次部分のHTMLを表示します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/* テンプレート */ <div style="height: 15px;"><span style="padding: 5px 10px; margin-left: 10px; border-radius: 5px; font-weight: bold; color: #fff; background: #0000ff;">目 次</span></div> <div style="padding: 25px 12px 15px; margin-top: 0px; border-radius: 5px; border: 2px solid #0000ff; width:70%;"> <ol> <li><a href="#1">見出し</a></li> <li><a href="#2">見出し</a></li> <li><a href="#3">見出し</a></li> <li><a href="#4">見出し</a></li> <li><a href="自社サイトリンク">見出し</a></li> <li><a href="#5">お知らせ</a></li> </ol> </div> |
アメブロの場合は、メルマガ購読で無料で配布している記事テンプレートを使っていただけたらと思います。
テンプレートの使い方は、下記より
はてなブログでの表示
はてなブログではアメブロと違って開閉式ということとフォントアイコンを使うことにもうまくいきました。
上記画像は、目次が閉じている状態です。
目次を表示させた状態が上記画像です。
基本的にはHTMLとスタイルシートで表示しています。
|
1 2 3 4 5 6 7 8 9 10 |
<div class="l_toc"><label for="tocopen"><em class="fas fa-bars"> </em> 目次-OPEN</label> <input id="tocopen" type="checkbox" /> <ol class="toc_container" style="border: 5px solid #191970; width: 80%; border-radius: 5px;"> <li><a href="#1">見出し</a></li> <li><a href="#2">見出し</a></li> <li><a href="#3">見出し</a></li> <li><a href="#4">見出し</a></li> <li><a href="自社サイトリンク">見出し</a></li> <li><a href="#5">お知らせ</a></li> </ol> </div> |
上記のHTMLは、実際に表示しているものと同じHTMLですがはてなブログで使っているテーマは、Brooklynを使っています。
スタイルシートは、Brooklynに合わせて設置しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
/***** 目次ボタンクリックでtoc_containerを開く ******/ #tocopen:checked+.toc_container { display: block; padding: 45px; border: 4px solid tan; } /***** チェックボックスと開閉する目次ボックスは非表示 ****/ .toc_container,.l_toc input[type="checkbox"]{ display: none; } .l_toc { width: 95%; max-width: 600px; margin: 30px auto; position: relative; top: 38px; left: 0; } .l_toc label { background-color: #191970; border-radius:5px; color: #fff; padding: 10px; position: absolute; top: -40px; left: 0; } .toc_container { background-color: #fff; width: 100%; } .toc_container ol>li { margin: 10px 0px; } |
設置したページ
参考にさせていただいた記事
プラグインを使った方法
上記は、WordPressでプラグインのEasy Table of Contentsを使って表示しています。
他にもTable of Contents PlusやSimpleTOC – Table of Contents Blockなどがあるのですが筆者としては、あまり気乗りしなかったのです。
理由は、リスト先頭に表示させるマークや必要のない見出しを入れてほしくないということなのです。その他でのプラグインでは、Shortcodes by Angie MakesやShortcodes Ultimateなどでアコーディオンの機能を使う方法もありますが・・・プラグインやテーマによりうまくいかない場合もあるのです。
可能であれば自作が1番望ましいと思っています。
多くは、開閉式にするかどうかの問題がほとんどですが・・・
上記画像は、Stinger8でShortcodes by Angie Makesを使って表示してみました。Lightningでは、いろいろプラグインを入れすぎているせいか開くことができませんでしたが・・・
自作での表示
上記画像は、Stinger8ではてなブログで使った HTMLと スタイルシートで目次をテストしてみましたが、クリックしても開かなくなりました。
どうもcheckboxを使った方法がうまく機能していないようです。
また、jQueryを使った方法も注意が必要です。
WordPressのアップデートでjQueryが追加されてからどうもよろしくないようです。
まとめ
筆者の結論は、 WordPressで目次に時間をかけて何かするというのは、非効率であると言うこと
時間ばかりかけて生産性がない
それならプラグインで対応する方がいいというのが結論ですね。
その方が確実に動く可能性が高く時短できると言う意味ではそうするべきだと思いましたね。
下記の記事ではプラグインを使っております。
下記の記事ではテーマに目次を表示できる機能がついてます。
 |
くまはちLABのご利用ありがとうございます！ |
Evernoteに保存