This section shares a content directory plug-in: Fixed TOC.

Content Catalog improves user experience:

TOC refers to Table Of Contents. When we do SEO promotion of independent stations, we often need to add some pillar pages to our independent stations. The content of these pillar pages is usually very long. Then it aggregates other pages, thus forming an internal network structure, which is actually a necessary step for SEO content optimization.

So if your content is too long, it will cause the user to keep turning the page, and he can’t find the key points, so we need to use such a TOC plug-in and segment our pages.

1 Fixed TOC Content Catalog Plugin

Fixed TOC effect demo:

Here, we can examine this case. This page contains a lot of content, which is divided into small paragraphs through the tags h1 to h6. If the user looks at the page from top to bottom, he will think it is very long. If we add such a TOC, it can be clicked directly to enter a certain paragraph. Of course, it also has a floating button, which can greatly improve our user experience.

2 Fixed TOC Content Catalog demo e1714233002524

Fixed TOC plugin installation:

Next, we will show you how to add a module like TOC to our content through a plug-in.

First, we enter our WordPress backend and install the plug-in. Then, we upload the plug-in. Here, on the desktop, I have prepared the PRO version of the plug-in. Let’s go directly to install the main program, click to open the installation, and after the plug-in is successfully installed, we can activate it.

Fixed TOC plugin introduction:

In our settings, there is an extra Fixed-TOC, which we click to open to set it up.

Fixed TOC plugin settings:

First, you need to activate it, and second, you need to determine which pages it should be applied to. These are actually some of our WordPress Content structures, including our article page, accessories page, and media page. Then, choose according to your own needs. Of course, if your product page also has a lot of content, you can choose the product. Here, we will default-check our articles and leave our accessories unchecked.

3 Fixed TOC Plugin Settings Interface e1714233215255

The next one is this module. The directory it extracts is from h1 to h6. We will ignore the rest and save it. Then we enter our blog page because what we just set is only for our post, which is our article page, and we open an article.

4 Fixed TOC Content Catalog plugin demo

So, we can see that it has an extra content directory. Then, it will automatically extract the tags h1 to h6 on our current page. H1 is the main directory, and h2 is arranged in sequence. It will form a hierarchical structure. You can also shrink it. Then you click to enter, and it can quickly lock to the second paragraph. When you translate down, it will have an extra floating button. After you click it, you can also enter its paragraph again. In this case, the addition of TOC is completed.

Fixed TOC widget display:

Of course, in addition to adding TOC to our content, it can also be added to our gadgets and Widgets. Continue back to the settings page.

5 Fixed TOC Content Catalog plugin other settings e1714233444307

Let’s take a look at some other setting items. Don’t worry about the setting items. It excludes some H tags, and the other one is generated for all.

For example, if we generate an h1 tag now, then the h1 tag can be given to it by default. Add an ID. This is actually a CSS selector. In fact, it doesn’t matter whether you add it or not. The next step is to enable this module on our gadget. We can check it. After checking it, go to Save.

This time, we refreshed again, and this module will not be displayed in our content, but we found that it is not displayed on our gadget. This is because it has a description here. If you enable the gadget Tool, add it as a gadget module on the gadget page before it can be displayed.

After coming in, we can see that the gadget here corresponds to the three modules we have seen so far. We can add it directly to this module.

6 Widget Module Add TOC e1714233540830

Then, you click the plus sign, and you can search for the TOC here. There is a small tool here. Let’s add it. OK, just add it and save it. You don’t need to make any settings.

Now, let’s refresh our article page. The TOC is displayed on the sidebar.

7 Widget Module Display TOC Effect

For others, for example, we can see that there are some keyboard-specific ones below. For example, if you press some keys, they can be expanded or contracted directly. The other one is its scrolling method. Of course, this scrolling method has a description. If the plug-in you installed does not match or is compatible with your theme and cannot appear, you can check this box.

Fixed TOC customization settings:

The other one is sorting. We don’t need to worry about it here. This is the content of the entire setting.

So, in addition to setting this module, we can also modify its style. Here, we can see that there is an appearance, and then we open the appearance in a new window so that we can open it in our customization later.

8 Fixed TOC Content Catalog plugin custom style settings e1714233680135

We can also see this module, fixed toc plugin, and click to open it. You can make some simple settings here, such as whether it is displayed on the left, right, above, or below. You can set it according to your own needs.

Of course, this module is mainly aimed at non-gadget modules; you cannot enable it because once you determine the gadget, its location has been determined. We can turn off this gadget so our settings can see the effect. After saving, we will refresh this module or insert it into our article content by default. Now, we can customize it. For example, if it is displayed on the right now, we can set it to the right below. Save it, then refresh it, and it will appear below us.

The second thing we look at is the list in the TOC. Here, we see that the list is now displayed with numbers. Of course, you can also modify it into an item or menu or display nothing at all.

Fixed TOC style setting:

The next thing is for our internal content. That is, we can make it appear as a rounded corner. Now, it is a right angle. We modify it to a rounded corner, and then its border can be made a little thinner and then published. Then we refresh it, and it now has rounded corners, and our borders have become thinner.

9 Fixed TOC Content Catalog Border Rounding Settings

Then the other one is for his name. For example, we see that there is content here. You can modify this name.

For example, you can modify it to TOC or other things according to your own situation. Actually, going to this directory is the same as going to the directory in our book. We see that it has become c and then its font size and the font thickness and tags used.

Of course, you can also add it to it. The previous small font icon, of course, is the default here. The default here is a font icon, and then below is its list, the font used for the font size of its list, and some other content. These are very simple.

The next one is that it will have an effect when its animation is turned on. For example, if we shrink and open it now, it will have an animation. Then, you can modify this animation into this carousel state, and we will go to Refresh. When you open it, it will have an up-and-down effect.

10 Fixed TOC Content Catalog Color Style Settings

And then there are other things for its color, such as the color of its button, here is the color of the button, and then the following ones are for the color of its border, the color of the content border, and its link color, the current link color. It’s green; it will turn green when we hover over it. We can change it to red, save it, refresh it, and when we hover it, it will turn into a deep red. In fact, it is Modified for its style. Then, let’s look at the last one. It can also add some custom CSS. This is how to use the Fixed TOC plug-in.