How to post long articles in WordPress

Sometimes a single article page is too long, which will affect the page loading speed and user experience. In this case, we need to use WordPress to display long articles in paging. There are two ways to implement paging, one is to use the WordPress long article paging plug-in, and the other is to implement it by modifying the code.

Operation steps for paging long WordPress articles:

Step 1: Enter the WordPress website backend, find the "Edit" option under Appearance, and then find the article page module single .php, find the following code in single.php

<?php the_content(); ?>

Step 2: After finding the above code, add WordPress’s own paging function function code below it:

<?php wp_link_pages(); ?>

Step 3: The code in the second step can achieve a simple paging effect. If you want to make the paging button more beautiful, you can replace the code in the second step with the following calling code:

<?php wp_link_pages(array(&#39;before&#39; => &#39;<div>分页阅读：&#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; => "下一页")); ?>

Via the following CSS Code to control the display style of the paging button, directly copy the following CSS style to the style.css file, so that the following effect can be achieved

/**页面分页**/
.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;}

Step 4: Insert the paging code where paging is required in the article [Must be inserted in code text mode]

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

Step 5: If you find it troublesome to use the paging code every time, you can use it by adding a "paging button" above the editor, that is, when you need to Clicking the "Page Pagination Button" in the pagination area will automatically add the pagination code. [You may or may not do this step]

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

$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);

2. Add ‘wp_page’ after ‘wp_more’ (including single quotes and commas). The modified 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);

3. 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 appear in the code editor.

Step 6: Eliminate the problem that articles on different pages have the same title after classification to avoid affecting website SEO optimization. Find code similar to b2386ffb911b14667cb8f0f91ea547a7...6e916e0f7d1e588d4f442bf645aedb2f in the theme template file header.php and replace it with the following code.

<?php if ( is_single() ) { ?><title><?php echo trim(wp_title(&#39;&#39;,0)); ?><?php if (get_query_var(&#39;page&#39;)) { echo &#39;-第&#39;; echo get_query_var(&#39;page&#39;); echo &#39;页&#39;;}?> — <?php bloginfo(&#39;name&#39;); ?></title><?php } ?>

Step 7: After the paging function is implemented, the articles on the feed page will be paginated. Generally, only the content 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 line 3578)

if ( strpos( $content,&#39;<!–nextpage–>&#39; ) ) {

Change it to the following line of code.

if ( strpos( $content, &#39;<!--nextpage-->&#39; ) && (!is_feed()) ) {

In this way, we have completed the perfect paginated reading effect of long articles.

For more wordpress related technical articles, please visit the wordpress tutorial column to learn!

The above is the detailed content of How to post long articles in WordPress. For more information, please follow other related articles on the PHP Chinese website!