普段、ワードプレスの構築方法について相談を受けることがあるのです。
その時に、ご自身のサロンとか飲食店などを経営する方から、「ワードプレスにカレンダーを埋め込みしたい」とご相談されることがあります。
最初にお伝えすると、簡単にワードプレス内にカレンダーを設置するなら「Googleカレンダー」がオススメです。
Googleカレンダーは、Googleが無料で提供するスケジュール管理のサービスです。
Googleカレンダーは、個人の予定とは別で、共有できるスケジュールを作ることができるのが便利です。
今回は、ワードプレスの記事内に簡単に埋め込みする方法を解説します♪
Googleカレンダーを利用するには、Googleアカウントの登録が必要になります。
Googleアカウントをお持ちではない方は、こちらの記事を参考に作ってみてください。
＞ Gmailアドレスの作成方法を解説！ネットビジネスには専用メールアドレスが必須！
目次は読みたいところをタップして飛べるよ♪
YouTube動画でも解説しました
Googleカレンダーとは？
Googleが無料で提供している、クラウド上でスケジュール管理ができるサービスのことです。
Googleのアカウントさえあれば、誰でも使用できます。
- １アカウントで複数のカレンダーが作成できる。
Googleカレンダーは、１つのアカウントで複数のカレンダーを作成することができます。
ですので、個人用、会社用などと分けることができます。
- 共有して、カレンダー管理をすることが可能。
例えば、
会社で複数人で仕事のスケジュールを共有
ホームページでお店の営業日、予約状況をお知らせ。
このようなビジネスシーンでも活躍してくれます。
- パソコン以外に、Android、iOS用のスマホアプリでも利用可能。
Googleカレンダーは、パソコンだけではなく、スマホやタブレットでも使えます。
専用のアプリがありますので、アプリをダウンロードして使ってください。
Android:Googleカレンダー -Google Play
iPhone/iPad:Google カレンダー -App Store
Googleカレンダーの作成方法
Googleカレンダーの作成手順は以下の通りです。
- 公開用のカレンダー「スケジュール」を作成
- カレンダーに予定を書き込む
- ワードプレスにGoogleカレンダーを埋め込みする
この記事の解説は、PC版のGoogleを使って解説しています。スマホ・タブレットの場合、若干操作が変わりますが、同じような項目を見つけて進めてみてください。
まずは、Googleカレンダーを開いてください。
こちらからアクセスするとGoogleカレンダーが開きます。
ちなみに、普段、Googleカレンダーを開くならこちら。
Google検索画面を開き、右上にある9個の点をクリックして、その中から「カレンダー」を見つけます。
これでGoogleカレンダーが開きました♪
では、カレンダーを開いた状態からやっていきましょう！！
公開用のカレンダー「スケジュール」を作成
左側の「マイカレンダー」の下にある「他のカレンダー」の「＋（他のカレンダー追加）」を開きます。
「新しいカレンダーを作成」をクリックします。
新しいカレンダーを作成が開くので、名前の欄に「❶タイトルを入力」して、カレンダーを作成を「❷クリック」します。
カレンダーを作ったら、「マイカレンダー」に追加されています。
カレンダーに予定を書き込む
カレンダーに予定を入れる時は、予定を入れたいところを選んでクリックします。
すると、下図のようなポップアップが開きますので、こちらに予定を入れます。
上から
- タイトルを入力します
- 日付、時間を入力します
- （毎週繰り返す場合は「繰り返さない」をクリックして、毎週とか選択します）
- （場所がある場合は追加します）
- 作ったスケジュール（この画像の場合は、予約状況）を選択します
全ての入力が完了したら、右下の「保存」をクリックします。
ちなみに、ワードプレスにカレンダーを埋め込みした後にスケジュールに入れ込みしても、ちゃんとスケジュールは反映されますので安心してくださいね！
ワードプレスにGoogleカレンダーを埋め込みするための埋め込みコードを取得
カレンダーに予定を書き込んだら、ワードプレスにGoogleカレンダーを埋め込みしてみましょう。
Googleカレンダーの左側にある「マイカレンダー」から公開用のカレンダー名を見つけます。
公開用のカレンダーにマウスを持っていくと、３つの点をクリックします。
その後に「設定と共有」をクリックします。
カレンダー設定が開きますので、【アクセス権限】の項目の「一般公開して誰でも利用できるようにする」にチェックを入れます。
チェックを入れると、警告が表示されますので「OK」をクリックします。
次に、カレンダー設定の下の方にスクロールして【カレンダーの統合】という項目を見つけて、「カスタマイズ」をクリックします。
カスタマイズをクリックすると、表示するカレンダーの設定ができるので、細かな設定を行います。
カスタマイズで調整するときに、注意が必要なのが、カスタマイズ項目の下の方にスクロールして「表示するカレンダー」のチェックを確認してください。
※公開したいスケジュール以外はチェックを外しましょう。
レイアウトが決まったら、カレンダーの上にある「埋め込みコード」をコピーします。
ワードプレスにGoogleカレンダーを埋め込みする
埋め込みコードを取得したら、ワードプレスの埋め込みしたい場所に埋め込みコードを貼り付けしていきます。
埋め込む場所によって、埋め込みコードの貼り方が変わるので、今回は、ウィジェットで貼るときと、固定ページなどの編集エディターで貼るときとお伝えします。
ウィジェットを使って、Googleカレンダーを埋め込む
トップページの下の方に埋め込む場合にウィジェットを使います。
テーマによって、ウィジェットの場所が変わるのですが、基本的にトップページの下の方だったら「トップページ下部」「インデックスリストボトム」とかになります。
そのウィジェットにカスタムHTMLでコードを貼り付けします。
❶まずは、ワードプレスのダッシュボードから「外観」→「ウィジェット」をクリックします。
❷ウィジェットのページが開きますので、左側から「カスタムHTML」を見つけたらクリックして、「インデックスリストボトム」（テーマによってはトップページ下部ウィジェット）を選択して「ウィジェット追加」をクリックします。
❸カスタムHTML内にコピーしたコードを貼り付けし、「保存」をクリックします。
埋め込みするとこんな感じになります。
以上がウィジェットで、Googleカレンダーの埋め込みをする方法になります。
投稿内に埋め込む方法
お問い合わせページなどの中に、Googleカレンダーを埋め込む方法をお伝えします。
埋め込みしたいページの投稿編集画面を開きます。
編集ページを開いたら、埋め込みしたい場所にカーソルを一度合わせて、左上の「＋（ブロックの追加）」をクリックします。
ブロックの一覧から「カスタムHTML」を見つけて、クリックします。
HTMLを入れ込む欄が入りますので、コピーしたコードを貼り付けてください。
コードを貼り付けしたら、「プレビュー」で確認ができますので、確認をしてみてください。
↓
これで、投稿内にも入れ込みができるようになりました♪
Googleカレンダーをレスポンシブ対応させたいとき
Googleカレンダーの埋め込みができてテンションが上がるところではあるのですが・・・
スマホで Googleカレンダーを表示させてみると、表示が縦長になってしまっているのです。
別にそんなにおかしいわけではないけど、もうちょっとスッキリサイズにならないかなぁ・・・ってことで、スマホ表示を調整したいと思います(^O^)／
まず、スマホ表示させるには、以下のコードが必要になるので、こちらをコピーします。
/* Googleカレンダー（スマホ表示） */
.googleCalender iframe {
width:100%;
max-width:800px;
height:400px;
}
/* Googleカレンダー（PC表示） */
@media (min-width: 960px) {
.googleCalender iframe {
height:600px;
}
}ワードプレスのダッシュボードから「外観」→「カスタマイズ」をクリックしてカスタマイズを開きます。
カスタマイズが開きますので、「追加CSS」をクリックします。
追加CSSにコピーしたコードを貼り付けします。
コードを貼り付けしたら、右上にある「公開」をクリックします。
これで、追加CSSの入れ込みが終わりました。
次に、先ほど、ウィジェットや投稿ページに埋め込みしたGoogleカレンダーのコードに追加するHTMLを入れ込みします。
<div class="googleCalender">
Google カレンダー埋め込みコード
</div>Googleカレンダーのコードの前後にHTMLのコードを入れてください。
これで、保存（更新）したら完成です。
コードの埋め込みが終わったら、実際の表示を確認してみてください。
すっきりした表示になりました(^O^)／
以上で、Googleカレンダーのレスポンシブ対応は完了です♪
まとめ
今回は、 Googleカレンダーをワードプレスに埋め込みする方法を解説しました。
おさらいをすると以下の通りです。
- 公開用のカレンダー「スケジュール」を作成
- カレンダーに予定を書き込む
- ワードプレスにGoogleカレンダーを埋め込みする
この流れで埋め込みをすると、簡単に誰でもスケジュールをワードプレスで表示させることができます。
ぜひチャレンジしてみてください。
ブログアフィリエイトの基礎知識を分かりやすく丁寧に丸っと公開中！！
メルマガに登録すると、シークレットサイト「Escape from Zero」にご招待します。このシークレットサイトでは、ブログアフィリエイトの基礎を順序立てて解説しております。
メルマガの登録は無料！配信解除はいつでもOK！ 登録はこちら↓
ラッコキーワードの詳細をチェック
ワードプレスのことが分からなすぎてすぐに立ち止まってしまう…
そんなあなたのために有料ワードプレス専門のコミュニティ「MastePress®︎ーマスタープレスー」を作りました。
すぐに質問できる環境で
ワードプレス構築が加速する！
WordPress専門コミュニティ
「MasterPress」の主宰をしています！