Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressの投稿とページで目次を作成する方法

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

WordPressの投稿やページに目次を追加したいですか?

目次(TOC)は、長い記事のナビゲーションを容易にし、WordPressサイトのSEOを向上させます。しかし、初心者がTOCを作成するのは難しいかもしれません。

この投稿では、WordPressの投稿とページに目次を作成する方法を紹介します。

How to Create a Table of Contents in WordPress Posts and Pages

なぜWordPressの投稿やページに目次を追加するのか?

ウィキペディアのようなサイトで目次を見たことがあるかもしれません。WPBeginnerでも、WordPressのスピードとパフォーマンスを向上させる究極のガイドなど、長い投稿に目次を使用しています。

WordPressサイトの投稿に目次を追加することで、長い記事のセクション間をジャンプしやすくすることができます。

ユーザー体験を向上させるだけでなく、WordPressのSEOにも役立ちます。Googleは目次を利用して、検索結果に「セクションへジャンプ」リンクを自動的に追加することができるからだ。

Google Includes Table of Contents Entries in Search Results

また、目次は、あなたの投稿が検索エンジンの検索結果ページの上部にフィーチャー・スニペットとして掲載されるのにも役立ちます。

これは、あなたが最大のSEOトラフィックを得るのに役立ちます。

Tables of Contents Are Also Used in Featured Snippets

ということで、WordPressの投稿やページで簡単に目次を作成する方法を見ていきましょう。プラグインを使って自動で行う方法と、アンカーリンクを使って手動で行う方法をご紹介します:

方法1:WordPressで目次を自動的に追加する

All In One SEOとしても知られるAIOSEOは最高のWordPress SEOプラグインで、WordPress用の目次ブロックがビルトインされています。

この方法をお勧めするのは、小見出しに基づいて目次を自動生成することで時間を節約できる一方、編集可能なリンクで完全にカスタマイズできるからです。

詳しくはAIOSEOのレビューをご覧ください。

最初に行う必要があるのは、無料のAll In One SEO Liteプラグインをインストールすることです。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

AIOSEO Proは、検索エンジンの検索結果ページで上位に表示されるよう、さらに多くの機能を提供しています。

有効化した後、AIOSEOセットアップウィザードを使用してプラグインを設定する必要があります。詳しい手順については、All In One SEO for WordPressを正しく設定する方法のガイドをご覧ください。

All In One SEOで目次を追加する

目次を追加したい投稿またはページを作成または編集する必要があります。その後、ブロックエディターで青い「+」アイコンをクリックし、「AIOSEO – 目次」ブロックを見つけます。

Add an AIOSEO Table of Contents Block to the Post or Page

ブロックを目次を表示したい投稿やページにドラッグするだけです。

注:目次を追加すると、「AIOSEO – 目次」ブロックがグレーアウトしていることに気づくかもしれません。これは、投稿やページごとに1つの目次しか設定できないためです。

プラグインは自動的にページの見出しを識別し、目次に追加します。異なる見出しレベル(例えばH2とH3)を使用する場合、下位レベルの見出しはコンテンツの構造を示すためにインデントされます。

まだ投稿やページのコンテンツを書いている最中であれば、文書に追加された見出しは自動的に目次に追加されます。

All in One SEOで目次をカスタマイズする

目次をカスタマイズする方法はいくつかあります。例えば、見出しをクリックして名前を変更することができます。これにより、目次の見出しの名前は変更されますが、投稿の名前は変更されません。

Customizing Your Table of Contents

AIOSEOは、各見出しのアンカーリンクを自動的に作成します。リンクアイコンをクリックしてアンカーテキストを編集することができ、これは目次と投稿コンテンツの見出しの両方で変更されます。

また、見出しの横にある目のアイコンをクリックして非表示にすることもできます。AIOSEO Proユーザーは、目次ブロックの見出しを並べ替えることができます。そうすることで、目次の見出しは並べ替えられますが、投稿の見出しは並べ替えられません。

サイドバーにもブロックの設定があります。ここでは、目次の箇条書きリストまたは番号付きリストのスタイルを選択できます。

Your Table of Contents Can Be in a Bulleted or Numbered List

最後に、WordPress目次のカスタマイザーが完了したら、「完了」ボタンをクリックして変更を保存します。

これで、目次が訪問者にどのように見えるかを見ることができる。

Your Table of Contents is a List of Links to Headings in the Post or Page

目次の上に見出しや段落を加えるのは良いアイデアです。こうすることで、読者に目次を見ていることが明確になります。

