WordPressのカスタムフィールドでカレンダーを作成する

宿泊施設や貸会議室等の予約状況カレンダーをサイトに掲載したいという要望はこれまでも何度かありましたが、今回はWordPressで作成したサイトに簡単な予約状況カレンダーを載せたいという依頼を請けました。
そこで MTS Simple BookingEvents Manager などプラグインをいくつか試しに触ってみたのですが、なかなか顧客の要望に合致するシンプルな機能のものが見つからないので、最終的にカスタム投稿タイプとカスタムフィールドの機能を駆使して自作してみることにしました。

必要な機能の確認

今回は「派遣講師の予約状況カレンダー」を作るものと仮定します。
カレンダーの編集機能に加えて、将来的に講師の入れ替わりが随時あることを考慮すると、項目の追加と削除もクライアント側で編集可能にする必要があります。
箇条書きにまとめると次の通り。

  • 各講師ごとの予約状況をカレンダーに「◯☓」で表示。
    予約の可不可を随時編集できるようにする。
  • 講師は入れ替わりがあるので、随時追加と削除ができるようにする。

公開ページと編集画面の出来上がりイメージは下図のような感じです。

編集画面

公開ページ

クライアントの要望を実際にどのようにプログラム化するか、ノートに書き出したりデザインカンプを元に更新作業の流れを頭の中でシミュレートしてみたりして構成が決まったところで、それでは制作を開始します。

カスタム投稿タイプの追加

まずは、カスタム投稿タイプ「reservation」を作成します。
カスタム投稿タイプの追加には「Custom Post Type UI」プラグインを利用します。

Custom Post Type UI でカスタム投稿タイプを追加

プラグインを追加〜有効化して、管理メニューの「CTP UI」→「投稿タイプの追加と編集」から下記の設定でカスタム投稿タイプ「reservation」を作成します。

  • 投稿タイプスラッグ : reservation
  • 複数形のラベル : 予約状況
  • 単数形のラベル : 予約状況
  • メニュー名 : 予約状況
  • すべての項目 : 予約状況一覧
  • フロントでのリライト : false
  • メニューの位置 : 5
  • サポート : リビジョン(チェックボックスをON)※

その他の設定はデフォルトのままで基本的にOKです。
上記以外の追加ラベルは任意に設定してください。

※「Revision Control」プラグインを使用している場合は「サポート」→「リビジョン」のチェックボックスをONにするのを忘れずに。
必要に応じて、カスタム投稿タイプを追加後に「設定」→「リビジョン」でリビジョン保存数を設定しておきます。

パーマリンクの設定を更新

「Custom Post Type UI」プラグインを使用する際には、併せて「Custom Post Type Permalinks」プラグインをインストールしておきます。
カスタム投稿タイプを追加・編集した際には「設定」→「パーマリンク設定」で設定を更新しておきます。(パーマリンク設定ページの「変更を保存」ボタンをクリックするだけでOK)

投稿編集画面のカスタマイズ

次にカスタム投稿タイプ「reservation」の投稿編集画面のカスタマイズを行います。
予約状況カレンダーのカスタムフィールド部分以外は「Advanced Custom Fields」プラグインを使用します。

タイトル欄の透かし(プレースホルダー)の変更と紹介文の本文欄(コンテンツエディタ)のカスタマイズの方法については、後ほど補足します。

カスタムフィールドを独自に作成する

前置きが長くなりましたが、ようやくここからが本題。
予約状況カレンダーを編集するためのカスタムフィールドの追加を、プラグインを使わず独自に行います。

カスタムフィールドの追加については、現状あまり細かい点まで理解できていないので詳細は省きますが😅、大まかなプログラムの流れとしては次のような感じです。

【1】編集画面に独自のメタボックスを追加
【2】メタボックスに入力された情報をDBに保存

基本的なカスタムフィールドのカスタマイズ方法については、
こちらのページを参考にしました。

(参考)[ WordPress ] 独自のカスタムフィールドを設定する

編集画面に独自のメタボックスを追加

functions.php に次の記述を追加します。
add_meta_box() でメタボックスを定義して、メタボックス内に表示(echo)するhtmlを定義したファンクション内に記述します。

カレンダー部分のサブルーチン

「当月+2ヵ月分の入力フォームを表示」の箇所は実際にカレンダーの入力フォーム部分を表示するルーチンですが、長くなるので下記のように別途サブルーチンにまとめました。

