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
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
- How you implement 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
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.
1 Search for the edit file (body.php) As a method of correction, download and edit the "Plug-in" → "Plug-in Editor" or ftp.
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
Path for downloading via FTP and editing files directly
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
<?= $title ? '<b class="lwptoc_title" '="" .="" ($titlestyles="" '="" style="' . implode('', $titleStyles) . '" '="" :="" '')="" .="" '="">' . $title . '</b>' : '' ?><br>
<?= $title ? '<b class="lwptoc_title" id="mokuji" '="" .="" ($titlestyles="" '="" style="' . implode('', $titleStyles) . '" '="" :="" '')="" .="" '="">' . $title . '</b>' : '' ?>
Note how to attach
", " and "'". If you make a mistake, the behavior will be incorrect.
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(^^)/