投稿一覧の作り方

タイトルとコンテンツを入力
タイトル入力欄にタイトルを入力し、本文エリアにコンテンツを入力します。

URLスラッグを設定
投稿記事のURLスラッグを設定します。
管理しやすくするために、スラッグには投稿ID（例：9105）などを指定しておくと便利です。

公開設定を確認し、公開
❶と❷の設定が完了したら、「公開」ボタンをクリックします。公開後、設定したURL（例：https://ドメイン/投稿ID/）にアクセスして、正しく表示されているか確認しましょう。

固定ページの作成
管理画面にログインして、固定ページより「お知らせ」ページを作成します。

カスタムテンプレートファイルの作成
先ほど管理画面で作成した お知らせページ用のテンプレートファイル page-news.php を作成します。

テンプレートのベースコーディング
以下のコードを page-news.php に追加します。

この時点ではまだ投稿記事は表示されません。表示されているのは、テンプレートに自分でコーディングしたデザインです。

HTML

<?php get_header(); ?>
<div class="l-main p-page">
  <!-- News -->
  <section class="p-section p-news">
    <div class="l-container--800">
      <div class="p-section__head">
        <h3 class="p-title">
          <span class="p-title--en">News</span>
          <?php the_title(); ?>
        </h3>
      </div>
      <div class="p-section__body">
        <div class="p-search bg">
          <p class="p-search__title">
            <span class="c-icon__w24 filter"></span>
            絞り込み
          </p>
          <ul class="p-search__category">
            <li class="active"><a href="<?php echo home_url(); ?>/info">すべて</a></li>
            <li><a href="" class="">お知らせ</a></li>
            <li><a href="" class="">プレスリリース</a></li>
            <li><a href="" class="">イベント</a></li>
            <li><a href="" class="">セミナー</a></li>
          </ul>
          <div class="p-search__keyword">
            <p class="p-search__keyword--title">キーワード検索</p>
            <form action="">
              <div class="u-w280">
                <input type="text" name="keyword" id="keyword" placeholder="キーワードを入力">
              </div>
              <div class="c-btnWrap">
                <button type="submit" class="c-btn c-btn__saerch c-btn__xs">検索</button>
                <a href="<?php echo home_url(); ?>/info" class="c-btn c-btn__lineWhite c-btn__xs">リセット</a>
              </div>
            </form>          
          </div>
        </div>
        <ul class="p-list">
          <li class="p-list__item">
            <a href="投稿のURLを表示"></a>
            <p class="date">投稿日を表示</p>
            <span class="c-category">カテゴリーを表示</span>
            <p class="title">投稿のタイトルを表示</p>
          </li>
          <li class="p-list__item">
            <a href="投稿のURLを表示"></a>
            <p class="date">投稿日を表示</p>
            <span class="c-category">カテゴリーを表示</span>
            <p class="title">投稿のタイトルを表示</p>
          </li>
          <li class="p-list__item">
            <a href="投稿のURLを表示"></a>
            <p class="date">投稿日を表示</p>
            <span class="c-category">カテゴリーを表示</span>
            <p class="title">投稿のタイトルを表示</p>
          </li>
        </ul>
      </div>
    </div>
  </section>
  <div class="p-bread">
    <div class="l-container--1080">
      <ul class="p-bread__list">
        <li><a href="<?php echo home_url(); ?>">Home</a></li>
        <li><span>News</span></li>
      </ul>
    </div>
  </div>
  <!-- Contact -->
  <?php get_template_part('component/_contact'); ?>
</div>
<?php get_footer(); ?>

別途、header.phpなどのAboutページに遷移するリンクを記述しておきましょう。

CSS

