WordPress化のアイキャッチ
0からHTMLをWordPress化する
Java Scriptの構文をサッと復習できるやつ(でもホントは長い)
セレクターまとめ
htmlまとめ-ic
HTMLまとめ

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

2023年06月11日

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

まず完成サンプルはこちらです。

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

手順は以下の通りです。

手順

①HTMLとCSSで任意の形を作成する
②新着記事を取得する
③タグを入れ替える
④テンプレートパーツを作成し入れ替える

スポンサーリンク

1.HTMLとCSSで形を作成する

まずは一般的なタブリストを作成します。

以下に見本を作成してありますのでデザインやタブの数を変えてアレンジして使ってください。

タブメニューに関しては「タブメニュー　作成」などで検索すればいろいろで出てくるのでそちらを参考にしてください←

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

今回は後から削除するのでタブ１のみ３つ作成してあります。

スポンサーリンク

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

お次は本題のカテゴリーごとの新着記事を取得していきます。
(記事とカテゴリーの作成の準備は各自でお願いします。)

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

<?php
  $newslist = get_posts( array(
    'category_name' => 'slug', //特定のカテゴリースラッグを指定
    'posts_per_page' => n //取得記事件数を入力(全権取得は-1を記述)
  ));
  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 );
?>

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

<?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();?>

一旦ここまでは以下のようなコードになっています。

<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">
      <?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="#" class="article-link">
          <div class="article-list__thumb">
            <img src="https://picsum.photos/400?random=1" alt="">
          </div>

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

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

          <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>
  <!-- /1つ目のタブメニュー -->
          
  <!-- 2つ目のタブメニュー -->
  <div class="tab-list">
    <ul class="article-list">
      <?php
        $newslist = get_posts( array(
          'category_name' => 'animals', //カテゴリーがanimalsの記事を取得
          'posts_per_page' => -1 //全件表示
        ));
        foreach( $newslist as $post ):
        setup_postdata( $post );
      ?>
      <li class="article-list__item">
        <a href="#" class="article-link">
          <div class="article-list__thumb">
            <img src="https://picsum.photos/400?random=1" alt="">
          </div>

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

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

          <div class="article-list__info-wrap" >
            <span class="article-list__date">2023.5.23</span>
            <span class="article-list__cat">カテゴリー</span> 
          </div>
        </a>
      </li>
      <?php endforeach; wp_reset_postdata();?>
    </ul>
  </div>
  <!-- /2つ目のタブメニュー -->
          
  <!-- 3つ目のタブメニュー -->
  <div class="tab-list">

    <ul class="article-list">
    <?php
        $newslist = get_posts( array(
          'category_name' => 'fruits', //カテゴリーがfruitsの記事を取得
          'posts_per_page' => -1 //全件表示
        ));
        foreach( $newslist as $post ):
        setup_postdata( $post );
      ?>
      <li class="article-list__item">
        <a href="#" class="article-link">
          <div class="article-list__thumb">
            <img src="https://picsum.photos/400?random=1" alt="">
          </div>

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

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

          <div class="article-list__info-wrap" >
            <span class="article-list__date">2023.5.23</span>
            <span class="article-list__cat">カテゴリー</span> 
          </div>
        </a>
      </li>
      <?php endforeach; wp_reset_postdata();?>

    </ul>
  </div>
  <!-- /3つ目のタブメニュー -->
          
  <!-- 4つ目のタブメニュー -->
  <div class="tab-list">

    <ul class="article-list">
    <?php
        $newslist = get_posts( array(
          'category_name' => 'place', //カテゴリーがplaceの記事を取得
          'posts_per_page' => -1 //全件表示
        ));
        foreach( $newslist as $post ):
        setup_postdata( $post );
      ?>
      <li class="article-list__item">
        <a href="#" class="article-link">
          <div class="article-list__thumb">
            <img src="https://picsum.photos/400?random=1" alt="">
          </div>

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

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

          <div class="article-list__info-wrap" >
            <span class="article-list__date">2023.5.23</span>
            <span class="article-list__cat">カテゴリー</span> 
          </div>
        </a>
      </li>
      <?php endforeach; wp_reset_postdata();?>
    </ul>
  </div>
  <!-- /4つ目のタブメニュー -->

</div>
<!-- tab-container -->

3.タグを入れ替える

最後に必要な情報を取得するためPHPで必要な情報を取得します。

今回は

  • タイトル
  • 抜粋
  • 日にち
  • カテゴリー
  • リンク

以上を変更したのでそこを入れ替えていきます。
(サムネは割愛しました)

