WordPressの目次作成方法をプラグインあり/なしそれぞれの方法で解説

• WordPressで目次をつけるにはどうしたらよいだろう？

おもに記事コンテンツで必須な役割を担う目次。
WordPressでどのように目次をつけるかわからない方も多いかと思います。

それもそのはず、WordPressは活用方法がさまざまなので、目次に関してもさまざまな方法があります。
なかでもオススメな方法は以下の3つです。

どれが最適かは状況により異なるので、一つひとつオススメのシチュエーションと合わせて紹介していきます。

ミツキ

本記事は、フリーランスでWebサイト制作やSEOコンサルをしているミツキが解説していきます。
SEO観点でのポイントも含めて解説するので、ぜひ参考にしてみてください。

※本記事の目次は、WordPressテーマ賢威の内蔵された機能を使っています。

WordPressで目次を挿入するメリット

それでは、まずWordPressで目次を挿入するメリットから見ていきましょう。
代表的なメリットは次に挙げる3つがあります。

読者が記事の内容を大まかに理解できる

一番重要なメリットとして、目次を見れば内容を大まかに理解できる点があります。
とくに、記事の文章量が多い場合に役立ちます。

たとえば以下の記事は25000文字を超えるボリュームです。

すぐにオススメのレンタルサーバーを知りたい方にとって、選び方のポイントなどは必要ないかもしれません。
そのような時に、目次を見れば目的であるオススメのレンタルサーバー紹介まですぐに飛べます。

このように、目次によって記事の概要を理解し、目的のコンテンツまでたどり着ける手助けとなります。

執筆者にとってもメンテナンスなどで後から対応しやすい

記事を執筆する方やディレクターにとっても、目次はメリットがあります。
基本的に、記事は一度書いて完成ではありません。

記事が完成してから、以下のようなタイミングで修正するのが基本です。

記事全量をゼロから見返して修正するのがベストですが、リソースの関係でそうもいかないこともあります。

そのような時に、目次があればどの部分を修正すればよいか見つけやすいです。

Googleの検索結果に表示されることがある

3つ目のメリットは、検索エンジン向けのSEOにおけるメリットです。
以下の検索結果を見ると、タイトルと説明の下にリンクが入っていることがわかります。

上記の赤枠で囲った部分のリンクは、目次を基に表示されています。
検索結果のロジックはブラックボックスですが、以下を基準に表示されている可能性が高いです。

目次がリンクが表示されることで、検索結果での占有率が増えてクリック率が上昇する可能性があります。
その結果、検索流入の増加や間接的にSEO順位がさらによくなることもあるでしょう。

WordPressで目次を挿入する方法は3つ

ここまでは、目次を挿入するメリットを見てきました。
続いて、本題であるWordPressで目次を挿入する方法を3つ紹介していきましょう。

WordPressで目次を挿入するオススメな方法は、以下の3つです。

よく各記事でHTMLを編集して目次を作成する方法が紹介されています。
しかし、HTMLで目次を作成するのはオススメしません。

なぜなら、以下の理由からコスパが非常に悪いためです。

記事の量が増えればなおさらです。

なので、上記で挙げた3つの方法いずれかで目次を作成することをオススメします。
それでは、具体的にどのように作成していくのか、わかりやすく解説していきましょう。

プラグインを使ってWordPressで目次を作成する方法

まず、よく使われるプラグインを用いた目次の作成方法です。
プラグインで目次を作成するのは、以下のような方にオススメです。

ただ、目次のプラグインと一口に言っても、かなりいろいろな種類があります。
そこで、オススメな目次プラグインを2つ紹介します。

ただし、使用しているテーマやプラグインによって、うまく動作しない可能性もあります。
その場合は、別のプラグインも試してみてください。

Rich Table of Contents

ひとつ目は、「Rich Table of Contents」です。
WordPressテーマJINの開発チームが開発した目次プラグインです。

開発者が日本人ということで、完全に日本語対応しています。
僕も別ブログ「SEライフログ」では、Rich Table of Contentsを使っています。

Rich Table of Contentsをインストールする方法

Rich Table of Contentsのインストール方法は、通常のプラグインと同じです。
WordPressの管理画面にてプラグインを検索するか、以下よりダウンロードすることでインストールできます。

管理画面からインストールする場合は、

1. WordPress管理画面で「プラグイン」→「新規追加」を選択
2. 「プラグインの検索…」に「Rich Table of Contents」と入力
3. Rich Table of Contentsの「今すぐインストール」ボタンをクリック
4. Rich Table of Contentsの「有効化」ボタンをクリック

