Add a simple book style serial directory and article navigation to WordPress

demand

Since I started translating Gensis tutorials by chance, I have become more and more addicted to studying the WordPress theme framework, learning the translation while also experimenting on my own gully blog.

More recently, there was a request for each article in the series to include a table of contents list and navigation links to previous articles to make it easier for readers to find them. The effect is like this thing from Jane’s book serial:

Train of thought

In general, what we need to achieve is two parts of the content, a link button before and after the article, a pop-up box of the directory.

Links to the post and post urls can be easily obtained using the WordPress functions previous_post_link() and next_post_link(). Specifically for my needs, I only want to show links to the front and back pages when certain conditions are met, so I need to make some conditional judgments, more on that later.

The directory popup is actually a very common modal box:

A Modal box is a child form overlaid on top of a parent form. Typically, the goal is to display content from a single source, allowing for some interaction without leaving the parent form. Child forms can provide information, interaction, and so on.

I took a closer look at the Genesis Sample demo and it didn’t seem to come with this effect, so I need to implement it myself. There are so many ways to do this, you can use CSS, you can use jQuery, you can use vue.js. Pure CSS is too hard for me, CSS is black magic for me, think about it is a very painful thing, give up. It is also possible to use vue. js, but this time I will use jQuery which comes with WordPress.

To achieve the modal effect need to introduce a jQuery modal plug-in, remodal, this plug-in usage is very simple, basically is out of the box, also has its own CSS theme, but also can do a variety of custom configuration, used to achieve my needs has been very enough, enough on the line. Although the author of this plug-in has abandoned the pit and is no longer updated, the function implementation is relatively stable and has user groups. For example, Genesis Login Modal Box is also used in this plug-in.

Click on the popup box to show links to all articles in the series. How do I get this? The stupidest way to do this is to write it to death… But that would be silly. We took a bit of a detour at first, what to do asynchronously fetch and what to write WP_Query. Then I found the simplest solution: In WordPress, you can display the content of shortCode directly in the template PHP file. There is a function do_shortcode(), which is very convenient. Here’s the starting code.

Links to articles before and after the first step

The Genesis framework already includes this functionality. To automatically insert links to previous and subsequent articles in a post, simply add a line to the subtheme function.php:

This is a shortcut that Genesi will display directly at the end of the article before and after links, as shown below

Alternatively, there is a more flexible way to adjust the insertion position as needed, and of course the link text can also be changed:

This is really handy, and by default, links appear before and after all articles. But it doesn’t meet my needs. My needs are:

• Just need to add inGenesis ExplainedThis tag is displayed below the article
• Insert a directory button between the two links
• Only navigate between related articles and do not display other unrelated articles
• If the article is the first in the series, then “first” is displayed
• If the article is the last in the series, it says “Last”
• Clicking on the table of contents brings up links to all articles in that series

We can open the genesis/lib/structure/post. The PHP file and see the inside of the genesis_adjacent_entry_nav how () is done. It automatically wraps the WorPress functions get_previous_post_link and get_next_post_link. So that’s easy to do, let’s copy it and change it to our own function, as follows

genesis_exlained_post_nav

Get_previous_post_link: get_next_post_link: get_next_post_link: get_next_post_link: get_next_post_link The difference is that previous_post_link and next_post_link are only printed automatically, which makes it difficult to make conditional judgments. TRUE restricts links to the same directory for the following articles.

This has basically implemented the first few requirements, although it is a little ugly, but ignore it, the effect is as follows:

Step 2 Add the modal dialog box

Simply download the JavaScript and CSS files of Remodal, put them in the js folder of the subtheme, and register them with WordPress. There is no need to write additional JS files to initialize or run the plugin. Of course, in more complex scenarios, such as login boxes or other content that requires some asynchronous callback, you will need to write a separate JS file to use.

Now that remodal.js is ready, you need to call remodal with a div element and flip in the content you want to render. This shortcode is the same as in the previous article. Details are as follows:

With the dialog box and content in place, how can Remodal render the box? The remodal documentation provides two methods: using # in the A tag and data-remodal-target.

<a href="#modal">Call the modal with data-remodal-id="modal"</a>

Copy the code

<a data-remodal-target="modal">Call the modal with data-remodal-id="modal"</a>
Copy the code

So, modify the directory link , and fill in the contents of the div in this step (the part of the div can theoretically be anywhere on the page), and modify it as follows:

And now it’s almost done

The third step of CSS

CSS has always been a pain in my neck, and I can’t get around it without running naked. In the end, I used a crude method of inserting a three-column box in Gutenberg, then using preview mode to extract the HTML, and then writing it directly into a PHP file. But it’s very adaptable.

THE END

Let’s do it this way… There are still four or five left to read… No eunuchs at all