Wie kann ich eine Schleife von Post-Titeln über AJAX abrufen?

7

Ich habe eine Liste der neuesten Post-Titel in sidebar.php. Hier ist ein Beispiel, wie dieser Code aussieht:

<?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; ?>

Dieser Teil funktioniert perfekt. Es werden die 20 neuesten Post-Titel und Post-Zeiten in Permalinks angezeigt. Ich versuche jedoch, ein bisschen mehr zu tun. Ich möchte unten eine Schaltfläche zum Laden weiterer Elemente erstellen, um die nächsten 20 Post-Titel abzurufen. Ich kenne meine jQuery und das ist nicht das Problem.

Ich benötige Hilfe, um herauszufinden, wie eine benutzerdefinierte Schleife in einer neuen benutzerdefinierten .phpVorlagendatei erstellt wird, die nur den obigen HTML-Code generiert. Diese Datei muss in der Lage sein, einen Parameter für eine Seitenzahl zu akzeptieren, damit ich javascriptjedes Mal eine inkrementierte URL abrufen kann.

Ich würde mich über jede Hilfe freuen, danke!

Sahas Katta
quelle

Antworten:

13

Sie können Ihre Funktion wie folgt umschließen und an einen Ajax-Aufruf anschließen:

//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;   
}

Fügen Sie dies dann am Ende Ihrer Seitenleistenfunktion hinzu

<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>

und los geht's, oh warte du musst also wp-ajax-response hinzufügen

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

und du bist bereit

Bainternet
quelle
2
Diese Antwort ist eine Goldmine, die Sie wirklich nicht in Lehrbüchern finden können
AlxVallejo
Ich weiß, dass dies eine alte Antwort ist, aber sie ist für mich immer noch relevant. Ich frage mich, warum das return falsenotwendig ist, da Sie es beim Klickereignis einer Schaltfläche aufrufen, auf die sich kein Formular bezieht. Ich denke, Sie könnten es weglassen. Woher check_ajax_refererwissen Sie auch, was zu überprüfen ist, da Sie keine Nonce-Felder verwenden? Und was ist wp-ajax-response?
Bram Vanroy