How to implement Back to Table of Contents

I want to make the table of contents of the page easier to use! Do you think so when you look at other blogs?

When you are just running a blog, you want to implement it, it is the thing that attaches a table of contents. At first, I think this is enough, but recently I've come to want to return to the base from the place where I flew in the table of contents. Because it is easier to use. This time, I tried to implement "Back to table of contents" in my blog, so I will introduce it.

How to take advantage of theme features and plugins

There are various ways to implement Back to Table of Contents. Depending on the theme, it may be possible to implement a back to the table of contents with a plug-in equipped with a table of contents function or a plug-in that can be purchased additionally. First, I'll show you how to use the features that are built into the theme.

Affinger5: Using "SUGOI MOKUJI"

It seems that you can use it to return to the table of contents with the thing using "Amazing Lottery (SUGOI MOKUJI) [PRO]" that can be introduced in Affinger5.

The price may be a good purchase for those who think that the price is 5,980 yen (tax included) (as of October 5, 2019) > time. Personally I felt a little a little naughty pricing w

Cocoon: Use the built-in table of contents

Cocoon is a theme with the automatic generation function of the table of contents, and how to implement the function of returning to the table of contents using this function is introduced in the next article.

In fact, on this site, back to the table of contents links were implemented everywhere. It describes three ways to implement it in JavaScript, how to implement it in PHP, and how to implement it in a template. Considering AMP and PageSpeed Insights support, it seems that the method of implementing it in PHP (function .php) is good.

SANGO: Table of Contents

SANGO seems to be a theme with automatic generation function of the table of contents. In the next article, the stylish user interface implements the ability to return to the table of contents.

It is a design that is very stylish and you want to imitate. Why not implement it on my site? I was a little questioned.

How you implement it

Selection of table of contents plug-ins

If your theme doesn't include the auto-generate toko feature, it's hard to make it from the ground up. First of all, we will select a plug-in that can create a table of contents.

Rejected: Easy Table of Contents

I think that most of the plug-ins used by people who do not use the plug-ins and themes introduced above are Easy Table of Contents.

Image: WordPress.org plug-in search screen If you remodel the magic with this plug-in, it seemed that you could implement the function back to the table of contents, but SEO measures were a little troublesome.

Image: As you can see in the image above,pagespeed insights doesn't work well with other plug-ins and you're careful. As an improvement response, I can erase it if I write it on head, <link rel="preload"・・・> but I rejected it because individual correspondence was a little troublesome.

Rejected: Table of Contents Plus

Table of Contents Plus is a plug-in called "EasyTable of Contents". Here, the update has been delayed for 4 years and seems to be excluded from the WordPress plugin. I saw an article of a person implementing "Back to table of contents" on the premise of this plug-in, but as of 2019/10/06 it was worthless. It is an article of ↓.

Adoption: LuckyWP Table of Contents

LuckyWPTable of Contents is ★5, compared to 4.5, which is ★ forEasyTable of Contents. I was a little worried that the number of users was only 1/10, but I decided to try here.

Image: WordPress.org plug-in search screen When you use it, the settings will also be displayed properly in Japanese. You can set up roughly what you can do with"Easy Table of Contents". This "Back to Table of Contents" function will implement this plug-in.

How to implement the PC version

The purpose of implementing the "Back to TABLE of Contents" function is always a thing that can be attached to the table of contents. In the PC version, it is a thing that keeps displaying the table of contents in the sidebar for a long time, and the purpose was achieved, so this was good. Now you can instantly move to where you want to see it in the table of contents. All you have to do is set the table of contents added inLuckyWP Table of Contentsfor widgets for scroll ads.

You can do the samewith Easy Table of Contents.

How to implement the smartphone version

The table of contents generated byLuckyWP Table of Contentsdoes not have an anchor for in-page transitions. So, let's set the anchor (table of contents) in the next step.

step
1 Search for the edit file (body.php) As a method of correction, download and edit the "Plug-in" → "Plug-in Editor" or ftp.

step
2

Create an anchor (landmark) .php the body

Insert "id="mokuji" into the class tag "lwptoc_title" around line 24 as shown in the figure above. 【2021/05/18 Added】 Version 2.1.4, the code of the body .php has changed, so I inserted "id ="mokuji" in line 34

Before the correction

After correction

Note how to attach

This allows you to create an anchor (landmark) for the destination of the in-page link. * By the way, if the keyword specified as id does not overlap in the page, anything is fine.

step
3

Affix a link to the anchor (placer[ /st-step] After that, implement a fixed footer with a widget etc. and add a link to the "#mokuji" created above. In my case, there is a widget that is fixed to the footer of the smartphone, but I create a menu for it and set it. The menu is like this. The navigation label is decorated with icons in Font Awesome. The settings of the widget vary depending on the theme, so please try to arrange it according to your own theme.

Updating the

Summary

How did you like when you saw the back to table of contents feature? If I haven't changed my mind, I think you guys reading this can also see the behavior of going back to the table of contents in this article. If you think it's good, please give it a try! Let's create content that is easy for viewers to see!

Thank you for browsing. So, then(^^)/