営業時間専用カレンダーを作って、サイトに表示する

Image

コワーキングスペース八王子 8beat の準備もオープンまであと11日ということでいよいよ佳境に入ってきました。まだサイトがオープンできていませんで、その準備で「営業時間専用のカレンダーを作って表示してみよう」と思いました。 Googleカレンダーを使って簡単にできたので書いてみます。

Googleカレンダーで営業時間専用のカレンダーを作る

Image

Googleカレンダーで マイカレンダー>新しいカレンダーを作成 をクリックします。

Image

カレンダー名: に 営業時間 と入力して、カレンダーを作成をクリックします。

元の画面に戻るので、

Image

作られた 営業時間 カレンダーの右にある▼をクリックして、カレンダー設定をクリック。

Image

このカレンダーを共有 タブをクリックします。

Image

このカレンダーを一般公開する にチェックを入れて 保存 をクリックします。これで公開できるカレンダーができました。

Image

こんな感じにタイトルにも営業時間を入れてみました。

Image

そうすると1ヶ月のカレンダーを表示したときにもすぐに営業時間が分かります。

WordPressウィジェットにショートコードで今日の営業時間を表示する

以前「Googleカレンダーからある日の予定を表示するショートコード」で作ったショートコードを利用してウィジェットでサイドバーに営業時間を出したいと思います。feedのurl取得方法などについてはこちらをご参照ください。

Image

ダッシュボード 外観>ウィジェット をクリック

Image

利用できるウィジェット から、テキストをクリックして

Image

右上にある メインウィジェット にドラッグします。

Image

こんな感じにショートコードを書いてみます。feed=に書いてあるのは先ほど作った営業時間カレンダーの「カレンダーのアドレス:xml」で表示したフィードのurlです。これで表画面を見ると、

Image

なんていうことでしょう…、ショートコードが解釈されていません(^_^;。ということでググります。

WordPressのウィジェットでショートコードを使う方法add_filter

というページを発見、

というコードを使っている子テーマのfunctions.phpに追加すればいいらしいのでやってみます。

Image

表示されました。営業が始まれば毎日営業時間が入っているのですが、まだオープン前なので時間が入っていません。実際にどういう表示になるかを見たいので、時間が入っているオープンの日(+11日)を表示してみます。ショートコードを

このように11日後の日付(plus=11)、で指定します。

Image

こんな感じで表示されました。大丈夫そうです。

タイトルを出さないとかデザインを調整してみる

先ほど1ヶ月のカレンダーで出してもおかしくないようにタイトルにも営業時間を入れた関係で時間が2つ表示されてしまいました。日付は出るのでタイトルは表示しない設定にしてみたいと思います。

といっても、ショートコードからタイトル付きで返ってきてしまうのでオプションで出す/出さないが指定できるようにします。

ショートコードで表示しているのは、タイトル/時間/場所/説明です。それぞれ引数を、title/time/place/description として表示したくない場合は title=none のように指定しておけば表示しないという仕様にしてみます。もうひとつついでに日付の枠がウィジェットに表示する時邪魔になることがあるので、日付の枠も消せる仕様にしたいと思います。これは dayborder=none でできるようにします。

子テーマのfunctions.phpにtitle/time/place/description の引数を追加します。

日付を編集する部分のコードを

このように変更して、指定があればborderは出さないようにします。

feedを編集するfunctionにもこのパラメータを追加して渡し、functionにも引数を追加。

それぞれの項目の前に、非表示の指定が無ければ編集するというようなif文を付けます。このコードだと実際にはnoneとかでなくどんなことばでも入っていれば非表示になるのですが、厳密にする必要も無いかなと思うのでこんな感じにしてみました(^_^;。

そして title=none と dayborder=none を追加して表示すると、

Image

このように日付の枠線が消えて、時間だけが表示されるようになりました。

このテーマの場合このままだと見えにくいので、

背景を白くして、文字を#333に

Image

こんな感じにしてみました。HTML的な表現はウィジェットの編集画面でテーマに合わせて色々変更してみるといいかと思います。

まとめ:Googleカレンダーに営業時間専用のカレンダーを作って、ショートコードを置くだけ

色々書いてきましたが、最終的には

1.Googleカレンダーに営業時間専用のカレンダーを作る
2.ウィジェットにショートコードを追加して本日の予定を出す(テスト用にplus=11としましたがこの引数を付けなければ本日の予定になります)

これだけでサイドバーに営業時間を表示することができます。HTML的な表現はそれぞれのサイトで調整してください。

できあがったfunctions.phpはこちらに置いておきます。よろしければ自己責任の範囲でお使いください(^^)/
functions

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/ 無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
トップへ戻る