Как добавить нумерацию страниц в WordPress с помощью Ajax (мне нужно отладить код)?

Question

edit: я создаю раздел в моей пользовательской теме 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;
                }
            },
        });
    });
});

Надеюсь, теперь вы получили все вещи и дайте мне знать, если вам нужна помощь.