WordPressで営業日カレンダーを作成する

個人のお客様を対象としたBtoCサイトでは営業日カレンダーを表示したいといった要望が出ることがあるのですが、既存のWordPressカレンダー系プラグインでは要件を満たすことが出来なかったのでカスタム投稿+REST API+カレンダーJavaScriptで実装しました。

営業日カレンダーを作成する前提として

• 定休日は決まっているが定休日が祝日の場合などイレギュラーな営業日がある
• カレンダーを二つ並べて表示したい
• 休日だけを示せれば良いのでGoogleカレンダーのようにカレンダーの日付に複数の予定を表示する必要はない（シンプルに表示したい）

以上の条件で営業日カレンダーを作成しました。

カスタム投稿タイプの作成

店休日を登録するカスタム投稿タイプを作成します。今回はWordPressプラグイン Custom Post Type UI を利用してカスタム投稿タイプを作成しました。

作成したカスタム投稿タイプに休日を登録する日付選択型のカスタムフィールドを作成し、1投稿を1店休日として使用します。 この時カスタム投稿タイプの一覧画面でその投稿がどの店休日に該当するか判別しやすいよう一覧画面に先程作成したカスタムフィールドの値を表示するようにしました。

一覧画面にカスタムフィールドの値を表示するサンプルコード

<?php
// 一覧にカラムを追加
function add_event_columns($columns) {
  $new_columns = array();
  foreach ($columns as $column_name => $column_display_name) {
    // 日付カラムの前に追加
    if ($column_name === 'date') {
      $new_columns['カスタムフィールドのフィールド名'] = __('一覧のカラムラベル');
    }
    $new_columns[$column_name] = $column_display_name;
  }
  return $new_columns;
}
add_filter('manage_event_posts_columns', 'add_event_columns');
// 追加したカラムにカスタムフィールド の値を挿入
function custom_event_column($column, $post_id) {
  switch ($column) {
    case 'カスタムフィールドのフィールド名':
      echo get_post_meta($post_id, 'カスタムフィールドのフィールド名', true);
      break;
  }
}
add_action('manage_event_posts_custom_column', 'custom_event_column', 10, 2);
?>

REST APIに店休日を取得するエンドポイントを追加

今回は月単位でJSONを取得したかったので月別で店休日を取得するためのエンドポイントを追加しました。以下のリクエストで2018年4月の店休日をJSONで返します。 https://example.com/wp-json/custom/event/2018-04

月別の店休日を取得するサンプルコード

<?php
add_action('rest_api_init', 'dt_register_api_hooks');
function dt_register_api_hooks() {
  register_rest_route('custom', '/event/(?P<yymm>\d+\-\d+)', array(
    'methods' => 'GET',
    'callback' => 'get_events'
  ));
}
function get_events($request) {
  $args = array(
    'post_type' => 'カスタム投稿タイプスラッグ',
    'posts_per_page' => 20,
    'meta_query' => array(array(
      'key' => 'カスタムフィールドのフィールド名',
      'value' => $request['yymm'],
      'compare' => 'LIKE',
    )),
    'orderby' => 'meta_value',
    'meta_key' => 'カスタムフィールドのフィールド名',
    'order' => 'ASC',
  );
  $posts = get_posts($args);

  if (empty($posts)) {
    return null;
  } else {
    $events = [];
    foreach ($posts as $post) {
      $event_date = get_post_meta($post->ID, 'カスタムフィールドのフィールド名', true);
      $event = array(
        'title' => $post->post_title,
        'date' => $event_date
      );
      $events[] = $event;
    }
    return $events;
  }
}
?>

カレンダーJavaScriptで店休日を表示

ここまでで月別の店休日をJSONで取得することが出来るようになりましたのでカレンダーJavaScriptで店休日を表示します。カレンダーJavaScriptはお好みで選択していただければ良いですがサンプルでは FullCalendar を利用しています。

FullCalendarで店休日を表示するサンプルコード

FullCalendarのオプションについてはFullCalendarのドキュメントを参照してください。

$('[カレンダーを挿入する要素]').fullCalendar({
  defaultView: 'month',
  defaultDate: moment.format('YYYY-MM-DD'),
  displayEventTime: false,
  fixedWeekCount: false,
  height: 'auto',
  header: {
    left: '',
    center: 'title',
    right: ''
  },
  views: {
    month: {
      titleFormat: 'YYYY年M月'
    }
  },
  events: {
    url: '/wp-json/custom/event/' + moment.format('YYYY-MM'),
    error: function() {
      console.log('REST API request is failured');
    }
  }
});

まとめ

今回紹介した実装方法では店休日毎に投稿して休日を管理する方法をとりましたが自由度が高い反面、投稿する手間があるとも考えられます。

定休日が営業日となるケースが年に数回など稀な場合はカレンダーJavaScriptで定休日を固定で休日とし、定休日が営業となる日付のみを投稿するなど運用方法を変更することも可能です。