web-dev-qa-db-fra.com

Comment puis-je récupérer une boucle de titres d'articles via AJAX?

J'ai une liste des titres d'articles les plus récents dans sidebar.php. Voici un exemple de l'apparence de ce code:

<?php $args = array('posts_per_page' => 20); ?>
<?php $sidebar = new WP_Query($args); ?>
<?php if ( $sidebar->have_posts() ) : ?>
<?php while ( $sidebar->have_posts() ) : $sidebar->the_post(); ?>

<div class="story">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
  <?php the_title(); ?> - <?php the_time("F j, Y h:i A"); ?>
</a>
</div>

<?php endwhile; ?>
<?php endif; ?>

Cette partie fonctionne parfaitement. Il affiche les 20 derniers titres et temps de publication dans des permaliens. Cependant, j'essaie de faire un peu plus. Je veux créer un bouton de chargement plus en bas pour récupérer les 20 titres suivants. Je connais mon jQuery et ce n'est pas le problème.

J'ai besoin d'aide pour savoir comment créer une boucle personnalisée dans un nouveau fichier de modèle .php personnalisé qui ne génère que le code HTML ci-dessus. Ce fichier doit pouvoir accepter un paramètre pour un numéro de page afin que ma javascript puisse extraire une URL incrémentée à chaque fois.

J'apprécierais toute aide, merci!

phpjqueryloopajax
7
Sahas Katta

vous pouvez envelopper votre fonction et la raccrocher à un appel ajax comme ceci:

//if you want only logged in users to access this function use this hook
add_action('wp_ajax_more_links', 'my_AJAX_more_links_function');
//if you want none logged in users to access this function use this hook
add_action('wp_ajax_nopriv_more_links', 'my_AJAX_more_links_function');

function my_AJAX_more_links_function(){
    check_ajax_referer('more_links');
    $success_response = new WP_Ajax_Response();
    $args = array('posts_per_page' => 20 , 'offset' => $_POST['offset']);
    $sidebar = new WP_Query($args);
    if ( $sidebar->have_posts() ){ 
         while ( $sidebar->have_posts() ) {
            $sidebar->the_post(); 
            $out .= '<div class="story">';
            $out .= '<a href="' . the_permalink().'" title="'. the_title'.">' . the_title().' - '.the_time("F j, Y h:i A") .'</a></div>';
        }
        $success_response->add(array(
                    'what' => 'has',
                    'data' => array('html' => $out, 'offset' => $_POST['offset']
        ));
    }else{
        $out = __('Sorry but No more!');
        $success_response->add(array(
                    'what' => 'none',
                    'data' => $out
                ));
    }

    $success_response->send();      
    exit;   
}

puis ajoutez ceci à votre fonction de barre latérale à la fin

<span class="more_links"></span>
<span class="get_more">
    <input type="hidden" name="offset" id="offset" value="20">
    <input type="submit" name="more" id="more" value="Get more links">
</span>
<script type="text/javascript" >
jQuery(document).ready(function($) {
    jQuery('#more').click(function() { 
        var data = {
            action: 'more_links',
            offset: jQuery( '#offset' ).val(),
            _ajax_nonce: <?php echo wp_create_nonce( 'more_links' ); ?>
        };

        // since 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php
        jQuery.post(ajaxurl, data, function(response) {
            var res = wpAjax.parseAjaxResponse(response, 'ajax-response');
            jQuery.each( res.responses, function() { 
                if (this.what == 'has') {
                    //insert links
                    jQuery(".more_links").append( this.data.html ); 
                    //update offset value
                    jQuery("#offset").val(this.data.offset);
                    jQuery(".more_links").fadeIn("fast");
                }else{
                    //no more links found
                    jQuery(".more_links").append( this.data.html );
                    jQuery(".get_more").remove();

                }
                //end if
                });//end each


        });

        return false;
    })
});
</script>

et voilà, oh, attendez, vous devez ajouter wp-ajax-response afin

add_action('wp_head','add_scripts_121');
function add_scripts_121(){
    wp_enqueue_script('wp-ajax-response');
}

et vous êtes prêt

13
Bainternet