イベント・フェア情報を発信するのにぴったりな色分け営業日カレンダー機能！WP Simple Booking Calendarをカスタマイズ
式場のサイトを納品する際に、カレンダー形式での「フェア情報」を発信する必要がありました。
結婚式場のサイト制作、フェア情報をカレンダーで発信している企業って多いんですよね。
でもこれ、式場だけじゃなくて、他にもイベント情報を発信するのにぴったり。
数個の決まったイベントが、毎月日を変えて行われる際に活用できます。
採用サイトなら説明会情報なんかも発信できますね。ワークショップなどにもバッチリ合います。
というわけで今回は「WP Simple Booking Calendar」というプラグインを使ってWordPressにカレンダーを表示する際のカスタマイズ方法をご紹介します。
- WP Simple Booking Calendar
- どうカスタマイズしたのか？
- 実際のカスタマイズ方法
- 以上で選択肢が増え、かつ日本語表記になり管理がしやすくなりました！
- どう公開・表示させる？
- まとめ
WP Simple Booking Calendar
ja.wordpress.org
まずはこちらのプラグインをインストール＞有効化。
ウィジェットから追加する方法もありますが、ブログ形式のサイトではなく普通のサイトであれば、管理画面ダッシュボードの左側メニューに表示されている「 WP Simple Booking Calendar」から設定するのが良いと思います。
基本的に営業日カレンダーなどに活用できる。
デフォルトでは緑・赤・オレンジが選べます。
例えば【標準営業日】【時短営業日】【定休日】の３種類に分けたり。
【空室あり】【残りわずか】【満室】の３種類に分けたりなど。
３色選べるだけで使い方は様々できますね＾＾
レストランや美容室など、個人経営のお店にはぴったり！ただし、今回はこの活用の幅をさらに広げます！
しかも、操作が簡単
管理画面で、日付ごとに予定を選択するだけ！！
初心者でも簡単に操作ができます！
こちらのサイトが大変参考になりました。
http://tht-promotion.com/シンプルなカレンダープラグイン「wp-simple-booking-calendar」/tht-promotion.com
こちらでカスタマイズによって選択肢が増えることがわかりましたが、どうやらその後更新されておらず・・・
というわけで、なんとかしてカスタマイズしてみようと思い立ちました。
どうカスタマイズしたのか？
誰でも更新できるために。
基本的に英語のプラグインです。しかし、今回の営業日カレンダーはクライアントが更新していかなければスムーズではありません。
その場合、リテラシーの低いクライアントが更新しやすいようにする必要がありました。
そもそも、３つのフェアがありました。
それを毎月開催していて、その情報をカレンダー形式で伝えようという作業です。
何もない日もありますし、土日祝は２つのフェアが不定期で開催され、月曜はもう１つのフェアが毎週開催されています。
仮に１つ目のフェアを「試食会」、
２つ目のフェアを「見学会」、
３つ目のフェアを「相談会」とします。
そしてフェアが「何もない日」もあります。
一つ目。選択肢の文言変更
デフォルトでWP Simple Booking Calendarにて３つの選択肢を選ぶ際、下記のような形で選択肢も英語になっています。
これではクライアントがどの色がどのフェアか覚えていない限り（試食会が緑なのかオレンジなのか・・・）、更新しづらくてしょうがないです。
というわけで、「Free」「Booked」「Changeover」の３つの英語を、専用に書き換えたいと思いました！
二つ目。何もない日を選択、選択肢を増やす
先ほどもお伝えした通り、「何もない日」もあります。
しかしデフォルトのWP Simple Booking Calendarでは、基本的に《緑色》が全日程に指定されており、何もないのに何かしらあるような表現になってしまう。
この「何もない日」が《緑色》のままだったとしても、この「何もない日」にプラスして「試食会」「見学会」「相談会」が行われるわけだから、選択肢が４つ必要になってしまう。
でもデフォルトで選べるのは《緑色》と《赤色》と《オレンジ色》だけ。
ということは、選択肢をもう一つ増やさなくてはいけません。
つまりどうしたいか
デフォルトでは３色をどれか選択できる。何も選択しないという選択肢もない。しかも英語表記でどれがどれだか。
そこで。
①選択肢の文言を変えたい。どれがどのフェアか管理する人も一発でわかるようにしたい。
②「何もない日」「試食会」「見学会」「相談会」の４つを選択できるようにしたい。
実際のカスタマイズ方法
1.「wp-simple-booking-calendar」を全てDL
「wordpressが入っているフォルダ名/wp-content/plugins」にインストールされている「wp-simple-booking-calendar」を全てDLします。
バックアップ用にコピーもとっておきましょう。
2. 書き換えるファイルを開いておく
書き換えるファイルは全部で４つ。
「wp-simple-booking-calendar/js/sbc-controller.js」
「wp-simple-booking-calendar/css/sbc.css」
「wp-simple-booking-calendar/library/WpSimpleBookingCalendar/Controller.php」
「wp-simple-booking-calendar/views/calendar/calendar.phtml」
3. sbc-controller.jsをいじる。
// Update calendar class $('#sbc-wrapper table tbody td.sbc-' + $this.attr('name')) .removeClass('sbc-status-free') .removeClass('sbc-status-booked') .removeClass('sbc-status-changeover') .addClass(statusClass);
どうやらこの部分で、Classをはずしたりつけたりしている模様。
Classでやっているのは色変えですね。
ここを４種類に増やします。
// Update calendar class $('#sbc-wrapper table tbody td.sbc-' + $this.attr('name')) .removeClass('sbc-status-free') .removeClass('sbc-status-fair1') .removeClass('sbc-status-fair2') .removeClass('sbc-status-fair3') .addClass(statusClass);
これで４種類、先ほどの②が叶いました。
4. sbc.cssをいじる。
先ほどClassを書き換えたので、それに合わせてcssも書き換えます。
二箇所あります！
#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 td.sbc-status-free { border-color: #dfc; } #sbc-calendar td.sbc-status-booked { border-color: #ffc0bd; } #sbc-calendar td.sbc-status-changeover { border-color: #fee2a0; }
こうなっていました。これは上から《緑色》《赤色》《オレンジ色》ですね。
これを、４色にします。
#sbc-calendar-wrapper .sbc-status-free { background-color: #fff; } #sbc-calendar-wrapper .sbc-status-fair1 { background-color: #dfc; } #sbc-calendar-wrapper .sbc-status-fair2 { background-color: #ffc0bd; } #sbc-calendar-wrapper .sbc-status-fair3 { background-color: #fee2a0; }
#sbc-calendar td.sbc-status-free { border-color: #fff; } #sbc-calendar td.sbc-status-fair1 { border-color: #dfc; } #sbc-calendar td.sbc-status-fair2 { border-color: #ffc0bd; } #sbc-calendar td.sbc-status-fair3 { border-color: #fee2a0; }
これで４色に増えました。class名は先ほどと揃えてくださいね。
freeの部分は、「何もない日」をあてがおうと思うので、《白》にしました。
5. Controller.phpをいじる。
呼び出す名前を変えたい＋増やしたいので、「booked」「changeover」を変更します。
// Process each day
if (is_array($days))
{
foreach ($days as $day => $bookingStatus)
{
if (!in_array($bookingStatus, array('booked', 'changeover')))
{
unset($calendarData[$year][$month][$day]);
}
}
}
こうなっています。「if (!in_array($bookingStatus, array('booked', 'changeover')))」ここがポイントですね。
これを・・・
// Process each day
if (is_array($days))
{
foreach ($days as $day => $bookingStatus)
{
if (!in_array($bookingStatus, array('fair1', 'fair2','fair3')))
{
unset($calendarData[$year][$month][$day]);
}
}
}
if (empty($calendarData[$year][$month]))
{
unset($calendarData[$year][$month]);
}
「if (!in_array($bookingStatus, array('fair1', 'fair2','fair3')))」に変えました。３つにも増えましたね。
6. calendar.phtmlをいじる。
最後です。
これが実際の管理画面で選択する部分。
管理するクライアントに見やすくするためにいじります。
<td class="sbc-editor-status"> <select name="day<?php echo esc_attr($day) ?>"> <?php $bookingStatus = array('free' => __('Free', 'sbc'), 'booked' => __('Booked', 'sbc'), 'changeover' => __('Changeover', 'sbc')) ?> <?php foreach ($bookingStatus as $statusKey => $statusName): ?> <option class="sbc-status-<?php echo esc_attr($statusKey) ?>" value="<?php echo esc_attr($statusKey) ?>"<?php if ($statusKey == $dayStatus): ?> selected="selected"<?php endif ?>><?php echo esc_html($statusName) ?></option> <?php endforeach ?> </select> </td>
「 $bookingStatus = array('free' => __('Free', 'sbc'), 'booked' => __('Booked', 'sbc'), 'changeover' => __('Changeover', 'sbc')) 」この部分が該当しています。
<td class="sbc-editor-status"> <select name="day<?php echo esc_attr($day) ?>"> <?php $bookingStatus = array('free' => __('何もない日', 'sbc'), 'fair1' => __('試食会', 'sbc'), 'fair2' => __('見学会', 'sbc'), 'fair3' => __('相談会', 'sbc')) ?> <?php foreach ($bookingStatus as $statusKey => $statusName): ?> <option class="sbc-status-<?php echo esc_attr($statusKey) ?>" value="<?php echo esc_attr($statusKey) ?>"<?php if ($statusKey == $dayStatus): ?> selected="selected"<?php endif ?>><?php echo esc_html($statusName) ?></option> <?php endforeach ?> </select> </td>
「$bookingStatus = array('free' => __('何もない日', 'sbc'), 'fair1' => __('試食会', 'sbc'), 'fair2' => __('見学会', 'sbc'), 'fair3' => __('相談会', 'sbc'))」と、日本語表記を入れてきました！管理するときにとても便利。
以上で選択肢が増え、かつ日本語表記になり管理がしやすくなりました！
「何もない日」→free《白色》
「試食会」→fair1《緑色》
「見学会」→fair2《赤色》
「相談会」→fair3《オレンジ色》
という変更を行いました！！
これで白色の、何も選択しない部分もできていますね！
管理画面からの選択肢もばっちりのはず。
どう公開・表示させる？
phpで表示させる場合
<?php echo do_shortcode('[sbc title="no"]'); ?>
記事内で表示させる場合
[sbc title="no"]
タイトルはいらないので「no」にしていますが、欲しい場合は「yes」にしましょう。
まとめ
以上になります。
プラグインのカスタマイズって難しいですし、私にはjavaの知識もphpの知識もありませんが、ファイルを全部見てみると意外とここがこうなってるのか！？こういうことを言っているコードなのかもしれない！と紐解いていけたりします。
プラグインは便利ですが、理想の動きと近いことはあっても必ずしもそういう動きをしてくれるとは限りません。
それを可能にしていくことも納期によっては必要かもしれませんね。
私は結構手こずりましたが、悔しくて意地でなんとかしようとしてしまいます・・・。もちろん、無理なこともたくさんありましたが笑
バックアップをとっておけば、大事にはならないはず。ぜひ試してみてください。
にほんブログ村
