如何通过代码或者TOC插件添加WordPress文章目录插图

Search engine optimization (SEO) ideal blog posts are about 2000 words long, equivalent to four pages of text. It is worth remembering, however, that 43% of readers said they only read blog posts.

Therefore, providing a catalog (TOC) is a great way to help readers browse your posts and prevent them from clicking on your WordPress site in seconds.

WordPress allows users to extend the functionality of the site more freely using plug-ins than website builders. This article describes the steps to add TOC to a WordPress site manually and using plug-ins. We also list five WordPress TOC plug-ins for your reference.

  • What is the WordPress directory plug-in?
  • Why add a WordPress directory?
  • How to create a WordPress directory manually
  • How to add a WordPress directory using the TOC plug-in
  • Add a Top6 plug-in to the WordPress article directory

What is the WordPress directory plug-in?

You may have seen catalogs in physical books before. They list the main chapters in the book, so you can locate specific content more effectively without flipping through all the pages at random. As a result, you can save time and effort while finding the necessary information.

Directories play a similar role on WordPress websites. However, unlike physical books, WordPress articles or page directories will be more dynamic and interactive. They contain a list of titles and subtitles for your article, with clickable anchor links (or jump links) to take readers to these specific sections.


Directory text anchor links allow users to jump to the part they are most interested in. Therefore, because visitors do not have to scroll down manually, this layout increases the user experience of the article or page. In addition, it can enhance readability by clearly showing the desired content to the user.

Anchor links in the directory can also slightly improve SEO. Using such SEO links will allow search engines to display these links in SERP.

By using the WordPress catalog plug-in (you can also call it the TOC plug-in), you can insert this functionality into your articles and pages without adding custom code. Therefore, this type of plug-in can be a user-friendly and time-saving tool for your business.

Why add a WordPress directory?

Catalogs can help readers jump to the relevant parts of WordPress articles, which can improve their readability-especially for long articles.

Adding directories can also enhance search engine optimization. For example, it may reduce the bounce rate of your site because users can easily navigate to parts that match their search intentions.

In addition, TOC can help your web page look more attractive on the search engine results page (SERP). Providing a directory helps Google automatically generate jump links to different parts of the article.

如何通过代码或者TOC插件添加WordPress文章目录插图1

How to create a WordPress directory manually

In this section, we will show you how to create a directory using WordPress’s Gutenberg Block Editor.

This approach does not provide much flexibility, but it is a good choice for those who want to avoid installing too many plug-ins.

  1. Log in to your WordPress dashboard and access the article to which you want to add a catalog.
  2. Add a title block for each section to be included in the TOC. If the title already exists, skip this step-you can tell by the different font sizes between the title and the body.

如何通过代码或者TOC插件添加WordPress文章目录插图2

  1. Then, place the cursor over the title and write a HTML anchor for it under advanced settings. Please note that the anchor text should have no spaces. Repeat this step for all headings and make sure that each anchor has a different name.
  1. Add a list block in the part of the page where you want to insert the catalog. Then, insert all TOC headings in succession.

如何通过代码或者TOC插件添加WordPress文章目录插图3

  1. Use the cursor to highlight the entries in the list, and then click the link icon in the toolbar.

如何通过代码或者TOC插件添加WordPress文章目录插图4

  1. Use the pound sign label in the pop-up box to type the target HTML anchor for the title, and then press Enter.
  2. Repeat steps 5 and 6 for all entries in the list so that each of them is internally linked to the target section.

如何通过代码或者TOC插件添加WordPress文章目录插图5

Note that the above tutorial will not work if you use another page builder, in which case consider using the WordPress plug-in to create a directory.

How to add a WordPress directory using a plug-in

For long articles with many headings, creating a directory manually can be time-consuming. Fortunately, a WordPress plug-in can help simplify the process.

For example, we will demonstrate the steps to create a TOC using Easy Table of Contents:

  1. Install and activate the plug-in.
  2. Navigate to the settings-& gt; directory on the WordPress dashboard.
  3. Under General-& gt; Auto Insert, select the type of article to which you want the plug-in to automatically add TOC. Here, we chose Posts.

Under the same section, you can also configure the location of the table, the title label, and the number of headings to display.

如何通过代码或者TOC插件添加WordPress文章目录插图6

  1. Then, customize the width and alignment of the TOC in the appearance section. You can also change the font size, table theme, and color of TOC.