という手順でインストールできます。

Rich Table of Contentsの基本的な使い方

Rich Table of Contentsは、いくつか設定できる項目があります。
設定画面に「Live Preview」があり、設定した内容がリアルタイムで確認できるので非常にわかりやすいです。

設定できる内容としては、以下の通りです。

サイドバーにも目次を載せられる

Rich Table of Contentsは、投稿や固定ページの最初の見出し上だけでなく、サイドバーにも目次を載せられます。
イメージとしては、以下の通りです。

上記のようにサイドバーへ目次を掲載するには、サイドバーのウィジェットに以下のように設定します。

[rtoc_mokuji title="目次" title_display="center" heading="h3" list_h2_type="number1" display="open" frame_design="frame4" animation="fade"]

ちなみに、H3まで表示させると見出しが多いときに見切れてしまうため、H2までの設定としています。

※上記のショートコード内で「heading=”h2″」とすれば、H2までにできるはずですが、リンク先がうまく設定されませんでした。
そのため、以下のようにCSSにてH3は非表示にしています。

#side .rtoc-mokuji-content .rtoc-mokuji.level-1 li ul {
  display: none;
}

Table of Contents Plus

続いて、Table of Contents Plusの使い方についてです。

※2022年9月19日時点、前回の更新からかなり時間が経っており、現在のWordPress最新バージョンでテストされていません。
使用する場合はあくまで自己責任でお願いします。

Table of Contents Plusのインストール方法

インストール方法は、Rich Table of Contentsと同様です。

WordPressの管理画面にてプラグインを検索するか、以下よりダウンロードすることでインストールできます。

管理画面からインストールする場合は、

1. WordPress管理画面で「プラグイン」→「新規追加」を選択
2. 「プラグインの検索…」に「Table of Contents Plus」と入力
3. Table of Contents Plusの「今すぐインストール」ボタンをクリック
4. Table of Contents Plusの「有効化」ボタンをクリック

という手順でインストールできます。

Table of Contents Plusの使い方

そのままのデザインだと、Rich Table of Contentsと比較するとシンプルです。
設定できる項目に関しては、次の通りです。

ミツキ

個人的には、Rich Table of Contentsの方がオススメです。
メンテナンスがマメにされていますし、日本のWebサイトやブログにマッチするデザインとなっています。

ただし、細かく見ると微妙な点もあるので、その辺は適宜修正しながら使用するとよいです。
※基本的に、特殊な使い方をしないなら問題ありません。

WordPressテーマの内蔵された機能で目次を作成する方法

使用しているWordPressテーマに目次が内蔵されているケースも多いです。
その場合、わざわざプラグインを入れずにテーマ依存の目次を使うのが王道でしょう。

目次機能が内蔵されている代表的なWordPressテーマ

WordPressテーマは数多くあり、中でも以下のようなテーマは目次の機能が内蔵されています。

上記のようなテーマの場合、テーマ内蔵の目次を使うのを先決に考えるとよいでしょう。
ただし、テーマ内蔵の目次は、デフォルトではデザインがイケていなかったり設定できる内容が少なかったりします。

たとえば、THE THORだとデザインを調整しないと以下のような感じです。

■デザイン前

■デザイン後

※上記は、僕がWebディレクターをしているフリコンブログの記事です。

なので、もしテーマ内蔵の目次がコンテンツに合うデザインにならないなら、プラグインを使うか次の自作といった手段を取るのもありでしょう。

プラグインなしでWordPressで目次を自作する方法【コードコピペOK】

3つ目の方法は、カスタマイズして目次を自作する方法です。
目次を自作するのにオススメな方は以下のような方です。

コードをコピペしてもらえれば目次が作成できるように紹介します。
ですが、環境依存で生じる不具合やデザインを調整したい場合は、コーディングスキルが必要です。

また、僕の環境では動作確認できていますが、すべての環境で表示できるかまでは確認できていません。
そのため、使用する際は自己責任でお願いします。

目次を自作する場合の完成イメージ

上記のようなシンプルな目次を作成します。

なお、以下の環境にて動作確認をしています。

目次を自作する方法

注意点として、見出しに以下のような感じでIDが指定されている場合、目次用のIDで上書きされます。

<h2 id="recommend">オススメのWordPressテーマ</h2>

IDが「heading*」で上書きされるので、目次以外で記事内リンクをつけているときなどはご注意ください。

コードの全量としては、以下の通りです。
まずfunctions.phpに次のコードを追加します。

