[WP Plugin] Biz Calendar で営業日カレンダーをカスタマイズして表示する

公開日: 2014/08/28
更新日: 2018/11/09

設置と CSS デザインの変更について。

WordPress 4.0-beta4 で動作確認できました。

Contents

Biz Calendar

飲食店の営業日カレンダーなどにぴったりな機能を持った WordPress プラグイン。

設置方法

functions.php でウィジェットを有効化します。

functions.php
register_sidebar( array(
    'name'          => 'Widget-BizCalendar',
    'id'            => 'Widget-BizCalendar',
    'description'   => 'Biz Calendarのウィジットエリアです。',
    'before_widget' => '<div id="%1$s" class="widget %2$s">',
    'after_widget'  => '</div>',
) );

テンプレートの表示したい場所にタグを仕込みます。

page.php
<!-- /.BizCalendar -->
<?php dynamic_sidebar( 'Widget-BizCalendar' ); echo PHP_EOL; ?>

あとは管理ツールからウィジェットを登録すればOK。

デザインのカスタマイズ

プラグインのデザインを規定している biz-cal.css と表示された html を Chrome Developer Tools を使って照合しながら、!import を使って上書きしていきます。
ChromeDeveloperTools でソースを見ると、以下のような html が出力されていました。

<!-- /.BizCalendar -->
<div id="bizcalendar-2" class="widget widget_bizcalendar">
  <div id="biz_calendar">
    <table class="bizcal">
      <tbody>
        <tr>
          <td class="calmonth" colspan="4">2014年 8月</td>
          <td class="calbtn down-img" onclick="downMonth()" title="前の月へ">
            <img src="http://wordpress.local/wp-content/plugins/biz-calendar/image/down.png"></td>
          <td class="calbtn today-img" onclick="goToday()" title="今月へ">
            <img src="http://wordpress.local/wp-content/plugins/biz-calendar/image/today.png"></td>
          <td class="calbtn up-img" onclick="upMonth()" title="次の月へ">
            <img src="http://wordpress.local/wp-content/plugins/biz-calendar/image/up.png"></td>
        </tr>
        <tr>
          <th>日</th>
          <th>月</th>
          <th>火</th>
          <th>水</th>
          <th>木</th>
          <th>金</th>
          <th>土</th>
        </tr>
<!-- 省略 -->
        <tr>
          <td class="holiday">24</td>
          <td>25</td>
          <td class="holiday">26</td>
          <td class="holiday">27</td>
          <td class="today">28</td>
          <td class="eventday">29</td>
          <td>30</td>
        </tr>
<!-- 省略 -->
      </tbody>
    </table>
    <p>
      <span class="boxholiday"></span>
      定休日
    </p>
    <p>
      <span class="boxeventday"></span>
      予約済
    </p>
  </div>
</div>
<!-- /.BizCalendar -->

つまづいたところ

以下、IE 8+
th タグにグラデーションがかかっていたので打ち消しました。

#biz_calendar {
    th {
      filter: none !important;
      background-image: none !important;
    }
}

カレンダーのボタンが画像で、table レイアウトされていました。
画像を置き換えて、position タグで動かしました。

@mixin ctr-img($str, $color:#d53b17) {
  &:after { content: $str; color: $color; }
  img { visibility: hidden; }
}
#biz_calendar {
  .down-img {
    @include ctr-img('<<');
    position: absolute;
        :

同じくカレンダーのコントローラまわりの td 背景色を変えるあたり。

#biz_calendar {
  table.bizcal {
    td {
      background-color: #1c1c1c;
      color: #fff !important;
    }
  .calmonth, .calbtn {
    background: none !important;
  }
}

キャプションはいろいろ書き替えたかったので隠しました。

#biz_calendar {
  height: 240px;
  overflow: hidden;
  p { visibility: hidden; }
}

補遺