如何通过代码或者TOC插件添加WordPress文章目录插图7

  1. Navigate to advanced configuration settings to define the display conditions for TOC. For example, selecting only the H1, H2, and H3 headings excludes H4 and the following headings from the catalog.

如何通过代码或者TOC插件添加WordPress文章目录插图8

  1. Click the Save changes button.

This free tool automatically generates directories when it is released. However, we recommend that you preview the TOC before publishing to ensure that there are no configuration errors.

Many WordPress SEO plug-ins already include a directory creation tool. However, if you prefer to use a dedicated WordPress TOC plug-in, here are our sixteen suggestions.

  • 1. Easy Table of Contents
  • 2. Table of Contents Plus
  • 3. SimpleTOC–Table of Contents Block
  • 4. LuckyWP Table of Contents
  • 5. Ultimate Blocks
  • 6. Fixed TOC

1.Easy Table of Contents

如何通过代码或者TOC插件添加WordPress文章目录插图9

Easy Table of Contents is one of the most downloaded WordPress TOC plug-ins. It makes it easy for users to create directories without editing any HTML code. All you need to do is configure the plug-in settings as described above, and the directory will automatically appear in your article.

There is no advanced version of this plug-in, so all its features and tools are free.

2.Table of Contents Plus

如何通过代码或者TOC插件添加WordPress文章目录插图10

If you are running a more complex site with multiple pages of WordPress articles, this plug-in is an appropriate choice.

Inspired by Wikipedia’s TOC format, Table of Contents Plus developers enable users to index and display TOC on the sidebar of their posts.

The functions of this plug-in are also free.

3. SimpleTOC–Table of Contents Block

如何通过代码或者TOC插件添加WordPress文章目录插图11

If you are an avid user of Gutenberg, consider using this plug-in to create a TOC. It provides native styling options for Gutenberg directly from the sidebar widget settings.

It is worth noting that the plug-in has multiple language options and is compatible with non-Latin text such as Arabic and Japanese, making it convenient for users running multilingual or non-English websites.

You can integrate all of these features into your WordPress dashboard for free.

4. LuckyWP Table of Contents

如何通过代码或者TOC插件添加WordPress文章目录插图12

LuckyWP is compatible with multiple WordPress page builder plug-ins. You can customize the appearance of the TOC by adjusting the width, hover color, and font size. It can even choose a floating TOC.

The plug-in provides SEO-friendly features and a smooth user experience, and all tools are free.

5.Ultimate Blocks

如何通过代码或者TOC插件添加WordPress文章目录插图13

Ultimate Blocks is a multi-functional plug-in that provides 47 types of blocks for WordPress’s Gutenberg editor, including directory blocks. All blocks are free and compatible with WordPress 5.0 and later.

If you have lengthy website articles of various content types, this plug-in is a convenient choice. For example, in addition to the directory block, it is ideal for bloggers or marketers who want to create call blocks and recommendation blocks.

6. Fixed TOC

如何通过代码或者TOC插件添加WordPress文章目录插图14

Next, Fixed TOC is an advanced WordPress catalog plug-in with more advanced styling options. You can set plug-ins to create tables automatically, or insert them manually using short codes. In addition, you can configure Fixed TOC’s table and change the color of its links, backgrounds, hover effects, and so on.

The main features of FixedTOC:

  • Automate your directory according to the type of page or post.
  • Create a fixed (or floating) directory of mobile responses.
  • Customize the appearance of the table to match your theme.
  • Enable smooth scrolling and collapsible headings.
  • Choose from a range of animation effects.
  • Use plug-ins with Google AMP.

如何通过代码或者TOC插件添加WordPress文章目录插图15

With FixedTOC, the directory will be in your sidebar. This makes it easy for visitors to jump to other parts at any time. You can also choose to have the user hide the table for a better user experience.

Summary

Adding directories is a great way to reduce bounce rates and improve the overall SEO of WordPress sites.

Fortunately, it’s relatively easy to add one to your WordPress article. As we discussed in this article, users can create TOC manually or with the help of plug-ins.

To help you get started, we also reviewed the top five choices of directory plug-ins. If you are a beginner in WordPress, we recommend that you choose Easy Table of Contents because it is free and easy to use.

Disclaimer: All articles on this website, unless otherwise specified or marked, are original and published on this website. Any individual or organization is prohibited from copying, stealing, collecting, or publishing the content of this site to any website, book, or other media platform without the consent of this site. If the content on this website infringes on the legitimate rights and interests of the original author, you can contact us for assistance.