フッター用の共通情報を登録する – WordPress実践制作【WPCafe編】

2025/10/22
PRACTICE
カフェサイトを作ろう
0comments
31views
約5分で読めます
8

前回、SCSSでCSSを効率的に管理する環境を構築しました。

今回は、フッターに表示する情報を登録していきます。内容的には、SNS情報の登録方法の復習になります。

以前、固定ページ「共通情報」にSCFを使ってSNS情報を登録しました。今回も同じ方法で、問い合わせ先や営業時間を追加していきます。また、ACFを使って住所とGoogleマップの情報も登録します。

すでに学習済みの内容なので、手順を確認しながらスムーズに進めていきましょう。

SCFで問い合わせ先を追加

電話番号やメールアドレスなど、問い合わせ先を複数行登録できるようにします。

フィールドの作成手順

Smart Custom Fields → 新規追加

基本設定：

タイトル: 問い合わせ情報（任意）
サブフィールド追加ボタンをクリック
繰り返し: ON
グループ名: opt_contact_list

サブフィールド1

タイプ: テキスト
ラベル: アイコン
名前: opt_contact_icon

サブフィールド2

タイプ: テキスト
ラベル: 連絡先
名前: opt_contact_text

表示条件の設定

表示条件で「固定ページ」を選択
投稿 / 固定ページのIDで固定ページ「共通情報」を選択
公開をクリック

注意点

固定ページ「共通情報」が非公開になっていると選択できません。一時的に「公開」状態に変更してから設定を行い、設定完了後に再度「非公開」に戻してください。

SCFで営業時間を追加

曜日別の営業時間を登録できるようにします。

フィールドの作成手順

Smart Custom Fields → 新規追加

基本設定：

タイトル: 営業時間（任意）
サブフィールド追加をクリック
繰り返し: ON
グループ名: opt_open_list

サブフィールド1

タイプ: テキスト
ラベル: 曜日
名前: opt_open_week

サブフィールド2

タイプ: テキスト
ラベル: 営業時間
名前: opt_open_time

表示条件の設定

表示条件で「固定ページ」を選択
投稿 / 固定ページのIDで固定ページ「共通情報」を選択
公開をクリック

ACFで住所を追加

住所とGoogleマップの埋め込みコードを登録します。

なぜSCFではなくACFを使うのか？

今回、住所にはACFを使用します。それぞれのプラグインの使い分けは以下の通りです。

SCF: 繰り返し項目（複数行のデータ）を管理する場合
ACF: 単一項目（1つだけのデータ）を管理する場合

住所は複数登録する必要がないため、ACFを使用します。

フィールドの作成手順

カスタムフィールド → 新規追加

タイトル: 住所

フィールド1

フィールドラベル: 住所1
フィールド名: opt_address1
フィールドタイプ: テキスト

フィールド2

フィールドラベル: 住所2
フィールド名: opt_address2
フィールドタイプ: テキスト

フィールド3

フィールドラベル: 地図
フィールド名: opt_map
フィールドタイプ: テキストエリア

表示条件の設定

設定でこのフィールドグループを表示する条件を設定します。

「固定ページ」「等しい」「共通情報」を選択

これで、固定ページ「共通情報」にのみこのフィールドグループが表示されます。

データの登録

固定ページ「共通情報」を編集して、実際のデータを入力していきます。

以下のデータはあくまでもサンプルです。実際のサイト制作では、お店や企業の実際の情報を入力してください。練習で作成している場合は、架空の情報や自由な内容を入力して構いません。

住所情報

住所1	`〒100-0001 東京都千代田区千代田1-1`
住所2:	`バーチャルビルディング100F`

問い合わせ情報

以下の３つの連絡先を登録します。

アイコン	連絡先
`<i class="fa-solid fa-mobile-screen"></i>`	`012-345-6789`
`<i class="fa-regular fa-envelope"></i>`	`sample01@wp-ch.jp`
`<i class="fa-brands fa-line"></i>`	`@sample01.wp-ch.jp`

営業時間

以下の３つの営業時間を登録します。

曜日	営業時間
`月-金`	`AM6:00 - PM11:00`
`土`	`AM11:00 - PM5:00`
`日`	`定休日`

Googleマップの埋め込み

フッターには店舗の場所を視覚的に伝えるため、Googleマップを表示します。

Googleマップは、HTMLの<iframe>タグを使って簡単にサイトに埋め込むことができます。今回は、Googleマップから取得した埋め込みコードを、先ほど作成した「地図」フィールドに保存します。

このコードをフッターで取得して表示することで、訪問者が店舗の場所をすぐに確認できるようになります。

埋め込みコードの取得方法

ブラウザでGoogleマップを開く
目的の場所を右クリックしこの場所を共有を選択
地図を埋め込むタブを選択
HTMLをコピーをクリック
WPに戻り共通情報ページの「地図」テキストエリアにペースト
「共通情報」ページを保存

貼り付けたコードについて

貼り付けたコードは以下のような形式になっています。

<iframe src="https://www.google.com/maps/embed?pb=..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

<iframe src="https://www.google.com/maps/embed?pb=..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>