WP-pagenaviが2ページ目がうまく表示されない

<?php if (is_paged()) : ?>

<div class="general-blog">
        <?php if ( have_posts() ) : ?>
  <?php while ( have_posts() ) : the_post(); ?>
        <div class="blk">
            <a href="<?php the_permalink(); ?>">
                <div class="photo"><?php the_post_thumbnail('full'); ?><span><?php the_time('Y.m.d'); ?></span></div>
                <dl>
                    <dt><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></dt>
                    <dd><h3><?php echo get_the_title(); ?></h3></dd>
                </dl>
            </a>
        </div>
        <?php endwhile; endif; ?>
    
    </div>
    <div id="pager">
        <?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>
    </div>
    
    

<?php else:  ?>
<?php
$paged = get_query_var('page')? get_query_var('page') : 1;
$args = array(
    'post_type' => 'post',
    'posts_per_page' => 2,
    'paged' => $paged,
);
$the_query = new WP_Query($args);
if ( $the_query->have_posts() ) :
while ( $the_query->have_posts() ) : $the_query->the_post(); $counter++; ?>
<?php if ($counter <= 1): ?>
    <div class="first-blog">
        <a href="<?php the_permalink(); ?>">
            <div class="photo"><?php the_post_thumbnail('full'); ?><span><?php the_time('Y.m.d'); ?></span></div>
            <dl>
                <dt><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></dt>
                <dd><h3><?php echo get_the_title(); ?></h3></dd>
            </dl>
        </a>
    </div>
   
    <div class="general-blog">
         <?php else:?>
        <div class="blk">
            <a href="<?php the_permalink(); ?>">
                <div class="photo"><?php the_post_thumbnail('full'); ?><span><?php the_time('Y.m.d'); ?></span></div>
                <dl>
                    <dt><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></dt>
                    <dd><h3><?php echo get_the_title(); ?></h3></dd>
                </dl>
            </a>
        </div>
        <?php endif;?>
        <?php endwhile; endif; ?>
    </div>
    
    <div id="pager">
        <?php if(function_exists('wp_pagenavi')) wp_pagenavi(array('query' => $the_query)); ?>
    </div>

<?php endif; ?>

WP-Pagenaviを使用しています。
上記のように最新１記事を大きく表示させるようにしていて、
2ページ目以降は20件表示させたいのですが、どうようにしたらよいでしょうか？。

管理画面の表示設定は1件に表示させています。

1ページ目は21件、2ページ目以降は20件表示させたいです。
※2ページ目以降は記事はすべて普通の大きさで一覧で表示

しかしページャーが1ページ目と2ページ目の数は合わなかったり、1ページ目に表示されていたものが
2ページ目にも表示されたりとうまくいきません。