Пагинация архива не работает

Я пытаюсь добавить постраничную навигацию для моего архива. Я хочу показывать 12 постов на странице и затем показывать кнопки ‘следующий’ и ‘предыдущий’.

Когда я вручную изменяю значение переменной $paged, меняя 1 на 2, это работает. Когда я нажимаю кнопку “Следующая” на странице архива, загружается очень странная страница темы. URL выглядит так: ‘/page/2/’.

Что я делаю не так?

Вот код, который я написал до сих пор:

<?php
  global $paged,$wp_query;

    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

    $args = array(
        'post_type' => 'realisaties',
        'posts_per_page' => 12,
      'paged' => $paged,
        'order' => 'ASC'
    );

    $archive_query = new WP_Query($args);

    while ($archive_query->have_posts()) : $archive_query->the_post();

      $image = get_field('preview_afbeelding');

      if( !empty($image) ):

        $url = $image['url'];
        $title = $image['title'];
        $alt = $image['alt'];
        $caption = $image['caption'];

        // миниатюра
        $size="medium";
        $thumb = $image['sizes'][ $size ];
        $width = $image['sizes'][ $size . '-width' ];
        $height = $image['sizes'][ $size . '-height' ];

        if( $caption ): ?>
          <div class="wp-caption">
        <?php endif; ?>
        <div class="col-md-3">
          <?php echo get_the_title(); ?>
          <a href="https://wordpress.stackexchange.com/questions/185115/<?php the_permalink() ?>" title="<?php echo $title; ?>">
            <img class="realisatie-img img-responsive" src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" title="" width="<?php echo $width; ?>" height="<?php echo $height; ?>" />
            <br />
          </a>
        </div>

        <?php if( $caption ): ?>
        <h2> <?php echo get_the_title(); ?></h2>
        <p class="wp-caption-text"><?php echo $caption; ?></p>
        </div>
      <?php
      endif;
      endif;
    endwhile;
    ?>


<?php next_posts_link('Старые записи »', $archive_query->max_num_pages); ?>
<?php previous_posts_link('Новые записи', $archive_query->max_num_pages); ?>
<?php wp_reset_query(); ?>
</div>
</div>

Вы можете использовать следующие шаги для отображения постраничной навигации. Шаг 1:- Включите следующий фрагмент в ваш файл functions.php :-

function webim_pagination ( $pages="", $range = 4 ) {
     $showitems = ($range * 2) + 1;
     global $paged;
     if( empty( $paged ) ) $paged = 1;
     if( $pages == '' ) {
         global $wp_query;
         $pages = $wp_query->max_num_pages;
         if(!$pages) {
             $pages = 1;
         }
     }   
     if(1 != $pages) {
         echo "<nav class=\"webim-page-pagination\"><ul class=\"page-numbers wow fadeInRight\"><li class=\"disabled\"><a href=\"#\">" . __('Страница ', 'webim') . $paged . __(' из ', 'webim') . $pages . "</a></li>";
         if( $paged > 2 && $paged > $range + 1 && $showitems < $pages ) echo "<li><a href="" . get_pagenum_link( 1 ) . "">&lArr; " . __('Первая', 'webim') . "</a></li>";
         if( $paged > 1 && $showitems < $pages ) echo "<li><a href="" . get_pagenum_link( $paged - 1 ) . "">&larr; " . __('Предыдущая', 'webim') . "</a></li>";
         for ( $i = 1; $i <= $pages; $i++ ) {
             if ( 1 != $pages && ( !( $i >= $paged + $range + 1 || $i <= $paged - $range - 1 ) || $pages <= $showitems )) {
                 echo ( $paged == $i ) ? "<li class=\"active\"><a href=\"#\">" . $i . "</a></li>" : "<li><a href="" . get_pagenum_link( $i ) . "" class=\"inactive\">" . $i . "</a></li>";      
             }
         }
         if ( $paged < $pages && $showitems < $pages ) echo "<li><a href=\"" . get_pagenum_link( $paged + 1 ) . "\">" . __('Следующая', 'webim') . " &rarr;</a></li>";
         if ( $paged < $pages-1 &&  $paged + $range - 1 < $pages && $showitems < $pages ) echo "<li><a href="" . get_pagenum_link( $pages ) . "">" . __('Последняя', 'webim') . " &rArr;</a></li>";
         echo "</ul></nav>\n";
     }
}

Шаг 2:- Теперь вызовите нашу функцию постраничной навигации там, где это необходимо. :-

<?php webim_pagination(); ?>

Всегда лучше иметь функцию для повторно используемых элементов.

Питер прав в своем комментарии, использовать кастомный WP_Query для этого не самая хорошая идея. На мой взгляд, вы можете достичь желаемого без этого.

Вы можете найти больше информации об этом по адресу: https://codex.wordpress.org/Plugin_API/Action_Reference/pre_get_posts#Changing_the_number_of_posts_per_page.2C_by_post_type

function wpse_185115_posts_per_page( $query ) {
    if ( is_admin() || ! $query->is_main_query() )
        return;

    if ( is_post_type_archive( 'realisaties' ) ) {
        $query->set( 'posts_per_page', 12 );
        return;
    }
}
add_action( 'pre_get_posts', 'wpse_185115_posts_per_page', 1 );