wordpressスマホ対応サイト・wpプラグイン・検索体験最適化・SNS・ 動画・bgmやテーマ曲を駆使して、リアルビジネスへの集客を達成するためのコラム!

   

wordpress屋のマルチメディアコンテンツ制作読んどけ☆コラム

googleカレンダーとメールフォームで、予約受付ってできるの?iframeレスポンシブに気をつけて

   

こんにちは、管理人@SS_mshpです。

今回は、googleカレンダーとメールフォームで、予約受付ページを作ってみます(うまくいくかは微妙です)。

画像はfreeimages.comさんからお借りしました。席数が多い飲食店や、広いヘアサロン・複数学科で生徒が多いスクールなどは、専用の予約システムが便利です。しかし、そこまで大きいシステムが必要でない場合、googleカレンダーとメールフォームを使って営業案内&予約受付ができるのでしょうか?

■まずはgoogleカレンダーの設定をしよう

■新しいカレンダーを追加(ページ用)


googleカレンダーのページにアクセスしましょう。(googleアカウントがない方は、事前に登録してください)
上のほうにある、ねじみたいなアイコンをクリック。


カレンダーを追加』というのがあるので、ここで新しいものをつくります。プライベート用すでに使っていて、それとは別にしたい場合は。


タイトルは合うものをつけます。管理人の場合は『wpサイトコンサル予約』としました。『一般公開して利用できるようにする』にチェックをつけることで、サイト上に公開してユーザーが見ることができるようになります。

この場合『個人情報は書かない(○○さまご予約など)』『まちがってプライベート用などにチェックをつけない(公開されます)』という点に気をつけます。

■googleカレンダーをサイトに貼り付けるときのコードは?


上記のページを下にスクロールしていくと『iframe src』で始まるコードが出ています。このコードを表示したい場所に貼り付けると、カレンダーがサイト上で表示されます。

しかし、このコードが曲者なんですよかなり。詳細は後のほうで。

■あとは受付できる日を書いていく!○△×を使うと見やすいよ


表示されたとき大丈夫なように、受付できる日をカレンダーに書いていきます。スマホの小さい画面でも分かりやすいよう『○△×』を使ってもokです。定休日には×をつけておくのも忘れずに!

■googleカレンダーのレスポンシブ対応について(CSS)

■レスポンシブ対応しないと??


iframeの枠だけデバイスにあわせて、中身はレイアウトにあわせないというのが発生しました。その場合、写真のようにカレンダーがつぶれて、文字が見えなくなります。これではどこをタップしてよいかわかりません。

また、この場合はiframeの枠だけレスポンシブでしたが、iframeの指定がなんもない場合は『カレンダーがそのままの大きさで表示されて、スマホだと火曜日あたりまでしか見れない』というのもあるようです。

■googleカレンダーのレスポンシブ対応するCSSはある

検索してみたところ、3061.jp @FUJIDENKIさんという方のサイトで、カレンダーをレスポンシブにするCSSがありました。
https://3061.jp/google-calender-responsive-code/

検索するといろいろCSSが出てくるので『キーワード:googleカレンダーレスポンシブ』状況に応じて、使いやすいものを選んでください。

■上記のCSSを入れても、googleカレンダーのレスポンシブがエラーになる場合

管理人の環境では、上記のようなCSSをいれても、googleカレンダーのレスポンシブがエラーになりました(縦サイズはつぶれたまま)。

理由はワードプレスのテーマで『iframe(youtubeなど)指定している部分が既にあり、干渉していた』という点です


上記の干渉しているCSSをカットすることにより、スマートフォンでタップして表示できる広さになりました。

この場合youtubeは、『埋め込むときは320サイズ固定にする』『カレンダー・youtube個別にCSS指定』『問い合わせのページだけ、対応できるCSSを出力』などの対策が考えられます。

■googleカレンダーとメールフォームでつくった予約ページ例

■PC版予約受付ページ

メールフォームを埋め込んで、同じページ内でカレンダーを見ながら問い合わせメールが送れるようにしたページです。文面とかは工夫の余地があります。

■スマートフォン版予約受付ページ

