固定ページの目次にプラグイン『Table of Contents Plus』
プラグインに頼りました。頼りましたとも。
つい先日、プラグインなしで目次を入れる記事を書きましたが、それはあくまでブログの「投稿記事」の冒頭に入れることを前提としていたものであって。
今回のような、コーポレートサイトの場合、基本「固定ページ」がメインなので、ソレジャナイってなったんだよね・・・
でも、やっておいてよかった。
やってなかったら、ほんとに最初の一歩から調べなきゃだよ。
ていうか、目次の理屈を知らなかったら、固定ページの見出しをサブメニューとして表示させよう、なんて発想にもならなかったかも。
【勝利条件】
1. 各固定ページに固有の目次を自動で表示させる
2. 固定ページにはサイドバーが出現するのでそこに表示させる
3. パソコンのときはサイドバーに、スマホのときは冒頭に表示させる
なかなかのムリゲーだと思いません?
まず、固定ページやサイドバーに表示できるプラグイン『Table of Contents Plus』を見つけました。
【参考】【WordPress】ブログ記事や固定ページに目次をつける便利なプラグイン「Table of Contents Plus」
ありがたい!
これで1と2はほぼ同時にクリア!
次に表示されたもののカスタマイズ。
【参考】Table of Contents Plusの設定方法&CSSデザイン
ありがたい!
CSSもコピペしただけで使えます!
さて。ここからが大変でしたよ。
レスポンシブで切り替えなければなりません。
落とし穴としては「記事に表示される目次」と「サイドバーに表示される目次」でセレクタが違うことかな。
記事のほうは、何もしなくても勝手に出てきます。
コピペしてきたSCCのセレクタでOKです。
サイドバーは、ウィジェットに「TOC+」を加えることで出ます。
サイドバーに吐き出されるセレクタを調べて、コピペCSSに追記するカタチでのりこえました。
/*----- 目次 -----*/ .toc_title { text-align: center; background: #999; color: #fff; padding: 2px; display:block; } #toc-widget-2, #toc_container { display: block; background: #efefef; line-height: 1.3; font-size: 80%; margin-bottom: 40px; padding: 0 0 6px 0; border: none; } #toc_container ul { margin: 0 20px; } #toc-widget-2 ul li, #toc_container ul li { margin: 7px 0; } #toc-widget-2 ul a, #toc_container ul a { display: block; border-bottom: 1px dotted #999; color: #333; } #toc-widget-2 .toc_widget_list > li > a, #toc_container .toc_list > li > a { border-left: 4px solid #669999; border-bottom: 1px dotted #999; padding: 0 0 0 5px; margin: 0 0 5px 0; } #toc-widget-2 ul ul, #toc_container ul ul { padding: 0 0 0 3px; } #toc-widget-2 li, #toc_container li { padding-bottom: 2px; } #toc-widget-2 { padding: 10px 0; } #toc-widget-2 ul { margin: 0 18px; } /* レスポンシブ */ @media screen and (min-width:960px){#toc_container {display: none;}}
まるで二人羽織www
sidebar.phpのほうはこんな感じ。
<div class="out_sp"> <p class="toc_title">Contents</p> <?php dynamic_sidebar( 'sidebar-1' ); ?> </div>
サイドバーのタイトルに、あえて記事のほうと同じクラスをあてて、CSSを揃えました。
(現段階では余白が違っちゃっててあんまりうまくいってないけど・・・)
そして、PCのときは記事のほうを、スマホのときはサイドバーのほうを、非表示にしたいわけですが。
どういうわけか、サイドバーのほうのセレクタに「display:none」が効かなかったので、divで囲っちゃいました。
あと、最後の最後に、非表示が両方効かなくてアタマ抱えていたんですが、CSSの「display:block」から「!important;」を削除することで、消えました。
とりあえず、OK?