@keikkkk (P 山本)posted at 2022-04-04

ワードプレスで、2番目の投稿から一覧表示させる方法が上手くいきません。

Q&A

Closed

ワードプレスでサイトを作成しています。
そして、アーカイブページの記事の一覧を作成するに当たり、
ページネーションを作成し、表示記事の１つ目の記事と２つ目の記事の画像の大きさを変えたいと考えています。

なんとか、上記の内容を行うことが出来たのですが、一行目と２行目の記事の内容が、
おなじになってしまいました。

マルチポスト(https://ja.stackoverflow.com/questions/88160/%e3%83%af%e3%83%bc%e3%83%89%e3%83%97%e3%83%ac%e3%82%b9%e3%81%a7-2%e7%95%aa%e7%9b%ae%e3%81%ae%e6%8a%95%e7%a8%bf%e3%81%8b%e3%82%89%e4%b8%80%e8%a6%a7%e8%a1%a8%e7%a4%ba%e3%81%95%e3%81%9b%e3%82%8b%e6%96%b9%e6%b3%95%e3%81%8c%e4%b8%8a%e6%89%8b%e3%81%8f%e3%81%84%e3%81%8d%e3%81%be%e3%81%9b%e3%82%93)
(https://qiita.com/keikkkk/questions/6b69fb04bd4d1c85560c)

下記記事を試し('offset' => 1,を加える)
https://oji-chan.net/wp_from-2nd-post/

９, 'offset' => 1, ); $the_query = new WP_Query( $args ); ?>

が効いていないようで,表示数の合計が１０になりません１１表示されてしまいます。

上記のコードを打ち込んでも直しません、
また素人のため、細かなPHPのルールを理解出来ていないのが、
理由に気づけ無い原因かもしれません。

<?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 if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); ?>

    <?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' => 1,
                ));
    ?>
    <ul>    <!-- ループ -->
        <li>
 <?php if ($wp_query->current_post == 0) { ?>                   
 <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 = $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(); ?>

ご存知のかた何卒よろしくお願いいたします。

@kazukinagata posted at 2022-04-04

PHPの理解はもちろんですが、wordpressの関数やグローバル変数についても理解が必要です。
wordpressは表示しているページに応じて、$wp_queryというグローバル変数にコンテンツを取得するクエリをセットしてくれます。（これがメインクエリと呼ばれるもので、中身はWP_Queryクラスのインスタンスです）

よくテンプレートの「おまじない」と言われるif (have_posts()) : while (have_posts()) : the_post();は、このメインクエリからコンテンツを一個ずつ取り出し、$postに投稿データをセットする関数になります。

もし今回のように、メインクエリとは別のクエリを使って追加のコンテンツを表示したいという場合、いくつか方法はありますが、質問者さんが使用されているWP_Queryクラスで別のクエリ（サブクエリ）を作成するのがおススメです。

ただ今回のケースだと、私が正しく仕様を理解できているとすれば、メインクエリ一つで作れそうです。（wordpressをいじっていたのがもう5年以上前のことなので思い出しながらですがご容赦ください。）

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

<!-- 最初の投稿のレイアウト -->

<!-- 1件表示してbreakでループを抜ける -->
<?php break; ?>
<?php endwhile; ?>

<!-- 2件目からループが始まるはず -->
<?php while (have_posts()) : the_post(); ?>

<!-- 2件目以降の投稿のレイアウト -->

<?php endwhile; ?>
<?php endif: ?>

それでももしサブクエリを使いたい場合、質問に記載されたWP_Queryの使い方は間違っています。WP_Queryのインスタンスを使ってループを回す必要があります。

メインクエリとサブクエリで重複コンテンツをなくしたい場合、こちらのリンクの$do_not_duplicateという変数の扱いが参考になるかと思います。

<?php
  // argsの内容は適宜変更してください
  $args = array( 'post_type' => 'Products' );
  $the_query = new WP_Query($args);
?>

<!-- $the_queryのメソッドでループを作成します -->
<?php if($the_query->have_posts()): >
<?php while ($the_query->have_posts()): $the_query->the_post(); ?>

<!-- 投稿のレイアウト -->

<?php endwhile; ?>

<!-- ループ後にwp_reset_postdataを実行するのを忘れずに -->
<?php wp_reset_postdata(); ?>
<?php else: ?>
<!-- 投稿が無い場合の処理 -->
<?php endif; ?>

0Like

Are you sure you want to delete the question?

ワードプレスで、2番目の投稿から一覧表示させる方法が上手くいきません。

1Answer

Comments

Your answer might help someone💌