ちょっと文字が小さいですが、レスポンシブ対応をかけたので、文字がタップできるようになります。左側に『○△×』があったほうが、お客さんが選びやすいでしょう。ホットペッパーグルメとかも、予約ページに行くとカレンダーに○×が出るので、この形式に慣れている人は多いと思われます。

■メールフォームは、カレンダーと同じページにおいたほうが良いの?

メールフォームは、ワードプレスのショートコードをつかって、『カレンダーと同じページ内』に入れました。カレンダーとメールフォームが別々だと、PCタブブラウザならあまり気になりませんが、スマホで確認するたびにページ移動が発生するので、非常に操作が大変になります

このやり方でおこなう場合は、『同じページ内に埋め込める』メールフォームがあると、非常に有利です。

■あとがき・まとめ

とりあえず、レスポンシブさえどうにかすれば、そこそこ形にはなります。カレンダーを埋めるときも、スマホでgoogleカレンダーにアクセスして行えるので、新しく難しいツールを覚えたりしなくてよいのはメリットかと思いました。

キャパが小さめな『スクール/教室/出張コンサル・サロン・飲食店』などまでは、活用しだいで対応できます。宿泊施設などは、複数の部屋から選ばなければならないので、このシステムでは対応できません。

後ほど、ワードプレスプラグインでの予約システムもやってみたいと思います。

*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

【カテゴリ】 - webサイト制作 【タグ】 -

Message

メールアドレスが公開されることはありません。

  関連記事

【PHPでWPカスタマイズ】プラグイン不使用で、テーマに関連記事表示機能を実装しPV・滞在時間を上げる

今回は、サイトをしっかり見てもらうために、『WordPressサイトに、 …

PHP・shuffleやarrayを使った、画像ランダム表示方法~メインビジュアルやバナー・テキストにも利用可能

今回は、以前お取引先のスクールの担当者さまと、『サイトのメインビジュアル …

wordpress構成ファイルのxmlrpc.phpを無効化する方法【実は攻撃されやすい】

今回は、wordpressの構成ファイルで、ちょっとクセのある『xmlr …

【別に止めなくてOK】wordpressサイトなどに、アメブロ・fc2など無料ブログの更新情報を表示して連携する方法

今回は、『無料ブログにすべきかwordpressにすべきか』という疑問に …

【マテリアルデザインCSSフレームワーク】Materializeで、カッコいいビジネスサイト(静的HTML)を作る

今回は、フレームワークを使ったサイト制作を行ってみます。 利用するのは『 …

【wordpressカスタマイズ】llorix_oneなどビジネストップ1カラムテーマで、カスタマイザーで入らない動画・オーディオを入れる

今回は、人気の海外ディベロッパーのwordpressテーマで、動画やオー …

【WPカスタマイズ】子テーマさえ入れとけば大丈夫?なわけねーだろ!(親テーマに手を入れる・ファイルコピー適応させる羽目になる事例)

今回は、推奨されてるWPの子テーマについてですが、『結局親テーマいじる羽 …

【セキュリティ・脆弱性対策2018】wordpressでサイバー攻撃されやすいファイルってどんなのがあるの?

今回は、wordpress利用者にも気になる『サイバー攻撃』についてです …

ワードプレスでデータベースにたまる余計なデータって何があるの?事例と対処方法

今回は、ワードプレスのサイトでよくある『データベースにたまる余計なデータ …

【WPカスタムフィールドはこう使う】カップ焼きそばレビュー記事に、カスタムフィールドで評価スコアを(CSSつけ方もあり)

今回はwordpressの機能『カスタムフィールド』で、より具体的に利用 …

【PHPで条件分岐】wordpressのサイトで、ページごと(固定・記事・カテゴリ・複数ページ)に、表示される内容を変えたいっ!

今回は、wordpressのサイトで使われるPHPプログラムの条件分岐で …

wordpressの仕組み~ヘッダーに入ってくるCSSは、どのように出力されるか(wp_headにcustomize_cssをadd_action)

今回は、自分のフリー曲素材サイトのチューニングをしてて、wordpres …