よもやまチョモランマ

固定ページの目次にプラグイン『Table of Contents Plus』

WordPress

プラグインに頼りました。頼りましたとも。

つい先日、プラグインなしで目次を入れる記事を書きましたが、それはあくまでブログの「投稿記事」の冒頭に入れることを前提としていたものであって。
今回のような、コーポレートサイトの場合、基本「固定ページ」がメインなので、ソレジャナイってなったんだよね・・・

でも、やっておいてよかった。
やってなかったら、ほんとに最初の一歩から調べなきゃだよ。
ていうか、目次の理屈を知らなかったら、固定ページの見出しをサブメニューとして表示させよう、なんて発想にもならなかったかも。

【勝利条件】
　1. 各固定ページに固有の目次を自動で表示させる
　2. 固定ページにはサイドバーが出現するのでそこに表示させる
　3. パソコンのときはサイドバーに、スマホのときは冒頭に表示させる

なかなかのムリゲーだと思いません？

まず、固定ページやサイドバーに表示できるプラグイン『Table of Contents Plus』を見つけました。
【参考】【WordPress】ブログ記事や固定ページに目次をつける便利なプラグイン「Table of Contents Plus」
ありがたい！
これで1と2はほぼ同時にクリア！

次に表示されたもののカスタマイズ。
【参考】Table of Contents Plusの設定方法＆CSSデザイン
ありがたい！
CSSもコピペしただけで使えます！

さて。ここからが大変でしたよ。
レスポンシブで切り替えなければなりません。
落とし穴としては「記事に表示される目次」と「サイドバーに表示される目次」でセレクタが違うことかな。

記事のほうは、何もしなくても勝手に出てきます。
コピペしてきたSCCのセレクタでOKです。

サイドバーは、ウィジェットに「ＴＯＣ＋」を加えることで出ます。
サイドバーに吐き出されるセレクタを調べて、コピペ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?

≪ next post
prev post ≫