Use Php+ajax to let WordPress dynamically load the article tutorial _php instance

Why should I dynamically load an article?

1. Quickly show visitors the page
The article contains a lot of text and multimedia resources (such as: Pictures, video, music), it takes a lot of time to load the content. If you have a large number of articles on your page, you will be impatient when visitors find that the page has not been loaded for a long time. This is the main purpose of dynamically loading the article.

2. Make a list of articles
make the article on the page become a list, reduce the space occupancy of the page, visitors can easily move to the bottom of the page, improve the chance of the old article was clicked. And you can put more articles on the page without worrying about the page being too long.

Why not load the article dynamically?

1. Not friendly to search engines
The goal of SEO is to show valuable things as much as possible to the search crawler, including the latest article content. Only the title of the article let the crawler only know this article and do not know its article focus, the use of JavaScript output content may not be able to be crawled and analyzed. These are not good for SEO.
Later found that if your site has a fixed type of article, did not graduate in the article List page shows too much content, indicating little impact.

2. Increased number of requests
Although the article folded up, we will generally find ways to show visitors the previous several articles. This is friendly to the user, but increases the number of requests and the number of database accesses.
Later I chose to show some of the content of the article, and not through asynchronous loading, that is, the problem can be solved by simple modification.

3. Some plug-ins fail
because you need a custom method to crawl the article, if you do not add special processing, it is likely to invalidate some of the WordPress plug-ins.
can be solved by special handling, later in the article will be mentioned.

Design idea of dynamic loading article

1. Find all the articles on the page
Add an expand/collapse button for each article

2. Add Expand/collapse button to article
Click on the button to load and expand the content of the article if the contents of the article are not loaded.
Click the button and expand/collapse the content of the article if it has already been loaded.

3. Load the content of the article
Send the ID of the article to the background, find the content of the article in the database and format it, return the response displayed on the page.

JavaScript Processing Code Analysis

1. Find all the articles on the page

