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.
This article is for those who are creating blogs using WordPress
Common sense metabolism point
Old common sense
New common sense
Recommended for such a person
- Those who want to increase the ability of blogs
- Those who want to implement the function of returning to the table of contents by all means
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 wCocoon: 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.
]Note Coco
to make it i get it back if it stops working. .php body should be duplicated and backed up.
Where to edit in plug-ins
frontviewsbody.php
Path for downloading via FTP and editing files directly
... public_htmlwp-contentpluginsluckywp-table-of-contentsfrontviewsbody.php
step
2
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
1 | <?= $title ? '<b class="lwptoc_title" '="" .="" ($titlestyles="" '="" style="' . implode('', $titleStyles) . '" '="" :="" '')="" .="" '="">' . $title . '</b>' : '' ?><br> |
After correction
1 | <?= $title ? '<b class="lwptoc_title" id="mokuji" '="" .="" ($titlestyles="" '="" style="' . implode('', $titleStyles) . '" '="" :="" '')="" .="" '="">' . $title . '</b>' : '' ?> |
]Note Coco
Note how to attach
", " and "'". If you make a mistake, the behavior will be incorrect.
step
3
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!
Reference