ここまでのコード以下の通りです。

<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">
      <?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://picsum.photos/400?random=1" alt="">
          </div>

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

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

          <div class="article-list__info-wrap" >
            <span class="article-list__date"><?php the_time('Y.m.d'); ?></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>
  <!-- /1つ目のタブメニュー -->
          
  <!-- 2つ目のタブメニュー -->
  <div class="tab-list">
    <ul class="article-list">
      <?php
        $newslist = get_posts( array(
          'category_name' => 'animals', //カテゴリーがanimalsの記事を取得
          '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://picsum.photos/400?random=1" alt="">
          </div>

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

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

          <div class="article-list__info-wrap" >
            <span class="article-list__date"><?php the_time('Y.m.d'); ?></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つ目のタブメニュー -->
          
  <!-- 3つ目のタブメニュー -->
  <div class="tab-list">

    <ul class="article-list">
    <?php
        $newslist = get_posts( array(
          'category_name' => 'fruits', //カテゴリーがfruitsの記事を取得
          '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://picsum.photos/400?random=1" alt="">
          </div>

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

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

          <div class="article-list__info-wrap" >
            <span class="article-list__date"><?php the_time('Y.m.d'); ?></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つ目のタブメニュー -->
          
  <!-- 4つ目のタブメニュー -->
  <div class="tab-list">

    <ul class="article-list">
    <?php
        $newslist = get_posts( array(
          'category_name' => 'place', //カテゴリーがplaceの記事を取得
          '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://picsum.photos/400?random=1" alt="">
          </div>

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

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

          <div class="article-list__info-wrap" >
            <span class="article-list__date"><?php the_time('Y.m.d'); ?></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>
  <!-- /4つ目のタブメニュー -->

</div>
<!-- tab-container -->

4.おまけ

ここまで長々と同じ形のコードを記述してきましたが、これらはテンプレートパーツとしてまとめて読み込めば修正も管理も簡単ですのでまとめましょう。

手順は簡単でテンプレートパーツの名前をつけ、
中身を作成したら以下のコードを任意の箇所と入れ替えることで使用できます。

<?php get_template_part('テンプレートパーツの名前');?>

今回の場合は以下の部分をテンプレートパーツにしたいので、
“top-category.php”というページで作成しました。

<li class="article-list__item">
  <a href="<?php the_permalink(); ?>" class="article-link">
    <div class="article-list__thumb">
      <img src="https://picsum.photos/400?random=1" alt="">
    </div>

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

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

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

あとは同じ箇所のコードと以下のコードを入れ替えれば完成です。

<?php get_template_part('top', 'category');?>
<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">
      <?php
        $newslist = get_posts( array(
          'category_name' => '', //全てのカテゴリーの記事を取得
          'posts_per_page' => -1 //全件表示
        ));
        foreach( $newslist as $post ):
        setup_postdata( $post );
      ?>
      
      <?php get_template_part('top-category');?>
      <?php endforeach; wp_reset_postdata();?>
    </ul>
  </div>
  <!-- /1つ目のタブメニュー -->
          
  <!-- 2つ目のタブメニュー -->
  <div class="tab-list">
    <ul class="article-list">
      <?php
        $newslist = get_posts( array(
          'category_name' => 'animals', //カテゴリーがanimalsの記事を取得
          'posts_per_page' => -1 //全件表示
        ));
        foreach( $newslist as $post ):
        setup_postdata( $post );
      ?>
      <?php get_template_part('top-category');?>  
      <?php endforeach; wp_reset_postdata();?>
    </ul>
  </div>
  <!-- /2つ目のタブメニュー -->
          
  <!-- 3つ目のタブメニュー -->
  <div class="tab-list">

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

    </ul>
  </div>
  <!-- /3つ目のタブメニュー -->
          
  <!-- 4つ目のタブメニュー -->
  <div class="tab-list">

    <ul class="article-list">
    <?php
        $newslist = get_posts( array(
          'category_name' => 'place', //カテゴリーがanimalsの記事を取得
          'posts_per_page' => -1 //全件表示
        ));
        foreach( $newslist as $post ):
        setup_postdata( $post );
      ?>
      <?php get_template_part('top', 'category');?>  
      <?php endforeach; wp_reset_postdata();?>
    </ul>
  </div>
  <!-- /4つ目のタブメニュー -->

</div>
<!-- tab-container -->

5.まとめ

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

<?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();?>

・カテゴリーの数(必要な分)のタブとループを作成する

とりあえずこのコードだけ覚えておけば他でも応用ができるので参考にどうぞ。

スポンサーリンク

広告

コメント