Ajax loop обновление на щелчке
Вопрос
Я отображаю случайную петлю после страницы. Я хотел бы поместить ссылку «обновление», чтобы обновить содержание цикла через Ajax.
Это возможно?
Это моя петля, если это помогает:
<ul id="content-inner" class="thumb-grid clearfix">
<?php query_posts('posts_per_page=20&orderby=rand'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<li>
<a href="<?php the_permalink(); ?>">
<img src="<?php echo $my_image_url = get('thumbnail'); ?>" alt="" />
<span class="title"><?php the_title(); ?></span>
<span class="feat"><?php $articletags = strip_tags(get_the_tag_list('',', ',''));echo $articletags;?></span>
</a>
</li>
<?php endwhile;?>
<?php endif; ?>
<?php wp_reset_query(); ?>
</ul>
Решение
Не должно быть слишком сложным. Сначала: создайте файл JavaScript и добавьте это:
jQuery(document).ready(function($){
$('#refresh-links-id').click(function(e){
e.preventDefault();
$.post(ajaxurl,{action:'jpb_random_loop'}, function(data){
$('#content-inner').fadeOut(250).empty().append( data ).fadeIn(250);
});
});
});
Сохраните этот файл в своем каталоге темы где -нибудь (также может быть в подкаталоге). Чтобы это работало, ссылка обновления не должна быть внутри ul#content-inner
. Анкет Довольно простой пост -звонок jQuery.
Далее добавьте это в вашу тему functions.php
файл:
function jpb_template_redirect(){
if( <conditions under which this javascript should execute> ){
wp_enqueue_script( 'random-loop', '<url to the javascript file above>', array( 'jquery' ), '1.0' );
}
}
function jpb_random_loop_cb(){
query_posts('posts_per_page=20&orderby=rand');
if (have_posts()) : while (have_posts()) : the_post(); ?>
<li>
<a href="<?php the_permalink(); ?>">
<img src="<?php echo $my_image_url = get('thumbnail'); ?>" alt="" />
<span class="title"><?php the_title(); ?></span>
<span class="feat"><?php $articletags = strip_tags(get_the_tag_list('',', ',''));echo $articletags;?></span>
</a>
</li>
<?php endwhile; endif;
die();
}
add_action( 'template_redirect', 'jpb_template_redirect' );
add_action( 'wp_ajax_jpb_random_loop', 'jpb_random_loop_cb' );
add_action( 'wp_ajax_nopriv_jpb_random_loop', 'jpb_random_loop_cb' );
Это связат все вместе. Просто убедитесь, что логика верна в template_redirect
функция так, чтобы JavaScript включен в правые страницы.
Другие советы
Этот плагин, похоже, будет делать то, что вы ищете.
http://wordpress.org/extend/plugins/wp-ajax-random-posts/
Если вы не хотите использовать плагин, вы всегда можете проверить код для ссылки обновления и попытаться заставить его работать на вас.