【自作テーマ開発】WordPressオリジナルテーマの作成方法⑤（カスタム投稿の作り方）

カスタム投稿とは？

WordPressには、以下のように予め投稿や固定ページは用意されていますが、それとは別に新しい 「投稿タイプ(投稿の種類)」が作成できる仕組みがあります。

その投稿タイプが作成できる仕組みを「カスタム投稿タイプ」と呼びます。
例えば、

• お知らせ/ニュース
• お客様の声
• 新着商品紹介

など、通常の投稿のように新しいものを次々と追加できて、WordPress管理画面から編集したいものが複数あった際には、このカスタム投稿が便利となります。

カスタム投稿の作り方

カスタム投稿を作る方法は様々ですが、今回は『Custom Post Type UI』というプラグインを使った方法をご紹介します。

プラグインをインストール

まずはプラグインをインストールして有効化しましょう。
プラグインの追加より「Custom Post Type UI」検索して、インストールをし、有効化してください。

新規投稿タイプの追加

左のメニューに『CPT UI』という大項目追加されます。
その中の『投稿タイプの追加と編集』を選択し、必須項目を入れていきます。

この際、下へスクロールして設定も確認しましょう。
記事一覧が必要な場合は「アーカイブあり」の項目を「true」に設定する必要があります。

他の設定に関してはあまり使用しないものも多いです。任意で変更してください。

カスタム投稿のテンプレートを作成

カスタム投稿の作成では、ただプラグインをインストールするだけでなく、記事一覧ページと個別記事ページのテンプレートファイルを作る必要があります。

カスタム投稿の個別記事ページ

個別記事ページ用のテンプレートは「single-○○.php」のファイル名で作成します。
今回の例で作成する場合は「single-customer_voice.php」となります。

コードの中身は「single.php」をベースに、変更したい箇所があれば変更すればＯＫです。

カスタム投稿の記事一覧ページ

記事一覧ページ用のテンプレートは「archive-○○.php」のファイル名で作成します。
今回の例で作成する場合は「archive-customer_voice.php」となります。

コードの中身は通常の記事一覧ページ作成で紹介したもの（home.php）をベースにし、
以下のように”post_tyle” => ○○ を変更してください。

<?php get_header(); ?>
<main class="main">
  <article class="">
    <ul class="">
      <!-- 記事のループ処理開始 -->
      <?php
        if( wp_is_mobile() ){
          $num = 3; 
        } else {
          $num = 5;
        }
        $args = [
          'post_type' => 'post', // ここをカスタム投稿タイプのスラッグに！
          'posts_per_page' => $num,
        ];
        $wp_query = new WP_Query($args);
        if (have_posts()): while (have_posts()): the_post();
      ?>
      <li class="">
        <!-- 記事へのリンク -->
        <a href="<?php the_permalink(); ?>" class="">
          <!-- アイキャッチ -->
          <div class="">
            <?php the_post_thumbnail('post-thumbnail', array('alt' => the_title_attribute('echo=0'))); ?>
          </div>
          <p class="">
            <!-- 投稿日 -->
            <time datetime="<?php the_time('Y.n.j'); ?>">
              <?php the_time('Y.m.d'); ?>
            </time>
          </p>
          <div class="">
            <!-- カテゴリー1件表示(カテゴリー順の上にある方が表示される) -->
            <?php
              $category = get_the_category();
              echo '<span class="'.$category->slug.'">'.$category[0]->name.'</span>';
            ?>
          </div>
          <h2 class="">
            <!-- タイトル -->
            <?php the_title(); ?>
          </h2>
          <div class="">
            <!-- 本文の抜粋 -->
            <?php the_excerpt(); ?>
          </div>
        </a>
      </li>
      <?php endwhile; else: ?>
      <p>まだ記事がありません</p>
      <?php endif ?>
      <?php wp_reset_postdata(); ?>
      <!-- 記事のループ処理終了 -->
    </ul>
  </article>
</main>