Load post with ajax in WordPress
<?php get_header();?>
<div id="ajaxpost">
<div class="content">
</div>
</div>
<br/><br/>
<div id="main">
<?php if (have_posts()) : while (have_posts()) : the_post();?>
<article>
<h2>
<a class="link" data-id="<?php the_ID();?>" href="<?php the_permalink();?>">
<?php the_title();?>
</a>
</h2>
<div class="content">
<?php the_excerpt();?>
</div>
</article>
<?php endwhile; endif;?>
</div>
<?php get_footer();?>
<?php
//Cargo jquery
function agregar_js() {
if (!is_admin()) {
wp_deregister_script('jquery');
wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js');
wp_enqueue_script('jquery');
}
}
add_action('wp_enqueue_scripts', 'agregar_js');
//Agrego el script del ajax loop
function registrar_ajaxLoop_script() {
//cargo el script para las llamadas ajax
wp_register_script('ajaxLoop',get_stylesheet_directory_uri() . '/js/ajaxLoop.js',array('jquery'));
wp_enqueue_script('ajaxLoop');
//defino la url del admin_ajax.php de WP
$php_array = array('url' => admin_url( 'admin-ajax.php' ) );
wp_localize_script( 'ajaxLoop', 'mi_ajax', $php_array ); //mi_ajax.url sera la variable, ajaxloop es asociado al script
}
add_action('wp_enqueue_scripts', 'registrar_ajaxLoop_script');
//Funcion que carga el post
function cargar_post() {
$args = array( 'p' => $_POST['thepost']);
$q = new WP_Query( $args );
while( $q->have_posts() ) : $q->the_post();?>
<h2><?php the_title(); ?></h2>
<div class="entry-content">
<?php the_content(); ?>
<div class="clearfix"></div>
</div>
<?php endwhile;exit;
}
add_action( 'wp_ajax_cargar_post', 'cargar_post' );
add_action( 'wp_ajax_nopriv_cargar_post', 'cargar_post' );
$(function(){
//Si hago click en el a href se ejecuta la llamada ajax
$('.link').click(function( event ){
var posttoload = $(this).attr('data-id');
$.ajax({
url: mi_ajax.url,
type: "POST",
data: {
'action':'cargar_post', //envio la info a la funcion php
'thepost' : posttoload //envio la variable de que post quiero cargar
},
beforeSend: function() {
$('#ajaxpost .content').html('<div id="loading"></div>'); //defino un loading
},
success: function(data){
//cargo la data en una variable
var $ajax_response = $(data);
},
error: function(errorThrown){
}
});
event.preventDefault();
})
})