オリジナルレイアウトで新着・更新記事の新しい方のタブに自動切り替えする方法

はじめに

スキン「メイン・イン・ヘブン」では、フロントページをCocoon標準にはないオリジナルレイアウトに変更できます。

オリジナルレイアウト

本スキンでは、「拡張タイプ」をオンにすることで、フロントページタイプやカードタイプの組み合わせに応じた多彩なオリジナルレイアウトへの一括切り替えを可能にし、サイトの魅力を最大限に引き出す最適なコンテンツ表示の作成を実現します。

chuya.s239.xrea.com

「カテゴリーごと（2カラム）」、「カテゴリーごと（3カラム）」に設定した場合、新着記事と更新記事をタブで切り替える機能が備わっており、初期表示は「新着記事」タブになっています。

しかし、記事の更新状況によっては、最新の更新日付を持つ「更新記事」タブを初期表示にしたいケースもあるかと思います。
この記事では、それぞれの最新日付を比較し、より新しい日付が含まれる方のタブを初期表示にする方法を説明します。

完成イメージ

実装手順

以下のコードをfunctions.phpに追加します。

add_action('wp_enqueue_scripts', function () {
  // オリジナルレイアウト以外の場合
  if (
    !is_front_page() ||
    !get_theme_mod('hvn_card_expansion_setting') ||
    (!is_entry_card_type_vertical_card_2() && !is_entry_card_type_vertical_card_3())
  ) {
    return;
  }

  ob_start();
  ?>
  jQuery(function ($) {
    // タブ1の1枚目の投稿日
    var latestNew = $('.tab-cont.tb1').find('.post-date .entry-date').first().text().trim();

    // タブ2の1枚目の更新日
    var latestModified = $('.tab-cont.tb2').find('.post-update .entry-date').first().text().trim();

    // タブ2を初期表示
    if (latestModified && latestModified > latestNew) {
      $('#index-tab-2').prop('checked', true);
    }
  });
  <?php
  wp_add_inline_script('jquery', ob_get_clean());
});

さいごに

今回紹介した方法を使えば、Cocoonのスキン「メイン・イン・ヘブン」のフロントページにおいて、新着記事と更新記事の最新日付を自動で比較し、より新しい方のタブを初期表示させることができます。
ユーザーが求めている最新の情報をスムーズに届けることができるため、サイトの利便性向上にぜひ役立ててください。