Wordpress

【WordPress 5.8】JINテーマで目次をサイドバー追尾する方法

固定サイドバーに目次を載せる方法

こんにちは!ユウナです。

パソコン画面でのみ表示される追尾サイドバー(固定サイドバーと表記しているところもあります)。皆さんは使っていますか?

図で説明するとこのようなパーツのことです。

最近ではスマホサイト版の方が高シェアを獲得しているため、あまりパソコン版の方は後回しにされがちですが、意外とこういったところまで手を込ませると、完成度がさらに上がりますよね!

ユウナ

若干、自分の気持ち次第かもしれませんが、細部まで整っていると達成感もあります

そこで当退会専科でも追尾サイドバーに目次を導入することにしました。

参考にしたサイトはこちらです。(外部サイトに飛びます)⇒たった1分で!サイドバーに目次を追従させる

しかし、ちょうど1週間ほど前になんとワードプレスのアップデートがあり、画面構成が変わってしまっていました。

今までとすこしやり方が異なっていて戸惑ったので、本稿では、2021年7月に更新された新しいバージョン「Wordpress 5.8」での設定方法を紹介していきます。

設定手順

1.「RTOC設定」を選択し、「ショートコード」タブを開く

2.表示されている「目次のショートコード」をコピーする

3.ショートコードを編集する

そのままのショートコードでは、「h1」や「h2」などの見出しが設定されていません。

そのため、最低限必要な設定として、表示する見出し階層を書き換えましょう。

[rtoc_mokuji title="" title_display="" heading="h4" list_h2_type="" list_h3_type="" display="" frame_design="" animation=""]

「h4」までの見出しを表示したいため、「h4」としました。例えば、h3まで表示したいなら「h3」を書けば問題ありません。

4.「サイドバー追尾【PC】」にショートコードを登録する

ワードプレスの管理者画面から、「外観」>「ウィジェット」>「サイドバー追尾【PC】」にある「+」ボタンを選択します。

サイドバー追尾【PC】ウィジェット

※これは「ショートコード」ブロックを呼び出したいために行っています。

5.「ショートコード」ブロックを選択する

下記図のように「[/]ショートコード」ブロックを選んでください。

6.目次のショートコードを書き込む

「手順3」で作成したショートコードを入力します。

その後、「更新」ボタンを押して、準備完了です!

ユウナ

忘れがちですが、必ず更新ボタンを押すところまで行ってください。

これで、本稿の冒頭で解説した画面のように、サイドバー追尾【PC】枠に目次を挿入することができます

お疲れ様でした。

結び

いかがだったでしょうか。

WordPressは更新頻度が速いので、なかなか自分のバージョンにマッチする情報が得られずちょっと躓いたりすることが日常茶飯事ですが、ゆっくり順を追ってみていけば、なんてことないですね!

もしWordpressバージョン5.8の管理者画面から、サイドバー追尾枠に目次を入れたいときは、本稿を参考にしてスムーズに設定していきましょう。