WordPress do not use plugin with ajax refresh sidebar random article

A friend sent me to ask me, my sidebar that refresh the effect is how to achieve. Can share
In fact, I intend to share these days, that is, time is not allowed, and now we share under how to use ajax refresh wordpress sidebar random article bars
DEMO
Click on the blog sidebar “refresh” you can see.
How to achieve?
First make sure your theme is called in the js library, and the following code can be found in the topic file header.php. If you do not have it, please copy and paste it before the label.
<script type = “text / javascript” src = “http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js”> </ script>
1, to determine the scope of the article code id. The blog’s random article html code is roughly as shown below. You can also find similar code in your website template. Each topic calls the same function, the middle of a string of code can be ignored.
<h2 class = “sub”> recommended reading </ h2>
<div id = “postlist1”>
<ul class = “spy”>
<? php $ my_query = new WP_Query (‘orderby = rand & showposts = 5’);?>
<? php while ($ my_query-> have_posts ()): $ my_query-> the_post ();?>
<li> <? php $ screen = get_post_meta ($ post-> ID, ‘screen’, $ single = true);?>
<h2 style = “overflow: hidden;”> <a href=”<?php the_permalink()>> “title =” <? php the_title ();?> “> <? php the_title ();?> < a> </ h2>
</ li>
? php endwhile;?>
</ ul>
</ div>
<a href=”#” id=”another”> refresh </a>
Among them, you also need to add a “refresh” to your immediately article code. That is the following code.
<a href=”#” id=”another”> refresh </a>
Also note that the ID “frontlist1” and the last parcel “refresh” ID “another” in front of the ul tag will be used.
2. Create a page template named Random Post. PS: Do not copy the following code. Where the article call function is copied directly from the sidebar.php in the currently used theme.
<? php
/ *
Template Name: Random Post
* /
?>
<? php $ my_query = new WP_Query (‘orderby = rand & showposts = 5’);?>
<? php while ($ my_query-> have_posts ()): $ my_query-> the_post ();?>
<li> <? php $ screen = get_post_meta ($ post-> ID, ‘screen’, $ single = true);?>
<h2 style = “overflow: hidden;”> <a href=”<?php the_permalink()>> “title =” <? php the_title ();?> “> <? php the_title ();?> < a> </ h2>
</ li>
<? php endwhile;?>
3, create a page using the above template, and publish.
We can click here to view this page of this site / random
4, jQuery
Copy and paste the following code into your subject header.php file before placing it on the label.
Where # polist1 and #another are found in step one, combined with your own theme changes.
<script type = “text / javascript” charset = “utf-8”>
$ (). ready (function () {
$ (“# postlist1”). load (“/ random /? offset =” + offset);
$ (“# another”). click (function () {
offset = offset + 5;
$ (“# postlist1”)
.slideUp ()
.load (“/ random /? offset =” + offset, function () {
$ (this) .slideDown ();
});
});
</ script>
5 until all ends, you’re done!