WordPressで目次作成する方法をプラグインあり/なしで紹介

この記事は約9分で読めます
Facebookシェア Twitterシェア LINEシェア はてなブックマークシェア

WordPressの記事の中に目次があると、記事内容がひと目で分かるため、読者にとって非常に便利で、検索エンジン対策としても有効です。

しかし、WordPress初心者のなかには、目次の作り方がわからないという人もいると思います。

今回はWordPressで目次を作成する方法を、プラグインあり、プラグインなしの両方のパターンで解説します。

WordPressに目次を入れるメリットとは?

WordPressの記事に目次を入れることは非常に重要です。

目次があることで記事の利便性が高まり、結果的にアクセスアップに繋がるほか、SEO的な観点からもポジティブな効果を期待できるからです。

ここからはWordPressに目次を入れる具体的なメリットを解説します。

記事のおおまかな内容がすぐにわかる

WordPressの記事に目次を設置することで、記事のおおまかな内容がすぐに把握できるようになります。

そもそも読者は悩みや疑問を抱えており、それらを解決したいと思って記事にアクセスしていますが、その記事に書いてあることの全てを読者が必要としているとは限りません。

求めている情報が書かれていなかったり、見つからなかったりした場合には、次の記事を求めて離脱されてしまう可能性が高くなります。

そこで記事冒頭に目次を設置することで、求めている情報の有無が瞬時にわかるようになり、その情報にすぐアクセスできるようになります。

読みたい箇所までスキップできる

記事冒頭に目次があれば、目次をクリックすることで、読みたい箇所までスキップできます。

前述のとおり、すべての読者が記事内容の全部を必要としているとは限りませんし、記事のすべてを読みたいわけでもありません。

特定の情報のみを求めているにもかかわらず、無駄に文章が長ければ、途中離脱につながります。

読者が求める情報をすばやく提供することは、ユーザビリティを向上させます。

アクセスアップにつながる

記事に目次を設置することで、アクセスアップも期待できます。

というのも、Googleの検索結果には、目次の内容が表示されるケースがあるからです。

検索結果に目次が表示されると、検索ユーザーの目に記事の内容が留まりやすくなるので、結果的にクリック率やアクセスアップも期待できます。

SEO的にも良い効果が期待できる

読者の利便性を高めることは、SEO的にも良い効果が期待できます。

読者に必要な情報をすばやく届けることは、良質なコンテンツを提供しているという評価につながるからです。

これはGoogleの目指すユーザーファーストという考え方と通じています。

目次を作成することはユーザーファーストに繋がる施策であり、結果としてSEOにも良い効果をおよぼすと言えるでしょう。

WordPressに目次を作成する方法

WordPressの記事に目次を作成する方法として、プラグインを利用する方法と、HTMLで目次を作成する方法の2通りがあります。

それぞれの方法について解説していきましょう。

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

まずはプラグインを使って目次を作成する方法を解説します。

目次作成のプラグインの中でも、一般的に定番とされているのが「Table of Contents Plus」と「Easy Table of Contents」なので、本記事ではこの2つを紹介します。

なお、設定可能な内容はどちらもほぼ同じですが、Easy Table of Contentsのほうが詳細な設定が可能です。

Table of Contents Plusで目次を作成する

WordPressの管理画面にログインし、左横のメニュー欄にある「プラグイン」を選択し、「新規追加」をクリックしましょう。

右上にある検索窓から「Table of Contents Plus」と検索、「Table of Contents Plus」の「今すぐインストール」をクリック、インストールが完了したら「有効化」をクリックします。

管理画面の左メニューにある「設定」を選択し、「TOC+」をクリック、「基本設定」として表示される以下の設定項目を自分仕様に変更しましょう。

 

設定項目

内容

位置

目次を表示する位置の設定

特別なこだわりがない限り「最初の見出しの前」のままで問題なし

表示条件

見出しが何個以上で目次を表示するかという設定

2~10の間で自由に設定可能

以下のコンテンツタイプを自動挿入

目次を表示させるページのタイプの設定

デフォルトではpage(固定ページ)になっているため、必要に応じてpost(通常の記事)なども選択する(pageとpostの両方選択を推奨)

見出しテキスト

目次の上に表示するテキストを指定する設定

階層表示

h2やh3を階層として表示する場合にチェックを入れる(チェックを入れておくことを推奨)

番号振り

目次の先頭に番号を表示させる場合にチェックを入れる

スムーズ・スクロール効果を有効化

目次をクリックした際に、該当の見出しまでジャンプするのではなく、スクロールで移動する場合にチェックを入れる

外観

目次の外観を好みに合わせてカスタムできる

 

これらの設定をチェックし終えたら、一番下にある「設定を更新」をクリックすると、次から記事内に自動で目次が表示されるようになります。

Easy Table of Contentsを使って目次を作成する

WordPressの管理画面にログインし、左メニューの「プラグイン」から「新規追加」をクリックしましょう。

右上にある検索窓から「Easy Table of Contents」と検索し、表示されたら「今すぐインストール」をクリック、インストールが完了したら「有効化」をクリックします。

管理画面の左メニューにある「設定」を選択し、「目次」をクリックしましょう。

「一般」と「外観」の設定項目を変更しましょう。注意事項は以下3点です。

  • 目次を入れる記事(「サポートを有効化」と「自動挿入」)は、「投稿」と「固定ページ」のチェックを推奨
  • 目次を入れる「位置」は、「最初の見出しの前」のチェックを推奨
  • 「外観」の下に出てくる「高度」に表示される部分は、「見出し」部分のみチェックし、それ以外は上級者向けなので今回は触らない

