メニュー

目次の作り方

wp-jintest

記事の目次を作るなら、JINチームで開発している「Rich Table of Contents」という目次プラグインを使ってもらえるといいです!

無料&一瞬で目次を作れるプラグインなので、ぜひJIN:Rを使っている人はご利用ください。

目次の作り方

1|プラグインを追加する

WordPressの管理画面から「プラグイン」>「新規追加」へと進んでください。

続いて、画面右側にあるプラグインの検索窓で「rtoc」と検索してください。

そうすると、このようなプラグインが出てくるので「今すぐインストール」のボタンを押してください。しばらく待つと「有効化」のボタンが出てくるので、それもクリックしましょう。

これで目次プラグインのインストールが完了です!

2|「RTOC管理」を開く

管理画面に「RTOC管理」という項目が追加されていますので、これをクリックしましょう。

ほとんど何も触らなくてOKなのですが、

  • 目次を表示させるページ(投稿 / 固定ページ)
  • 表示させる見出し設定(H3まで表示)
  • 表示条件(見出し4つから)

この設定だけ自分の環境に合わせて変えてもらえるといいと思います!

設定が終わったら、画面最下部にある「保存」のボタンを押しておいてください。

これだけで目次ができあがっているよ!

実際の記事を確認してみてね

ひつじくん
ひつじくん

追尾目次の作り方

JIN:Rでは、サイドバーに「追尾する目次」を置くことも可能です。

「外観」>「ウィジェット」に進む

サイドバー追尾のウィジェットを開く

「サイドバー追尾【PC】」の項目が見つかります。ここにパソコンのサイドバーで追尾する項目を登録することができます。

ショートコードブロックを設置

まず、「ショートコード」のブロックを設置してください。

/ショートコード と入力するとすぐに見つけることができるので便利です。

設置できるとこういった見た目になります↓

先ほどコピーしたショートコードを貼り付け

ショートコードブロック内に、以下のコードをコピーして貼り付けましょう。

[rtoc_mokuji title="" title_display="この記事の目次" heading="" list_h2_type="" list_h3_type="" display="" frame_design="" animation=""]

うまく設置できるとこういった見た目になります↓

補足:スペーサーで余白を取っておくと尚良し

先ほどショートコードの上に「スペーサー」のブロックを置いて余白を作っておくと、目次が読みやすく仕上がりやすいのでお試しください。

スペーサーを設置するとこういった見た目になります↓

ここで、先ほどのコピーしたショートコードを貼り付けましょう。これで追尾する目次が完成します。

JSONエラーでウィジェットが保存できない場合
レンタルサーバーの「WAF設定」が保存の邪魔をしている可能性があります。サーバーにログインして、セキュリティ設定の「WAF設定」をOFFにしてお使いください。

他の記事も読んでみましょう

ABOUT ME
ひつじ
ひつじ
ブロガー / デザイナー
WordPressテーマ「JIN」の制作者として、設計とデザインを担当している。

会社員として働くのが嫌すぎて、2016年に収入0円でブログ起業。SEOとアフィリエイトを組み合わせて開始1年で月100万円超の利益を達成する。

しかしその反動でアフィリエイトには飽きてしまい、もともと好きだったデザインを武器に、チームでWordPressの開発をおこなっている。
記事URLをコピーしました