/When the document is loaded, iterate through all the elements of the matching article
jquery (document). Ready (function () {
 jquery (' Div.post '). each (function () {
 // If the element corresponds to the article ID
 var id = jQuery (this). attr (' ID ');
 if (/^post\-[0-9]+$/.test (ID) {
  //) Add an expand/collapse button for each article
  ...}
 )
;

2. Add Expand/collapse button to article

Toggle.toggle (function () {//expand
 ///If the article content is empty, load the article content if
 (JQuery (' # ' + ID + '. Content '). Text () = = ') {
 ... 
   
    
 //show article content and toggle button style
 jQuery (' # ' + ID + '. Content '). Slidedown ();
 JQuery (This). Removeclass (' collapse '). addclass (' expand ');
},
function () {//collapse
 //Hide article content, toggle button style
 jQuery (' # ' + ID + '. Content '). Slideup ();
 JQuery (This). Removeclass (' expand '). addclass (' collapse ');
Append the button to the front of the article title
}). Prependto (JQuery (' # ' + ID + ' H2 '));

   

3. Load the content of the article

Get article ID
var PostID = Id.slice (5);
Use AJAX to get and process the content of
the article Jquery.ajax ({
 type:     ' gets '
 , url:     ' action=load_post&id= ' + PostID
 , Cache:    false
 , DataType:  ' html '
 , ContentType: ' Application/json; Charset=utf-8 '
 / Displays the load information before the return content
 , beforesend:function (data) {loadpostcontent (ID, ' <p class= ajax-loader ' >loading...</ P> ');}
 Get the content of the article successfully, update
 the content of the article, success:   function (data) {loadpostcontent (ID, data);}
 Get article content failed, display error prompt
 , error:    function (data) {loadpostcontent (ID, ' <p>oops, failed to load data.</p > ');}
);

Background processing
Treatment Ideas

The parameters from the foreground to the background are two, one is the action ID, used to determine the interface used, the other is the ID of the article, used to get the content of the article.

Now let's analyze the Get_the_content method of wp-includes/post-template.php.

function Get_the_content ($more _link_text = null, $stripteaser = 0) {Global $id, $post, $more, $page, $pages, $multipage
 
 , $preview;
 
 Set "View full" link copy if (null = = $more _link_text) $more _link_text = __ (' more ...) ');
 
 return content $output = ';
 
 The tag bit $hasTeaser = false; If the article requires a password and cannot find the processed information in the Cookie, return the View form if (post_password_required ($post)) {$output = Get_the_password_f that requires the password to be entered.
 ORM ();
 return $output;
 
 ////The requested article fragment corresponds to a page that is greater than the maximum number of pages (that is, the article fragment does not exist), the article Fragment if ($page > Count ($pages)) that returns the maximum page numbers $page = count ($pages);
 Article content is the last page of the article Fragment $content = $pages [$page-1]; If the text has more tags, request to cut off the article and output "view full text" link, then redefine the content of the article, tag more tags exist if (preg_match ('/<!--more (. *?)?
 -->/', $content, $matches)) {$content = explode ($matches [0], $content, 2); if (!empty ($matches [1]) &&!empty ($more _link_text)) $more _link_text = Strip_tags (Wp_kses_no_null (Trim ($
 
 MATCHES[1]));
 $hasTeaser = true;
 else {$content = array ($content); //If the article is cut off,And there are no paging requirements, if (False!== Strpos ($post->post_content, ' <!--noteaser--> ') && (! $multipage) | | ($page ==1)))
 
 ) $stripteaser = 1; Get the first part of the content of the article;
 If in the independent article exist Read more and cut off processing, then the contents of the article are empty $teaser = $content [0];
 if (($more) && ($stripteaser) && ($hasTeaser)) $teaser = ';
 
 $output. = $teaser; If the article is divided into fragments, the second part is spliced in a separate article, and the summary content displays the Read full text link if (count ($content) > 1) {if ($more) {$output. = ' <span ID = "more-". $id. ' ></span> '.
 $content [1]; else {if (! empty ($more _link_text)) $output. = Apply_filters (' The_content_more_link ', ' <a href= '. get_perm ALink ().
  "#more-$id \" class=\ "More-link\" > $more _link_text</a> ", $more _link_text);
 $output = Force_balance_tags ($output); } if ($preview)//preview fix for JavaScript bugs with foreign languages $output = Preg_replace_callback ('/\%u ( [0-9a-f] {4}) /', create_function (' $match ', ' return ' &# '. Base_convert ($match [1], 16, 10).
";"; '), $output); 
 Return to the content of the article returned $preview;

 }

You can think of this: as long as you meet some incoming parameters, remove some unnecessary, replace some replaceable, the page back to output, is an output of the article content interface.

Processing methods

If we temporarily do not consider the input password, paging and other functions; In addition, because more and cut off functions should not exist in the expanded article content, response processing can be very simple. There are only a few things we need to do:
1. Make an action corresponding interface
2. Get the contents of the specified article
3. Format the content of the article
4. Return to the content of the article

Say more useless, directly on the code, add comments:

function Load_post () {
 //If the action ID is load_post and the required parameter passed in is present, execute the response method
 if ($_get[' action ') = = ' Load_post ' &&A mp $_get[' id ']!= ') {
 $id = $_get["id"];
 $output = ';
 
 Gets the article object
 Global $wpdb, $post;
 $post = $wpdb->get_row ($wpdb->prepare ("select * from $wpdb->posts WHERE ID =%d LIMIT 1", $id));
 
 If an article with the specified ID exists, it is formatted if
 ($post) {
  $content = $post->post_content;
  $output = Balancetags ($content);
  $output = Wpautop ($output);
 }
 
 Print the content of the article and interrupt the following processing
 echo $output;
 Die ();
 }
Add the interface to init
add_action (' init ', ' load_post ');