カテゴリー別の最新記事を表示するタブメニュー【Word Press】

2023年06月11日

ちょっとニッチかもしれませんが今回はタブをクリックすると特定のカテゴリーの新着記事を切り替えて表示するメニューを作成していこうと思います。

まず完成サンプルはこちらをご覧ください。

ブログサイトやコーポレートサイトの「お知らせ」などにも使えると思います。

手順は以下の通りです。

手順

①HTMLとCSSで任意の形を作成する
②PHPで記事を取得する
③jQueryでタブの切り替えをする

今回の記事では②の部分について主に説明します。

①と③の詳細はここでは軽くにして「タブメニュー　作成」などで検索すればいろいろで出てくるのでそちらを参考にしてください。

スポンサーリンク

カテゴリーの新着記事を取得する

いきなり結論ですが

特定のカテゴリーの新着記事を取得するには以下のコードを記述します。

<?php
  $newslist = get_posts( array(
    'category_name' => 'slug', //特定のカテゴリースラッグを指定
    'posts_per_page' => n //取得記事件数を入力
  ));
  foreach( $newslist as $post ):
  setup_postdata( $post );
?>

<!-- ここにHTMLやPHPを記述 -->

<?php endforeach; wp_reset_postdata();?>

‘category_name’ => ‘slug ‘のslugには取得したいカテゴリーのスラッグを入力、’posts_per_page’ => nのnには表示したい件数を入力します。

また全件表示したい場合はnに-1を入力します。

試しに今回はカテゴリーが”fruits”の記事のタイトルを取得してみます。

<?php
  $newslist = get_posts( array(
    'category_name' => 'fruits', //カテゴリーがfruitsの記事を取得
    'posts_per_page' => -1 //全件表示
  ));
  foreach( $newslist as $post ):
  setup_postdata( $post );
?>

<p><?php the_title(); ?></p>  <!-- タイトルを取得 -->

<?php endforeach; wp_reset_postdata();?>

バナナ、メロン、りんごが取得できました。

あとはこれをタブの数だけ作成すればOKです。
今回の場合は全件表示+3つ作成し、スラッグをそれぞれ変えました。

また全件表示については以下の通りです。

注意点

全件表示する場合はそれ用にスラッグを指定しないものを作成しておきます。

<?php
  $newslist = get_posts( array(
    'category_name' => '',// 全件表示用はスラッグを空欄 
    'posts_per_page' => -1 
  ));
  foreach( $newslist as $post ):
  setup_postdata( $post );
?>


<?php endforeach; wp_reset_postdata();?>

意外と単純でしたね。

スポンサーリンク

HTMLとCSSで形を作成する

参考までに記載します。

ちなみに今回はタブメニューとコンテンツ部分は分けて作成をしております。

またhtml/cssでの雛形ですので機能はしません。

See the Pen Untitled by kbyt (@kbo58) on CodePen.

<div class="tab-container">
  <!--  tab上部 -->
  <ul class="tab-title-list">
    <li class="tab-title selected">ALL</li>
    <li class="tab-title">動物</li>
    <li class="tab-title">場所</li>
    <li class="tab-title">果物</li>
  </ul>
  <!-- /tab上部 -->
  
  <!--  一つ目のタブメニュー -->
  <div class="tab-list show">

    <ul class="article-list">
      <li class="article-list__item">
        <a href="#" class="article-link">
          <div class="article-list__thumb">
            <img src="https://source.unsplash.com/random/" alt="">
          </div>

          <div class="article-list__body">
            <h2 class="article-list__title">タイトルが入ります。</h2>
          </div>

          <p class="article-list__excerpt">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>

          <div class="article-list__info-wrap" >
            <span class="article-list__date">2023.5.23</span>
            <span class="article-list__cat">カテゴリー</span> 
          </div>
        </a>
      </li>

      <li class="article-list__item">
        <a href="#" class="article-link">
          <div class="article-list__thumb">
            <img src="https://source.unsplash.com/random/" alt="">
          </div>
          <div class="article-list__body">
            <h2 class="article-list__title">タイトルが入ります。</h2>
          </div>

          <p class="article-list__excerpt">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>

          <div class="article-list__info-wrap" >
            <span class="article-list__date">2023.5.23</span>
            <span class="article-list__cat">カテゴリー</span> 
          </div>
        </a>
      </li>

      <li class="article-list__item">
        <a href="#" class="article-link">
          <div class="article-list__thumb">
            <img src="https://source.unsplash.com/random/5" alt="">
          </div>

          <div class="article-list__body">
            <h2 class="article-list__title">タイトルが入ります。</h2>
          </div>

          <p class="article-list__excerpt">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>

          <div class="article-list__info-wrap" >
            <span class="article-list__date">2023.5.23</span>
            <span class="article-list__cat">カテゴリー</span> 
          </div>
        </a>
      </li>
    </ul>
  </div>
  <!-- /1つ目のタブメニュー -->
  
  <!-- 2つ目のタブメニュー -->
  
  <!-- /2つ目のタブメニュー -->
  省略
  ︙
  
  
</div>
<!-- tab-container -->
*{
  box-sizing: border-box;
}

a{
  text-decoration: none;
  color: #333;
}

ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

img{
  width: 100%;
}


.tab-container{
  max-width: 1200px;
  margin: 0 auto;
}
/* ----------- タブ上部 ---------*/
/* タブの見出しの枠 */
.tab-title-list{
  display: flex;
  width: 100%;
  justify-content: space-around;
}

/* タブの見出し */
.tab-title{
  width: 12%;
  padding: 0.25em 0;
  cursor: pointer;
  transition: border-bottom .2s;
  text-align: center;
  letter-spacing: 0.2em;
  font-size: 11px;
  border-bottom: 1px solid transparent;
}

