Shulou(Shulou.com)06/02 Report--

This article and you learn about wordpress to achieve article paging methods. There is a certain reference value, friends in need can refer to, hope to help you.

How does wordpress achieve article paging?

Because the length is too long, the loading speed of the page is too slow and the user experience is reduced, so we must find a way to paginate the long article, search it, and find a code solution that is very good. After using it in person, it really works, so share it here, and don't miss what you're interested in.

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. In particular, the newly added wordpress theme page, although the text is not much, but each wordpress theme must be accompanied by a small picture, so that readers can have a general understanding. To decide whether or not to conduct a demonstration. Then nearly 30 wordpress themes add up, and the page is very long. So we have to find a way to page long articles.

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

Add a paging button

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

The code is as follows:

In fact, it is 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've been using the wordpress editor to enhance the plug-in: TinyMCE Advanced. This button has been available for a long time, and there is nothing more to say here.

2012-06-17 add: add a paging button to the 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 there is no TinyMCE Advanced plug-in installed on that site. So I went online and found an easier way to add this paging button to the wordpress editor. The methods are as follows:

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

The code is as follows:

$mce_buttons = apply_filters ('mce_buttons', array (' bold', 'italic',' strikethrough', 'wp_adv'', 'bullist',' numlist', 'blockquote',' cities', 'justifyleft',' justifycenter', 'justifyright',' cities', 'link',' unlink', 'wp_more',' wp_adv'), $editor_id)

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

The code is as follows:

$mce_buttons = apply_filters ('mce_buttons', array (' bold', 'italic',' strikethrough', 'wp_adv'', 'bullist',' numlist', 'blockquote',' cities', 'justifyleft',' justifycenter', 'justifyright',' cities', 'link',' unlink', 'wp_more','wp_page',' wp_adv'), $editor_id)

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

Similarly, a nextpage button appears in the code editor.

Second, add paging function

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

The code is as follows:

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

The code is as follows:

Third, beautify the paging effect

Although after the above two steps, it is possible to achieve the paging function of long articles. But it's not so good-looking, so let's beautify it to make the paging more perfect.

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

The code is as follows:

Then, beautify the CSS style.

Put the following code directly at the end of the theme file style.css.

The code is as follows:

/ * * Page paging * * / .fenye {text-align:center;margin:0px auto 10pxash fontafllivd bold} .fenye span {background-color:#DDDDDD;color:#fff;font-weight: bold;margin:0px 1pxentpaddingVOV 1px 6pxTDisplayTransLineBock none: none 1px solid # e0e0; .fenye a {text-decoration:none;} .fenye a {fenye: } .fenye a:hover span {background-color:#DDDDDD;color: # fff;}

The final display effect is as follows:

Fourth, solve the influence of repeated title on SEO after paging.

Because after the long article is paged, the titles of these pages are the same. I don't know whether it will have an adverse impact on SEO. You'd better avoid it. You can solve the problem of duplicate titles by adding page numbers to the pages of wordpress articles. We can change it to the effect shown below:

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

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

Find something similar in the theme template file header.php. Code and replace it with the following code.

The code is as follows:

-

Prevent Feed from being paged

After the implementation of the paging function, it will cause the articles on the Feed page to be paged, generally displaying only the content of the first page.

Solution: open the query.php file in the wp-includes directory and find the following line of code (about 3578 lines)

The code is as follows:

If (strpos ($content,'')) {

Change it to this line of code.

The code is as follows:

If (strpos ($content,') & (! is_feed () {the above is a brief introduction to wordpress's method of paging articles. Of course, the differences in the detailed use of the above have to be understood by everyone. If you want to know more, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.