Web 制作のパートナー「パンブリュット」 Wordpress Joomla! CMS構築

WordpressでPHPライブラリを利用して、万年、祝日表示付きのカレンダーを作成する手順をご紹介します。

Wordpressでカレンダー表示やイベント管理を行う場合、多くはプラグインで事足りるかもしれません。時折、グラフィック・デザインや投稿を自由自在に表示するようなカレンダーをオリジナルで制作することがあります。

たとえば社内報でのイベントカレンダー。写真やインタビューの抜粋をマンスリーカレンダーで表示したり、日めくりカレンダーとしてサイドバーに表示したり。

今回の要件はイベント予約カレンダーです。投稿に指定日を複数もたせて、マンスリーカレンダーに投稿ページへのリンクを表示する簡単なイベントカレンダーのようなもの。カスタム投稿のメタボックスで指定日を保持し、同じ記事を複数日に表示することで、イベントの予約（もちろん予約フォームに投稿内容や日時指定を渡したりと連携させます。）をわかりやすいデザインで実装することができました。※フォームのプログラムカスタマイズにはMW WP Formプラグインを利用しています。

万年カレンダーと祝日管理

万年カレンダーをオリジナルで作成すると、毎回、祝日の管理について悩まされます。祝日は常に変更・追加されていくものなので、固定値を所持するわけにはいきません。昔は10年分だけ配列にしてメンテナンス必要な作りだったりしていましたが・・・近年はGoogleカレンダーAPIを利用してholidaysを取得利用していました。しかし、準備も少々面倒で、もっと他にいい方法はないかと探し見てみたところ、PHPでグローバル対応している休日ライブラリ「Yasumi」がありました。ライブラリ名は日本語の「休日」からとって「Yasumi」としているのがシャレてますね！　※開発者はオランダの方と思われます。

https://azuyalabs.github.io/yasumi/

そしてそもそも、万年カレンダーを毎回自力で書いていくのも面倒です。閏年など暦と計算式にいつも感動しながら・・・書き直してみたり。するのもよいですが、これもとても素晴らしいPHPライブラリがありました。

「CalendaR」です。先月、今月の月数や、開始月・終了月の指定も簡単で、しかも、日曜始まりの初日〜最終週の土曜までをワンセットでマンスリーとするので、今月以外の日にちの判断も簡単です。（リアルなカレンダーでグレー表示されている先月や来月の日付表示も簡単に実装できます。）
あらゆるカレンダー表示を生成するのに簡単に日付データを取得できるライブラリです。

http://yohan.giarel.li/CalendR/index.html

PHPライブラリをComposerで管理

「Yasumi」と「CalendaR」ライブラリをWordpressで利用するために、Composerで依存管理します。Composerをローカル環境で動作させ、vendorディレクトリをWordpressのオリジナルテーマ内やサイト内のディレクトリに作成します。購入したテーマなどを利用している場合は、更新時に上書きされないようにドキュメントルートでも問題ないと思います。

functions.phpで設置したPHPライブラリのautoload.phpをインクルードします。以下の記述をご参考ください。functions.phpでインクルードすると、テンプレート内で自由にライブラリを利用することができます。

if(!is_admin()){
    require_once('/path-to/vendor/autoload.php');
}

※管理画面では利用しないので、is_admin()をチェックします。

Composerの使い方は、説明サイトやマニュアルをご参考に！　とても簡単にライブラリを管理することができます。

https://getcomposer.org/

Yasumiで祝日の一覧を生成する

休日取得のライブラリ「Yasumi」を利用して、祝日の配列を生成します。

$holidays = \Yasumi\Yasumi::create('Japan', 2017, 'ja_JP'); // 2017年の日本の祝日を取得
$jpHolidays = array();
if($holidays){
    foreach($holidays as $holiday){
        $date = $holiday->format('Y-m-d'); // 日付形式を指定
        $jpName = $holiday->getName('ja_JP'); // 祝日名称を取得
        // 「振替休日（成人の日）」という形式で文字列が入っているので、「（休日名）」を削除しておきます。
        $jpName = preg_replace('/^振替休日 \(([^\)]+)\)/', '${1}', $jpName); 
        $jpHolidays[$date] = $jpName; // 日付文字列をキーに連想配列
    }
}

とても簡単に祝日の一覧を生成できました。

CalendaRでマンスリーカレンダーデータを取得

つづいて、カレンダーデータ生成ライブラリの「CalendaR」を利用して、マンスリーデータを取得します。

指定した年月のマンスリーデータを取得します。 

$factory = new CalendR\Calendar;
$monthData = $factory->getMonth(2017, 12);

 取得したデータから翌年、翌月、前年、前月の数字を簡単に取得することができます。

$nextYear = $monthData->getNext('begin')->format('Y');
$nextMonth = $monthData->getNext('begin')->format('n');
$prevYear = $monthData->getPrevious('begin')->format('Y');
$prevMonth = $monthData->getPrevious('begin')->format('n');

取得したマンスリーデータからテーブル表示するための「trタグ」を生成する例です。

$trTag = '';
foreach ($monthData as $week) {
// 一週間データからtr行を生成
    $tdTag = '';
    foreach ($week as $day) {
        $linkTag = '';
        $formatFullDay = $day->format('Y-m-d');
        $formatDay = $day->format('j');
                        
        // 今月以外の日付にclass追加 ※月外は「includes」で判断可能
        $tdClass = !$monthData->includes($day) ? 'out-of-month' : '';

        // 祝日のチェックとclass追加、祝日名の取得
        $holidayName = '';
        if(array_key_exists($formatFullDay, $jpHolidays)){
            $tdClass .= ' holiday';
            $holidayName = $jpHolidays[$formatFullDay];
        }
        
        // tdタグ生成
        $tdTag .= sprintf('<td class="%s">', $tdClass);
        $tdTag .= sprintf(
'<div class="date">%s<span class="holiday-name">%s</span></div>', 
$formatDay, 
$holidayName
        );
        $tdTag .= '</td>';
    }
    
    $trTag .= '<tr>';
    $trTag .= $tdTag;
    $trTag .= '</tr>';
}

 これで空っぽの月カレンダーが生成できました。とても簡単ですので是非お試しください。

2017年12月

カレンダーをスマホでみると

カレンダーや横長の表タグは、スマホサイズにフィットさせると、とても見にくい表示となります。主に横長の表、カレンダーについてはボックス要素でラップしてからテーブル幅を指定することで、スマホ表示の場合だけ横スクロールを表示させることが多いです。これならHTMLワンソースですみますし、見慣れたカレンダーの状態のまま直感的にもわかりやすい表示かな〜と考えています。

カレンダーをプラグインに頼らずオリジナルでコーディングすることで、実現できることの幅はぐっと広がります。グラフィックとあわせて特別なカレンダーをどしどし提案していきましょう！