この章で学ぶこと。

前回は、カスタム投稿(CPT UI)を入れることで、制作実績が投稿できるようになりました。こちらの講座は、DAY.5の続きです。必ずDAY.1から開始し、順番に進めてくださいね。▶︎ DAY.5は、こちらから

アーカイブページとは (archive-works.php)

archive-投稿タイプ名.php

アーカイブページとは、記事の一覧を表示するページです。

今までに書いた記事の全てを表示したり、特定のカテゴリーやタグ、日付の記事のみを一覧で表示したりすることができます。カテゴリーのみの一覧を表示しているものも、カテゴリーアーカイブになります。制作実績をまとめたページは、「投稿タイプスラッグ → テンプレート名」となるため、「archive-works.php」となります。このテンプレートがなければ、制作実績を登録しても表示させることができません。

主なテンプレート例

役割テンプレート
トップページfront-page.php
固定ページpage.php
投稿詳細single.php
制作実績詳細single-works.php
投稿一覧archive.php
制作実績一覧archive-works.php
カテゴリー一覧category.php
タグ一覧tag.php
検索結果search.php

archive-works.php　(制作実績一覧)

このテンプレートでは、登録した「制作実績」を一覧で表示します。

  1. ヘッダーを読み込む
  2. 制作実績ページの見出しを表示する
  3. 投稿があるか確認する
  4. 投稿があれば、1件ずつカード形式で表示する
  5. 投稿がなければ「まだありません」と表示する
  6. 最後にフッターを読み込む

<?php get_header(); ?>
<div class="site-container">
  <div class="wrap">
	  
<main class="works-archive">
  <div class="works-archive__inner">

    <h1 class="works-archive__title">制作実績</h1>
<p>
	これまでに手がけた制作実績をご紹介しています。
目的やターゲットに応じて、構成やデザインを設計していますので、
各ページの制作意図や工夫した点もぜひご覧ください。
	  </p>

<!----- 投稿があるか確認する ---------->
    <?php if (have_posts()) : ?>
      <div class="works-list">
<!--- 投稿を1件ずつ取り出す --------->
        <?php while (have_posts()) : the_post(); ?>

<!-- article 1件分 ----->
          <article class="works-card">
            <a href="<?php the_permalink(); ?>" class="works-card__link">

              <?php if (has_post_thumbnail()) : ?>
                <div class="works-card__image">
                  <?php the_post_thumbnail('large'); ?>
                </div>
              <?php endif; ?>

              <div class="works-card__body">
                <h2 class="works-card__title"><?php the_title(); ?></h2>
<p class="works-card__text">

  <?php 
	// コンセプトを45文字前後で省略表示
	echo wp_trim_words(get_field('concept'), 45, '…'); ?>
</p>
              </div>

            </a>
          </article>
<!-------------------------->

        <?php endwhile; ?>
      </div>
	  
	<?php the_posts_pagination(); ?>  
    <?php else : ?>
      <p>制作実績はまだありません。</p>
    <?php endif; ?>

  </div>
</main>
	</div>

<?php get_footer(); ?>

archive-worksのCSSを追加

アイキャッチ画像をそれぞれカード型にマークして、整列させます。

/* =========================
works-archive
========================= */

.works-archive__inner {
  width: min(1100px, 90%);
  margin: 0 auto;
}

.works-archive__title {
color:#2F2A8B;
	font-size:1.5rem;
	margin-bottom:1rem;
	font-weight:bold;

}

.works-list {
margin:50px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
}