祝日を取得するサブルーチン

祝日表示の要不要は特に指示されていなかったのですが、カレンダーの自作は久しぶりだったので、今回Googleカレンダーを利用する方法を試してみることにしました。
当初は他サイトを参考にGoogleカレンダーAPIから祝日を取得する方法をいくつか試したのですが、JSONの取得が何故か一向に上手くいかないので💧、今回はとりあえずiCal形式で取得する方法で実装してみました。

(参考)PHPで日本の祝日のJSONをGoogleカレンダーから取得する(API認証等不要)

メタボックスに入力された情報をDBに保存

続けて、以下の記述を functions.php に追加します。
記事保存時に $_POST[$meta_key] で受け取った値($Meta_value)を、add_post_meta() でデータベースに保存します。

「前月+当月+2ヵ月分のmeta_keyを設定」は下記のように別途サブルーチンにまとめました。
当日以前のデータはサイトの運用の都合上不要になるので、データベースの肥大化を少しでも減らすことを考慮して、前月分は空の値を上書きすることで削除(delete_post_meta)します。

カレンダー表示のCSSをカスタマイズ

最後に functions.php に下記の記述を追加して、カレンダー部分の表示を見やすく整えます。

最終的な編集画面は下図のようになります。

以上で管理ページ側のカスタマイズは一通り完了です。
プラグインを使用せずにカスタムフィールドを独自に追加できるようになると、WordPressの活用の幅がまた一段と広がりそうですね😊💕

公開ページのテンプレートカスタマイズ

公開ページ側のカスタマイズは Advanced Custom Fields などのプラグインを使用した際と同様に get_post_meta() でカスタムフィールドの値を取得します。
以下は一覧ページ(archive-reservation.php)と個別ページ(single-reservation.php)のテンプレートをこちらの「ブランクテーマ(Type1)」に組み込んだ場合の一例です。

▼archive-reservation.php

コードを表示

▼single-reservation.php

コードを表示

▼style.cssに追加

コードを表示

以上、私のプログラムスキル上さほど凝ったことはできてませんが、
何かの参考になれば幸いです😊✨

補足:タイトル欄と本文欄のカスタマイズ

カレンダー部分以外のカスタマイズについては本題から逸れるので、こちらで簡単に補足します。

タイトル欄の透かしのカスタマイズ

タイトル欄の透かし(プレースホルダー)カスタマイズには enter_title_here フックを使用して functions.php に下記の記述を追加します。

本文欄(コンテンツエディタ)のカスタマイズ

本文欄はプレーンテキストのみ入力可能に機能を限定するために、ビジュアルエディタを無効にして、さらに入力欄上部の各編集ボタンを非表示にします。

特定のカスタム投稿タイプでビジュアルエディタを無効にするには、下記の記述を functions.php に追加します。

さらにCSSで編集ボタンを非表示にします。
独自に追加したカレンダー部分のCSSをカスタマイズした際の記述に、下記の4行を追加します。

CSSカスタマイズの記述の全容は次のようになります。

オマケ:カスタムフィールド数の上限は?

余談ですが、今回のカスタマイズで数ヶ月分の予定表つまりは大量のカスタムフィールド値を一記事内で処理させるにあたり、果たしてこんなに沢山の変数を一度に送っても大丈夫なものなのだろうか?という疑問がふと浮かんだので調べてみました。

結論を言うと、サーバーの max_input_vars の設定値がどうとか、 Advanced Custom Fields プラグインを使用した場合のカスタムフィールド数の上限が60〜80個だとか、やはり上限がありました。

今回は独自にカスタムフィールドを追加した分だけで、前月・当月・翌月・翌々月の4ヵ月分約120件の値を一度に処理させています。
max_input_vars のデフォルトの上限値1,000に対してはまだまだ十分余裕があるようなので、動作も問題なく安定していますが、カレンダーの月数をもっと増やす必要があったり、他のプラグインとの兼ね合いなどで、 max_input_vars の上限を超える可能性もあることを頭の隅に留めておくと、不具合が発生した際に参考になるかも知れません🌻 

(参考)Advanced Custom Fieldsのカスタムフィールドの登録上限が max_input_varsに影響する問題の対処方法
(参考)WordPressのカスタムメニューが82個以上登録できねーおらおらーって時の対処方法

PR

DO WP 管理人