/* ! ==================================================
- ルート
================================================== */
:root {
  --fc-placeholder: rgba(8,6,24,.2);
  --fc-border: #D1D0DC;
}
/* ! ==================================================
- フォーム
================================================== */
input, textarea, select {
  font-size: 14px;
  width: 100%;
  height: 32px;
  padding: 2px 8px;
  border: 1px solid var(--fc-border);
  background-color: var(--white);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* プレイスフォルダー */
::-webkit-input-placeholder { color: var(--fc-placeholder);}
:-ms-input-placeholder { color: var(--fc-placeholder);}
::-moz-placeholder { color: var(--fc-placeholder);}

/* ! ==================================================
- コンポーネント
================================================== */
/* ! --------------------------------------------------
- コンポーネント / ボタン
-------------------------------------------------- */
.c-btn__saerch {
  border-color: var(--white);
  background-color: rgba(255,255,255,.5);
  min-width: 90px;
}
.c-btn__saerch:hover {
  color: var(--base);
  background-color: var(--white);
}
.c-btn__xs{ 
  height: 32px; 
  font-size: 12px;
}

/* ! --------------------------------------------------
- コンポーネント / アイコン
-------------------------------------------------- */
[class*="c-icon"].filter{ background-image: url(public/img/icon/icon_filter.svg); }

/* ! ==================================================
- オブジェクト
================================================== */
/* ! --------------------------------------------------
- オブジェクト / 絞り込み
-------------------------------------------------- */
.p-search {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 48px;
}
.p-search__title {
  font-weight: 500;
  line-height: 1.5em;
  display: flex;
  align-items: center;
  gap: 4px;
}
/* カテゴリー */
.p-search__category {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.p-search__category > li a {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5em;
  letter-spacing: .1em;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border: 1px solid var(--fc-border);
  background-color: var(--white);
}
.p-search__category > li a:hover {
  background-color: var(--bg);
}
.p-search__category > li.active a {
  color: var(--white);
  border-color: var(--base);
  background-color: var(--base);
  pointer-events: none;
}
/* キーワード */
.p-search__keyword {
  display: flex;
  flex-direction: column;
  gap: 0 24px;
  padding: 16px 20px;
  color: var(--white);
  background-color: var(--base);
}
.p-search__keyword::after {
  content: "";
  display: none;
  width: 1px;
  min-height: 100%;
  background-color: var(--white);
}
.p-search__keyword--title {
  color: var(--white);
  font-weight: 500;
  display: flex;
  align-items: center;
}
.p-search__keyword form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 16px;
  order: 1;
}
.p-search__keyword .c-btnWrap {
  margin: 0;
  gap: 4px;
}

@media screen and (min-width: 769px) {
  .p-search__keyword {
    flex-direction: row;
  }
  .p-search__keyword::after {
    display: block;
  }
}

/* ! ==================================================
- ユーティリティ
================================================== */
/* ! --------------------------------------------------
- ユーティリティ / 幅
-------------------------------------------------- */
.u-w50p { width: 50%; }
.u-w100p { width: 100%; }
.u-w100 { width: 100px; }
.u-w200 { width: 200px; }
.u-w280 { width: 280px; }

今回追加されたスタイルのみ記述しています。

表示の確認
ブラウザで表示を確認し、表示崩れなどがないか確認しましょう。

投稿を取得する準備をする
最初に、WP_Query という関数を使って表示したい投稿を取得する準備をします。この時に、$args の中でどんな投稿を表示するかを条件で指定します。

<?php
 $args = array(
  'posts_per_page' => 10, // 表示する投稿の数
  'post_type' => 'post',  // 投稿タイプ（デフォルトの「post」）
  'orderby' => 'date',    // 並び順の基準（dateで投稿日時順）
  'order' => 'DESC',      // 並び順（DESCは降順、ASCは昇順）
 );
 $posts_query = new WP_Query($args); // 設定を使って投稿を取得
?>
<ul>
  <li>
    <a href="投稿のURLを表示">投稿のタイトルを表示</a>
    <p>投稿日を表示</p>
  </li>
</ul>

投稿があるかチェックする
次に、have_posts()という関数を使って、投稿が1件でもあるか確認します。この関数は、投稿があればtrue（あるよ）を返し、投稿がなければfalse（ないよ）を返します。

もし投稿がある場合はその投稿の内容を順番に表示され、投稿がない場合は「投稿はまだありません」と表示するようにします。

<?php if ($posts_query->have_posts()) : ?>
  <ul class="p-list">
    <li class="p-list__item">
      <a href="投稿のURLを表示"></a>
      <p class="date">投稿日を表示</p>
      <span class="c-category">カテゴリーを表示</span>
      <p class="title">投稿のタイトルを表示</p>
    </li>
  </ul>
<?php else : ?>
  <p>投稿はまだありません。</p> <!-- 投稿が0件の場合の表示 -->
<?php endif; ?>

投稿を1件ずつ順番に取り出して表示準備をする
whileループを使って、取得した投稿を1件ずつ順番に取り出していきます。the_post()関数を使うことで、各投稿のデータ（管理画面で登録したタイトルやURL、日付など）を取り出し、そのデータを表示する準備ができます。

<ul class="p-list">
  <?php while ($posts_query->have_posts()) : $posts_query->the_post(); ?>
    <li class="p-list__item">
      <a href="投稿のURLを表示"></a>
      <p class="date">投稿日を表示</p>
      <span class="c-category">カテゴリーを表示</span>
      <p class="title">投稿のタイトルを表示</p>
    </li>
  <?php endwhile; ?>
</ul>

投稿の内容を表示する
実際に投稿の内容を表示するためには、the_permalink() で投稿のリンク、the_title() でタイトル、the_time() で日付など、関数を使って表示させます。

<li class="p-list__item">
  <a href="<?php the_permalink(); ?>"></a>
  <p class="date"><?php the_time('Y.m.d'); ?></p>
  <span class="c-category">カテゴリーを表示</span>
  <p class="title"><?php the_title(); ?></p>
</li>

最後にリセット
ループ処理を終えたら、wp_reset_postdata() を使って、WordPressが保持している投稿のデータを元に戻します。これをしないと、他の関数（the_title() など）が誤動作することがあります。

<?php
  $args = array(
    'posts_per_page' => 10, // 表示する投稿の数
    'post_type' => 'post', // 投稿タイプ（デフォルトの「post」）
    'orderby' => 'date', // 並び順の基準（dateで投稿日時順）
    'order' => 'DESC', // 並び順（DESCは降順、ASCは昇順）
  );
  $posts_query = new WP_Query($args); // 設定を使って投稿を取得
?>
<?php if ($posts_query->have_posts()) : ?>
  <ul class="p-list">
    <?php while ($posts_query->have_posts()) : $posts_query->the_post(); ?>
      <li class="p-list__item">
        <a href="<?php the_permalink(); ?>"></a>
        <p class="date"><?php the_time('Y.m.d'); ?></p>
        <span class="c-category">カテゴリーを表示</span>
        <p class="title"><?php the_title(); ?></p>
      </li>
    <?php endwhile; ?>
  </ul>
<?php else : ?>
  <p>投稿はまだありません。</p> <!-- 投稿が0件の場合の表示 -->
<?php endif; ?>
<?php wp_reset_postdata(); ?>

表示の確認
ブラウザで表示を確認し、表示崩れなどないか確認しましょう。
サイトが正しく表示されていれば完了です。

TOPページにもお知らせ一覧があるので、同じようにループ処理を記述して表示させてみましょう。