トップページに投稿コンテンツ一覧を表示してみよう!|ためになるWordPressブログ

WordPress

今日はトップページに投稿コンテンツの一覧を表示するやり方をご紹介します。

ブログなどはトップページに記事(投稿)の一覧が表示されるのはよくありますね。コーポレートサイトでは上の画像のようにお知らせとして一覧表示させることもよくあります。

WordPressではループというものを使います。
すこしややこしいですがやり方を順に見ていきましょう。

ループを書く

ループというのはその名の通り繰り返すことです。
WordPressではループと言われるコードの中に投稿タイトルや日付等のコードを書き込むことで何件もその投稿データが読み込まれ表示されます。

では実際のコードです。

  <?php if ( have_posts() ) :while( have_posts() ) : the_post(); ?>
  
    <!-- ここに出力させるものを記述する -->

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

これがトップページに書くループというものです。
WordPressの基本的なループを実行するコードなのでググると同じようなコードがいくらでも出てきます。
とりあえずこの部分はコピペで貼り付けちゃってOKです。

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

一行目のこの部分で
have_posts・・・・・もし投稿(posts)があれば、
while(have_posts)・・投稿がある間、
the_posts・・・・・・投稿を表示しろ。
といったようなイメージのプログラムです。

なので投稿が10件あれば1件ずつその10件全部表示するまでプログラムは続きます。

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

そしてこのendwhileで繰り返し処理を終了し、endifでif文を終了させています。

ループの中身を書いてみよう

ではループの中身を書いたものを見てみましょう。

冒頭でも紹介したこのコーポレートサイトのお知らせ投稿を例にしてみましょう。
(CSSは省略)

<h2>Information</h2>

<!-- ループ開始 -->
<?php if ( have_posts() ) :while( have_posts() ) : the_post(); ?>

  <!-- 投稿日時 -->
  <time datetime="<?php echo esc_attr(get_the_date(DATE_W3C)); ?>">
    <?php echo esc_html(get_the_date()) ?>
  </time>

  <!-- 投稿カテゴリー -->
  <p>
    <?php $cat = get_the_category(); $cat = $cat[0]; { echo esc_html($cat->cat_name); } ?>
  </p>

  <!-- 投稿タイトル -->
  <p>
    <a href="<?php the_permalink(); ?>"><?php the_title();?></a>
  </p>

<?php endwhile;?>
<?php endif; ?>
<!-- ループ終了 -->

先ほど紹介したループが使われているのがわかりますね。
今回のループの中では投稿日時、投稿カテゴリー、投稿タイトルを表示しています。
一つずつ見てみましょう。

  <!-- 投稿日時 -->
  <time datetime="<?php echo esc_attr(get_the_date(DATE_W3C)); ?>">
    <?php echo esc_html(get_the_date()) ?>
  </time>

ここでは投稿日時を表示しています。
time要素内でget_the_date関数を使用してWordPressのデーターベースから投稿日時を引っ張ってきているような感じです。

<!-- 投稿カテゴリー -->
  <p>
    <?php $cat = get_the_category(); $cat = $cat[0]; { echo esc_html($cat->cat_name); } ?>
  </p>

ここでは投稿カテゴリーを表示させています。
get_the_category()でカテゴリーIDやカテゴリー名などの配列が取得できるのでその配列の中からカテゴリ名をピックアップして表示させています。

<!-- 投稿タイトル -->
  <p>
    <a href="<?php the_permalink(); ?>"><?php the_title();?></a>
  </p>

最後に投稿タイトルの表示です。
p要素で囲ってからa要素でthe_permalink()を使って投稿のURLを取得しています。
次にthe_titleで投稿タイトル名を表示しています。

あとは必要に応じてclassを追加したりしてCSSで見た目を整えれば完成です。

まとめ

いかがでしたでしょうか。

WordPressにおいてループは必要不可欠なものとなりますので、しっかりと使えるようになっておきましょう。

get_the_date()についてはこちらの記事も参考にどうぞ。

コメント

タイトルとURLをコピーしました