

ワードプレスでホームページを作成しています。  
*初心者で、少し前にPHPに触れたばかりです。また、ダブルポストです。  
<https://teratail.com/questions/3d01olss0x2g5w>  
<https://qiita.com/keikkkk/questions/7915609d5acb9d3438fc>

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

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

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

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

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

[code]

    <?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(); ?>
    
    
[/code]

[code]

    .blog-list-wrapper {
      display: flex;
    }
    .blog-item-thumbnail-content {
      display: flex;
    }
    .blog-archive-wrapper {
      width: 70.31953125vw;
      margin: 0 auto;
    }
    .blog-item-thumbnail
      .blog-item-thumbnail-image
      img.attachment-150x110.size-150x110.wp-post-image {
      height: 179px;
      width: 240px;
      object-fit: cover;
    }
    .blog-archive-outer-title {
      font-weight: bold;
      font-size: 3.2rem;
      text-align: center;
      padding-top: 4.677vw;
      padding-bottom: 4.6875vw;
    }
    .img-price-third {
      position: relative;
      height: 221px;
    }
    img.main-img-third {
      height: 221px;
      width: 100%;
    }
    .blog-item-content {
      padding-left: 3.90625vw;
    }
    .blog-item-content .blog-item-day {
      font-size: 1.6rem;
      color: #1b224c;
      padding-bottom: 1.40625vw;
    }
    .blog-item-content .blog-item-title {
      font-size: 2.6rem;
      padding-bottom: 1.5625vw;
    }
    .blog-item-content p {
      font-size: 1.25vw;
    }
    .blog-item-content p {
      font-size: 1.25vw;
    }
    .blog-item-thumbnail-content {
      display: flex;
      padding-bottom: 7.265625vw;
    }
    .blog-item-day-second {
      padding-bottom: 1.5625vw;
    }
    img.attachment-240x148.size-240x148.wp-post-image {
      height: 148px;
      width: 240px;
      object-fit: fill;
      position: relative;
    }
    img.attachment-240x179.size-240x179.wp-post-image {
      height: 179px;
      width: 240px;
      object-fit: fill;
    }
    .blog-list-category {
      width: 80px;
      height: 28px;
      background-color: #1b224c;
      position: absolute;
      left: 14.84375vw;
      color: #fff;
      line-height: 28px;
      text-align: center;
    }
    .blog-item-thumbnail-content {
      display: flex;
      padding-bottom: 7.265625vw;
      height: 148px;
    }
    .blog-item-thumbnail-content-second {
      display: flex;
      padding-bottom: 4.765625vw;
    }
    .blog-item-thumbnail-content-second:last-child {
      padding-bottom: 8.515625vw;
    }
    .pagination {
      display: flex;
    }
    h2.screen-reader-text {
      display: none;
    }
    ul.page-numbers {
      display: flex;
    }
    ul.page-numbers li {
      width: 3.75vw;
      height: 3.75vw;
      border: 1px solid #1b224c;
      text-align: center;
      line-height: 3.90625vw;
      margin-right: 1.484375vw;
    }
    ul.page-numbers li:last-child {
      margin-right: 0vw;
    }
    ul.page-numbers span.page-numbers.current {
      font-size: 1.6rem;
      text-decoration: none;
      font-weight: bold;
      color: #fff;
    }
    ul.page-numbers li:nth-of-type(4) {
      border: none;
    }
    span.page-numbers.current {
      font-size: 1.6rem;
      text-decoration: none;
      color: #1b224c;
      font-weight: bold;
    }
    a.page-numbers {
      font-size: 1.6rem;
      text-decoration: none;
      color: #1b224c;
      font-weight: bold;
    }
    
[/code]

[![一番目の記事と２番めの記事の大きさが同じ](https://i.stack.imgur.com/zwdnB.png)](https://i.stack.imgur.com/zwdnB.png)  
[![記事の大きさが違う](https://i.stack.imgur.com/orwFI.png)](https://i.stack.imgur.com/orwFI.png)

お答えいただけますと幸いです。


CC BY-SA 4.0
2022-03-30T11:03:20.210
88102
2022-04-29T04:02:40.713
2022-03-30T13:17:06.627
49042
49042
question
php wordpress
ページネーションで、記事のループ処理を最初と最後で違う出力で行う方法がわかりません。


ページネーションのコードと、２つのコードを  
https://on-ze.com/archives/7464  
を使用し、上手く組み合わせて、なんとか解決できました。


CC BY-SA 4.0
2022-04-03T08:16:16.117
88148
2022-04-29T04:02:40.713
2022-04-29T04:02:40.713
49042
49042
88102
answer