【WordPress】カテゴリーごとに関連記事の取得と表示をする【メモ】

ブログや商品紹介で見られる、今表示されている記事のカテゴリーの記事(商品)を関連記事として表示する時のメモ。

また今見ている記事は関連記事には表示しないものとする。

イメージ的には以下のようなもの。画像がいつものマッチョさんたちなのはご愛嬌。

こういうの
スポンサーリンク

1.関連記事の取得と表示のためのコード

WordPressで関連記事を表示するには以下のコードを任意の場所に入れる。

<?php 
  if(has_category()){
    $categories = get_the_category();
    $cat_id = array();
  
    foreach($categories as $category){
    $cat_id[] = $category->term_id;
    }
  }

  $args = array(
    'post_type' => 'post',
    'posts_per_page' => '4',
    'post__not_in' =>array($post->ID),
    'category__in' => $cat_id,
    'orderby' => 'rand'
    );
  $my_query = new WP_Query( $args );
?>

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

  <!-- ループさせるものをここに入れる -->

<?php endwhile; ?><?php endif; ?>
<?php wp_reset_postdata(); ?>
スポンサーリンク

2.コードの簡単な解説

  • STEP1
    カテゴリー情報を取得する

    <?php 
  if(has_category()){
    $categories = get_the_category();
    $cat_id = array();
  
    foreach($categories as $category){
    $cat_id[] = $category->term_id;
    }
  }

    やっていることの簡単な説明

    1. 記事にカテゴリーがあるかをif文でチェック
    2. あればカテゴリー情報を取得し変数に入れる
    3. 配列を作成
    4. 取得したカテゴリーをそれぞれ取り出せるようにする
    5. タームIDを”２”で作った配列に入れる

  • STEP2
    クエリを作成する

      $args = array(
    'post_type' => 'post',
    'posts_per_page' => '4',
    'post__not_in' =>array($post->ID),
    'category__in' => $cat_id,
    'orderby' => 'rand'
    );
  $my_query = new WP_Query( $args );
?>

    今回使ったものの簡単な説明

    パラメータ変わるもの値
    post_type投稿タイプpost, page, any
    posts_per_page表示数数値で指定
    post__not_in指定した投稿を取得しない投稿idで指定
    category__in除外するカテゴリーカテゴリーidで指定
    orderbyパラメータで指定した順序にするID, title, dateなどがありrandはランダムで並べる

    他に使うものはcodexで

    https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/WP_Query
    wpdocs.osdn.jp

  • STEP3
    作ったクエリでループをする
    通常の記事の様にループをさせる

    <?php if($my_query -> have_posts()) : ?>
<?php while ( $my_query->have_posts() ) : $my_query->the_post(); ?>
  <!-- ループさせるもの -->
<?php endwhile; ?><?php endif; ?>

    通常のクエリに戻すためにリセットする

    <?php wp_reset_postdata(); ?>

3.おまけ

参考までに冒頭の画像のコードです。

使用する際は細かい調整は各自でお願いいたします。
またお使いのリセットCSSなんかの兼ね合いもあるので見た目が変わる場合はそちらも確認すると良いと思います。

<div class="relate-article">
  <p>関連記事</p>
  <div class="relate-card-wrapper">
    <?php 
      if(has_category()){
        $categories = get_the_category();
        $cat_id = array();
      
        foreach($categories as $category){
        $cat_id[] = $category->term_id;
        }
      }

      $args = array(
        'post_type' => 'post',
        'posts_per_page' => '4',
        'post__not_in' =>array($post->ID),
        'category__in' => $cat_id,
        'orderby' => 'rand'
        );
      $my_query = new WP_Query( $args );
    ?>

    <?php if($my_query -> have_posts()) : ?>
    <?php while ( $my_query->have_posts() ) : $my_query->the_post(); ?>
  
    <ul class="card">
      <li>
        <a href="<?php the_permalink(); ?>" class="image-wrapper">
          <?php if (has_post_thumbnail()) : ?> 
            <?php the_post_thumbnail(); ?> 
          <?php else : ?> 
            <img src="<?php echo get_template_directory_uri(); ?>/サムネイル画像がない時に表示する画像"> 
          <?php endif ?></a></li>
      <li class="post-title"><a href=""><?php the_title(); ?></a></li>
      <li class="post-day"><a href=""><?php the_time('Y年n月j日'); ?></a></li>
    </ul>

    <?php endwhile; ?><?php endif; ?>
    <?php wp_reset_postdata(); ?>
  </div>
  <!-- /relate-card-wrapper -->
</div>
<!-- /relation-article-wrapper -->
.relate-article p {
  font-size: calc(1.25rem + ((1vw - 3.75px) * 0.4848));
  padding: 1em 0;
}

.relate-article .relate-card-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  row-gap: 8px;
}

.relate-article .relate-card-wrapper .card {
  border: 1px solid #ddd;
  width: calc(100% / 2 - 8px);
  margin: 0 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0 0 4px #ddd;
  box-shadow: 0 0 4px #ddd;
  height: 100%;
  padding: 0.5em;
  -webkit-transition: all .4s;
  transition: all .4s;
}

.relate-article .relate-card-wrapper .card li {
  list-style: none;
  width: 100%;
  margin-bottom: 1em;
}

.relate-article .relate-card-wrapper .card li a {
  text-decoration: none;
  display: block;
}

.relate-article .relate-card-wrapper .card li .image-wrapper {
  text-decoration: none;
  position: relative;
  padding-top: 62.5%;
  overflow: hidden;
}

.relate-article .relate-card-wrapper .card li img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.relate-article .relate-card-wrapper .card:hover {
  opacity: .6;
}

.relate-article .relate-card-wrapper .card .post-title {
  text-align: center;
}

.relate-article .relate-card-wrapper .card .post-day {
  text-align: right;
}

@media (min-width: 900px) {
  .relate-article p {
    font-size: 1.5rem;
  }
  .relate-article .relate-card-wrapper .card {
    width: calc(100%/ 4 - 8px);
  }
}

スポンサーリンク

コメント