【変更】「WP Simple Booking Calendar」にステータスを追加する手順など
予約の空き状況をウィジェットでカレンダー表示できるプラグインとして、
「WP Simple Booking Calendar」があります。
でも、このまま使うには少し不便なので、少しカスタマイズしてみましょう。
追記事項
休日カレンダーとして使う目的で後述の修正をするぐらいなら、
下記のプラグインがオススメ。
定休日・祝祭日・臨時休業＆開店・午前休・午後休などなどが簡単にできます。
しかも国産のプラグインだから、全て日本語。
https://www.hiskip.com/wp/plugin/site-manage/event-management/5880.html
ステータスを任意のものに変更する手順
デフォルトで選択できるステータスは 3 種類でしかも英語ですよね。
管理画面だけの話なので、英語のままでも問題ないと言えば問題ないですが、
ステータスが 3 個だと足りない！って場合もあるかと思います。
なので、ステータスを追加する変更を加えてみましょう。
wp-simple-booking-calendar / views / calendar フォルダにある
calendar.phtml をテキストエディターで開きます。
その 101 行目（付近）に以下のコード記述されています。
$bookingStatus = array('free' => __('Free', 'sbc'), 'booked' => __('Booked', 'sbc'), 'changeover' => __('Changeover', 'sbc'))
この記述が実行されるとカレンダー設定画面の日にちのセレクトボックスの内容を制御しています。
'free' => __('Free', 'sbc')
これが 1 セットになります。
半角だけの free は、後から CSS ファイルを編集しますが、そちらで使用しています。
で、最初の文字だけ大文字の Free は、セレクトボックスに表示するラベルとなっています。
なので、
$bookingStatus = array('free' => '空室有り', 'booked' => __('Booked', 'sbc'), 'changeover' => __('Changeover', 'sbc'))
と修正すると
上のような感じになります。
これで分かりやすくなりましたよね。
で、ステータスを追加したい場合には、
'waitinglist' => 'キャンセル待ち'
のようにして、一番最初で紹介したコードに追記するだけです。
これで、セレクトボックスにステータスを追加できましたが、
このままだと背景色が変更＆設定されません。
背景色を設定するには、CSS ファイルに追記する必要があります。
wp-simple-booking-calendar / css フォルダにある sbc.css をエディターで開きます。
そうすると 16 から 26 行目に以下の記述があるかと思います。
#sbc-calendar-wrapper .sbc-status-free {
background-color: #dfc;
}
#sbc-calendar-wrapper .sbc-status-booked {
background-color: #ffc0bd;
}
#sbc-calendar-wrapper .sbc-status-changeover {
background-color: #fee2a0;
}
この箇所で背景色を制御しています。
修正箇所が分かれば、あとは簡単ですよね。
#sbc-calendar-wrapper .sbc-status-waitinglist {
background-color: #ffffff;
}
のように追記するだけです。
これで設定画面でステータスを変更すると背景色も変更されると思います。
ただ、ステータスを新規追加した場合には、
「Save Changes」ボタンをクリックしてもステータスが反映されません。
あとは、頑張ってみてください。
年と月のセレクトボックスの表示順を入れ替える手順
年と月のセレクトボックスの表示順がデフォルトだと、
「年月」じゃなくて「月年」となっているのが気になりますよね。
<select name="sbcYear">
<?php $yearIndexStart = (int) gmdate('Y', $currentTimestamp) ?>
<?php for ($yearIndex = $yearIndexStart; $yearIndex <= $yearIndexStart + 15; $yearIndex++): ?>
<option value="<?php echo esc_attr($yearIndex) ?>" <?php if ($yearIndex == $currentYear): ?> selected="selected"<?php endif ?>><?php echo esc_html($yearIndex) ?></option>
<?php endfor ?>
</select>
<select name="sbcMonth">
<?php for ($monthIndex = 1; $monthIndex <= 12; $monthIndex++): ?>
<option value="<?php echo esc_attr($monthIndex) ?>" <?php if ($monthIndex == $currentMonth): ?> selected="selected"<?php endif ?>><?php echo ucwords(esc_html($wp_locale->get_month($monthIndex))) ?></option>
<?php endfor ?>
</select>
を
<select name="sbcMonth">
<?php for ($monthIndex = 1; $monthIndex <= 12; $monthIndex++): ?>
<option value="<?php echo esc_attr($monthIndex) ?>" <?php if ($monthIndex == $currentMonth): ?> selected="selected"<?php endif ?>><?php echo ucwords(esc_html($wp_locale->get_month($monthIndex))) ?></option>
<?php endfor ?>
</select>
<select name="sbcYear">
<?php $yearIndexStart = (int) gmdate('Y', $currentTimestamp) ?>
<?php for ($yearIndex = $yearIndexStart; $yearIndex <= $yearIndexStart + 15; $yearIndex++): ?>
<option value="<?php echo esc_attr($yearIndex) ?>" <?php if ($yearIndex == $currentYear): ?> selected="selected"<?php endif ?>><?php echo esc_html($yearIndex) ?></option>
<?php endfor ?>
</select>
上のような感じで入れ替えれば、大丈夫です。