/* 選択されているタイトル */
.tab-title.selected{
  border-bottom: 2px solid #fc2;
  opacity: 0.8;
}

.tab-title:not(.selected):hover{
  opacity: .6;
}

@media (min-width: 768px) {
  /* タブメニュー全体 */
  .tab-cont{
    min-height: 900px;
  }

  /* タブの見出し */
  .tab-title{
    font-size: 14px;
  }
}


/*---------  中身 ---------*/
.article-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-wrap: wrap;

  &__item{
    border: 1px solid #ccc;
    padding: 16px;
    margin-top: 24px;
    width: calc((100% - 12px) / 2);
  }

  /* 偶数用 */
  &::after{
    content: "";
    width: calc((100% - 12px) / 2);
  }

  &__body{
    margin-top: 16px;
  }

  &__title{
    font-size: 14px;
  }

  &__info-wrap{
    margin-top: 8px;
  }

  &__date{
    font-size: 10px;
  }

  &__cat{
    font-size: 10px;
    border: 1px solid #ddd;
    padding: 4px 6px;
    display: inline-block;
    margin: 0 4px;
  }

  &__thumb{
    width: 100%;

    img{
      aspect-ratio: 695/463;
      object-fit: cover;
    }
  }

  &__excerpt{
    margin-top: 12px;
  }
}

@media (min-width: 768px) {
  .article-list{

    /* 偶数用 */
    &::after{
      width: calc((100% - 24px) / 3);
    }

    &__item{
      padding: 16px;
      width: calc((100% - 24px) / 3);
    }
  
    &__body{
      margin-top: 16px;
    }
  
    &__title{
      font-size: 18px;
    }
  
    &__date{
      font-size: 12px;
    }
  
    &__cat{
      font-size: 12px;
    }
  
    &__excerpt{
      margin-top: 12px;
      font-size: 14px;
    }
  }
}

こちらのHTMLを先ほどのループの内側に入れてPHPで必要な情報を取得します。

<ul class="tab-title-list">
  <li class="tab-title selected">ALL</li>
  <li class="tab-title">動物</li>
  <li class="tab-title">場所</li>
  <li class="tab-title">果物</li>
</ul>

<!----------  一つ目のタブメニュー ---------->
<div class="tab-list show">
  <ul class="article-list">
  <?php
    $newslist = get_posts( array(
    // 全件表示用はスラッグを空欄 
      'posts_per_page' => -1 
    ));
    foreach( $newslist as $post ):
    setup_postdata( $post );
  ?>

  <li class="article-list__item">
    <a href="<?php the_permalink()?>" class="article-link">
      <div class="article-list__thumb">
        <img src="https://source.unsplash.com/random/" alt="">
      </div>

      <div class="article-list__body flex --jcsb">
        <h2 class="article-list__title"><?php the_title()?></h2>
      </div>

      <p class="article-list__excerpt"><?php the_excerpt()?></p>

      <div class="article-list__info-wrap" >
        <span class="article-list__date"><?php echo get_the_date(); ?></span>
        <?php
          $cats =  get_the_category();
          foreach($cats as $cat) {
            echo '<span class="article-list__cat">'. $cat->name .'</span>';
          }  
        ?>
      </div>
    </a>
  </li>

  <?php endforeach; wp_reset_postdata();?>
  <ul>
</div>

<!---------- 2つ目のカテゴリー --------->
<div class="tab-list">
  <ul class="article-list">
  <?php
    $newslist = get_posts( array(
    'category_name' => 'カテゴリー名１',
      'posts_per_page' => -1 
    ));
    foreach( $newslist as $post ):
    setup_postdata( $post );
  ?>
  <li class="article-list__item">
    <a href="<?php the_permalink()?>" class="article-link">
      <div class="article-list__thumb">
        <img src="https://source.unsplash.com/random/" alt="">
      </div>

      <div class="article-list__body flex --jcsb">
        <h2 class="article-list__title"><?php the_title()?></h2>
      </div>

      <p class="article-list__excerpt"><?php the_excerpt()?></p>

      <div class="article-list__info-wrap" >
        <span class="article-list__date">2023.5.23</span>
        <?php
          $cats =  get_the_category();
          foreach($cats as $cat) {
            echo '<span class="article-list__cat">'. $cat->name .'</span>';
          }  
        ?>
      </div>
    </a>
  </li>

  <?php endforeach; wp_reset_postdata();?>
  </ul>
</div>

<!---------- 3つ目のカテゴリー ---------->
省略
︙

詳細は割愛致しましたが、要は必要なカテゴリーの数だけループを作成してくださいということです。

あとカテゴリーの数だけタブを作成するのをお忘れなく。

jQueryで動きをつける

こちらも参考までに今回使用したコードを記載しておきます。

$(function(){
  $('.tab-title').on('click', function(){
    var index = $('.tab-title').index(this);
    $('.tab-title').removeClass('selected'); 
    $(this).addClass('selected');
    $('.tab-contents .tab-list.show').removeClass('show');
    $('.tab-contents .tab-list').eq(index).addClass('show');
  });
});

エフェクトやアニメーションは無しでシンプルな形となっております。

まとめ

特定のカテゴリーの新着記事を取得する

<?php
  $newslist = get_posts( array(
    'category_name' => 'slug', //特定のカテゴリースラッグを指定
    'posts_per_page' => n //取得記事件数を入力
  ));
  foreach( $newslist as $post ):
  setup_postdata( $post );
?>

<!-- ここにHTMLやPHPを記述 -->

<?php endforeach; wp_reset_postdata();?>

とりあえずこのコードだけ覚えておけば他でも応用ができるのでメモをしておきましょう！

スポンサーリンク

コメント