.works-card {
  overflow: hidden;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

.works-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.works-card__image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.works-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.works-card__body {
  padding: 24px;
}

.works-card__title {
  margin-bottom: 12px;
  font-size: 20px;
}

.works-card__text {
  color: #555;
  line-height: 1.8;
}

.works-card:hover img {
  transform: scale(1.05);
}

single-works.php　(制作実績*1ページ用)

制作実績を1件ずつ詳しく表示するテンプレートです。タイトル、概要、アイキャッチ画像、公開年、担当範囲、制作期間、使用ツール、ターゲット、コンセプト、制作ポイント、サイトURLなど、プラグインACFで登録した値が表示されます。

<?php get_header(); ?>
<div class="site-container">
  <div class="wrap">

<main class="works-single">
  <div class="works-single__inner">

    <!-- タイトル -->
    <h1 class="works-single__title"><?php the_title(); ?></h1>

     <?php if (get_field('name')) : ?>
        <p><strong><?php the_field('name'); ?></strong></p>
      <?php endif; ?>
	  
	       <?php if (get_field('overview')) : ?>
        <p><?php the_field('overview'); ?></p>
      <?php endif; ?>
	  
	 
    <!-- アイキャッチ -->
    <?php if (has_post_thumbnail()) : ?>
      <div class="works-single__image">
        <?php the_post_thumbnail('large'); ?>
      </div>
    <?php endif; ?>

    <!-- ACF情報 -->
    <div class="works-single__info">


<!---ACFに入力がある場合だけ表示する --------->
      <?php if (get_field('year')) : ?>
        <p><strong>公開年：</strong><?php the_field('year'); ?></p>
      <?php endif; ?>

      <?php if (get_field('role')) : ?>
        <p><strong>担当範囲：</strong>
          <?php echo implode(' / ', get_field('role')); ?>
        </p>
      <?php endif; ?>

      <?php if (get_field('period')) : ?>
        <p><strong>制作期間：</strong><?php the_field('period'); ?></p>
      <?php endif; ?>

      <?php if (get_field('tools')) : ?>
        <p><strong>使用ツール：</strong>
			<?php echo implode(' / ', get_field('tools')); ?></p>
      <?php endif; ?>

      <?php if (get_field('target')) : ?>
        <p><strong>ターゲット：</strong><?php the_field('target'); ?></p>
      <?php endif; ?>

      <?php if (get_field('concept')) : ?>
        <p><strong>コンセプト：</strong><?php the_field('concept'); ?></p>
      <?php endif; ?>

      <?php if (get_field('point')) : ?>
        <p><strong>制作のポイント：</strong><?php the_field('point'); ?></p>
      <?php endif; ?>

      <?php if (get_field('site_url')) : ?>
        <p>
          <strong>サイトURL：</strong>
          <a href="<?php the_field('site_url'); ?>" target="_blank">
            <?php the_field('site_url'); ?>
          </a>
        </p>
      <?php endif; ?>

    </div>

	  		  <nav class="post-navigation">
<div class="post-navigation__prev">
  <?php next_post_link('%link', '← 前の実績'); ?>
</div>

<div class="post-navigation__next">
  <?php previous_post_link('%link', '次の実績 →'); ?>
</div>
</nav>
	  
    <!-- 本文 -->
    <div class="works-single__content">
      <?php the_content(); ?>
    </div>

  </div>
</main>
</div></div>
	  

<?php get_footer(); ?>

▼ single-worksのCSSを追加

/* =========================
works-single
========================= */

.works-single {
  padding: 20px 0;
}

.works-single__inner {
  width: min(960px, 90%);
  margin: 0 auto;
}

.works-single__title {
  margin-bottom: 40px;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.4;
}

.works-single__image {
margin: 50px 0;
border-radius: 16px;
  overflow: hidden;
}

.works-single__image img {
  width: 100%;
  height: auto;
  display: block;
}

.works-single__info {
  margin-bottom: 56px;
  padding: 32px;
  background: #f7f7f7;
  border-radius: 16px;
}

.works-single__info p {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid #ddd;
  line-height: 1.8;
}

.works-single__info p:first-child {
  padding-top: 0;
}

.works-single__info p:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.works-single__info strong {
  font-weight: 700;
  color: #222;
}

.works-single__info a {
  color: #0066cc;
  text-decoration: underline;
  overflow-wrap: anywhere;
}

.works-single__content {
  line-height: 1.9;
}

.works-single__content h2 {
  margin-top: 56px;
  margin-bottom: 20px;
  padding-left: 16px;
  border-left: 4px solid #222;
  font-size: 26px;
}

.works-single__content h3 {
  margin-top: 40px;
  margin-bottom: 16px;
  font-size: 22px;
}

.works-single__content p {
  margin-bottom: 24px;
}

.works-single__content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}


/*ページ送り -----------------*/

.post-navigation {
  display: flex;
  justify-content: space-between;
  margin-top: 80px;
  padding-top: 30px;
  border-top: 1px solid #ddd;
background-color:#eee;
}

.post-navigation a {
  color: #333;
  text-decoration: none;
  font-weight: bold;
}

.post-navigation a:hover {
  opacity: .7;
}

@media (max-width: 768px) {

/* =========================
works-single
========================= */
	
	 .works-single {
    padding: 56px 0;
  }

  .works-single__title {
    margin-bottom: 32px;
    text-align: left;
  }

  .works-single__image {
    margin-bottom: 32px;
  }

  .works-single__info {
    padding: 24px;
    margin-bottom: 40px;
  }

  .works-single__info p {
    display: block;
    padding: 14px 0;
  }

  .works-single__info strong {
    display: block;
    margin-bottom: 4px;
  }

トップページに最新3件を表示する。

トップページには、制作実績の最新3件だけを表示します。すべての実績を出すのではなく、トップページでは一部だけ見せて、詳しく見たい人には一覧ページへ移動してもらう構成です。

<!--- WORKS
---------------------->
	  
	  
	  <section class="top-works">
  <div class="top-works__inner">

        <h2 class="works-heading__title">WORKS</h2>
        <p class="works-heading__sub">制作実績</p>
	  
    <div class="top-works__list">
      <?php
      $args = [
        'post_type' => 'works',
        'posts_per_page' => 3
      ];
      $query = new WP_Query($args);
      ?>

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

          <article class="works-card">
            <a href="<?php the_permalink(); ?>">

              <?php if (has_post_thumbnail()) : ?>
                <div class="works-card__image">
                  <?php the_post_thumbnail('medium'); ?>
                </div>
              <?php endif; ?>

              <h3 class="works-card__title"><?php the_title(); ?></h3>

            </a>
          </article>

        <?php endwhile; ?>
<!---- カスタムで取得した投稿データをリセットして、WordPress本来の状態に戻す --------->
        <?php wp_reset_postdata(); ?>
      <?php endif; ?>

    </div>

    <div class="top-works__btn">
      <a href="<?php echo home_url('/works/'); ?>">制作実績一覧を見る</a>
    </div>

  </div>
</section>

home_url(‘/works/’)は、サイトURLに /works/ を追加したURLを出力します。

この章では、カスタム投稿タイプ「制作実績」を、実際のページとして表示する方法を学びました。作成したテンプレートは、主に3つです。

  • archive-works.php
    制作実績の一覧ページ
  • single-works.php
    制作実績の詳細ページ
  • トップページ内の WP_Query
    最新の制作実績を3件だけ表示

カスタム投稿は、登録後に表示させるページに応じてテンプレートを作る必要があります。