訪問者が目次のリンクをクリックすると、すぐにその見出しの投稿に移動します。これにより、ユーザーは最も興味のあるセクションにジャンプすることができます。

Anchor link preview

私たちがAIOSEOの目次機能を気に入っている理由は、見出しをカスタマイズでき、必要に応じて見出しを選択的に非表示にできるからです。

これは、他のほとんどの目次プラグインにはない重要な機能である。

方法2:WordPressで手動で目次を追加する

プラグインを使わなくても、アンカーリンクを使って手動で目次を作ることもできる。しかし、これにはより多くの時間と労力がかかります。

アンカーリンクについては、WordPressでアンカーリンクを追加する方法のガイドでさらに詳しく説明しています。

目次の入力

まず、目次の見出しを追加する「リスト」ブロックを追加する必要があります。リストに見出しを入力するか、投稿コンテンツから1つずつコピー&ペーストします。

You Need to Type a List of Headings

見出しブロックにアンカーテキストを追加する方法

次に、目次で参照したい各見出しにアンカー属性を追加する必要があります。これにより、訪問者が目次の見出しをクリックしたときに、WordPressがどこにジャンプするかを知ることができます。

まず、H2やH3などの見出しをクリックします。次に、ブロック設定ペインの「高度な」矢印をクリックして高度な設定を表示する必要があります。

その後、「HTMLアンカー」フィールドにユニークな語句をスペースなしで入力する。ハイフンで区切ってもかまいません。

You Need to Create an HTML Anchor Attribute for Each Heading

次に、目次に含まれるその他の見出しすべてについて、これを繰り返すだけでよい。

ヒント:このフィールドに見出しをペーストすると、ハイフンが自動的に追加されます。これは見出しを明確に表すユニークなIDを作成する簡単な方法です。

目次へのアンカーリンクの追加

最後のステップは、目次の見出しを作成したHTMLアンカーにリンクすることです。

リストブロックの最初のエントリーをハイライトし、ツールバーの「リンク」アイコンをクリックします。

Highlight the Heading Text and Click the Link Icon

