【賢威８】目次に表示する項目をH2タグまでにする方法

突然ですが、あなたはブログに目次を付けていますか？？

賢威８の目次機能を使ってビックリ！

賢威８では目次の表示・非表示が記事ごとに選択できるので、このブログでは記事によって目次を付けたり付けなかったりしています。記事によってワンタッチで変えられるので、すごくありがたいです♪

そんな中、いつものように記事を書いてプレビューを確認すると、なんとビックリ！！

目次が、めちゃくちゃ長くなってるーー！！！

コレ、長くないですか？記事を開いて、ちょっと進んだら画面いっぱい目次だけになってました。

この場合は、記事中にＨ２タグとＨ３タグを使っていて、目次はそのタグから生成されています。
おそらく、Ｈ４タグを入れてたら更に長かったかもしれません・・・

目次で下層のタグまで表示されたら、私のブログでは記事の内容が目次でほぼネタバレ状態になってしまうので、目次に表示するタグはＨ２タグまでにすることにしました。

今回は、その方法を解説していきます！
これは、Ｈ４タグまで表示されてしまうのをＨ３タグまでにしたい場合も使えます♪

目次の表示を変える設定の前に

今回は、と～っても大事な「functions.php」というファイルを触ります。functions.phpは1文字でも間違えると、うまく動かなくなってブログが真っ白に・・・！なんて事もあり得るファイルです。

新しいプラグインを入れる時や、PHP・CSSを触る時もそうですが、何か変更を加える時は事前にバックアップを取っておきましょう！！

目次に表示する項目をH2タグまでにする方法

※子テーマを導入している前提で解説しています。子テーマを使用せずに親テーマのみで運用している場合は、WordPressのダッシュボードから「テーマの編集」で該当する部分を変更・追記してください。
　〈参考記事〉【賢威8】子テーマの導入方法

1. 子テーマのフォルダの中に「js」というディレクトリ（フォルダ）を作成します。
2. 賢威8の親テーマのjsフォルダから「keni-toc.js」ファイルをコピーしてきて、①で作成した子テーマのjsフォルダに入れます




3. ②で子テーマの中にコピーした「keni-toc.js」を開いて、下記のコードに書き換えます

このコードはＨ２タグまでを目次に表示するようにしているので、Ｈ３タグまで表示させたい場合は20行目の「if ( 3 > indent[1] ) { 」の部分を「if ( 4 > indent[1] ) { 」に変えて対応してください

4. 次に、子テーマ内の「functions.php」に下記のコードを追記します

追記後のfunction.phpはこのような状態です。
※子テーマを利用している場合です。



5. 作成した「js」フォルダと、変更した「functions.php」ファイルを子テーマのフォルダの中にアップロードします
6. 指定したタグのみで目次が生成されているか、確認して完了です

さいごに

今回は、賢威8の目次の生成を希望するタグまで表示するための方法を解説しました。
目次はあると便利ですが、私のように「情報が多すぎても・・・」という方は、是非やってみてくださいね。

＼あわせて読みたい／