デイトラweb制作（Word Press化その10）

公開日 2026/10/7 最終更新日 2026/10/7

デイトラの卒業課題を1日（1〜2時間）行なっています。

導入事例ページ（page-case.php）のセクションを分けて表示させる

詳細記事を入力出来るカスタムフィールドを作成する

・管理画面のACFから「導入事例」を作成する。

・各入力欄を仕様書通りに作成する。

カスタム投稿（研修事例）一覧を作成する

・研修事例一覧から投稿記事を作成する。

サブループでカテゴリー毎にセクションを分けて表示させる

・コードを動的に変更する。

<?php
  // ① タームオブジェクトを取得する
  $term_obj = get_term_by( 'slug', 'business-english-training', 'business' );

  // ターム名と説明文を取得（取得できない場合は空文字）
  if ( $term_obj && ! is_wp_error( $term_obj ) ) {
      $term_name        = $term_obj->name; // タームの名前を取得
      $term_description = $term_obj->description; // タームの説明を取得
  } else {
      $term_name        = '';
      $term_description = '';
  }

  // ② 指定したターム名（スラッグ）を取得する
  $case_query = new WP_Query(
    array(
      // ▼ 投稿タイプ「研修事例」を指定
      'post_type' => 'post-case',

      // ▼ 「全記事」表示
      'posts_per_page' => -1,

      // ▼ 「同じタクソノミー（ターム）の投稿だけ」
      'tax_query' => array(
          array(
              'taxonomy' => 'business', // タクソノミー名
              'field' => 'slug',
              'terms' => 'business-english-training',
          ),
      ),
    )
  );
?>
<?php if ( $case_query->have_posts() ) : ?>

<!-- 1. ビジネス英語研修 -->
<section id="business-english-training" class="p-case-section p-case-section--bet">
  <h2 class="p-case-section__title"><?php echo esc_html( $term_name ); ?>
    <span class="p-case-section__title--en"><?php echo esc_html( $term_description ); ?></span>
  </h2>
  <div class="p-cases-cards">
    <!-- カード 1 -->
    <?php while ( $case_query->have_posts() ) : ?>
      <?php $case_query->the_post(); ?>
    <article class="p-cases-card">
      <div class="p-cases-card__head">
        <div class="p-cases-card__head-info">
          <span class="p-cases-card__category"><?php the_field('business_field'); ?></span>
          <h3 class="p-cases-card__company"><?php the_title(); ?><span class="p-cases-card__honorific">様</span></h3>
        </div>
        <div class="p-cases-card__logo">
          <?php if(has_post_thumbnail()):?>
            <?php the_post_thumbnail(); ?>
            <?php else: ?>
            <img src="<?php echo get_template_directory_uri() ?>/img/no-img.png" alt="">
          <?php endif; ?>
        </div>
      </div>

      <div class="p-cases-card__body">
        <p class="p-cases-card__course">研修コース：
          <span class="p-cases-card__course-title"><?php echo esc_html( $term_name ); ?></span>
        </p>

        <dl class="p-cases-card__details">
          <div class="p-cases-card__detail">
            <dt class="p-cases-card__term">研修の目的</dt>
            <dd class="p-cases-card__description">
              <?php the_field('before'); ?>
            </dd>
          </div>
          <div class="p-cases-card__detail">
            <dt class="p-cases-card__term">選んだ理由</dt>
            <dd class="p-cases-card__description">
              <?php the_field('reason'); ?>
            </dd>
          </div>
          <div class="p-cases-card__detail">
            <dt class="p-cases-card__term">導入後の成果・効果</dt>
            <dd class="p-cases-card__description">
              <?php the_field('after'); ?>
            </dd>
          </div>
        </dl>
      </div>
    </article>
    <?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
  </div>
</section>

・表示を確認する。

・タームの語尾にtestを付与する。

・testが付与されている事を確認する。

・カスタム投稿とカスタムフィールドにもtestを付与する。

・testが付与されている事を確認する。

・test記事を追加する。

・記事が追加される事を確認する。

プラグイン『Post Types Order』を使って記事の並び順を変更する

・Post Types Orderをインストールする。

・AAAの記事を一番上に移動させる。

・AAAの記事が移動している事を確認する。

詳細ボタンをクリックしたら別のページ（ID）に遷移させる

・遷移させたいPostのIDを確認する。

・詳細ボタンのコードを変更する。

<!-- 導線ボタン -->
<div class="p-cases__btn">
  <a href="<?php echo esc_url( get_permalink( 102 ) ); ?>#business-english-training" class="c-button-case c-button-case--bet">ビジネス英語研修の詳細</a>
</div>

・詳細ボタンをクリックして遷移する事を確認する。