wordpressプラグイン「Biz Calendar」のカスタマイズ
営業日・イベントカレンダーとしてこのプラグインを使用してる人も多いと思います。
このプラグインでは基本1ヶ月分のみの表示となりますが、それを2ヶ月分表示できるようにカスタマイズしたいと思います。
プラグインの説明・配布はこちら
Biz Calendar│WP-BizPlugin
プラグインの使い方はググってください。
カレンダーを2つ
ショッピングサイト等でよく見かけるあれです。
こんな感じにします。
注意
今回のカスタマイズでは月送りを無効にします。
表示されたカレンダー毎に月送りを実装するとなると変更箇所が多くなるのと、2ヶ月分表示するなら月送りいらないよねという判断です。
月送りがあれば1ヶ月表示でいいわけですし。
需要があれば作ろうかなとも思いますけど。
使用したバージョンは2.0.1です。
2020/04/13追記
バージョン2.2.0向けに書き直しました。
変更したところはJSだけです。
カスマイズ実践
このやり方はプラグインディレクトリ内ファイルを直接変更します。
プラグインディレクトリ内ファイルを変更しない方法も後述してますが、やり方は一緒なのでとりあえず上から読み進めてください。
プラグインディレクトリは「/wp-content/plugins/biz-calendar」です。
予めローカルにダウンロードしておいてください。
変更するファイル
変更するファイルは以下のとおり。
- calendar.js
- biz-calendar.php
- biz-cal.css
それでは1つずつ。
行番号は元ファイルの行番号です。コピーして元ファイルは保管しておいてください。
calendar.js
このファイルは実際にカレンダーを描画するスクリプトとなっています。
2020/04/13追記
バージョン2.2.0対応版に書き直しました。
①1行目~6行目
//元 jQuery(document).ready(function ($) { if ($("#biz_calendar").size() == 0) { return; } bizCalendar.start(); }); //変更後 jQuery(document).ready(function($) { if ($("#biz_calendar1").size() == 0) { return; } bizCalendar.start(1); bizCalendar.start(2); });
bizCalendarのstart()という関数にナンバーを渡します。
これで別々のカレンダーが生成されるようにします。
カレンダーのIDがナンバー付になりますので#biz_calendar → #biz_calendar1 に変更しておきます。
②9行目~17行目
※2015/12/3追記
年度が変わる際の不具合を修正しました。
ありがとうございます。
※2017/12/4追記
カレンダーを2以上表示したときの年度変更の際に起こる不具合の修正をしました。
//元 start: function () { var now = new Date(); this.setting = { year: now.getFullYear(), month: now.getMonth() + 1, options: window.bizcalOptions }; document.getElementById('biz_calendar').innerHTML = this.getCalendar(); }, //変更後 start: function ( num ) { var now = new Date(); var year = now.getFullYear(); var month = now.getMonth() + num; if(month > 12) { ++year; month = month - 12; } this.setting = { year: year, month: month, options: window.bizcalOptions }; document.getElementById('biz_calendar' + num ).innerHTML = this.getCalendar( num ); },
- start: function (num)
で①で指定したナンバーを取得します。 - var year = now.getFullYear()
今年の年度を変数に代入します。 - var month = now.getMonth() + num;
カレンダー1は今月、カレンダー2は次月というように表示する月を変更し、変数に代入します。 - if(month > 12) {}
monthが12を超えた場合(年度が変わった場合)に変数yearを来年の年度に、変数monthから12を引いたものを変数monthに再セットします。 - var setting = {}
上記で設定した変数をsettingに入れます。 - document.getElementById(‘biz_calendar’ + num )
ナンバー付きのIDに対しカレンダーHTMLを表示するようにします。 - this.getCalendar( num )
getCalendarのstart()というカレンダーを描画する関数にナンバーを渡します。
③49行目
//元 getCalendar: function () { //変更後 getCalendar: function (num) {
②の最後で指定したナンバーを取得します。
④65行目~71行目
//元 var title = this.setting.year + "年 " + this.setting.month + "月"; var html = "<table class='bizcal' ><tr>"; html += "<td class='calmonth' colspan='4'>" + title + "</td>"; html += this.getPrevMonthTag(); html += "<td class='calbtn today-img' onclick='bizCalendar.goToday()' title='今月へ' ><img src='" + this.setting.options.plugindir + "image/today.png' ></td>"; html += this.getNextMonthTag(); html += "</tr>"; //変更後 var title = this.setting.year + "年 " + this.setting.month + "月"; var html = "<table class='bizcal' ><tr>"; html += "<td class='calmonth' colspan='7'>" + title + "</td>"; //html += this.getPrevMonthTag(); //html += "<td class='calbtn today-img' onclick='bizCalendar.goToday()' title='今月へ' ><img src='" + this.setting.options.plugindir + "image/today.png' ></td>"; //html += this.getNextMonthTag(); html += "</tr>";
- colspan=’4′ → colspan=’7′
月送りを削除するのでその分広げます。 - this.getPrevMonthTag() ~ this.getNextMonthTag()
この部分が月送りです。削除でもいいですが一応コメントアウトでソースは残すようにしています。
⑤96行目・97行目
//元 html += this.getHolidayTitle(); html += this.getEventdayTitle(); //変更後 if(num == 2) { html += this.getHolidayTitle(); html += this.getEventdayTitle(); }
ここは説明文の箇所です。
今回は2つなので2番目のみ表示するようにしています。
これを書いておかないとカレンダーごとにこの部分が表示されてしまいます。
biz-calendar.php
このファイルはプラグインの本体です。
ウィジェットの設定が書かれてありますのでその部分を変更します。
229行目
//元 echo "<div id='biz_calendar'></div>"; //変更後 echo "<div id='biz_calendar1' class='biz_calendar'></div>"; echo "<div id='biz_calendar2' class='biz_calendar'></div>";
見たまんまですね。カレンダー分DIVボックスを増やします。
クラスはCSSのために追加しています。
PHPはこれだけ。
biz-cal.css
このカレンダーのスタイルはIDで指定しているため(1つのみ使用が前提)それをクラスに書き換え複数対応できるようにします。
全て
//元 #biz_calendar //変更後 .biz_calendar
一括置換でOKです。CSSもこれだけ。
これで2つカレンダーが表示されるようになったかと思います。
あとはCSSを調整するなりしてください。
テーマディレクトリ内でカスタマイズ
プラグインディレクトリのファイルを直接変更するのは嫌だ!という場合、テーマディレクトリ内でもカスタマイズ可能です。
アップデートの対応等のためこっちの方がおすすめですかね。
ファイルの移動・書き換え
- calendar.js
- biz-cal.css
をテーマディレクトリ内にコピーして上で説明した通り変更してください。
それ以外は特に無しです。
functions.php
functions.phpにもろもろ記述していきます。
//css,jsの削除・読み込み add_action('wp_enqueue_scripts', 'rewite_bizcalendar_script' ); function rewite_bizcalendar_script() { wp_deregister_style( 'biz-cal-style' ); wp_enqueue_style( 'biz-cal-style', get_template_directory_uri().'/biz-cal.css' ); wp_deregister_script( 'biz-cal-script' ); wp_enqueue_script( 'biz-cal-script', get_template_directory_uri().'/calendar.js', array('jquery') ); $biz_option = new BC(); $biz_option->localize_js(); } //ウイジェットの再設定 add_action( 'widgets_init', 'rewrite_bizcalendar_widget_init' ); function rewrite_bizcalendar_widget_init() { register_widget( 'rewrite_bizcalendar_widget' ); } class rewrite_bizcalendar_widget extends BizCalendarWidget { public function widget( $args, $instance ) { extract( $args ); $title = apply_filters( 'widget_title', $instance['title'] ); echo $before_widget; if ( ! empty( $title ) ){ echo $before_title . $title . $after_title; } $options = get_option( 'bizcalendar_options' ); echo "<div id='biz_calendar1' class='biz_calendar'></div>"; echo "<div id='biz_calendar2' class='biz_calendar'></div>"; echo $after_widget; } }
このままコピーでも大丈夫ですが、css,jsのファイル名を変えたりサブディレクトリ内に入れたりする場合はパスを書き換えてください。
rewite_bizcalendar_script()
プラグインで読み込まれているファイルを再定義します。
- wp_deregister_****
指定されたIDで読み込まれているファイル(プラグインディレクトリのファイル)を削除します。 - wp_enqueue_****
上で削除したIDで読み込ませます。ここでテーマディレクトリに移動したcss,jsを読み込ませます。 - $biz_option = new BC();
$biz_option->localize_js();
[biz-cal-script]を削除するとオプション(イベント情報等)も消えてしまいます。
同じIDで読み込まれてるみたいですね。ですの再取得します。
rewrite_bizcalendar_widget_init()
ウィジェットの内容を書き換えるため再設定します。
下のクラスを実行するという命令になります。
class rewrite_bizcalendar_widget
プラグインファイルにあるクラス「BizCalendarWidget」を上書き処理します。
上書きする箇所はfunction widgetです。
biz-calendar.phpに書かれている同箇所のコピーで、書き換える箇所は上で説明している通りです。
これでプラグインで設定されたウィジェットの内容が書き換わり2が月分の表示になります。
ナンバーを増やして、それに応じて変更する箇所を増やせば何ヶ月でも対応できます。
そういう必要があればやってみてください。
※3年にわたって出る場合は不具合でます…あまり必要ないと思うのでこのままにしておきます。
というか、このプラグインで複数月表示という結構ニッチなカスタマイズ…需要ありますかね?
そういう作業があったからやってみたんですが。
プラグイン指定無しで複数月表示なら別のプラグイン使ったほうが楽かも。。