（更新）2019年4月12日：賢威8.0β版アップデート（Ver 8.0.0.0b7）より、ディフォルト状態での目次位置は「最初のH2タグの真上」に修正されました。
賢威8の目次位置
まぁとりあえずこれを見てください。
これを見てあなたは何を感じましたか？
辛いですか？悲しいですか？それとも、嬉しいですか？
僕はですね、
「逆じゃね？」
と思うワケです。あくまで個人的な意見ですよ。
でも、多分このページを見に来ているあなたは僕と同じ事思ってるんじゃないかなぁと思うワケです。
あなたの代わりに声を大にして言います。
「アイキャッチが上やろ！普通っ！」
賢威8の目次位置を調整できないか？
結論から言うと、出来ます。
<div id="keni_toc"></div>
どうやら調べた結果、このHTMLコードの位置に目次は挿入されるようになっているようです。
ほうほう、これなら記事書くときにカスタムHTMLで差し込むだけだから、10秒くらいでできるし、目次の位置も自由自在、万事解決だわ！
・・・とはならないワケです。
そもそも目次とは冒頭にあってこそ意味のあるものです。
自由自在になることに何の意味があるでしょう？
重要なのは、アイキャッチより上か？下か？
この一点です。
コードの挿入作業も記事を書く度に、毎回、同じ無駄な10秒を浪費させられるかと思うと・・・。
目次の位置を調整しなければいけないストレスだけでハゲそうです。
そんな中、僕は全ての賢威ユーザーの皆さんを、目次の位置調整のストレスから解き放つ方法を見つけました。
テンプレートファイルに直接挿入する
考えに考えた結果（10秒くらい）テンプレートファイルに先ほどの目次の位置調整コードを挿入するのがベストという結論になりました。
以下の方にはこの方法はオススメしません。
- 記事の真ん中、または末尾に目次を挿入したい方。
- 目次の位置が自由自在になること自体が楽しい方。
- 目次がわからない方
編集するファイル
今回編集するのは「content-post.php」というファイルです。
賢威のテーマフォルダの「template-parts」というフォルダの中にあるファイルです。
大抵の方は以下のファイルパスにあると思います。
ドメインディレクトリ/wp-content/themes/keni80_wp_standard_all○○○○/template-parts/content-post.php
確認したわけではないですが、賢威7以下のバージョンでも似たような位置に似たような名前のファイルがあるかと思います。
このファイルを直接編集してもいいんですが、僕は子テーマを使うことをオススメしていますので、もし子テーマ使われていない方は以下の記事を参照してください。
子テーマで修正を適用する場合はフォルダの構造ごと、子テーマフォルダに作成必要があります。
ディフォルト時の子テーマフォルダには「template-parts」というフォルダも「content-post.php」も存在しませんから。
こんな感じの階層構造になっていればOKです。
よくわからない方は親テーマの「template-parts」フォルダを丸ごと子テーマフォルダ直下に配置してもOKです。
具体的なコードの挿入位置
<div class="article-body" itemprop="articleBody">
<?php
if ( has_post_thumbnail() && keni_is_thumbnail() ) {
$url_thumbnail = keni_get_the_post_thumbnail_url();
$arr_image_size = keni_get_image_size ($url_thumbnail);
?>
<div class="article-visual" itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
<img src="<?php echo $url_thumbnail; ?>" alt="<?php echo strip_tags( get_the_title() ); ?>" />
<meta itemprop="url" content="<?php echo $url_thumbnail; ?>">
<meta itemprop="width" content="<?php echo $arr_image_size['width']; ?>">
<meta itemprop="height" content="<?php echo $arr_image_size['height']; ?>">
</div>
<?php } ?>
<div id="keni_toc"></div> <!--★★この位置に先ほどのコード挿入★★-->
<?php the_content();
?>
</div>
挿入するのは★の位置です。 <?php the_content(); の真上に差し込む形です。
あとは編集したファイルをFTPでアップロードすれば作業完了。
ちなみにこの修正は投稿にしか反映されません。というか、固定ページで目次って使えるんでしょうか？固定ページ問い合わせフォームしか作ってないんでわからないですね。
目次を閉じた状態で表示する
2019年4月12日のアップデート以降追加された仕様です。
通常、目次は開いた状態で表示されますが、以下のタグを記述することで、最初から目次を閉じた状態で表示することが出来ます。
<div id="keni_toc" closed="true"></div>
目次が長くなってしまい、邪魔になるという場合などにお使いいただけます。
目次のタイトル名を変更する
2019年4月12日のアップデート以降追加された仕様です。
目次のタイトル名を自由に変更することができます。
目次のタイトル名とは以下の赤枠の部分になります。
変更する場合は、以下のタグを記述してください。
<div id="keni_toc" title="変更するタイトル名"></div>
“変更するタイトル名”の部分を変えることによって、自由に変更することが出来ます。
例えば、タイトル名を「見出し一覧」に変更したい場合は以下のようになります。
<div id="keni_toc" title="見出し一覧"></div>
賢威の目次の表示をH2までにする
自動目次便利なんですが、H4まで一気に表示されるため、冒頭で全ネタバレ必至です。
で、「H2までの表示にしたいなー」って方も多いと思いますので、その方法を紹介します。
CSSでめっちゃ簡単にできます。
#keni_toc li > ol{
display: none;
}
style.cssにコピペでOK！
更にH3以下の表示のアコーディオン化をこちらの記事で解説しています。
賢威の目次カスタマイズまとめ
次の記事からは作業0秒にして目次とアイキャッチの位置が入れ替わります。
これでハゲに怯える毎日とはオサラバ。
コメント