How to implement article paging in wordpress

#How to implement article paging in wordpress?

Due to the long length, the page loading speed is too slow and the user experience is reduced. Therefore, it is necessary to find a way to paginate the long article. After searching, I found a code solution that is very good. After personal use, it is indeed effective, so I will share it here. If you are interested, don’t miss it

Recommended: "wordpress tutorial"

Recently I have discovered that many articles are accompanied by pictures and are relatively long. This will cause the page to load too slowly, which is not conducive to the user experience. Especially the newly added WordPress theme page, although there is not much text, each WordPress theme must be accompanied by a small picture to give readers a general understanding. Decide whether to give a presentation. So if you add nearly thirty WordPress themes together, the page will be very long. So we must find a way to paginate long articles.

After searching on Google, I found a code solution that is very good. After using it myself, it really works, so I’m sharing it here.

1. Add paging button

If you are not afraid of trouble, you can switch to HTML mode when writing an article and insert the following line of code. You will not need to add this paging button.

The code is as follows:

<p><!--nextpage--></p>

In fact, it is much easier to add a paging button to the editor. I have seen this function implemented by modifying the code before, but I forgot about it. Because I have been using the wordpress editor enhancement plug-in: TinyMCE Advanced. This button has been around for a long time, so I won’t go into details here.

2012-06-17 Supplement: Add paging buttons to WordPress 3.4 text editor

Because my "If You Are the One Female Guest Information" fc.guansoft.com website is also used in this article Introducing the pagination code for long articles. But that site does not have the TinyMCE Advanced plugin installed. So I went online to find a relatively simple way to add this paging button in the wordpress editor. The method is as follows:

Find the /wp-includes/class-wp-editor.php file. Find ‘wp_more’, tag: (at line 366)

The code is as follows:

$mce_buttons = apply_filters(&#39;mce_buttons&#39;, array(&#39;bold&#39;, &#39;italic&#39;, &#39;strikethrough&#39;, &#39;¦&#39;, &#39;bullist&#39;, &#39;numlist&#39;, &#39;blockquote&#39;, &#39;¦&#39;, &#39;justifyleft&#39;, &#39;justifycenter&#39;, &#39;justifyright&#39;, &#39;¦&#39;, &#39;link&#39;, &#39;unlink&#39;, <SPAN style="TEXT-DECORATION: underline"><STRONG><SPAN style="COLOR: #ff0000; TEXT-DECORATION: underline">&#39;wp_more&#39;,</SPAN></STRONG></SPAN> &#39;¦&#39;, &#39;spellchecker&#39;, &#39;fullscreen&#39;, &#39;wp_adv&#39; ), $editor_id);

Add ‘wp_page’ after ‘wp_more’, (including single quotes and commas). The modified code is as follows:

The code is as follows:

$mce_buttons = apply_filters(&#39;mce_buttons&#39;, array(&#39;bold&#39;, &#39;italic&#39;, &#39;strikethrough&#39;, &#39;¦&#39;, &#39;bullist&#39;, &#39;numlist&#39;, &#39;blockquote&#39;, &#39;¦&#39;, &#39;justifyleft&#39;, &#39;justifycenter&#39;, &#39;justifyright&#39;, &#39;¦&#39;, &#39;link&#39;, &#39;unlink&#39;, <SPAN style="TEXT-DECORATION: underline"><STRONG><SPAN style="COLOR: #ff0000; TEXT-DECORATION: underline">&#39;wp_more&#39;,&#39;wp_page&#39;,</SPAN></STRONG></SPAN> &#39;¦&#39;, &#39;spellchecker&#39;, &#39;fullscreen&#39;, &#39;wp_adv&#39; ), $editor_id);

At this time, you can see an icon similar to the more tag button on the text editor on the background writing and editing article pages. .

Similarly, a nextpage button will also appear in the code editor.

2. Add paging function

Wordpress actually has its own paging function, but it has not been called. So when we edit the article, we insert page breaks, but we don't see any changes. How can I call this function? The method is very simple. Find a line of code similar to the following in the theme template file single.php.

The code is as follows:

<?php the_content(); ?>

Add the following code after this line of code to achieve a simple paging function.

The code is as follows:

<?php wp_link_pages(); ?>

3. Beautify the paging effect

Although after the above two steps, the paging function of long articles can be realized. But it’s not that pretty, so let’s beautify it to make the paging effect more perfect.

First, replace the paging function code in the previous step with the following code.

The code is as follows:

<?php wp_link_pages(array(&#39;before&#39; => &#39;<div class="fenye">分页阅读：&#39;, &#39;after&#39; => &#39;&#39;, &#39;next_or_number&#39; => &#39;next&#39;, &#39;previouspagelink&#39; => &#39;上一页&#39;, &#39;nextpagelink&#39; => "")); ?> <?php wp_link_pages(array(&#39;before&#39; => &#39;&#39;, &#39;after&#39; => &#39;&#39;, &#39;next_or_number&#39; => &#39;number&#39;, &#39;link_before&#39; =>&#39;<span>&#39;, &#39;link_after&#39;=>&#39;</span>&#39;)); ?> <?php wp_link_pages(array(&#39;before&#39; => &#39;&#39;, &#39;after&#39; => &#39;</div>&#39;, &#39;next_or_number&#39; => &#39;next&#39;, &#39;previouspagelink&#39; => &#39;&#39;, &#39;nextpagelink&#39; => "下一页")); ?>

Then, beautify the CSS style.

Directly put the following codes at the end of the theme file style.css.

The code is as follows:

/**页面分页**/ 
.fenye{text-align:center;margin:0px auto 10px;font-weight:bold} 
.fenye span{background-color:#DDDDDD;color:#fff;font-weight: bold;margin:0px 1px;padding:1px 6px;display:inline-block;text-decoration:none;border:1px solid #e0e0e0;} 
.fenye a{text-decoration:none;} 
.fenye a span{background-color:#F6F6E8;font-weight: normal;color: #000;text-decoration: none;} 
.fenye a:hover span{background-color:#DDDDDD;color: #fff;}

The final display effect is as shown in the figure below:

4. Solve the SEO problem of repeated titles after the article is paginated Impact

Because long articles are paginated, the titles of these pages are the same. I don't know if it will have any adverse impact on SEO. Better avoid it! You can solve the problem of duplicate titles by adding page numbers to WordPress article pagination. We can change it to the following effect:

Simple and practical wordpress long article pagination code—Guanshuo wordpress plug-in

Simple and practical wordpress long article pagination code-Page 2—Guan Shuo wordpress plug-in

Simple and practical wordpress long article paging code - Page 3 - Guanshuo wordpress plug-in

Find something like