【WordPress】一覧ページでどのページャーを押しても画面が変わらない

前提・実現したいこと

私はwordpressを使ったデザインカンプからのコーディングをしています。そこで投稿の一覧ページのページャについて不具合が出たので質問させていただきます。
実現したいこととしてはページャの1や2や3をクリックすることで、それに適応した1や2や3の画面に切り替わるようにするということです。

発生している問題・エラーメッセージ

投稿の一覧ページのページャの１や２や３を押してもすべて1のときの画面になってしまいます。

該当のソースコード

Archive.phpのソースコードはこのようになりました。

<?php get_header(); ?>　
  <div id="news-collect">
    <div class="news-contents">
　　　<?php query_posts('posts_per_page=20'); ?>
　　　　<?php if ( have_posts() ) : ?><?php while ( have_posts() ) : the_post(); ?>
　　　　　<div class="contents">
　　　　　　<div class="dt">
　　　　　　　<p class="date">
　　　　　　　　<?php the_date('Y.m.d'); ?>
　　　　　　　</p>
　　　　　　　<p class="category">
　　　　　　　　<?php the_field('ニュースの種類');?>
　　　　　　　</p>
　　　　　　</div>
　　　　　　<div class="dd">
　　　　　　　<a class="news-link" href="<?php the_permalink(); ?>">
　　　　　　　　<p class="article">
　　　　　　　　　<?php the_field('タイトル');?>
　　　　　　　　</p>
　　　　　　　</a>
　　　　　　</div>
　　　　　</div>
　　　　<?php endwhile;?>
　　　　<?php else : ?>
      　　<p>記事が1件も見つからなかったときの処理</p>
    　　<?php endif; ?>
    　</div>
    　<div class="news-btn">
     　<?php
      //Pagenation 
        if ( function_exists( "pagination" ) ) {
          pagination( $additional_loop->max_num_pages );
        }
     　?>
    </div>
  </div>
<?php get_footer(); ?>

function.phpのソースコードはこのようになりました

//Pagenation
function pagination( $pages = '', $range = 2 ) {
        $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 "<div class=\"pagenation\">\n";
                echo "<ul>\n";
                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\">" . $i . "</li>\n": "<li><a href='" . get_pagenum_link( $i ) . "'>" . $i . "</a></li>\n";
                        }
                }
              
                echo "</ul>\n";
                echo "</div>\n";
        }
}

style.cssのソースコードはこのようになりました

#news-collect {
  width: 950px;
  margin-right: auto !important;
  margin-left: auto !important;
  margin-top: 660px;
}
#news-collect .contents {
  display: flex;
  margin-bottom: 17px;
}
#news-collect .contents p {
  margin-right: 20px;
}
#news-collect .news-link {
  text-decoration: none;
  color: black;
}
#news-collect .contents .date {
   font-size: 18px;
  color: #391e88;
}
#news-collect .contents .category {
  height: 22px;
  width: 82px;
  background-color: #e8e8e8;
  color: #333333;
  font-size: 16px;
  border-radius: 11px;
  text-align: center;
}
#news-collect .dt {
  display: flex;
}
#news-collect .news-contents {
  padding-bottom: 40px;
}
#news-collect .news-btn {
  display: flex;
  text-align:center;
  justify-content: center;
  align-items: center;
  /*width: 160px;
  margin-right: auto;
  margin-left: auto;*/
}

.pagenation ul {
  display: flex;
  justify-content: center;
  list-style-type: none;
}
.pagenation li {
  margin-right: 10px;
  width: 46px;
  height: 46px;
  border-radius: 23px;
  background-color: #391e88;
  text-decoration: none;
  color: white;
  font-size: 19px;
  display: block;
  text-align: center;
  padding-top: 10px;
}

.pagenation a {
  margin-right: 10px;
  width: 46px;
  height: 46px;
  border-radius: 23px;
  background-color: #9b95c9;
  text-decoration: none;
  color: white;
  font-size: 19px;
  display: block;
  text-align: center;
  padding-top: 10px;
  margin-top: -10px;
}

試したこと

試したことに関しては、コードを実行したことのみです。情報が少なくて申し訳ないですが、他に何をすればいいのかわからなく、このようになってしまったことをお許しください。
原因が分かる方がいたら、どうかよろしくお願いいたします。

tabuu

2021/06/21 01:20

query_postsは非推奨となっているので使わない方法で実装してみてください。ちなみにテンプレートで投稿リストを再取得していますが、その必要性は無いように感じます。どのような理由で再取得されているのでしょうか。

iwakikota0815

2021/06/23 08:11

回答ありがとうございます。query_postsはどの部分で使われているのかコードを見返してもわからなかったので、何行目あたりで行われていることかを教えていただけるとたすかります。また、投稿リストの再取得している部分についてなのですが、ネットに挙げられているコードをコピペしていたので、正直コードの意味はほぼ理解してないです。なのでなぜ投稿リストの再取得をしているのかもわかっていません。 wordpressに関して超初心者であることを前提で記述しておくべきでした。すいませんよろしくお願いいたします。

tabuu

2021/06/23 23:12

>Archive.phpのソースコードはこのようになりました。の4行目です。