[WP Plugin] Biz Calendar で営業日カレンダーをカスタマイズして表示する
設置と CSS デザインの変更について。
[markdown]
WordPress 4.0-beta4 で動作確認できました。
## Biz Calendar
飲食店の営業日カレンダーなどにぴったりな機能を持った WordPress プラグイン。
> * [wp-plugins/biz-calendar](https://github.com/wp-plugins/biz-calendar/)
> * [WordPress BizPlugin](http://residentbird.main.jp/bizplugin/plugins/bizcalendar/)
## 設置方法
functions.php でウィジェットを有効化します。
“`php:functions.php
register_sidebar( array(
‘name’ => ‘Widget-BizCalendar’,
‘id’ => ‘Widget-BizCalendar’,
‘description’ => ‘Biz Calendarのウィジットエリアです。’,
‘before_widget’ => ‘
‘,
) );
“`
テンプレートの表示したい場所にタグを仕込みます。
“`php:page.php
“`
あとは管理ツールからウィジェットを登録すればOK。
## デザインのカスタマイズ
プラグインのデザインを規定している [biz-cal.css](https://github.com/wp-plugins/biz-calendar/blob/master/biz-cal.css) と表示された html を Chrome Developer Tools を使って照合しながら、`!import` を使って上書きしていきます。
ChromeDeveloperTools でソースを見ると、以下のような html が出力されていました。
“`html
| 2014年 8月 |  |  |  | |||
| 日 | 月 | 火 | 水 | 木 | 金 | 土 |
|---|---|---|---|---|---|---|
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
定休日
予約済
“`
### つまづいたところ
以下、IE 8+
th タグにグラデーションがかかっていたので打ち消しました。
“`css
#biz_calendar {
th {
filter: none !important;
background-image: none !important;
}
}
“`
カレンダーのボタンが画像で、table レイアウトされていました。
画像を置き換えて、position タグで動かしました。
“`css
@mixin ctr-img($str, $color:#d53b17) {
&:after { content: $str; color: $color; }
img { visibility: hidden; }
}
#biz_calendar {
.down-img {
@include ctr-img(‘<<');
position: absolute;
:
``` 同じくカレンダーのコントローラまわりの td 背景色を変えるあたり。 ```css
#biz_calendar {
table.bizcal {
td {
background-color: #1c1c1c;
color: #fff !important;
}
.calmonth, .calbtn {
background: none !important;
}
}
``` キャプションはいろいろ書き替えたかったので隠しました。 ```css
#biz_calendar {
height: 240px;
overflow: hidden;
p { visibility: hidden; }
}
``` ## 補遺 > * [WordPress プラグイン Biz Calendar | Web Design Leaves](http://www.webdesignleaves.com/wp/wordpress/850/)
> * [店舗サイトをWordpressで制作するときに役立つプラグイン５選](http://www.switch-info.com/?p=4041)[/markdown]