デイトラweb制作(Word Press化その11)

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

トップページのCASEセクションの一覧を表示させる

カスタム投稿を取得するサブループを作成する

・トップページ(front-page.php)のcaseセクションを動的に変更する。

<div class="p-case__list">
      <?php
        $cases_query = new WP_Query(
          array(
              'post_type' => 'post-case',
              'posts_per_page' => 6
          )
        );
      ?>
      <?php if ( $cases_query->have_posts() ) : ?>
        <?php while ( $cases_query->have_posts() ) : ?>
          <?php $cases_query->the_post(); ?>
          <a href="<?php echo get_the_permalink( $case_id ); ?>" class="p-case-card">
            <div class="p-case-card__image">
              <?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 class="p-case-card__body">
              <h3 class="p-case-card__company"><?php the_title(); ?> 様</h3>
              <div class="c-link-case__item">
                <span class="c-tag"><?php echo get_the_terms(get_the_ID(), 'business')[0]->name; ?></span>
                <span href="#" class="c-link-case"><i class="c-link-case__icon"></i></span>
              </div>
            </div>
          </a>
        <?php endwhile; ?>
      <?php endif; ?>
      <?php wp_reset_postdata(); ?>
</div>

『Post Types Order』(プラグイン)の設定を変更する

・設定からPost Types Orderで自動適用ソートのチェックを外す。

・プラグイン導入は前回のWord Press化その10を参照して下さい。

トップページ(front-page.php)のcaseセクションの動作を確認する

・現状の投稿日を確認して表示を見る。

・日付を降順に変更して表示を確認する。

導入事例ページ(case-page.php)のクエリを変更する

・前回作成したクエリー内に「記事位置変更」を追加する。

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

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

   // ▼ 「記事位置変更」設定
   'orderby'        => 'menu_order', // カスタムソート順を使用
   'order'          => 'ASC',          // 管理画面の並び順通り(上から順)に出力

   // ▼ 「同じタクソノミー(ターム)の投稿だけ」
   'tax_query' => array(
       array(
           'taxonomy' => 'business', // タクソノミー名
           'field' => 'slug',
           'terms' => 'business-study-abroad-program',
       ),
   ),
 )
);

・現状の記事の配列と表示を確認する。

・位置を変更して配列が替わる事を確認する。

結果

本来はサイドバーを作成するつもりでしたが、トップページに導入事例一覧を動的にする方を作成しました。

最初はサブループで簡単に出来るだろうと考えていました。ところがプラグイン『Post Types Order』を導入している関係で結構ハマってしましました。

問題だった所は投稿が日付順に表示されない事でした。トップページ(front-page.php)のクエリーが原因だと考えて修正を繰り返していました。しかし、いくら修正しても思う表示にならない・・・そこでプラグイン側の設定を確認してみて、ある項目が原因だと気づきました。本来は自動的に日付順に表示される設定になっているはずなのに盲点です。

そこが解決しても束の間、導入ページ(case-page.php)のドラッグ&ドロップが効かない、降順ではなく逆順で表示されると言う問題が発生。『ドラッグ&ドロップはいいとして何で表示順も逆になるんだろう』と思いながら修正して完成しました。

プラグインは便利ですが、設定内容と照らし合わせないといけないですね!

次こそはサイドバーを作成します!

以上、デイトラweb制作(Word Press化その11)の状況でした。

ご依頼等ありましたら、下記のURLにお問い合わせ下さい。

お問い合わせはこちら

ポートフォリオサイトはこちらになります。

ポートフォリオサイトはこちら