【THE THOR】追尾(追従)する目次を表示させるカスタマイズ方法。

どうも、じょにーでっぷん(@じょにーでっぷん)です。

今回の内容は、プラグイン無しで追従する目次を表示させる方法です。

THE TOHRのアップデートによるバグ回避の為、THE THORの機能本体には触らず、jQueryを使って、記事内の目次をコピーする形で実装してみました。

TOC(Table Of Contents)等のプラグインをできるだけ入れたくないという方におすすめです。

記事ページに、追尾型の目次を付けたい方のお役に立てると幸いです。

【THE THOR】追従する目次をサクっと作成!

今回目指すデザイン

参考動画

【コピペOK】追従する目次のソースコード

まずは、FTPソフトやサーバーのコントロールパネルから、wp-content>themes>the-thor-childを開きます。

そして、the-thor-childフォルダの中にside_outline.php

という名前で、新しくファイルを作成します。

side_outline.php

が作成できたら、その中に以下のソースを丸々コピペしてください。

コピペ出来たら、次は

wp-content>themes>the-thor-child

の中に

functions.php

というファイルを新規で作成してください。

もし、元々子テーマの中にfunctions.phpがある方は、そのファイルをそのまま使ってください。

作成できたら、そのファイルの中に、以下のソースをコピペしてください。

ここまでできたら、後もう少しです。

ワードプレスのカスタマイズ画面を開き

追従サイドバーエリアに、カスタムHTMLのウィジェットを設置します。

設置できたら、カスタムHTMLに

[side_outline]

という記述を追加します。

以上で、追尾型の目次が設定できました!

CSSでデザインを整える

目次が追加できたら、最後はCSSでデザインを整えていきましょう。

以下のソースを丸々、wp-content>themes>the-thor-child>style-user.cssにコピペしてください。

これで全ての工程は終了です!

お疲れさまでした!

わからないことがあれば、Twitter(@じょにーでっぷん)で、お気軽にご相談ください。

THE THORのカスタマイズ一覧はこちら!