TOPページ
TOPページはキービジュアルのスライド部分と、その下のコンテンツを編集します。
スライドの変更
-
カスタマイズメニューから[Lightning トップページスライドショー]を選択します。
-
表示設定で[スライドを表示する]を選択します
-
スライド画像とスライドタイトル、スライドテキストを編集します。
- スライド画像
- PC: slide01〜03.jpg
SP: slide01〜03_sp.jpgのファイル - スライドタイトル(1枚目のみ)
- 都会の喧騒を忘れ、至福の瞬間を。
- スライドテキスト(1枚目のみ)
- 心地よい香りに包まれて。都会の中のオアシスで、
美味しいコーヒーと共にくつろぎのひとときをお楽しみください
また今回スライド内のボタンは設置しないので、設定済みの【ボタンのテキスト】と【スライド画像リンク先URL】の値を削除（＝空にする）します。(削除するとボタン自体の表示がなくなります。)
-
既存のスライドを削除します。カスタマイズモードを抜けて、固定ページの【HOME - フロントページ】から設定します。
編集ページ:【固定ページ > 固定ページ一覧 > HOME - フロントページ】スライダーアイテムを選択して、アイコンが画像の通りの「スライダーアイコン」になっていることを確認して、メニューを開き削除をクリックします。
スライド配下のコンテンツ設定
スライド配下のコンテンツは固定ページの【HOME - フロントページ】から設定します。
各コンテンツの編集内容は以下の通りです。
ブロックごと削除
- 店舗名
- WP CAFE
- 店舗名下部
- About Shop
- 説明文
-
名駅から徒歩10分、
スパイラルタワー地下一階にあります。〒450-0002
愛知県名古屋市中村区名駅４丁目２７−１
総合校舎スパイラルタワーズ B1F
TEL : 052-111-2222
タイトルを【お知らせ】に変更、内容はそのまま
新規でブロックを作成し、下記内容でコンテンツを作ります。
- ■ 見出し
- おすすめメニュー
- ■ メニュー内容
-
- ココア
- 寒い冬にはあたたかな幸せ、一杯のココア。
- 自家製チーズケーキ
- 濃厚でクリーミー、そして口どけの良さが魅力の当店自慢のチーズケーキ。
- 至福のカルボナーラ
- 当店のシェフが厳選した素材で仕上げたこの一皿は、贅沢な味わいをお約束します。
見出しは[見出し]パーツ、コンテンツは[カラム]パーツを使って3カラムで作成します。※カラムパーツは初期では出ていないので、「カラム」で検索して表示させます
すでにコンテンツを追加済みのブロック内に項目を追加するとき、親ブロックがうまく選択できない場合があります。その場合は、親ブロックを手動で選択してください。
以上の内容を反映した最終完成形は以下のようになります。
お問い合わせページ
お問い合わせページは【固定ページ】（ページ全体のレイアウト）と、【Contact Formプラグイン】（フォーム部分）の2つで作られています。
フォームの中身に当たる場所は②から、それ以外は①から設定します。
編集ページ②の箇所はContact Formというプラグインを使って作られたフォームコンテンツです。
このプラグインを使うと、元々WordPressにはないお問い合わせフォームの機能を実装できます。
参考: 【完全版】Contact Form 7の基本と使い方まとめ
Contact Formで作ったフォームコンテンツは【ショートコード】と言われるWordPressの機能によって、固定ページ内の自由な位置にフォームを埋め込むことができます。
ショートコードは以下のような形式で記述します。
[contact-form-7 id="5" title="お問い合わせ"]
今回のサイトでは、下図に示した2箇所の項目を削除します。
メニューページ
固定ページで用意した【メニュー】ページのコンテンツを追加します。
記載するコンテンツ
Drink
- Coffee
- 食事と共に楽しめるコク深く甘い余韻のオリジナルブレンドです。
- （S）￥330 （M）￥380 （L）￥430
- Latte
- しっかりとした苦みとミルクの甘さを楽しめるヨーロピアンな味わいです。
- （S）￥380 （M）￥430
- Tea
- ベルガモットフレーバーを使用しており、華やかな香りが楽しめます。
- ￥330
- Cocoa
- なめらかな口当たりと濃厚なコクを感じられるココアです。
- （S）￥380 （M）￥430 （L）￥480
Cake
- 北海道産かぼちゃのシフォンケーキ
- キャラメルソースを混ぜ込んだシフォンケーキに、北海道産かぼちゃ100%のクリームをトッピングし、天面にはピスタチオダイスを散らしました。
- ￥490
- 北海道産クリームチーズケーキ
- 北海道産のクリームチーズを使⽤した爽やかな味わいのレアチーズケーキです。
- ￥450
- ベルギー産チョコレートケーキ
- 天面にはチョコレートクリームとココアパウダーをトッピングしました。チョコレートの甘さとココアパウダーのほろ苦さがマッチしたケーキです。
- ￥450
- イタリア栗のモンブラン
- イタリア産の栗を85％使用したモンブラン。中にはマロンホイップを組み合わせた濃厚感のあるケーキです。
- ￥490
Food
- 半熟たまごと3種チーズのカルボナーラ
- 程よい卵感と、3種チーズ（パルメザン、チェダーモッツァレラ）を使用し、チーズのコクが感じられるバランスのとれた一品です。
- ￥840
- 洋食屋さんのナポリタン
- 洋食屋さんのフライパンで丁寧に作られるナポリタンをイメージして仕上げた、トマトの旨味を感じられる一品です。
- ￥720
- トーストサンド BLT
- レタス、トマト、ベーコンを組み合わせた定番BLTサンドをシーザーサラダ風味のソースを合わせました。
- ￥520
- トーストサンドふわふわタマゴ
- ふわふわ食感のスクランブルエッグと旨味のあるパストラミポークを挟んだクリエで人気のトーストサンドです。
- ￥520
【yStandard Blocks】プラグインの導入
メニュー項目は【カラム】パーツで追加しますが、WordPress標準の【カラム】パーツでは複数行に渡る項目の作成ができません。
【yStandard Blocks】プラグインを導入することで、複数行カラムを追加できる【カスタムカラム】パーツが選択できるようになります。
【yStandard Blocks】プラグインの導入は以下の手順で行います。
（※ このプラグインはWordPress管理画面内からの検索で導入できないため、下記の手順でインストールする必要があります。）
-
下記ページを開いて、ページ中盤にあるダウンロードボタンからyStandard Blocksプラグインを一旦PCにダウンロードします。
(※ダウンロード後の解凍は不要です)
-
【プラグイン > 新規プラグインを追加】を開き、ページ上部の【プラグインアップロード】をクリックしてSTEP1でダウンロードしたファイルを選択します。
-
【yStandard Blocks】プラグインをインストールして、有効化します。
有効化すると投稿ページのブロックの追加操作にて、下記のように【カスタムカラム】が選択できるようになります。
完成イメージ
メニュー項目を追加した最終完成形は以下のようになります。
- 各カテゴリ内のメニューリストは【カスタムカラム】パーツを使って挿入します。
- カテゴリ間の余白は【スペーサー】または【レスポンシブスペーサー】パーツを使って挿入します。
レスポンシブスペーサーはLightningテーマ用に組み込まれた追加パーツです。（VK Blocksプラグインの機能）
WordPress標準の【スペーサー】パーツと比べて、PC/SPで余白の高さを変えることができるようになっています。
レスポンシブスペーサーパーツを配置すると、右側メニュー詳細な設定ができます。
この画面で下図のように【余白の設定】項目にて「カスタム」を選択することで、PC/タブレット/SPそれぞれの余白高が設定できるようになります。
店舗案内
こちらのページは指定のデザインはありません。
今まで学んだ操作方法で自由にコンテンツを編集してみてください。
店舗案内ページ内【アクセス】エリアにGoogle Mapsの地図が表示されていますが、こちらの変更方法です。
基本的にはGoogle Mapsから「埋め込みコード」を取得して、WordPress管理画面上で設定する流れとなります。
-
ブラウザでGoogle Mapsを開き、埋め込みたい地図の場所を検索します。
-
「地図を埋め込む」タブをクリックして「HTMLをコピー」をクリックします。
-
WordPressの管理画面内にて、コピーした地図埋め込みコードを貼り付けます。
(※ 新規で埋め込みブロックを追加する場合は【カスタムHTML】ブロックを作り、そこに貼り付けます。)