【web制作】WordPressにGoogleカレンダーを埋め込むときにハマった

この記事では、サイト作成時にカレンダーを入れて欲しいということで実装しました。

ここで自分がめちゃくちゃハマったので内容と解決したら解決策を紹介します。解決したので後半で解説しています。

WordPressにGoogleカレンダー埋め込んだらハマった

WordPressにGoogleカレンダー埋め込んだらハマった

今回の制作で初めてカレンダーを実装することになりました。

内容はツイートの通りですがまとめると以下。

・Googleカレンダーを使って予約状況の確認

・表示まではイージーなのですぐ終わった

・週表示でして欲しいとのことで設定も簡単

・PC状態で週表示OK

・ディベロッパーツールでレスポンシブOK

・ローカルから本番環境へ

・本番環境でなぜかレスポンシブも効かない&週が月表示に変わる

という内容です。

今回、予約システムまで組んでくれということだったらプラグインですぐにできました。

ただ、要望が予約システムなしで、電話受付のみ、更新は自分でするという内容‥

それならGoogleカレンダーが更新も簡単ですし、WordPressをいじることなく予定を入れれるため採用しました。

 

ですが、現在それでどハマりしているところです。

ローカル環境ではできるのに、本番環境ではできない‥わりとこれで悩まされることが多くて、まだ勉強不足だなと感じています。

 

現場のスクショとしてはこんな感じです。

PC画面、SP画面、TB画面いずれもPC上ではOK。

では実際にiPhoneXrで見てみると以下の通りになります。

いやーどういうことやねん‥

ちなみに月表示なら全然レスポンシブになりますが、スマホで週表示にならない泣

 

現在、考えられる可能性としては

・cssの優先順位

・キャッシュが邪魔している

・スマホでは週表示できない?

の3つです。

おそらく3つ目はないかなぁ。

キャッシュに関しては消してみましたが上手くいかず‥やはり月表示になってしまいます。

そろそろ渡してカレンダーの更新をどうするか決めて欲しい段階ですが、プレリリースにすらいかないという状況に困りつつ記事を更新しています。

 

解決でき次第、この記事を更新します。

 

WordPressでスマホのみおかしい理由がわかった

 

ツイートの通り、めっちゃ簡単なことでした。

私の中で、Googleカレンダーを生成するのはできるから、どっかメディアクエリが間違っているんだ!って思っていましたが、灯台下暗しですね‥

 

そうです、Googleカレンダー生成の時点で設定を一つ忘れていました。

 

解決の手順としては、

もうみっちもさっちも行かないから最初からやり直そう!

新しくカレンダー生成

ここでの参考記事は https://t.co/SYFVUr344l https://t.co/mUpdBJP34N こちら。

で、ここで気づく、「公開条件の設定忘れてた‥」

https://t.co/SYFVUr344l https://t.co/mUpdBJP34N この記事を読んでいただければわかりますが、カレンダーを生成するときに公開条件を設定します。

この公開条件だけ変えて同じように貼り付けたらできました。

レスポンシブもOK。

 

いやめっちゃこれに時間かけました。

ハマったら最初から、本当に最初からやるべきですね。

私なんてサブドメイン取り直してまでやりました笑

しかしカレンダー生成の部分に疑いを出せなかった自分はまだまだ未熟だなと思います。

 

疑うときは全てをうたがって、1つ1つ消去していく。

救急活動と同じですね。

疑う病態を1つ1つ否定して病院選定する。

 

やっと終わった!

これでなんとかなりそうです。

 

つまったら最初っから全部疑いましょうね。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です