/**************
 * 目次の作成 *
 **************/
// 見出しへID付与
function add_heading_id($content) {
 if(is_single()) {
  $pattern = '/<h[2-3].*>(.*?)<\/h[2-3]>/i'; // 検索文字列を指定
  preg_match_all($pattern, $content, $matches, PREG_SET_ORDER); // 全てのh2, h3タグを取得
  $i = 0;
  $j = 0;
  $headings = [];
  // 各タグの書き換え&リストの作成
  foreach($matches as $element) {
   $isHeading = true;
   if($isHeading) {
    if(strpos($element[0], '<h2') === 0) { // h2タグの場合
     $i++;
     $id = 'heading' . $i;
     $heading = preg_replace('/<h2(.*?)>/', '<h2 id="'.$id.'">', $element[0]);
     $j = 0;
    } else { //h3タグの場合
     $j++;
     $id = 'heading' . $i . '_' .$j;
     $heading = preg_replace('/<h3(.*?)>/', '<h3 id="'.$id.'">', $element[0]);
    }
    $content = str_replace($element[0], $heading, $content);
    $headings[] = $heading;
   }
  }
 }
 return $content;
}
add_action('the_content', 'add_heading_id');

// 目次用HTML & ショートコード生成
function add_toc() {
 global $post;
 $content = $post->post_content; // 記事の全量取得
 $str = '/<h[2-3].*>(.*?)<\/h[2-3]>/i'; // 検索文字列を指定
 preg_match_all($str, $content, $matches, PREG_SET_ORDER); // 全てのh2, h3タグを取得

 // 各タグの書き換え&リストの作成
 $list = '<div class="toc">';
 $list .= '<div class="toc-title">目次</div>'; // ※目次タイトルを変更する場合はこちらで変更
 $list .= '<ol class="toc-inner">';
 $level = 0;
 $i = 0;
 $j = 0;
 foreach($matches as $element) {
  $isHeading = true;
  if($isHeading) {
   if(strpos($element[0], '<h2') === 0) { // h2タグの場合
    if($level == 0) { //1つ前がh2タグの場合, liを閉じる
     if($i > 1) {
      $list .= '</li>';
     }
    } else { // 1つ前がh3タグの場合, h3のul内のli, h3のul, h2のul内のliを閉じる
     $list .= '</li></ul></li>';
    }
    $i++;
    $id = 'heading' . $i;
    $list .= '<li><a href="#'.$id.'">' . $element[1] . '</a>';
    $level = 0;
    $j = 0;
   } else { //h3タグの場合
    if($level == 0) {//1つ前がh2タグの場合, h3用のulを追加
     $list .= '<ul>' ;
    } else { //1つ前がh2タグの場合, h3用のliを閉じる追加
     $list .= '</li>' ;
    }
    $j++;
    $id = 'heading' . $i . '_' .$j;
    $list .= '<li><a href="#'.$id.'">' . $element[1] . '</a>'; 
    $level = 1;
   }
  }
 }

 if($level == 0 ) {
  $list .= '</li></ol></div>';
 } else {
  $list .= '</li></ul></li></ol></div>';
 }
 return $list;
}
add_shortcode('toc', 'add_toc');

簡単に説明すると、以下の通りです。

ただし、上記だけでは記事に目次は表示されません。
記事内で目次を表示したい位置に「[toc]」を入力することで、目次が表示されます。

上記だけではただのリストでの表示で目次っぽさがないので、次のコードをCSSに追加します。
色などは目次を入れるサイトやブログに合わせて適宜変更してご使用ください。

/**************
 * 目次の作成 *
 **************/
/* 枠 */
.toc {
 width: 90%;
 margin: auto;
 padding: 20px;
 border-right: 1px solid #3BB0FF;
 border-left: 1px solid #3BB0FF;
 border-bottom: 1px solid #3BB0FF;
 border-top: 6px solid #3BB0FF;
}

/* 目次タイトル */
.toc-title {
 text-align: center;
 font-size: 24px;
 font-weight: 600;
}

/* リスト */
.toc-inner {
 color: #3BB0FF;
}

/* リスト文字 */
.toc-inner a {
 color: #333;
 text-decoration-line: none;
}

まとめ

今回は、WordPressに目次を挿入する方法としてオススメの3手法を紹介しました。

目次を入れたいサイト・ブログに応じて最適な入れ方は異なるので、適宜サイトに合った形で入れるようにしましょう。
本ブログではWordPressの使い方に関して不定期で更新しているので、WordPressをマスターしたい方はぜひブックマークしておいてください。