Wordpress分页 - 无法转到其他页面

Question

I'm using wordpress and I'm trying to create a pagination with wordpress WP_query. I have used a tutorial for this and some people had the same problem like me that they couldn't connect to the second or third page of their pagination. I have 11 posts in my database and I have split them so they show 4 per page and whether I try to go to second or third page, it just says "404 page not found". Here is my index.php:

<?php
get_header();?>
    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">

<?php 

  $paged = ( get_query_var('page') ) ? get_query_var('page') : 1;
  $query_args = array(
      'post_type' => 'all_products',
      'posts_per_page' => 4,
      'paged' => $paged,
      'page' => $paged
    );
  $the_query = new WP_Query( $query_args ); ?>

  <?php if ( $the_query->have_posts() ) : ?>

    <!-- the loop -->
    <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
      <article class="loop">
        <div class="product">
            <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
            <ul>
                <li><strong>Description:</strong> <?php echo(types_render_field( "description_of_the_product", array( 'raw' => true) )); ?></li>
                <li><strong>Type:</strong> <?php echo(types_render_field( "type", array( 'raw' => true) )); ?></li>
                <li><strong>Price:</strong> <?php echo(types_render_field( "price", array( 'raw' => true) )); ?></li>
                <li><strong>Manufacturer:</strong> <?php echo(types_render_field( "manufacturer", array( 'raw' => true) )); ?></li>
                <li><strong>Availability:</strong> <?php echo(types_render_field( "availability:", array( 'raw' => true) )); ?></li>
                <li><strong>Reference:</strong> <?php echo(types_render_field( "reference", array( 'raw' => true) )); ?></li>
                <a href="<?php the_permalink(); ?>">Read more</a>
            <ul>    
        </div>
      </article>
    <?php endwhile; ?>
    <!-- end of the loop -->

 <!-- pagination here -->

    <?php
     if (function_exists('custom_pagination')) {
        custom_pagination($the_query->max_num_pages,"",$paged);
      }
    ?>
<?php next_posts_link( $label , $max_pages ); ?>
  <?php wp_reset_postdata(); ?>

  <?php else:  ?>
    <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
  <?php endif; ?>

<?php get_footer(); ?>

Any help is greatly appreciated.

Pagination function(custom_pagination):

function custom_pagination($numpages = '', $pagerange = '', $paged='') {

  if (empty($pagerange)) {
    $pagerange = 2;
  }

  /**
   * This first part of our function is a fallback
   * for custom pagination inside a regular loop that
   * uses the global $paged and global $wp_query variables.
   * 
   * It's good because we can now override default pagination
   * in our theme, and use this function in default queries
   * and custom queries.
   */
  global $paged;
  if (empty($paged)) {
    $paged = 1;
  }
  if ($numpages == '') {
    global $wp_query;
    $numpages = $wp_query->max_num_pages;
    if(!$numpages) {
        $numpages = 1;
    }
  }

  /** 
   * We construct the pagination arguments to enter into our paginate_links
   * function. 
   */
  $pagination_args = array(
    'base'            => get_pagenum_link(1) . '%_%',
    'format'          => 'page/%#%',
    'total'           => $numpages,
    'current'         => $paged,
    'show_all'        => False,
    'end_size'        => 1,
    'mid_size'        => $pagerange,
    'prev_next'       => True,
    'prev_text'       => __('«'),
    'next_text'       => __('»'),
    'type'            => 'plain',
    'add_args'        => false,
    'add_fragment'    => ''
  );

  $paginate_links = paginate_links($pagination_args);

  if ($paginate_links) {
    echo "<nav class='custom-pagination'>";
      echo "<span class='page-numbers page-num'>Page " . $paged . " of " . $numpages . "</span> ";
      echo $paginate_links;
    echo "</nav>";
  }

}