最後に一番下にある「設定を更新」をクリックすれば、次から該当の記事に自動で目次が表示されるようになります。

HTMLで目次を作成する方法

次に、プラグインを使わずにHTMLを書くことで目次を作成する方法をご紹介します。

この方法では、記事の中にHTMLでコードを書いて目次を作成するため、HTMLの知識が必要となります。

なお、PHPファイルを編集して作成する方法もありますが、サイト全体のデザインや表示が崩れてしまう可能性があるため、今回は割愛しています。

手動で目次を作成する場合は、以下の手順で進めていきます。

まず、WordPressの管理画面のブロックエディタで「カスタムHTML」を選択、カスタムHTMLに「<h2 id="heading1">見出し1</h2>」と記述して、記事の見出しを作成します。

なお、ここでは内容を「見出し1」としていますが、記事の見出しの内容に変更可能で、また、HTMLの中で「id」として指定している「heading1」も任意で設定可能となっています。

同様の手順で、カスタムHTMLのブロックを追加して「<h2 id="heading2">見出し2</h2>」「<h2 id="heading3">見出し3</h2>」を作成しましょう。

カスタムHTMLの表示を「プレビュー」に切り替えると、見出しの内容が表示されますので、作成した3つの見出しの先頭に、新たにカスタムHTMLブロックを作成し、以下のHTMLを入力しましょう。

 

<ol>

          <li><a href="#heading1">見出し1</a></li>

          <li><a href="#heading2">見出し2</a></li>

          <li><a href="#heading3">見出し3</a></li>

</ol>

 

「#heading1」「#heading2」「#heading3」は見出しのHTMLで設定したタグを記述することで、アンカーリンクになります。

カスタムHTMLをプレビューに切り替えると、見出しの先頭に目次が作成されていることを確認できます。

目次のリンクをクリックすると、該当する見出しへとジャンプします。

あとは見やすいように目次部分をボックスで囲んだり、デザインを整えたりすることで、きれいな目次の完成です。

プラグインありとプラグインなし、結局どちらが良い?

プラグインを使った目次と、HTMLで表示させる目次のどちらを選ぶべきなのでしょうか。

初心者にはプラグインの利用をおすすめします。なぜなら記事ごとに目次を設定する手間がなくなるからです。

後者の場合は、記事を作成するたびに目次部分のHTMLコードを入力する必要があり、コードが間違っていると目次が機能しなくなるリスクがありますが、前者の方法なら、プラグイン導入時に設定を完了してしまえば、その後の複雑な設定や手間は不要となります。

ただし、すでにWordPressに導入済みのプラグインの数が多すぎる場合や、ウェブページが少しでも表示速度が遅くなるのを避けたい、目次の表示箇所を自由に指定したいという場合には、プラグインを使わずにHTMLで目次を作成しましょう。

自身のサイト運営方針や重視する要素から、最適解を選んでみてください。

目次を作る際のクリック率を高めるコツ

WordPressに目次を作成できたら、クリック率を高めるように工夫することも心がけましょう。

目次のクリック率を高める上での重要になるポイントは次の3点です。

  • 目次は開いておく
  • 適切な文量にまとめる
  • 表示はH3までにする

目次は閉じていると気づいてもらえない可能性があるため、最初から開いておく設定にすることをおすすめします。

また目次の文面は長すぎると読んでもらえないし、短すぎても意図が伝わらないので、記事の要点を適切な文量でまとめることが重要です。

さらに、目次はあまり深い階層まで表示すると把握しづらいので、H3までにすると、読者に見やすい印象を与えます。

ただしこれは記事の内容や長さ次第で、見出しの数が多いときはH2までにしたり、逆に内容を詳しく表示したいときはH4までにするなど、状況に応じて調整することも必要です。

まとめ

今回は、WordPressで目次を作成するメリットと、プラグインありとなしで目次を作成する方法を解説しました。

目次を入れることは、ユーザビリティとSEOの双方の観点からメリットがあるので、特別な理由やこだわりがない限りは、目次を設置することをおすすめします。

目次を作成する方法として、初心者には手間のかからないプラグインを活用した方法を推奨します。

また、最初は使ってみて、WordPressに慣れてきたら、プラグインを使わずに目次を作成する方法に移行するのもありでしょう。

本記事を参考にしながら、ユーザーファーストのWordPress記事を作成してみてください。

誰でも10分!WordPressブログの始め方
ブログを始めるには、ライブドアブログやはてなブログといった無料ブログを使う方法、あるいはWordPressなどを使用する方法があります。

まだWordPressを持っていない人でも、簡単に準備できる方法を以下の記事で解説してます。
初心者でもわずか10分で始められるので、参考にしてみてください。

合わせて読みたい

【完全ガイド】誰でも10分!WordPressブログの始め方

独自ドメインを取得するなら「お名前.com」
「お名前.com」は、国内No.1のドメイン登録サービス。独自ドメインと合わせて、WordPressの自動インストールに対応したレンタルサーバーも利用できます。
WordPressや独自ドメインを一度も使ったことのない人でも、スムーズに始められるはず。

独自ドメインを取得しようと考えている方は、以下のリンクから、ぜひご利用ください。

お名前.comで
独自ドメインを取得

Facebookシェア Twitterシェア LINEシェア はてなブックマークシェア

このサイトの管理人
泉 賢

GMOインターネットグループ株式会社お名前.com事業部所属。
お名前.comのドメインに関するマーケティング業務を担当し、現在はオウンドメディアサイト運営を中心に活動中。