LocalでWordPress環境構築
前ステップにてインストールを行ったLocalにて、新規にWordPressサイトを作成します。
手順は下記サイトを参考にして下さい。
なお手順の途中にあるログインIDとパスワードは下記で設定してください。
- サイト名
- wpcafe
- ユーザー名
- admin
- パスワード
- mode2025
- メールアドレス
- dev-email@wpengine.local（初期値のまま）
※ ここではローカル環境で実習用に作成するサイトのため簡単なパスワードで設定しています。公開するサイトではもっと複雑なパスワードを設定してください。
WordPressサイトを作成するLightningテーマの導入
Lightningテーマを使うと簡単にビジネスサイトの雛形を作ることができます。
導入は下記ページの手順に沿って、【VK FullSite Installer】プラグインを導入して、【ご利用の流れを見る】からすべてのステップを完了させてください。
実習用素材ファイルのダウンロード
素材ファイルサイトの基本情報の編集
「サイトのタイトル」と「キャッチフレーズ」「サイトアイコン」を変更します。
-
編集ページ:【外観 > カスタマイズ】
-
【サイト基本情報】を選択
-
下記内容に編集します。
- サイトのタイトル
- WP CAFE
- キャッチフレーズ
- 名古屋でいちばん人気のカフェ
- サイトアイコン
- 【画像】icon.pngを指定
-
右上の【公開】をクリックして完了
色の設定
共通ボタン色など、サイト全体のキーカラーとなる「メインカラー」を変更します。
-
サイドメニューから「色」を選択
-
キーカラーに【#3f1f0d】を指定
-
右上の【公開】をクリックして完了
ヘッダーの編集
ヘッダー/フッターにあるロゴと「グローバルナビゲーション」を編集します。
ロゴの編集
-
ロゴ右上にある編集ボタン（鉛筆マーク）をクリック
-
サイドメニューの【ヘッダーロゴ画像】から画像を編集
-
同様の手順でフッターにあるロゴも変更します。
ここまで出来たら[×]を押してカスタマイズモードを終了します。
ページの整理
Lightningスターターセットであらかじめ登録されている固定ページが多数あり、今回作成するサイトには不要なページがあるためそれらは削除して逆に足りないものは追加します。
今回のサイトで用意するページは以下8ページになります。(子ページ無し。すべて第1階層の親ページのみ)
- ホーム
- お知らせ
- 店舗案内
- メニュー
- 採用情報
- お問い合わせ
- サイトマップ
- プライバシーポリシー
- 不要な固定ページを下書きに設定
- 編集が必要な固定ページの基本情報を修正
- 新規追加が必要な固定ページの作成
不要な固定ページの下書き設定
-
編集ページ:【固定ページ > 固定ページ一覧】
-
不要なページ固定ページの先頭のチェックボックスにチェックを入れます。下記11ページが対象です。
- サービス案内
- ホームページ制作（新規・リニューアル）
- SEO対策・Webマーケティング支援
- 保守・運用サポート
- このサイトについて
- VK Blocks ボタン
- ページレイアウトサンプル
- １カラム
- １カラム（サブセクション無し）
- ２カラム
- サイトコンテントの上下余白無し
-
対象ページにチェックを入れたら、ページ下部の「一括操作」から「編集」を選択し適用をクリックします。
-
一括編集画面が表示されるので「ステータス」を「下書き」に変更し、更新をクリックします。
ページのタイトルとスラッグの変更
編集が必要なページのタイトルとスラッグを変更します。
変更対象の固定ページは以下になります。
- 会社案内
-
- タイトル: 会社案内 → 店舗案内
- スラッグ: company → shop
- 更新情報
-
- タイトル: 更新情報 → お知らせ
- スラッグ: information（変更無し）
スラッグはページを識別するURLの一部分にあたるものです。
- ドメイン名
- https://xxxx.com
- スラッグ
- information
のページは、https://xxxx.com/information というURLでアクセスできます。
そのため、上記のようにスラッグをinformation→shopに変更することで、URLも
https://xxxx.com/information
↓
https://xxxx.com/shop
のようなかたちに変更されることになります。
-
対象ページの【クイック編集】をクリックします。
-
編集窓が表示されるので、タイトルとスラッグを指定のものに変更して【更新】をクリックして確定します。
ページの新規追加
現状のページ構成で不足している【メニュー】ページを追加します。
-
編集ページ:【固定ページ > 固定ページを追加】
-
ページタイトルを「メニュー」と入力します。
-
右側の固定ページメニューバーから【スラッグ】項目をクリックして、表示された入力窓にてパーマリンクを「menu」に設定します。
この操作によりページのURLが/menuに設定されます。
-
ページ右上の【公開】をクリックして確定します。
-
ページ左上のアイコンを押してページ編集モードを抜けます。
グローバルナビゲーションの編集
ページの整理が完了したらグローバルナビゲーションを設定します。グローバルナビゲーションに置くページは以下になります。
- ホーム Home
- お知らせ News
- 店舗案内 Shop
- メニュー Menu
- お問い合わせ Contact
-
編集ページ:【外観 > カスタマイズ > メニュー > HeaderNavigation】
-
表示されているメニューをカスタマイズして、以下の操作を行います。
- 【下書き】として登録されているページを全て削除
- ページの順番を変更（ドラッグで移動できます）
- 【メニュー】ページを追加
操作が完了すると以下のレイアウトになります。
-
追加した項目の表示が崩れてしまっているため、英語表記のメニュー名を追加します。
【メニュー】をクリックして、【説明】欄に「Menu」を入力します。
【お知らせ】も同様の手順で設定します。
「説明」が表示されていない場合は、ひとつ前の画面に戻ってください。
「メニューをカスタマイズ中です」の右にある歯車マークをクリックし、「説明」にチェックを入れると、表示されます。
フッターの編集
ロゴ下プロフィールの編集
下記プロフィールテキストを変更します。
-
フッター部分にあるプロフィールアイコンをクリック
-
左側メニューでテキストを編集
- テキスト
- 〒450-0002
愛知県名古屋市中村区名駅４丁目２７−１
総合校舎スパイラルタワーズ B1F
TEL : 052-111-2222
フッターサイトマップの挿入
フッターにあるSNSの埋め込みを削除して、フッターサイトマップに置き換えます。
-
最初に【フッターサイトマップのパーツ】を作成します。
編集ページ:【外観 > カスタマイズ > メニュー】
-
【メニューを新規作成】をクリック
-
【メニュー名】に「フッターサイトマップ」を入力して【次へ】をクリック
-
下図の内容になるように項目を追加してメニューを編集
-
【公開】をクリックしてメニューを保存
-
フッター部分にあるSNSの編集アイコンをクリック
-
SNSアイコンパーツと置き換えるために、先に現在登録されているSNSアイコンパーツを削除します。
左側メニュー内のからメニューを展開して【削除】をクリックします。
-
facebookパーツのあった右側ブロックにて、ブロックを追加する「+」マークをクリックして追加ウィンドウを開きます。
検索窓に「メニュー」を入力して【ナビゲーションメニュー】を選択します。
-
【メニューを選択】項目で「フッターサイトマップ」を選択します。
右側プレビュー画面でメニューに置き換わっているのを確認します。
-
下記の状態になっていれば完成です。
CTAの編集
全ページに共通でページフッターに配置されている↓のコンタクト訴求エリアをCTA（Call to Action）といいます。
下記の手順で変更します。
-
編集ページ:【CTA】
-
【お問い合わせCTA】の【編集】をクリック
-
他のページと同様に編集します。
- テキスト変更
-
ご依頼及び業務内容へのご質問などお気軽にお問い合わせください
↓
貸切や各種イベント開催も承ります。お気軽にお問い合わせください
- 電話番号表記ボタンの変更
- 電話番号を【052-111-2222】に変更、「受付時間…」のテキストを下記に変更
【営業時間：10:00〜19:00（水曜定休）】 - 【メールでのお問い合わせ】ボタンの変更
- 「2営業日…」のテキストを下記に変更
【お気軽にお問い合わせください】