【WordPress】タブ切り替えを利用したカテゴリ別新着記事の表示方法

WordPressのブログを運営していると、様々なカテゴリごとの新着記事を効果的に表示したいと思うことはよくあります。そんな時に便利なのが、「タブ切り替え」機能です。この機能を利用すれば、訪問者は興味のあるカテゴリのタブをクリックするだけで、そのカテゴリの最新記事を一覧できるようになります。これにより、訪問者の興味に合わせて瞬時にコンテンツを切り替えられるため、サイトのユーザビリティを大幅に向上させることができます。

しかし、「タブ切り替え」機能の実装は少々難易度が高いと感じるかもしれません。そこで本記事では、WordPressでタブ切り替えによるカテゴリ別の新着記事表示を実現する具体的な方法を、詳しく解説していきます。初心者でも安心して取り組めるよう、手順を丁寧に説明しますので、ぜひ最後までご覧ください。

タブを表示するHTMLとCSSの実装

まずはカテゴリのタブを作成しましょう。HTMLとCSSを使用してタブを実装します。以下のコードはタブのボタンを作成し、それぞれのタブがクリックされた時に、対応するカテゴリ名を引数としてchangeTab関数を呼び出すものです。

<div class="tab">
  <button class="tablinks" onclick="changeTab(event, 'category1')">Category1</button>
  <button class="tablinks" onclick="changeTab(event, 'category2')">Category2</button>
  <!-- add more tabs as needed -->
</div>

<div id="category1" class="tabcontent">
  <!-- content will be loaded here -->
</div>

<div id="category2" class="tabcontent">
  <!-- content will be loaded here -->
</div>

<!-- add more content divs as needed -->

また、以下のCSSコードはタブの見た目と動作を決定します。

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

PHPでカテゴリごとの新着記事を取得し表示する

次に、WordPressのPHP関数を用いて、各カテゴリごとの新着記事を取得し、それを表示します。以下の関数は特定のカテゴリIDを引数として受け取り、そのカテゴリの最新記事を取得して表示します。

<?php
function get_latest_posts_by_category($category_id, $num_posts = 5) {
  $args = array(
    'numberposts' => $num_posts,
    'category' => $category_id,
    'orderby' => 'date',
    'order' => 'DESC'
  );

  $latest_posts = get_posts($args);

  foreach($latest_posts as $post) : setup_postdata($post); ?>
    <div class="post-summary">
      <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
      <p><?php the_excerpt(); ?></p>
    </div>
  <?php endforeach;
  wp_reset_postdata();
}
?>

そして、この関数をそれぞれのカテゴリに対応するtabcontentのdiv内で使用します。

<div id="category1" class="tabcontent">
  <?php get_latest_posts_by_category(1); ?>
</div>

<div id="category2" class="tabcontent">
  <?php get_latest_posts_by_category(2); ?>
</div>

JavaScriptでタブ切り替え機能を実装

最後に、JavaScriptを使ってタブを切り替える機能を実装します。以下のchangeTab関数は、引数としてイベントオブジェクトとカテゴリ名を受け取り、そのカテゴリ名に対応するコンテンツを表示します。

function changeTab(evt, categoryName) {
  // Get all elements with class="tabcontent" and hide them
  var tabcontent = document.getElementsByClassName("tabcontent");
  for (var i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Get all elements with class="tablinks" and remove the class "active"
  var tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  // Show the current tab, and add an "active" class to the button that opened the tab
  document.getElementById(categoryName).style.display = "block";
  evt.currentTarget.className += " active";
}

以上の手順により、WordPressでタブ切り替えによりカテゴリごとの新着記事を表示することが可能となります。

まとめ

以上で、WordPressでタブ切り替えによるカテゴリ別新着記事の表示方法についての説明を終わります。本記事では、まずHTMLとCSSを使用してタブを作成し、その後WordPressのPHP関数を用いて各カテゴリごとの新着記事を取得し表示する方法を見てきました。最後に、JavaScriptを使ってタブを切り替える機能を実装しました。

この方法を用いることで、訪問者は簡単に興味のあるカテゴリの新着記事を見つけることができ、サイトのユーザビリティが大幅に向上します。コードは一部複雑な部分もありますが、一つ一つの手順を丁寧に追っていけば、初心者でもこの機能を実装することが可能です。

もし実装の過程で問題に遭遇した場合や、さらに詳しいカスタマイズを行いたい場合は、適切なコミュニティやフォーラムで助けを求めてみてください。WordPressのコミュニティは活発で、多くのユーザーが様々な問題を解決するためのアドバイスを提供しています。

今後もブログ運営における便利なヒントや技術的な解説を提供していきますので、ぜひチェックしてみてください。あなたのWordPressブログ運営が、より効果的で楽しいものになることを願っています。