ループ処理の最初と最後で違う出力をしながらページネーションを作成する方法がわかりません。

ワードプレスでホームページを作成しています。
*初心者で、少し前にPHPに触れたばかりです。

早く答えが必要で、
(ダブルポストです。https://qiita.com/keikkkk/questions/7915609d5acb9d3438fc
https://ja.stackoverflow.com/questions/88102/%e3%83%9a%e3%83%bc%e3%82%b8%e3%83%8d%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%81%a7-%e8%a8%98%e4%ba%8b%e3%81%ae%e3%83%ab%e3%83%bc%e3%83%97%e5%87%a6%e7%90%86%e3%82%92%e6%9c%80%e5%88%9d%e3%81%a8%e6%9c%80%e5%be%8c%e3%81%a7%e9%81%95%e3%81%86%e5%87%ba%e5%8a%9b%e3%81%a7%e8%a1%8c%e3%81%86%e6%96%b9%e6%b3%95%e3%81%8c%e3%82%8f%e3%81%8b%e3%82%8a%e3%81%be%e3%81%9b%e3%82%93)

今現在、アーカイブページで、投稿の一覧のページを作成していて、
プラグインWP-PageNaviを使用し、サイトの最後に
ページネーションを作成しています。

ループ処理の最初と最後で違う出力をすることは出来ていて、
https://on-ze.com/archives/7464
これで行いました。

最初のループと後のループでは、
画像の大きさを変える必要があり、
最初の記事の画像は縦幅が小さく、２番目は大きめです。

プラグインの使用に、
https://senoweb.jp/note/wp-pagenavi-howto/
この内容に取り組みました。

この最初と最後の２つのループ処理とページネーションを同時に使用することが出来ません。

<?php get_header(); ?>
<section class="blog-archive-wrapper">
    <div class="blog-archive-wrapper-second">
        <div class="blog-archive-outer">    
            <h2 class="blog-archive-outer-title">新着一覧</h2>  
   <div>
    <?php
        $paged = get_query_var('paged')? get_query_var('paged') : 1;
        $information= new WP_Query( array(
                    'post_type' => 'post',
                    'paged' => $paged,
                    'post_status' => 'publish',
                    'posts_per_page' => 10,
                ));
        if ( $information ->have_posts() ) :
    ?>
    <ul>    <!-- ループ -->
        <?php while ( $information -> have_posts() ) : $information -> the_post(); ?>  
        <li>

 <?php if ($wp_query->current_post == 0) { ?>                   
<?php
$args = array(
    'posts_per_page' => 1,
);
$the_query = new WP_Query( $args );
?>

 <a href="<?php the_permalink(); ?>" class="blog-item"></a> 
        <div class="blog-item-thumbnail-content">
        <div class="blog-list-wrapper-second"> 
          <?php // アイキャッチを表示させる start ?>    
            <div class="blog-item-thumbnail-second">
                <?php if(has_post_thumbnail()): ?>
                <div class="thumbnail-image-second"><?php the_post_thumbnail(array(240, 148)); ?></div>
                <?php endif; ?>
            </div>
            <?php // アイキャッチを表示させる end ?>
        </div>  
        <div class="blog-list-category">
         
<?php $cat = get_the_category(); ?>
<?php $cat = $cat[0]; ?>
<p class="blog-list-category-title"><?php echo get_cat_name($cat->term_id); ?></p>
        </div>
              
        <div class="blog-item-content"> 
                 <p class="blog-item-day-second"><?php the_time('Y-m-d'); ?></p>
                <?php // タイトルを表示させる start ?>
                <h3 class="blog-item-title">
                <?php echo mb_substr($post->post_title, 0, 30).'……'; ?>
               </h3>
                <?php // タイトルを表示させる end ?>
              <?php // 抜粋を表示させる start ?>
                    <?php the_excerpt(); ?> 
                <?php // 抜粋を表示させる end ?>     
        </div>
    </div>



    <?php } ?>
<?php
$args = array(
    'posts_per_page' => 9,
    'offset' => 1,
);
$the_query = new WP_Query( $args );
?>

  <div class="blog-list-category">
  <?php $cat = get_the_category(); ?>


<?php $cat = $cat[0]; ?>
<p class="blog-list-category-title"><?php echo get_cat_name($cat->term_id); ?></p>
  </div>
 <div class="blog-list-list-item">
 <a href="<?php the_permalink(); ?>" class="blog-item"></a> 

        <div class="blog-item-thumbnail-content-second">
        <div class="blog-list-wrapper"> 
          <?php // アイキャッチを表示させる start ?>    
            <div class="blog-item-thumbnail-second">
                <?php if(has_post_thumbnail()): ?>
                <div class="thumbnail-image"><?php the_post_thumbnail(array(240, 179)); ?></div>
                <?php endif; ?>
            </div>
            <?php // アイキャッチを表示させる end ?>
        </div>  
              
        <div class="blog-item-content"> 
                 <p class="blog-item-day-second"><?php the_time('Y-m-d'); ?></p>
                <?php // タイトルを表示させる start ?>
                <h3 class="blog-item-title">
                <?php echo mb_substr($post->post_title, 0, 30).'……'; ?>
               </h3>
                <?php // タイトルを表示させる end ?>
              <?php // 抜粋を表示させる start ?>
                <p class="blog-item-read">
                    <?php the_excerpt(); ?> 
                </p>
                <?php // 抜粋を表示させる end ?>     
        </div>
    </div> 
</div>

 <?php endwhile; ?>
   </div> 
                </li>
               
        </ul>
        <?php
              // サブクエリをリセット
        wp_reset_postdata();
        ?>

<?php
    if( function_exists('wp_pagenavi') ) {
            wp_pagenavi(array('query' => $information));
     }
?>
<?php endif;?>
</div>

 </div>     
</section>
<?php get_footer(); ?>

CSS
1
2.blog-list-wrapper {
3  display: flex;
4}
5.blog-item-thumbnail-content {
6  display: flex;
7}
8.blog-archive-wrapper {
9  width: 70.31953125vw;
10  margin: 0 auto;
11}
12.blog-item-thumbnail
13  .blog-item-thumbnail-image
14  img.attachment-150x110.size-150x110.wp-post-image {
15  height: 179px;
16  width: 240px;
17  object-fit: cover;
18}
19.blog-archive-outer-title {
20  font-weight: bold;
21  font-size: 3.2rem;
22  text-align: center;
23  padding-top: 4.677vw;
24  padding-bottom: 4.6875vw;
25}
26.img-price-third {
27  position: relative;
28  height: 221px;
29}
30img.main-img-third {
31  height: 221px;
32  width: 100%;
33}
34.blog-item-content {
35  padding-left: 3.90625vw;
36}
37.blog-item-content .blog-item-day {
38  font-size: 1.6rem;
39  color: #1b224c;
40  padding-bottom: 1.40625vw;
41}
42.blog-item-content .blog-item-title {
43  font-size: 2.6rem;
44  padding-bottom: 1.5625vw;
45}
46.blog-item-content p {
47  font-size: 1.25vw;
48}
49.blog-item-content p {
50  font-size: 1.25vw;
51}
52.blog-item-thumbnail-content {
53  display: flex;
54  padding-bottom: 7.265625vw;
55}
56.blog-item-day-second {
57  padding-bottom: 1.5625vw;
58}
59img.attachment-240x148.size-240x148.wp-post-image {
60  height: 148px;
61  width: 240px;
62  object-fit: fill;
63  position: relative;
64}
65img.attachment-240x179.size-240x179.wp-post-image {
66  height: 179px;
67  width: 240px;
68  object-fit: fill;
69}
70.blog-list-category {
71  width: 80px;
72  height: 28px;
73  background-color: #1b224c;
74  position: absolute;
75  left: 14.84375vw;
76  color: #fff;
77  line-height: 28px;
78  text-align: center;
79}
80.blog-item-thumbnail-content {
81  display: flex;
82  padding-bottom: 7.265625vw;
83  height: 148px;
84}
85.blog-item-thumbnail-content-second {
86  display: flex;
87  padding-bottom: 4.765625vw;
88}
89.blog-item-thumbnail-content-second:last-child {
90  padding-bottom: 8.515625vw;
91}
92
93
94