WordPressテーマの作り方3(ループで記事表示)

WordPressテーマの作り方3(ループで記事表示)

記事の表示、記事一覧の表示

WordPressループを使うと、記事ページ、個別ページ、カテゴリページ、タグページ、検索結果ページ、記事の一覧の表示…etc が表示できるようになります。この記事では、2種類のWordPressループ、メインループとサブループについて説明します。

WordPressのループ

記事一覧、投稿された記事等々を表示するために「メインループ」と「サブループ」を使った表示方法があります。WordPressでは、アクセスされたURLごとに、データベースから記事のデータを取得することができます。(WordPressがURLに基づくデータを自動的に用意してくれます。例えば個別ページのURLであれば、用意されるデータは1つだけで、個別ページを表示することができます。)

メインループ

<?php if(have_posts()): while(have_posts()): the_post(); ?>
    投稿に関するテンプレートタグを記述
    (記事のタイトル、記事の抜粋、カテゴリなどなど...)
<?php endwhile; endif; ?>

WordPressではURLごとにデータを自動的に用意してくれますが、そのデータを処理(表示)するのに使うのがこのメインループです。

index.php、category.php、search.phpなどに書けば、それぞれ投稿順記事一覧、カテゴリ別記事一覧、検索結果記事一覧が処理(表示)されます。

page.php、single.phpなどに書けば、投稿記事そのものを処理(表示)してくれます。

have_postsとthe_posts()のテンプレートタグについて説明します。

if(have_posts()):

実はこのコード、省略されているんです。完全な形は if(have_posts() == true): で、このコードを直訳すると、「もし記事があるなら…」になります。

while(have_posts()):

これも同じく完全形は、while(have_posts() == true): で、表示させる記事がある間だけ処理を続けます。例えば、トップページでのメインループで、投稿された記事が3件かつ表示させる記事が3件の場合、3回処理を行うことになります。個別記事ページの場合、用意されるデータは1記事のみなので、処理される回数は1回となります。

WordPressではURLごとに自動的にデータを用意してくれ、メインループはそのデータを処理(表示)させるのにとても便利ですが、人気な記事やカテゴリごとの記事など、自動的に用意してくれるデータ以外のデータを表示させるにはサブループを使います。

サブループ

<?php $the_query = new WP_Query(
    array(
    条件を指定
    (コメント数、人気順、表示させたい件数とか)
    )
);
if ( $the_query->have_posts()): ?>
<?php while($the_query->have_posts()): $the_query->the_post(); ?>
    投稿に関するテンプレートタグを記述
    (記事のタイトル、記事の抜粋、カテゴリなどなど...)
<?php endwhile; endif;?>
<?php wp_reset_postdata(); ?>

サブループを使うと、条件に沿ったデータを読み込んで処理(表示)させることができます。基本的に一つのテンプレート内で使えるメインループは1回までなので、メインループを使った後のループはサブループになります。それと、URLに基づくデータ以外の情報を表示させたいときにサブループをつ使います。(メインループと違ってURLに基づくデータを表示しない。例えば、投稿記事ページ)

<?php wp_reset_postdata(); ?>

サブループの最後の行のコードは、クエリ(取得したデータ)を初期化する関数です。これにより、URLに基づいたクエリ(データ)を再取得してくれます。

詳しい条件の指定→ https://hirashimatakumi.com/blog/18.html

ループ内でのテンプレートタグ

ループ内で使いそうなテンプレートタグ(用意してくれたデータを処理する関数)を紹介します。

<?php the_title(); ?>
記事のタイトルを表示

<?php the_date(); ?>
記事の日時を表示

<?php the_content(); ?>
記事の本文を出力

<?php the_excerpt(); ?>
記事の抜粋を表示

<?php the_category(); ?>
記事のカテゴリーを表示(リンク付き)

<?php echo the_category(); ?>
記事のカテゴリーを表示(リンクなし)

もうちょい詳しいサイトは↓どうぞ。

https://designsupply-web.com/suplog/972/

サンプルコードの紹介

 

メインループのコード例

<main>
    <?php if(have_posts()): while(have_posts()): the_post(); ?>
        <article>
            <a href="<?php the_permalink(); ?>">
                <h2><?php the_title(); ?></h2>
                <?php the_excerpt(); ?>
            </a>
        </article>
    <?php endwhile; endif; ?>
</main>

 

メインループコード例の表示結果

 

サブループのコード例と表示の条件

  1. 投稿タイプ→ post (投稿)
  2. 表示件数→ 6
  3. ステータス→ publish (公開済み)
<?php $the_query = new WP_Query(
    array(
    'post_type' => 'post',
    'post_per_page' => 6,
    'post_status' => 'publish'
    )
);
if ( $the_query->have_posts()): ?>
<?php while ($the_query->have_posts()): $the_query->the_post(); ?>
        <article>
            <a href="<?php the_permalink(); ?>">
                <h2><?php the_title(); ?></h2>
                <?php the_excerpt(); ?>
            </a>
        </article>
<?php endwhile; endif;?>
<?php wp_reset_postdata(); ?>

記事閲覧数順(人気順)に表示させることも可能ですが、別記事で紹介したいと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA