THETHORの目次をカスタマイズする方法！！

THETHORでは親ファイルに目次のコードが記載されていて通常のカスタマイズだと編集が困難なため「phpファイル」を編集してカスタマイズを容易にする必要があります。

目次表示の設定

THETHORは自動で目次を挿入してくれる機能が付いています。読者が求めている情報の項目まで表示画面をスキップしてくれる便利な機能で、内容に沿った目次を設定することでユーザビリティの向上に繋がります！！

目次設定までの手順

【ダッシュボード】

【外観】

【カスタマイズ】

【投稿ページ設定】

【目次設定】

「表示する」を選択して、最小見出し数と見出しのレベルを指定します。見出しのレベル指定は「2」でh2のみ、「3」でh3まで表示されます。

目次をカスタマイズする方法

THETHORの初期の目次デザインはシンプルすぎるので、目次デザインを変更したいと思っている方に向けて部分的にカスタマイズする方法を紹介したいと思います。

参考デザイン

参考デザインとして、当サイトの目次デザインで解説していきます。数値や色などの応用で、自分なりの目次デザインを作る参考になれば幸いです。

カスタマイズの手順

STEP①

PHPファイルをダウンロードする。

親テーマにある目次のコードを子テーマにコピーして必要な部分の編集をする為に少し面倒な作業にはなりますが、頑張ってやってみましょう。PHPの編集作業は、各自お使いのサーバーにある「ファイルマネージャー」で編集することができます。

【サーバーログイン】

【ファイルマネージャー】

【public_html】

【各自ドメイン】

【wp-content】

【themes】

【the-thor】

【inc】

【front】

【outline.php】

「outline.php」ファイルをダウンロードしましょう。outline.phpファイルの中身の一部を編集していきます。

STEP②

PHPファイルを編集する。

「outline.php」ファイルの132行目〜135行目に記載されているコードを書き換えます。

<div class="outline"><span class="outline__title">目次</span><input class="outline__toggle" id="outline__toggle" type="checkbox" close="" /><label class="outline__switch" for="outline__toggle"></label></div>

<div class="outline"><div class="outline__head"><span class="outline__title　icon-books">目次</span><input class="outline__toggle" id="outline__toggle" type="checkbox" close="" /><label class="outline__switch" for="outline__toggle"></label></div>

編集後の参考画像

134行目のポイントとして、<span class=”outline__title　〇〇〇(1)”>〇〇〇(2)</span>の「〇〇〇(1)」の部分にはアイコンのクラス名を入れて「〇〇〇(2)」には目次のタイトルを入れます。

アイコンのクラス名は別の記事で確認できるようにしていますので、確認したい場合は下記のリンクからどうぞ！！

STEP③

PHPファイルをアップロードする。

PHPファイルの編集が完了したらoutline.phpファイルを子テーマにアップロードしていきましょう。流れとしては親テーマと同じようなファイルを作っていくで作業で、「the-thor-child」の中に「inc」のフォルダを作り、「inc」のフォルダの中に「front」のフォルダを作ります。

「front」のフォルダに編集が完了したoutline.phpファイルをアップロードします。

【サーバーログイン】

【ファイルマネージャー】

【public_html】

【各自ドメイン】

【wp-content】

【themes】

【the-thor-child】

【incファイル作成】

【frontファイル作成】

【outline.phpアップロード】

「the-thor-child」<「inc」<「front」<「outline.php」になっていればアップロードも無事完了ですので確認しましょう。

STEP④

CSSを追加する。

目次の参考デザインCSSは下記になりますのでwordpressカスタマイズの「追加 CSS」にコピペして下さい。ホバーエフェクトのCSSは「ホバーのカスタマイズ方法」に記載しています、ホバーエフェクトを使用したい場合は色を指定して下記のCSSに追加して下さい。

.content .outline__head { background:#000; padding: 5px 20px; margin: -10px -10px;}.content .outline { border: 2px solid #000; position:relative; border-radius:10px; width:100%; margin:3rem 0;}.outline__title { color: #fff; font-weight: 700;}.content .outline__switch { position:absolute; right:2.5rem; top:15px;}.content .outline__toggle:checked + .outline__switch::before {content: "CLOSE";}.content .outline__switch::before { content: "OPEN"; border: 0; color:#fff;}.outline__list a { font-weight:700;}

CSSコード追加後の完成デザイン

「CSS 追加」CSSコードのコピペが完了したら上記の「参考デザイン」のような目次が表示されているかと思います。アイコンや目次のタイトルはPHPファイルで、それ以外はCSSでの指定になりますので自分の好きなアイコンや色などでカスタマイズして遊んでみて下さい。

ホバーのカスタマイズ方法

目次の文字にカーソルを合わせた時に色が変わるようにホバー実装のカスタマイズしましょう。ホバーを実装することで、目次見出しのどこを選択しているかが一目瞭然で分かるようになります。

ホバー色の変更をするCSSコードを貼り付けるだけの簡単なカスタマイズです。CSSコードは下記をコピペして、色の変更は「#●●●●●●」の部分を好きな色に張り替えて下さい。

.content .outline__link:hover  { color: #●●●●●●;}