2022/02/20

WordPress自作テーマでトップページでサブループを使って最新記事を表示する方法

こんにちはふるぽんです。
今回はwordpressの自作テーマで最新記事を表示する方法を解説していきます。
ここでは使用頻度の高いサブループでの表示方法です。

メインループとサブループ？

ループにはメインループ（クエリ）とサブループ（クエリ）があります。
投稿を表示する時に使うのがループと言われる処理です。
ちなみにメインループと言われるコードは以下のようなもの。

<?php if (have_posts()): 
            while (have_posts()) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" >
<span><?php echo get_the_date(); ?></span>
<h2><a href=“<?php the_permalink(); ?>”><?php the_title(); ?></a></h2>
<?php the_content(); ?>
</div>
<?php endwhile; ?>
<?php else: ?>
<!-- 投稿が無い場合の処理 -->
<?php endif; ?>

表示する記事があればループ内のthe_content()などで記事を表示します。
しかし基本的に一つのテンプレートの中でメインループは一つまでしか使用できません。
ですが複数の記事を表示したいときもあるでしょう。そんな時に以下を参考にしてください。

サブループの表示方法

サブループはメインループとは違った場所にループ処理をして記事を表示したい時に使用します。　
以下はカスタム投稿タイプの”news”という投稿記事を表示するときのコードです。

 <div>
        <h2>お知らせ</h2>
               <?php 
                    $args = array(
                    'post_type' => 'news', 
                    'post_status' => 'publish',
                    'posts_per_page' => 5,
                     );  
                  ?>
         <ul>
             <?php
               $the_query = new WP_Query($args);
               if($the_query->have_posts()):
               while($the_query->have_posts()):$the_query->the_post();
            ?> 

            <li id="post-<?php the_ID();?>">
              <span><?php echo get_the_date();?><span/>
              <h3><a href="<?php the_permalink();?>" ><?php the_title();?></a></h3>
            </li>
          
          </ul>
          <?php endwhile;?>
          <?php wp_reset_postdata();?>
          <?php else:?>
            <p>記事が見当たりません</p>
            <?php endif;?>
        </div>

‘post_type’ => ‘news’, カスタム投稿タイプnewsの指定
‘post_status’ => ‘publish’, 公開済みの記事を表示
‘posts_per_page’ => 5, 表示する記事数

上記の情報を$argsに代入しています。

$the_query = new WP_Query($args);
if($the_query->have_posts()):
while($the_query->have_posts()):$the_query->the_post();

$argsに入っているクエリ（情報）を＄the_queryに代入して、サブループを開始していきます。
そしてループ内で以下のような関数を使って記事を表示していきます。

the_title()
the_time()
the_permarink()
the_content()

ループの終わりに以下を書いてループをリセットします。
ここは難しく考えずにサブループの終わりの決まり文句みたいなものです。

<?php endwhile;?>
<?php wp_reset_postdata();?>
wp_reset_postdata()
elseなどの処理
<?php endif;?>

他にも色々なループの使い方があるのでこちらを参考にどうぞ
公式文書は慣れないですが、自作テーマを色々いじっていくと、よく確認する頻度が増えていくので、慣れていくことをお勧めします。

以上サブループで最新記事を表示する方法でした。読んでいただきありがとうございました。

Web制作の学習でつまずきそうなら、DM頂けましたら僕にできることはお手伝い&助言いたします。
とは言え、まだまだ僕も未熟者ですので、一緒に頑張りましょう。
以下は40代の僕が独学で学習してきたことです。
何を勉強したら良いかわからない方はどうぞ。

ゲームで仮想通貨の不労所得を稼ぐ【オンラインカジノBetfuryのやり方】