[chat face=”sh-hatena2.png” name=”シオリ(嫁)” align=”left” border=”red” bg=”red”] wordpressにカレンダーを表示させるのってどうするの? [/chat]
[chat face=”wanpoint1.png” name=”トカッチ(夫)” align=”left” border=”blue” bg=”blue”] それならGoogleカレンダーを使うと簡単だよ! [/chat]
こんにちは、夫婦ブロガーのトカッチです。
wordpressに専用のカレンダーを表示させたいときってありますよね。個人ブログでは必要ないかもしれないけど、企業サイトやECサイトなどはカレンダーを表示させることによってユーザビリティ向上につながるので可能なら取り入れておきたい項目です。
今回は、
- ワードプレス(WEBサイト)にカレンダーを実装したい。
- 営業日や祝日を表示させたい
- スケジュールなどをワードプレスに表示させたい。
そんなお悩みを解決できればと思います。
有料プラグインや専用のカレンダーをプログラマに開発してもらう方法もありますが、最初はお金をかけずに実装していきたいですよね。
ってことで、今回は無料でカレンダーを実装できる方法として一番簡単なGoogleカレンダーをwordpressに実装する方法をご紹介していきます。
[chat face=”annnai.png” name=”トカッチ(夫)” align=”left” border=”blue” bg=”blue”] よろしくお願いします。 [/chat]
Googleカレンダーの設定
既存のGoogleカレンダーを使うのも良いですが、せっかくなのでwordpressに表示させる用に新しいカレンダーを作ってみましょう。
グーグルカレンダー画面を開いて「他のカレンダー」の右側に「+」マークをクリック。(ちなみに今は「他のカレンダー」と表示していますが、少し前まで「友達のカレンダー」って表示されていました。)
「新しいカレンダーを作成」を選択し、クリックします。
新しいカレンダーの名前を付けます。説明の欄は未記入でも構いません。
入力が終わったら「カレンダーを作成」の青いボタンをクリックしましょう。これだけでwordpressに表示させる用の新しいカレンダーを作ることができました。
ここまでは簡単ですね。
wordpressに表示させるGoogleカレンダーの設定
wordpressに表示させたいカレンダーの右側のマークにマウスカーソルを合わせます。
「設定と共有」をクリック。
設置画面で、アクセス権限という項目があるので、「一般公開してだれでも利用できるようにする」にチェックをしてください。
忘れやすいので注意が必要です。
真ん中ぐらいに表示されている「カスタマイズ」のリンクボタンをクリックします。
お好みで適当にカスタマイズした後、問題なければ画面上部にある「埋め込みコード」のURLをコピーします。
で、wordpressに貼り付ければ完了です。
wodpressのビジュアルコード画面でコピーしてきたGoogleカレンダーのコードを貼り付けてもうまくいきません。必ずテキストエディタに切り替えてからコピーしたURLを貼り付けるようにしましょう。
プレビューで表示を確認すると上記のような感じになります。
wordpressの固定ページに貼り付けましたが、投稿ページやサイドバーなどにもURLを貼り付ければ表示することができますよ。
手順は変わらないので参考にしてみてください。
スマホで見るとこんな感じで表示されます。
狭苦しい感じがしますがしょうがないですね。表示できるだけありがたいです。
まとめ
Googleカレンダーをwordpressで表示させるのはそんなに難しくありません。手順に沿って進めていくだけでできるので簡単にできて助かりますね。
ネットサーフィンなどをしていてもGoogleカレンダーを表示しているサイトは数多く見ることができるので、どんな使い方をしているのか参考にしてみるとよいかもしれません。
Googleカレンダーでスケジュールを管理すれば、いちいちwordperssで編集せずともスケジュールを反映させることができます。しかもGoogleカレンダーの編集は技術も知識もなく直感で作業できるのがいいですね。
[chat face=”sh-hirameki.png” name=”シオリ(嫁)” align=”left” border=”red” bg=”red”] とっても簡単だね! [/chat]
[chat face=”oshieru.png” name=”トカッチ(夫)” align=”left” border=”blue” bg=”blue”] 簡単にできるのでお勧めの方法だよ! [/chat]
トカッチでした!
コメント