自動目次便利なんですが、H4まで一気に表示されるため、冒頭で全ネタバレ必至です。
何もしない状態だと出落ちみたいな状態になりがちです。
「H2までの表示にしたいなぁ」って方も多いと思いますので、その方法を紹介します。
賢威の目次の表示をH2までにする
まず、単純にH2以下の項目を目次に表示したくない場合、CSSだけでめっちゃ簡単にできます。
#keni_toc li > ol{ display: none; }
style.cssにコピペでOK！
ワードプレスの管理画面左側のメニューから「外観」→「テーマエディタ」
次に表示される画面の右側のタブからstyle.cssを選択して、適当な位置にコピペで完了。
単純に消すだけならこの1行で完了です。
賢威のH3以下の目次をアコーディオン化
消したい人は上述したCSSコードだけでOKですが、
[text type=marker color=pink]「消したいけど、表示したい時にできるようにしたい」[/text]って言う欲張りなボーイズ＆ガールズのために、アコーディオン化もやってみました。
ただ消すだけより少し難易度上がりますが、基本コピペでOKです。
H3以下の階層を持つH2の項目に目印を付ける
$('#keni_toc li:has(ol)').addClass('has_under_h3');
まずはjQueryでH3以下の要素を持っている目次を特定して、印を付けます。
余談ですが、CSSで「has」セレクタって使えないんですね。jQuery独自のセレクタのようです。
これ作ってるときにずっとCSSに「li:has(ol)」て書いて「何で効かんのや！」って一人で軽くハマってしまいました（笑）で、ちょっとめんどくさいとは思ったんですが、jQueryで印をつけて操作することにしたワケです。
目印を付けた要素の末尾に矢印マークを配置
#keni_toc .toc-area_list>li.has_under_h3 {
position: relative;
}
#keni_toc li.has_under_h3::after {
content: "";
position: absolute;
border-right: 4px solid #bec5be;
border-bottom: 4px solid #bec5be;
width: 0.8em;
height: 0.8em;
top: 0.8em;
right: 0.8em;
transform: rotate(45deg);
}
#keni_toc li.has_under_h3.open_h3::after {
content: "";
position: absolute;
border-right: 4px solid #bec5be;
border-bottom: 4px solid #bec5be;
width: 0.8em;
height: 0.8em;
top: 0.8em;
right: 0.8em;
transform: rotate(-135deg);
}
次にCSSで先ほどJQueryで付与した「 has_under_h3 」クラスを持っているリストの後方に疑似要素を配置します。
「展開できるよ！」ってユーザーに知らせる目印を表示さるワケですね。
::afterが二種類あるのはクリックして展開された時に「open_h3」というクラスを付与してアイコンの表示に変化を付けるためです。
jQueryでクリックした時の動作を作る
$(".has_under_h3").on("click", function() {
$(this).children('ol').slideToggle(200);
$(this).toggleClass("open_h3");
$(this).next("has_under_h3").slideToggle();
});
最後にjQueryのclick機構を作って終了です。
コードの記載場所
CSSの方は上で説明しているstyle.css内に記述すればOKです。
jQueryの方は、子テーマを使っている方はjsファイルを自分で作ってfunctions.phpで読み込む必要があります。
ご自身でファイルを作成する場合以下の記事を参考にしてjQueryが動く記述で記載する必要があります。
//---------------------------------------//
// 自作JSファイルの読み込み動作を追加
//---------------------------------------//
function add_my_js(){
wp_enqueue_script('accordion_toc',get_stylesheet_directory_uri().'/js/accordion_toc.js', array('jquery'),true);
}
add_action('wp_enqueue_scripts', 'add_my_js');
例えば「accordion_toc.js」というファイル名で保存したjsファイルを読み込みたい場合は上記コードをfuntions.phpに記載する必要があります。
子テーマを使っていない場合
子テーマを使っていない場合、または、functions.phpとかメンドクサイと言う方は親テーマのkeni_toc.jsファイルの中に直接記載しに行っても別に問題なく動きます。
テーマエディタ内で編集テーマを選択。ここで親テーマを選びます。
親テーマを選ぶとjsというフォルダがあると思います。（特に何も設定していない子テーマではjsファイルは出現しません。）
その中のkeni-toc.jsが目次関係の動作のファイルですので、このファイルに書き込むと管理としては楽だと思います。
注意してほしいの記述箇所。
赤枠の箇所（最下部行）より上の位置に記載する必要があります。
「最下行より一行上」でいいと思います。
だたし、ここに記載した場合、親テーマの更新のタイミングで気を付けないと上書きされてカスタムが初期化されますのでご注意を。
まとめ
記述したコードは最低限のアコーディオン化で質素なものですが、背景色などで肉付けすると当ブログの目次のような状態になります。
コメント