今月・来月のカレンダーを表示し、未来の投稿も新着情報に含める方法

Cocoonカスタマイズ集
この記事は約5分で読めます。
記事内に広告が含まれています。

はじめに

イベントや予定管理をする際、来月など未来の投稿をカレンダーに表示したいケースがあります。
しかし、通常の予約投稿は公開されるまで表示されないため、イベント情報を閲覧者に見せるには不便です。

既に以下で予約投稿を無効化して未来の投稿を表示する方法を紹介しました。

その方法に加え、今月と来月のカレンダーを2つに表示させます。
これにより、イベント管理やスケジュールの可視化がさらに便利になります。

また、カレンダーと同様に、新着情報の一覧でも今月および来月の投稿のみを表示するように設定します。
これにより、最新のイベント情報や予定を、利用者がより直感的に把握できるようになります。

この記事では、この方法について説明します。

今月と来月のカレンダーを2つ並べて表示する方法

完成イメージ

使用方法

以下にショートコードを示します。

[my_two_months_calendar]

実装手順

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

// ショートコードを追加
add_shortcode('my_two_months_calendar', function () {
  ob_start();

  // WordPressのタイムゾーンを考慮した現在のタイムスタンプを取得
  $current_timestamp = current_time('timestamp');

  // 今月の1日のタイムスタンプを取得
  $current_date = strtotime(gmdate('Y-m-01', $current_timestamp));

  // 来月の1日のタイムスタンプを取得
  $next_date = strtotime('+1 month', $current_date);

  ?>
  <div class="two_months_calendar">
    <!-- 今月カレンダー -->
    <?= get_clean_calendar($current_date); ?>

    <!-- 来月カレンダー -->
    <?= get_clean_calendar($next_date); ?>
  </div>

  <?php
  return ob_get_clean();
});


/**
 * 指定年月のカレンダーを取得
 *
 * @param int $timestamp 対象年月のタイムスタンプ
 * @return string カレンダーHTML
 */
if (!function_exists('get_clean_calendar')):
function get_clean_calendar($timestamp) {
  global $year, $monthnum, $wpdb;

  $year_backup     = $year ?? null;
  $monthnum_backup = $monthnum ?? null;

  // 対象の年と月をセット
  $year     = gmdate('Y', $timestamp);
  $monthnum = gmdate('m', $timestamp);


  ob_start();
  get_calendar(true);
  $html = ob_get_clean();

  // 前後ナビを削除
  $html = preg_replace(
    '/<nav\s+aria-label="[^"]*"\s+class="wp-calendar-nav">.*?<\/nav>/is',
    '',
    $html
  );

  // グローバル変数を復元
  if ($monthnum_backup !== null) {
    $monthnum = $monthnum_backup;
  } else {
    unset($GLOBALS['monthnum']);
  }

  if ($year_backup !== null) {
    $year = $year_backup;
  } else {
    unset($GLOBALS['year']);
  }

  return $html;
}
endif;

新着情報を今月・来月の投稿だけに絞り込む方法

使用方法

以下にショートコードを示します。

[info_list action=2month]

実装手順

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

add_filter('get_info_list_args', function ($args) {
  if (!isset($args['action']) || $args['action'] !== '2month') {
    return $args;
  }

  // WordPressのタイムゾーンを考慮した現在のタイムスタンプを取得
  $current_timestamp = current_time('timestamp');

  // 常に「今月の初日(00:00:00)」を基準にする
  $start_date = gmdate('Y-m-01 00:00:00', $current_timestamp);

  // 今月の初日を基準に1ヶ月後のタイムスタンプを取得し、その月の末日を算出
  $next_month_timestamp = strtotime('first day of next month', $current_timestamp);
  $end_date             = gmdate('Y-m-t 23:59:59', $next_month_timestamp);

  // 期間指定で記事を絞り込み
  $args['date_query'] = [
    [
      'after'     => $start_date,
      'before'    => $end_date,
      'inclusive' => true,
    ],
  ];

  return $args;
});

さいごに

今回紹介した方法を使えば、今月と来月のカレンダーを並べて表示しながら、未来の投稿を新着情報にも反映させることができます。
これにより、イベントやスケジュールを管理しやすくなり、閲覧者にもわかりやすい形で予定を共有できます。
運用効率を上げたいサイトやイベント告知ページにも最適です。

タイトルとURLをコピーしました