WordPressでページネーションを作成して、設置する

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

          $args = array(
               'post_type' => 'post',
               'cat' => $cat,
               'order' => 'DESC',
               'paged' => $paged,
          );

          $the_query = new WP_Query($args);
          if ($the_query->have_posts()) :
               while ($the_query->have_posts()) :
                    $the_query->the_post();

               endwhile;
          endif;
          wp_reset_postdata();

<?php

          $args = array(
               'post_type' => 'post',
               'cat' => $cat,
               'order' => 'DESC',
               'posts_per_page' => 5
          );

          $the_query = new WP_Query($args);
          if ($the_query->have_posts()) :
               while ($the_query->have_posts()) :
                    $the_query->the_post();

               endwhile;
          endif;
          wp_reset_postdata();

function pagination($pages = 1, $range = 2, $show_only = false) {

  $page = (int) $pages;
  $paged = get_query_var('paged') ? get_query_var('paged') : 1;

  $text_firs = "<< 最初";
  $text_before = "<";
  $text_next = ">";
  $text_last = "最後 >>";

  if ($show_only && $pages === 1) {
    echo '<div class="pagination"><span class="current">1</span></div>';
    return;
  }

  if ($pages === 1) return;

  if (1 !== $pages) {
    echo '<div class="pagination">';
    if ( $paged > $range + 1 ) {
        echo '<a class="np_button" href="', get_pagenum_link(1) ,'">', $text_first ,'</a>';
    }

    if ( $paged > 1 ) {
        echo '<a class="np_button" href="', get_pagenum_link( $paged - 1 ) ,'">', $text_before ,'</a>';
    }

    for ( $i = 1; $i <= $pages; $i++ ) {

        if ( $i <= $paged + $range && $i >= $paged - $range ) {
            if ( $paged === $i ) {
                echo '<span class="current">', $i ,'</span>';
            } else {
                echo '<a href="', get_pagenum_link( $i ) ,'" class="inactive">', $i ,'</a>';
            }
        }
      }

      if ( $paged < $pages ) {
          echo '<a href="', get_pagenum_link( $paged + 1 ) ,'">', $text_next ,'</a>';
      }
      if ( $paged + $range < $pages ) {
          echo '<a href="', get_pagenum_link( $pages ) ,'">', $text_last ,'</a>';
      }
      echo '</div>', "\n";
    }
}

<section class="pagination">
          <?php
          if (function_exists("pagination")) :
               pagination($wp_query->max_num_pages);
          endif;
          ?>
</section>

.pagination {
     justify-content: center;
     margin: 4rem 0;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
}

.pagination > a, .pagination > span {
     margin: 0 1rem;
     font-size: 1.2rem;
     color: grey;
     font-weight: bold;
   }
   
   .pagination > a:hover {
     text-decoration: none;
     color: rgb(87, 176, 240);
     transition: 0.4s;
   }
   .pagination > span {
     color: rgb(87, 176, 240);
   }