Làm cách nào tôi có thể tìm nạp vòng lặp của tiêu đề bài qua AJAX?


7

Tôi có một danh sách các tiêu đề bài gần đây nhất trong sidebar.php. Dưới đây là một ví dụ về cách mã đó trông như thế nào:

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

Phần đó hoạt động hoàn hảo. Nó hiển thị 20 tiêu đề bài mới nhất và thời gian đăng bài được gói trong permalinks. Tuy nhiên, tôi đang cố gắng làm nhiều hơn một chút. Tôi muốn tạo một nút tải thêm ở phía dưới để lấy 20 tiêu đề bài tiếp theo. Tôi biết jQuery của tôi và đó không phải là vấn đề.

Tôi cần trợ giúp để tìm ra cách tạo một vòng lặp tùy chỉnh trong .phptệp mẫu tùy chỉnh mới chỉ tạo html ở trên. Tập tin đó cần có khả năng chấp nhận một tham số cho số trang, để tôi javascriptcó thể tìm nạp URL gia tăng mỗi lần.

Tôi sẽ đánh giá cao bất kỳ sự giúp đỡ, cảm ơn!

Câu trả lời:


13

bạn có thể gói chức năng của mình và nối nó vào cuộc gọi ajax như thế này:

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

sau đó thêm nó vào chức năng thanh bên của bạn ở cuối

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

và ở đó bạn đi, oh chờ bạn cần thêm phản hồi wp-ajax để

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

và bạn đã được thiết lập


2
Câu trả lời này là một mỏ vàng mà bạn thực sự không thể tìm thấy trong sách giáo khoa
AlxVallejo

Tôi biết rằng đây là một câu trả lời cũ, nhưng nó vẫn phù hợp với tôi. Tôi tự hỏi tại sao điều đó lại return falsecần thiết, vì bạn đang gọi nó trong sự kiện nhấn nút, mà không có hình thức nào liên quan. Tôi nghĩ bạn có thể bỏ nó đi. Ngoài ra, làm thế nào để check_ajax_refererbiết những gì cần kiểm tra, vì bạn không sử dụng bất kỳ trường nonce nào? Và là wp-ajax-responsegì?
Bram Vanroy 27/2/2015
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.