WordPress long article paging code

Time:2019-11-5

Recently, I found that there are many articles with pictures, which are relatively long. This will cause the page to load too slowly, which is not conducive to the user experience. Especially for the newly added WordPress Theme page, although there are not many words, each WordPress theme should be equipped with a small picture, so that readers can have a general understanding. To decide whether or not to present. So nearly 30 WordPress Themes add up, and the page is very long. So you have to find a way to page long articles.

After a search on Google, I found that there is a very good code solution. After personal use, it really works, so share it here.

I. add paging button
If you are not afraid of trouble, you can switch to HTML mode when writing articles, insert the following line of code, and you don’t need to add the paging button.

Copy code

The code is as follows:

<p><!–nextpage–></p>

In fact, it’s much easier to add a paging button to the editor. I’ve seen this feature implemented by modifying the code before, but I forgot. Because I always use WordPress editor to enhance plug-in: TinyMCE advanced. This button has been around for a long time, and I won’t talk about it here.
2012-06-17 supplement: add pagination button to WordPress 3.4 text editor
Because my “if you are the one” fc.guansoft.com website also uses the long article paging code introduced in this article. But that station doesn’t have TinyMCE advanced plug-in installed. So I went online and found a relatively simple way to add this paging button in WordPress editor. The method is as follows:
Locate the / wp-includes / class-wp-editor.php file. Find ‘wp_more’, label: (at line 366)

Copy code

The code is as follows:

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

After ‘wp_more’, add ‘wp_page’ (with single quotes and commas). The revised code is as follows:

Copy code

The code is as follows:

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

At this point, you can see an icon similar to the more tag button in the text editor of the post writing and editing page in the background.
Similarly, a next page button appears in the code editor.
II. Add paging function
WordPress actually has its own paging function, but it is not called. So when we edit the article, we clearly insert page breaks, but we don’t see any changes. How can I call this function? The method is simple. Find the following line in the theme template file single.php.

Copy code

The code is as follows:

<?php the_content(); ?>

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

Copy code

The code is as follows:

<?php wp_link_pages(); ?>

III. beautify paging effect
After the above two steps, the paging function of long articles can be realized. But it’s not so beautiful. 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.

Copy code

The code is as follows:

“PHP WP u link page (array (‘before ‘=’ < div > page reading: ‘,’after’ = [1], ‘next or u number’ = [next ‘,’previous pagelink’ = [previous page ‘,’next pagelink’ = [previous page ‘,’next pagelink’ = [previous page ‘,’next pagelink’ = [“); phpwp u link link page (array (‘before ‘= [1],’ after ‘= [1],’ next or u number ‘= [number’,’link before ‘= >’ ” = ‘next’ oru number ‘= [next or u number’,’link before ‘= >’ = ” ‘before’ = > ” ” ”, nextor or or u number ‘oror u number’ = [next or or number ‘ornumber’ = [next or number ‘ornumber’, ” before ‘linkbefore’ < span > ‘,’link’after’ = > ‘< / span >’);? > < PHP wp’link’pages (array (‘before ‘= > ‘,’after’ = > ‘< / div >’,’next [or] number ‘= >’next’,’previouspagelink ‘= [1jeemaa1]’,’nextpagelink ‘= [next];? >

Then, beautify CSS style.
Put the following code directly at the end of the theme file style.css.

Copy code

The code is as follows:

/**Page Pagination**/
.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;}

Finally, the display effect is as follows:

IV. solve the impact of repeated titles on SEO after paging
Since long articles are paged, the titles of these pages are the same. I don’t know if it will have an adverse impact on SEO. Just avoid it! You can solve the problem of repeated titles by adding page numbers to WordPress articles. We can change it to the following effect:
Simple and practical WordPress long article paging code
Simple and practical WordPress long article paging code – Page 2 – guanshuo WordPress plug-in
Simple and practical WordPress long article paging code – Page 3 – guanshuo WordPress plug-in
In the topic template file header. PHP, find something similar to < title > Code, replace it with the following code.

Copy code

The code is as follows:

< PHP if (is_single()) {? > < title > < PHP echo trim (wp_title (‘, 0));? > < PHP if (get_query_var (‘page’)) {echo ‘- Page’;}? – < PHP bloginfo (‘name ‘);? >

V. avoid paging feed
After the paging function is implemented, the articles on the feed page will be paged, and generally only the contents of the first page will be displayed.
Solution: open the query.php file in the WP includes directory, and find the following line of code (about 3578 lines)

Copy code

The code is as follows:

if ( strpos( $content,'<!–nextpage–>’ ) ) {

Change it to the following line.

Copy code

The code is as follows:

if ( strpos( $content, ‘<!–nextpage–>’ ) && (!is_feed()) ) {