次に、ハッシュタグ(#)を入力し、その見出しのアンカーテキストを入力または貼り付ける。

は、WordPressに現在の投稿のそのセクションにジャンプするように指示します。ドメイン名やその他のURLパラメータは追加しない。

Type a Hashtag and Then the Anchor Text

それが完了したら、’Enter’キーを押すか、’送信’アイコンをクリックしてリンクを作成する必要があります。

アンカーリンクは目次リストに追加されます。訪問者がこのリンクをクリックすると、すぐに投稿やページコンテンツ内のその見出しに移動します。

An Anchor Link Is Added to the Table of Contents

この手順を繰り返して、目次の他の見出しにもアンカーリンクを追加できます。

このチュートリアルで、WordPressの投稿やページに目次を作成する方法を学んでいただけたなら幸いです。また、ブログのトラフィックを増やす方法や、専門家が選んだサイトを成長させるWordPressプラグインもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

71件のコメント返信を残す

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Sam Smith says

    I am in word press post editor and I do not see the blue plus button or the advanced block. How do I see those features?

    • WPBeginner Support says

      If you re using the block editor then you may want to try disabling distraction free editing in the top-right and that should allow you to see the plus again.

      管理者

  3. Ahmed Omar says

    I am already using the first method, and it help my site to appear first in some search results and of course bringing more visitors
    Thank you

  4. ario says

    I tried to create table of content manually like the way you taught us and it worked well, until I added page break and separated the points into different parts or pages. Is there a solution for this?

    • WPBeginner Support says

      If you separate the page then you would need to include the entire URL before the # as well as the anchor to link correctly.

      管理者

  5. Mark says

    Back in the day, when websites were new, we used to call this a Site Map. But yeah, it was kind of expected for the search engines to find a site map on your website.
    Thanks for the reminder and the info.

    • WPBeginner Support says

      If the information added is the same, then there is no difference. The plugin is there to help make the process easier and help ensure any markup is properly added.

      管理者

  6. Tay says

    How can I manually place the TOC on specific pages? It seems I can only disable auto-insertion but I can’t then decide where I want to put the table on the page. Is this possible?

    • WPBeginner Support says

      The table of contents would need to be enabled for pages and then there should be an option when editing the specific page you want to add it to.

      管理者

  7. Muhammad Arslan Sharif says

    What a tutorial and very helpful for me and other who want to add new features in their websites and in blogs. In very short words you explain exceptionally.

  8. Kim Balchios says

    My developer created a Table of Contents on a really long blog I wrote. I edited one of the entries and the link fell off.

    When I try to create a new entry it says “Paste URL or type to search.” If I add the URL, it will take the reader to the top of the blog not the exact place inside the blog.

  9. David Ellin says

    this video shows me how to create a table of contents within a post. I want to create a table of contents for my entire blog so that the title of each article appears in the TOC. How do I do that?

  10. jean says

    Hi thank you for this informative post!
    Only a small question, what is “override the global settings for this specific post / page.”
    I chose to insert the table of content manually, and when i check only for h2 & h3, the table of content just doesn’t show up at all.

    Thank you!

    • WPBeginner Support says

      That would mean you are telling it to ignore your default settings for the plugin for that specific post/page. If you have no H2 or H3s on the page then there wouldn’t be anything for the plugin to add to the table.

      管理者

    • WPBeginner Support says

      If the page is too short to scroll then there wouldn’t be a reason to have a table of contents. It is a personal preference for the length of a post.

      管理者

  11. SAHIL DHIMAAN says

    Hi, very helpful article

    But….

    Table of content isn’t showing in Mobile, what to do…

    i use AMP plugin also…

    • WPBeginner Support says

      Your AMP plugin would be removing the plugin’s additions. If you reach out to the table of contents plugin’s support they can let you know if they have AMP support.

      管理者

  12. Lucimar says

    Good afternoon!

    Congratulations on the article, it helped me a lot :)

    However, it just didn’t work on amp pages.
    Note: I use the “Accelerated Mobile Pages” plugin.

    How can I solve?

    Thank you!

    • WPBeginner Support says

      You would want to reach out to the plugin’s support for if there is a recommendation for AMP.

      管理者

  13. Luke Richardson says

    Using easy table of contents, is there an option to create hyperlinks to jump to that particular section when you click on one of the headings in the table.

    Not sure if I’m missing something with the plugin, but when I click on the headings it doesn’t jump to that section at all.

    thanks

    • WPBeginner Support says

      The plugin should be allowing that, you may want to ensure there is enough room between your content and you don’t have any browser addons that would prevent scrolling to a certain section of your page.

      管理者

  14. Tosh Lubek says

    I’ve checked “Initially hide the table of contents” but the TOC shows every time I open a post with a TOC. Is there something else I need to do?

    • WPBeginner Support says

      You would want to reach out to the plugin’s support to ensure this is not a conflict between the plugin and your theme

      管理者

  15. Oulimata says

    As usual, amazingly detailed and helpful. You guys have definitely become my go-to resource for anything blogging related.

    • WPBeginner Support says

      You would need to enable custom CSS and depending on your theme would determine the CSS needed

      管理者

    • WPBeginner Support says

      You would enable support for the post type you want to have the table of contents in and when you edit one of the types where it is activated, it will have the option at the bottom of the editor to add the table of contents

      管理者

    • WPBeginner Support says

      In the plugin’s settings you would enable support for pages and you should be able to follow the same procedure for pages that you do for posts.

      管理者

  16. Abhishek says

    Hi, is this possible to show/hide individual headings, just by clicking on it, like on Wikipedia?

    I have too many subheadings under each h3 so I want it to be easier to navigate.

  17. Prince Gabriel Okocha says

    I have installed this plugin on my blog following the guideline in this post. But it’s not showing up on my posts. Is there anything I’m doing wrong? I really need this to ASAP

    • WPBeginner Support says

      Hello,

      Please review plugin settings, you need to enable support for the posts and pages. After that edit the post and page and below the post editor you will find TOC settings. From here, you need to check the box ‘Insert table of contents’ to add it in that particular post.

      管理者

  18. Srinu says

    Thanks for the article it’s working for me, But I am getting with bullets and numbers, in TOC_Box how to change it. I already numbered with h2 tags.
    so its repeated the numbers twice.

  19. Mae says

    Thank you so much! I used this for my Exclusives Library and I love it! Now my subscribers won’t have a difficult time looking for their printables.

    XOXO,
    Mae

  20. Jan Peter Aursnes says

    A fine plugin, but is there any way I can exclude pages? Writing in headings and using * and ⎮ does not work, for me anyway. I am not a tech guy so it could be I just need a bit of explanation.

    Thanks in advance.

  21. Raushan says

    This is best plugin but when i created table of content from this plugin then showing multiple H1 tag which is not good at seo point of view.
    How to solve this ?
    Thanks

  22. Sunil Suresh says

    Thanks. Your article came at the right time for me! I was just now looking for something like this for a client of mine.

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。