読者です 読者をやめる 読者になる 読者になる

岡山・広島の広告パートナー ヤマト広告ブログリレー

岡山・広島エリアで広告の制作・コンサルティングを提供するヤマト広告のブログリレー。

ヤマト広告ブログリレー
岡山・広島を中心に活動する広告制作・広告パートナー。
デザインやホームページ制作、折込チラシやテレビCMなど販促物や媒体出稿、
リスティング広告などSEMやSEOなどWebマーケティング全般。

WordPressでカレンダーを作る【カスタムフィールドプラグイン】

Web Web-WordPress

f:id:yamato-ugaki:20170217202315j:plain



こんにちは、Web相談所うがきです。


最近クライアントさんのご希望でカレンダーを自作したのでそちらのご紹介。


f:id:yamato-ugaki:20170217194002p:plain

クライアントさんは営業時間が不定期らしく、日付でも曜日でも決まっていないとのこと。
それをホームページに表示したいんだけど…、ということでした。

いくつかのカレンダー系プラグインを探しましたがどれも目的とは違うため断念。
そしてあまりパソコンに強くない方らしいので、プラグインを導入して直接管理画面を触ってもらうのも…、と思っていたので思い切ってごそごそ作成しました。

要件

・パソコンが苦手でもわかりやすく。
・入力欄は少なく。
・午前と午後の入力ができる
・毎日に営業時間が入力できる
・できたら表のカレンダーのほうが見やすい
・カレンダーなので日数も変更できるように
・1ページで全部管理したい

というのが今回の目標です。

f:id:yamato-ugaki:20170217193954p:plain

と縦に並べていいのであればカスタムフィールドの繰り返し機能でループすればなんとかなるのですが少なくとも28行はあるのでかなり長くなる上に結局見づらいのではないかということで断念しました。

没ったプラグイン


f:id:yamato-ugaki:20170217195259j:plain
Biz Calender
これは色分けはできますが、営業時間が記入できないので不可。

f:id:yamato-ugaki:20170217195339j:plain
My Calender系
イベントを登録式なので、日数×午前午後=60件くらい登録しないといけないうえに
いちいち記事ごとに変更しないといけないのでかなり手間。かなり手間。

f:id:yamato-ugaki:20170217195358j:plain
Online Lesson Booking(OLB)
なんか…違う。

f:id:yamato-ugaki:20170217195414j:plain
Mts simple booking
予約じゃあないんですよね。表示も「◯」だと意味がない。
予約システムいらないのに予約機能のせいで管理画面が複雑になってしまうやつですね。



f:id:yamato-ugaki:20170217195443p:plain
理想はこちら。
そして管理画面もこのくらい簡素で1ページで完結するもの。

f:id:yamato-ugaki:20170217195522j:plain


使うもの


Advanced Custom Fields
ja.wordpress.org

拡張プラグイン ACF | Repeater Field
www.advancedcustomfields.com


ACF Repeater Field は、カスタムフィールドを任意に追加できるというもの。
たとえば画像の件数が記事によって違う、というときに同じカスタムフィールドが編集画面で繰り返し複製できるので楽!
さらにグループごとに複製することもできます。

f:id:yamato-ugaki:20170217194506p:plain


今回はそれを利用しています。

「日付」「午前時間」「午後時間」これを日数分用意して、ループで吐き出しました。

ソースコード

ソースコード、CSSはこちらでまとめました。

wp-notebook.com

私も結構無我夢中だったので言葉足らずですが、行間を読んでところどころ直していただると助かります。

拙いながらも、ぎりぎりなんとかなったなと感動しました。

ページトップ