Question

编辑：我正在WordPress自定义主题中创建一个部分，以使用WP_Query在首页模板上的特定类别中显示五个最新标题/内容，并且还希望有一个按钮来加载更多具有相同类别的标题（+5）。

我知道了，但问题是我希望当用户刷新页面时，应该已经有五个帖子，并且当用户单击以加载超过其应加载+5的数量时，依此类推。我正在关注https://www.youtube.com/watch?v=7_lU7_JUS2g。

在front-page.php

显示内容的部分

<div class="col sunset-posts-container" id="displayResults"></div

加载按钮

<a class="btn btn-secondary text-light text-center sunset-load-more" data-page="1" data-url="<?php echo admin_url('admin-ajax.php'); ?>">

在functions.php中

add_action( 'wp_ajax_nopriv_sunset_load_more', 'sunset_load_more' );
add_action( 'wp_ajax_sunset_load_more', 'sunset_load_more' );

function sunset_load_more() {
    $paged = $_POST['page']+1;
        // the query
        $query = new WP_Query(array(
            'category_name' => 'news',
            'post_status' => 'publish',
            'posts_per_page' => 5,
            'paged' => $paged
        ));


         if ($query->have_posts()) : 
          while ($query->have_posts()) : $query->the_post(); ?>
          <p><a class="text-success" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
          <?php the_category( ', ' ); ?>
          </p>

             <?php endwhile; 
             wp_reset_postdata(); 
             die; 
        else : 
          __('No News');
        endif;
}

在ajaxPagination.js中

jQuery(document).ready( function($){
    $(document).on('click', '.sunset-load-more', function(){

        var page = $(this).data('page');
        var ajaxurl = $(this).data('url');

        $.ajax({
            url : ajaxurl,
            type : 'post',
            data : {
                page : page,
                action: 'sunset_load_more'
            },
            error : function( response ){
                console.log(response);
            },
            success : function( response ){
                $('.sunset-posts-container').append(response);
            },
        });
    });
});

，是否可以进行导航而不是加载更多内容以加载下五个或加载预览五个？当用户单击下一步时，最后五个将被删除（淡出）。谢谢：）

Answer 1

您需要更新以下代码

在front-page.php

显示内容的部分

<div class="col sunset-posts-container" id="displayResults"></div>

在functions.php中

add_action( 'wp_ajax_nopriv_sunset_load_more', 'sunset_load_more' );
add_action( 'wp_ajax_sunset_load_more', 'sunset_load_more' );

function sunset_load_more() {
    $paged = $_POST['page']+1;
    $query = new WP_Query(array(
        'category_name' => 'news',
        'post_status' => 'publish',
        'posts_per_page' => 5,
        'paged' => $paged
    ));
    if ($query->have_posts()) : 
        ob_start();
        while ($query->have_posts()) : $query->the_post(); ?>
            <p><a class="text-success" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
                <?php the_category( ', ' ); ?>
            </p>
         <?php endwhile;
        $response   = array(
            'type'  => 'success',
            'html'  => ob_get_clean(),
            'page'  => $paged
        );
         wp_reset_postdata(); 
    else : 
      __('No News');
        $response   = array(
            'type'  => 'failure',
            'html'  =>  'No News',
        );
    endif;

    wp_send_json_success($response);
    wp_die();
}

在ajaxPagination.js中

jQuery(document).ready( function($){
    $(document).on('click', '.sunset-load-more', function(){

        var page = $(this).data('page');
        var ajaxurl = $(this).data('url');

        $.ajax({
            url : ajaxurl,
            type : 'post',
            data : {
                page : page,
                action: 'sunset_load_more'
            },
            error : function( response ){

            },
            success : function( response ){
                switch(response.data.type) {
                    case 'success' :
                        $('.sunset-load-more').attr('data-page',response.data.page);
                        /* you need remove last five then use html method and if you want append then use append method */
                        $('#displayResults').html(response.data.html);                        
                        break;
                    case 'failure' :
                        $('#displayResults').html(response.data.html);
                        break;
                    default :
                        break;
                }
            },
        });
    });
});

希望现在您拥有了一切，让我仍然知道需要帮助。

如何使用Ajax在WordPress中添加分页（我有需要调试的代码）？

1 个答案: