Example of randomly retrieving a record using AJAX in wordpress

Click "change" to randomly change the content.

Because there are "standard", "image", "video" and other article forms, here we need to randomly obtain an article in the form of images, and take out the pictures, and links, use ajax to replace the content.

① We can create a new page template named recommend.

Create a page Template:

<? Php
/*
* Template Name: change the Name.
*/
Create a page in the background management, select this template, and name it recommend. A new page is created.

② Obtain and output the content to be replaced in the template

The code is as follows:	Copy code
<? Php /* * Template Name: change the Name. */Www.111cn.net $ Args = array ( 'Tax _ query' => array ( Array ( 'Showposts' => '1 ', 'Taxonomy' => 'Post _ format ', 'Field' => 'Slug ', 'Terms' => 'Post-format-image ',     ) ), 'Orderby' => 'Rand ', ); Query_posts ($ args ); The_post (); ?>

This is a random article in the form of images.

The code is as follows:	Copy code
<A href = "<? Php the_permalink ();?> "Target =" _ self "> <? Php $ imgurl = catch_that_image ();?> "Alt =" N amazing ways to get people up "width =" 270 "height =" 152 "/> <Span> <? Php the_title ();?> </Span> </A>

Here is the html to be displayed. We have replaced the link and image address.

Catch_that_image function:

The code is as follows:	Copy code
<? Php Function catch_that_image (){ Global $ post, $ posts; $ First_img = ''; Ob_start (); Ob_end_clean (); $ Output = preg_match_all ('//I ', $ post-> post_content, $ matches ); $ First_img = $ matches [1] [0];   // No image found display default image instead If (empty ($ first_img )){ $ First_img = "/images/default.jpg ";  } Return $ first_img; } ?>

This function can be used to retrieve the first image of the modified article.

③ Write ajax functions on the front-end page

The code is as follows:

Copy code

<Script> $ (Function (){ $ (". Featured-random"). load ("/recomend /"); });   Function recommend (){ $ (". Featured-random"). load ("/recomend /"); Return false;  } </Script>   <Div class = "featured sidebox radiusbox"> <H3 class = "side-title"> recommended content <Div class = "featured-random">   </Div> <A class = "refresh-random" href = "javascript: void (0)" onclick = "recommend ()"> Change One </a> </Div>

In this way, the ajax effect will be completed.