WordPressテーマ”Snow Monkey”でエステサロンサイトを作る方法

WordPressをインストールした際に決めたユーザ名とパスワードを入力してログインします。

こちらが管理画面になります。

管理画面左側の「設定」→「表示設定」から、
「検索エンジンがサイトをインデックスしないようにする」
にチェックを入れて変更を保存しておいてください。

実務でサイトを納品する前にはここのチェックは外して大丈夫ですが、
デモサイトをGoogleにインデックスさせると同じようなサイトが検索上に溢れてしまうのでインデックスしないように設定しておいてください。

「外観」→「テーマ」から上部の「新しいテーマを追加」をクリック。

「テーマのアップロード」より購入した「snow-monkey.zip」というテーマファイルをアップロードします。

インストールできたらテーマを有効化します。

これでSnow Monkeyのテーマがインストールできました。

ライセンスキーがある人はこのタイミングで設定しておきましょう。
（画像の赤枠箇所に「ライセンスキーはこちらで設定できます」となければ画面左下の「設定」→「Snow Monkey」からライセンスキーを設定できます）

テーマの購入時に発行されたライセンスキーを入力して保存します。

有効になれば設定は完了です。

「プラグイン」→「新規プラグインを追加」から

「Snow Monkey」と検索します。

今回は

• Snow Monkey Forms
• Snow Monkey Editer
• Snow Monkey Blocks

この３つのプラグインをインストールします。

インストールし終わったら全て有効化しておきます。

本記事ではWordPressのバージョンは6.6.2
Snow Monkeyのテーマは27.2.0
プラグインはここに書いてあるバージョンで制作していきます。
他のバージョンで制作される方は画面の遷移などが多少違うところもあるかもしれないので注意してください。

ダッシュボードの「投稿」→「新規投稿を追加」から記事を作ります。

サンプルなのでタイトルや中身は自由に入れておいてください。
（素材集にあるテキストをそのまま使用いただいてもOKです！）

「投稿」のタブから、
カテゴリーに「お知らせ」というカテゴリを追加して、設定しておきます。

アイキャッチ画像もメディアライブラリの中から設定しておきます。

プレビューで見てみると、

「この投稿へのコメント」「この投稿へのトラックバック」という欄が表示されています。

この表示を消したい場合、編集ページに戻って「投稿」のタブの、
ディスカッションという項目の「受け付けません」にチェックを入れて、
「ピンバックとトラックバックを許可」のチェックを外すと消すことができます。
これで記事を公開することができました。

同じように記事を合計4つ作ります。

デフォルトでHello world!の記事がある場合は削除しておいてください。

今のままだとお知らせカテゴリのリンクが「/category/お知らせ/」と日本語になっています。

日本語のままだと

• 見にくく長いURLになる
• 意味を持たない文字列となる
• 長いとシェアされにくくなる
• SEO対策にネガティブな影響を与える可能性がある

これらの理由で日本語のままはよくないとされているので、英語に直しておきます。

「投稿」→「カテゴリー」をクリックして

お知らせを編集。

スラッグからURLを変更することができるので
「news」
にしておきます。

更新するとリンクを変更することができます。

サイト基本情報を選択。

①ロゴを選択からサイトロゴを設定。
先ほどアップロードした画像の中から選択。
※ロゴの画像は切り抜かなくて大丈夫です。

②サイトのタイトルとキャッチフレーズも入力しておきます。

③コピーライトも変更します。
※コピーライトは試用版のテーマで使っていると変更できないので、有料版の方のみ変更してください。

④サイトアイコンも設定します。

これでサイト基本情報の設定は完了です。

公開をクリックしないと保存されないので注意してください。

※公開しても反映されていないように見える時はリロードすると反映されます。

「メニュー」→「新規作成」をクリックしてメニューを追加していきます。

メニュー名は何でも構いませんが、今回はnavigationと入れておきます。

メニューの位置は

• グローバルナビゲーション
• ドロワーナビゲーション
• フッターサブナビゲーション

にチェックを入れておきます。

「次」をクリックして、メニューの項目を追加していきます。

ページ名を入力して「＋追加」をクリックすると新規固定ページを作成できるので、
今回制作する固定ページを一気に作っておきます。

• Neigeについて
• 施術メニュー
• お問い合わせ

のページを作成します。

さらに、カテゴリーの項目から先ほど追加した
「お知らせ」
を追加して、順番も変更しておきます。

ちなみにメニューの項目を↑のように下げると、
メニューに階層をつけることもできます。

今回は使わないので戻しておきます。

さらに今回は「ご予約」という項目を追加しておきます。
今回は「ご予約」というメニューをクリックすると外部リンクに飛ばす想定をしています。

例えばホットペッパービューティーなどの外部サイトに飛ばす場合は、カスタムリンクからURLと文字列を設定して追加できます。

今回はYahooの検索エンジンに飛ばすように設定します。

外部リンクに飛ばすときは、サイトの離脱率を下げるために
別タブで開くように設定することが多いので、
「リンクを新しいタブで開く」
にチェックを入れておきます。

最後にご予約とお問い合わせのメニューの順番を入れ替えておきます。

これでメニューは完成です。

先ほど入力した文字がそのままパーマリンクになるので、
日本語ではなく英数字にしておきます。

パーマリンクは各固定ページのクイック編集→スラッグから編集することができます。

他のページも同じようにURLを変更しておきましょう。

変更し終わったら先ほどのメニューに戻ります。

ちなみに先ほど「メニューの位置」にチェックを入れましたが、チェックを入れた箇所について補足しておきます。

グローバルナビゲーションにチェックを入れると
PC版のヘッダーにメニューが追加されます。

ドロワーナビゲーションはスマホ版の右上にハンバーガーメニューが追加されます。

最後はフッターナビゲーション。

フッターナビゲーションにチェックを入れるとコピーライトの上にナビゲーションを追加できます。

ホームページの表示は最新の投稿か固定ページを選ぶことができます。
今回は「固定ページ」を選択して、「ホーム」というページを追加します。

また、コンテンツエリアといって、
メニューの下からフッターの上のエリアにデフォルトで余白を付けたい場合にチェックを入れまずが、今回はチェックは外しておきます。

このチェックは入れたままでも問題はないので、デザインに合わせて設定しましょう。

これでホームページ設定は完了です。

次に「デザイン」の設定をしていきます。

基本デザイン設定から設定していきます。

①アクセントカラーはカラーコード#b69979

②サブアクセントカラーは#ede8e4を使用します。

基本のフォントサイズや文字間も変更できますが、今回はデフォルトのままで進めます。

③フォントも複数ある中から選択することができるので、どのようなフォントがあるのかは実際に確認して頭に入れておくといいです。今回は「Noto Serif JP」を使用します。

④ロゴの拡大率も変更できます。
今回はモバイル版は30%で、PC版は50%にしておきます。

その他の項目ではコンテナーの最大値や見出しのデザインを設定することができますが、デフォルトのままにしておきます。

次にデザインの中のヘッダーを設定していきます。

①ヘッダーのレイアウトはデフォルトでは中央ロゴになっていますが変更することで左に縦並びにしたり、1行にすることができます。

今回は1行で設定しておきます。

②グローバルナビゲーションの配置も変更できますが、
今回はデフォルトのままで右に設定しておきます。

③はPC用ヘッダー位置もここから変更することができます。

今回は上部固定にしておきます。

④グローバルナビのホバーエフェクトも変更することができます。
今回は伸びる下線に変更しておきます。

⑤ヘッダーの文字色も変更できます。
今回は#523c42を設定しておきます。

フッターの設定ではフッターのレイアウトを変更することができますが、今回はデフォルトのままにします。

次はドロワーナビゲーションの設定です。

ここではハンバーガーボタンの位置を変更できますが、デフォルトのままにしておきます。

検索ボックスはチェックを外して非表示にしておきます。
そうするとドロワーナビゲーション内の検索ボックスが非表示になります。

すぐに反映されないので公開をクリックして保存をして、リロードして確認します。

このように検索ボックスが非表示になっています。

メインビジュアルはセクション（ブロークングリッド）を追加します。

他にも「セクション（背景画像/動画）」や「ヒーローヘッダー」など、メインビジュアルとして使えるブロックはたくさんあるので、色々と試してみてください。

①ブロックが追加できたらブロック設定から大枠のタグを「div」から「section」に変更。

②タイトルタグは「none」に変更。

③メディアライブラリから先ほどアップロードした画像を設定します。

④画像サイズも調整しておきましょう。今回は＋50%にしておきます。

そして左側に段落のブロックを追加してキャッチコピーを入力します。

段落のブロックで改行させたいときは「Enter」を押すと改行されずに新しいブロックが追加されるので、「Shift＋Enter」を押すようにしましょう。

そして文字の大きさやフォントのサイズは
Snow Monkey Editorコントロールというところから変更してください。

文字の大きさを4XL、

文字色を「#523C42」に変更します。

フォントの太さも太字にしておきます。

Macの方は「⌘＋B」Windowsの方は「Ctrl＋B」でも太字にできます。

ショートカットキーは覚えておくと作業効率化にもなるので、触りながら少しずつ覚えていきましょう。

次にタイトルの上を画像で装飾させたいので、インライン画像を使います。

インライン画像から次の画像を選択します。

大きさも変えられるので、幅を300にしておきます。

最後にセクションの幅を全幅にします。

プレビューで確認します。

ヘッダーとセクションの上にパディングがあるので埋めておきます。

セクションを選択してパディングをなしにしておきます。

これでメインビジュアルは完成です。

大枠のタグをセクションに変更。
タイトルタグはh2のままにします。

ブロック設定にタブをスタイルに切り替えてタイトルの装飾は無しにしておきます。

メディアから画像を設定します。

タイトル・サブタイトル・段落を入力します。

テキストの行間が詰まっているので高級感を持たせるために行間を開けておきます。

テキスト全体を選択した状態で行の高さを変更。

今回は2.5にします。

そしてテキストの下にボタンを追加します。

ボタンブロックを選択します。

「READ MORE」と入力。

「⌘＋B」で太字にしておきます。

ボタンの遷移先はABOUTページにしておきたいので、
リンクを設定しておきます。

「/about」と入力しておきましょう。

ボタンサイズも変更できるので、
今回は「少し広め」にしておきます。

ボタンの角丸も変更できます。

今回は四角いボタンにしたいので0pxにしておきます。

これで左側のブロックは完成です。

右側の画像の背景にシャドウをつけたいので調整していきます。

影の設定から色を「#F8F6F4」に変更します。

位置も調整できるので、
「水平方向に-20」
「垂直方向に25」
で設定しておきます。

画像サイズは「0%」、
コンテンツサイズは「-10%」、
重なり具合は「10%」で設定しておきます。

最後にこのセクションも全幅にします。

タイトルに「施術メニュー」と入力。

サブタイトルには「MENU」と入力します。

メニューには「項目」というブロックを追加します。

バナーを追加して画像を設定します。

デフォルトでは1行あたり2カラムの設定になっているので、
3つ並ぶようにします。

そしてタイトルとリード文を入力します。

タイトルは「3XL」、リード文は「XL」に文字サイズを変更します。

コンテンツとテキストの位置を中央に変更しておきます。

今のままではテキストの視認性が良く無いので、背景画像にマスクをかけておきます。

オーバレイから黒を設定して、不透明度を「0.5」に変更します。

バナーをクリックした際のリンク先は先ほどのボタンと同じように設定できますが、ここは下層ページが出来上がってから設定します。

バナーが1つ完成したので複製して画像と文字を差し替えていきます。

複製は「⌘ or Ctrl＋Shift＋D」でもできます。

複製したら画像と文字を差し替えます。

各項目の間の余白をくっつけます。

そしてセクションの背景にテキストを入れることもできます。

①背景テキストにテキストを入力します。

②文字サイズは「6XL」に設定して、色をLight grayに設定します。

③不透明度を0.1にすると薄くテキストが表示されます。

現状だとタイトルと重なっていて見えにくいので、
セクションの上側に3XLのパディングをつけておきます。

タイトルとサブタイトルを入力します。

今回は最近の投稿というブロックを追加します。

このブロックは投稿記事を新着順で表示することができて、

①カテゴリーの絞り込みも可能です。

②先ほど作ったNEWS記事を3つ並べておきます。
表示する投稿数も変更することができます。

③レイアウトも変更できます。
今回はシンプルというレイアウトで設定しておきます。

記事の情報もどこまで出すかを変更できるので今回は著者は非表示にします。

ここではセクション（背景画像 / 動画）を使っていきます。

大枠のタグを「section」に変更。タイトルの装飾は無しにしておきます。

タイトルとサブタイトルを入力します。

そして背景画像に画像を設定しておきます。

主張しすぎないようにオーバレイを白に設定して不透明度も0.8にしておきます。

今回のように背景に画像を設定すると雰囲気も出るのでデザインの引き出しとして他の制作にも活かしてみてください。

左側にサロンの情報。右側にGoogleマップを埋め込んでいきます。

セクションの中身はカラムというブロックを使って、カラム数が2つ（50:50）のレイアウトを選択します。

まずは左側のカラムに段落ブロックを追加してサロンの情報を入力します。

その下には営業時間を表にした画像を入れます。
画像ブロックを追加してメディアライブラリから営業時間の画像を選択します。

次に右側のカラムにGoogleマップを埋め込んでいきましょう。

マップを埋め込むときはカスタムHTMLというブロックを使います。

Googleマップで取得したコードを入れるとマップを埋め込むことができます。

今回は適当な地図を埋め込んでおきます。

埋め込みたい場所をブラウザで検索して「共有」から、

地図を埋め込むをクリックすると埋め込み用のコードをコピーできます。

ここでプレビューで確認してみます。

↑のように地図を埋め込むことができました。

左のカラムと高さを揃えたいのでマップの高さを320pxに調整しておきます。

これでカラムのコンテンツは完成です。

ただ、今のままだとセクションの幅に制限があるので、背景画像が途中で切れています。

なのでセクションの幅を全幅に設定しておきます。

これで画面いっぱいに背景画像を埋めることができました。

保存をして新しいタブでプレビューでページ全体を確認します。

今回は高級感を出していきたいので、全体的に余白は広めに取るようにします。

ABOUTセクションのスタイルから
セクションの上下にパディングを「2XL」つけておきます。

NEWSとINFORMATIONのセクションも同様にパディングをつけておきます。

これでセクション間の余白は調整できました。

次にコンテンツの縦のラインも見ておきます。

コンテンツの縦の位置が意図せずにガタガタになっている場合は整頓しましょう。

メニューのバナーと最新の投稿と上のセクションのテキストを揃えたいので
MENUとNEWSとINFORMATIONの
セクションのコンテンツの最大幅を1160pxに設定します。

「1160pxってなんで一発で分かるの？」と思うかもしれませんが、僕の方で事前に1120pxだったり1180pxだったり色んなパターンで調整しているので一発で分からなくても大丈夫です。実務ではプレビュー画面で確認しながら少しずつ調整する形で問題ありません。

固定ページから「Neigeについて」を開いて、まずはアイキャッチ画像の設定。

↑の画像をアイキャッチ画像として設定します。

今のページをプレビューで見るとタイトルはアイキャッチ画像の上にきておらず、右側にサイドバーがついているレイアウトになっています。

この部分は必要ないので固定ページのテンプレートをデフォルトから1カラムに変更します。

そうすると右側のサイドバーは表示されなくなります。

テンプレートの変更は1ページずつ変更してもいいですが、外観カスタマイズから一括で変更できるので、今回は一括で変更します。

「外観」→「カスタマイズ」→「デザイン」。

ABOUTページを開くと、「固定ページ設定」という新しい項目が出てきます。

ここからページレイアウトを1カラムに変更。
そうすると他の固定ページも一括で変更することができます。

アイキャッチ画像の位置もページ「ヘッダーの上にタイトルを表示」に変更するとタイトルをアイキャッチ画像の上に表示することができます。

アイキャッチ画像の背景色は後でCSSを使ってカスタマイズするので一旦はこのままにしておきます。

これでレイアウトの変更は完了です。

あとはブロックを使いながら3つのセクションを作っていきます。

先ほどのトップページで作ったようにセクションを作ります。

ここではセクション（サイド見出し）を使います。

大枠のタグをsectionにしてスタイルも装飾無しのタイトルに変更。

タイトルとサブタイトルも入力します。

右側には段落ブロックにテキストを入力します。

このテキストは雰囲気を変えたいので行の高さを2.5に変更します。

そして見出しのカラムとコンテンツのカラムのスペースが空きすぎているので、
見出しカラムのサイズを25%にしておきます。

これでコンセプトのセクションは完成です。

次にギャラリーのセクションを作ります。

セクションブロックを追加して、他のセクションと同様に作っていきます。

ここではスライダーというブロックを使用します。

画像をスライダーとして流すことができるブロックになるので画像を選択していきます。

スライド数も変更することができるので今回は3にしておきます。

そして画像のアスペクト比がバラバラな時は統一することもできます。

今回は16:9にしておきます。

矢印やドットを表示するかも選択できます。

デフォルトでは自動でスクロールしない設定になっているので、
3秒経ったら次の画像にスライドするように設定しておきます。

これでスライダーを作ることができました。

次にSTAFFのセクションを作ります。

セクションブロックを追加して、他のセクションと同様に作っていきます。

ここではカラムブロックを使って3カラムに分けておきます。

画像を追加して写真を選択します。

画像を丸くしたいのでスタイルから角丸を選択します。

画像の下には「ボックス」というブロックを追加します。

段落の中にテキストを入れていきます。

文字の大きさや色も変えておきます。

名前をXLにして、英語はXSに変更。

文字色はアクセントカラーに変更して太字にします。

その段落の下にもう一つ段落を追加して、テキストを入れていきます。

そしてボックス内のテキストを中央寄せにします。

ここでデバイスによって改行を入れることもできるので、試してみます。

例えばPC版だけテキスト内に改行を入れたいとしたら、
Snow Monkey Editorの「画面サイズ毎の改行」から
PC版だけ改行を入れることができます。

次にボックス内の余白を調整していきます。

ボックスを選択してパディングとマージンをつけておきます。

パディングは縦が「S」横が「XS」、
マージンは縦に「S」をつけて調整します。

背景色も変更できるので「#F8F6F4」を設定しておきます。

これでボックスは完成なので複製して画像とテキストを差し替えます。

以上でスタッフのセクションは完成です。

最後にセクション間の余白を調整します。

CONCEPTのセクションは、
上のパディングを「XS」にして下は「2XL」にします。

残りのセクションはそのままでいきます。

まずはアイキャッチ画像を設定しておきます。

今回は↑の画像を設定します。

そしてページを作成します。

セクションを追加して他のページと同様に設定していきます。

ここではメディアとテキストというブロックを使用します。

まずは画像を設定します。

画像の位置を左側に持ってきて、カラムのサイズを50%に変更します。

次に右側のカラムを作っていきます。

タイトルタグはセクションのタイトルがh2なので、ここではh3にしておきます。

タイトルを入力して文字サイズを「XL」に変更します。

段落を追加して説明文を入力します。

その下ではボックスのブロックを使用します。

ボックスの中には情報のブロックを追加して金額を入れていきます。

ラベルに時間を入力して、右側に段落を追加して金額を入力。

複製して内容を変更します。

行と行の間にスペースができているので、情報の枠線から調整することができます。

今回は1pxにしておきます。

そしてメディアとテキストの背景色を「#F8F6F4」に変更します。

ボックスの背景色も白にして枠線はアクセントカラーに設定して角丸を0pxにしておきます。

もう一つのメニューは今作ったメニューを複製して、画像とテキストを差し替えます。

セクションのパディングも調整しておきます。

上に「XS」、下に「XL」のパディングをつけます。

現状だと少しメニューのコンテンツが大きいのでコンテンツの幅を調整します。

コンテンツの最大幅を960pxにしてバランスを整えます。

これでBODYのセクションは完成なので、
このセクションを複製して残りのセクションも作っていきます。

フェイシャルメニューのセクションは画像とテキストを差し替えるだけで完成です。

脱毛メニューのセクションはメニューが一つなのでタイトルタグはnoneにします。

そして右側のカラムにはテーブルというブロックを使用します。

表についてはトップページで作成したように表を画像で作ったものを埋め込むこともできますがテーブルブロックを使って作ることもできます。

テーブルの中に情報を入力していきます。

テキストを中央揃えにして、テーブルの背景色は白にしておきます。

最後に画像を差し替えます。

これでメニューページの各セクションを作ることができました。

トップページで各メニューへ遷移するバナーのリンクを設定していなかったので設定していきます。

下準備として、今作った各セクションにタグを付けておきます。

セクションのブロックを選択して高度な設定からHTMLアンカーに「body」と入力。

残りの2つのセクションも同様に設定しておきます。

FACIALセクションには「facial」、HAIR REMOVALセクションには「hair-removal」と設定します。

これで先ほど作ったトップページに戻ります。

各メニューのバナーのリンクはここから設定できます。

このように「/menu#body」と設定しておくと、
メニューページのbodyというタグを付けた箇所に遷移するようになります。

残りの2つも設定します。

ちなみに新しいタブで開かせたいときは
「高度な設定」から変更することができますが、
今回は同じサイト内なのでチェックは不要です。

これで設定できたので、実際のページで動きを確認しておいてください。

カテゴリーページは固定ページではなくて、
「外観」→「カスタマイズ」から設定していきます。

デザインを開いて、見ているページをトップからお知らせページに変更すると
②に新しい項目が出てきます。

「【お知らせ】カテゴリーページ設定」からカテゴリー名のタグの色を変更したり、
アイキャッチ画像を設定することができます。

今回は↑の画像をアイキャッチ画像として設定しておきます。

さらに「アーカイブページ設定」から
ページのレイアウトやアイキャッチ画像の位置を変更することができます。

今回は固定ページと同じようにレイアウトは「1カラム」、
アイキャッチ画像の位置は「ページヘッダーの上にタイトルを表示」にしておきます。

また、1ページあたりに表示する投稿記事の数も変更することができます。

「設定」→「表示設定」から1ページに表示する最大投稿数を変更することができます。

今回は4つしか記事を作っていないので、表示数を3件にしてみます。

変更を保存して、どのように表示されるか確認します。

このようにページネーションが出てきて2ページ目が作られるので、
1ページあたりの表示数が多いなと感じたら表示数を絞ってみてください。

今回はSnow Monkey Formsというプラグインを使用します。

管理画面のSnow Monkey Formsから新規投稿を追加。

お問い合わせとタイトルを入力します。

入力項目はここから作ることがでますが、
今回はデフォルトで設定されている３つに加えて、

↑のように電話番号の入力とお問い合わせ種別が選択できるようにして、
各項目の頭に必須か任意か分かるようなバッジをつけていきます。

まずは項目を増やすためにリストを表示して項目を複製します。

ラベルを変更します。

Eメールもメールアドレスに変更します。

メッセージもお問い合わせ内容に変更します。

変更し終わったら各ラベルの頭に入力必須か任意か分かるようにバッジをつけます。

必須と入力して半角スペース。

必須を選択した状態でここのメニューからバッジを選択。

色はアクセントカラーにします。

電話番号は任意にします。バッジをつけて色をグレーに変更。

残りの項目も同じなので、コピーして貼り付けます。

あとは各項目の中身を設定していきます。

お名前はそのまま、
電話番号の中にあるemailは削除して、
プラスボタンからこちらのTelを設定します。

お問い合わせ種別はラジオボタンを使います。

OPTIONSの中に選択肢を入力しますが、
ご予約について、料金やプランについて、その他と入れておきます。

そして選択肢を横並びにしたいのでブロック設定から方向を横に変更します。

また、項目を入力必須にするかどうかは↑のバリテーションで設定できます。

お名前とメールアドレス、お問い合わせ種別、お問い合わせ内容は必須に、
電話番号は任意にしておきます。

これで入力画面は完成です。

次にフォーム設定を開くをクリックして、フォームの設定をしていきます。

上から設定していくと、まず確認画面を使用すると
プログレストラッカーを使用するにはチェックを入れておきます。

確認画面を使用するにチェックを入れておくと
送信ボタンを押した後に送信内容の確認画面のページに遷移してから
メッセージを送信するようなフォームになります。

プログレストラッカーについては後で説明をします。

次にフォームスタイルはいくつか種類があるんですけど、
今回は「Letter」を選んでおきます。

あとはメールの設定をしていきます。

まず、ここにはお問い合わせがあった時にメール通知がくるアドレスを設定しておきます。

件名もそのままでも大丈夫ですが、
分かりやすいように変更しておきます。（【Neige】お問い合わせ通知）

本文については、後で変更しますが、
一旦これで公開してお問い合わせページを作っていきます。

まずは↑の画像をアイキャッチ画像として設定します。

セクションを追加して大枠のタグをsecitonに変更。

タイトルタグは無しにしてコンテンツの幅をスリム幅にしておきます。

そしてセクションの中にSnow Monkey Formsのブロックを追加します。

フォームは先ほど公開したお問い合わせを選択します。

これでプレビューで確認します。

このようにお問い合わせページを作ることができています。

先ほどチェックを入れたプログレストラッカーは赤枠で囲んでいる箇所ことで、
お問い合わせする人がどの状況なのか分かるようになっています。

一旦テストでお問い合わせをして、どんなメールが来るのか確認します。

管理者宛には↑のようなメールが届くようになっていて、

送信者への自動返信も↑のように情報が羅列されただけの内容になっています。

この内容はフォームの設定から編集することができます。

管理者宛のメッセージに入力します。

このように入力しておくとお名前に入力した内容がメールに反映されるようになります。

この文字列は入力項目をクリックすると「NAME」に表示されるのでコピーして使います。

本文
Neige 各位
HPのフォームより下記のお問い合わせがありました。
ーーーーー
お名前：{fullname}
メールアドレス：{email}
電話番号：{tel-〇〇}
お問い合わせ種別：{radio-〇〇}
お問い合わせ内容：{message}
ーーーーー
ご対応、よろしくお願いいたします。
※〇〇の部分はコピー元を参考に修正してください

同じように自動返信メールも設定しておきます。

保存して、もう一度確認します。

{fullname}様

お世話になっております。
Neigeへのお問い合わせありがとうございました。

以下の内容でお問い合わせを受け付けいたしました。
3営業日以内に、担当者よりご連絡いたしますので
今しばらくお待ちくださいませ。

ーーーーー
お名前：{fullname}
メールアドレス：{email}
電話番号：{tel-〇〇}
お問い合わせ種別：{radio-〇〇}
お問い合わせ内容：{message}
ーーーーー
以上です。よろしくお願いいたします。

Neige

最後に完了画面のメッセージも「完了しました」だけになっているので変更します。

管理者宛には↑のようなメールがきています。

そして送信者には↑のように自動返信メールが届いています。

これでコンタクトフォームの設定は完了です。

まず、バックアップ用のプラグインからインストールしていきます。

新規プラグインを追加をクリックします。

All-in-Oneで検索してくると出てくる、
こちらのプラグインをインストールします。

インストールできたら有効化。

そうするとここのAll-in-One WP Migrationからエクスポート、
ここからバックアップを取ることができます。

エクスポート先を選択して、ダウンロード。

このファイルがバックアップデータになるので、自分で保管したりクライアントさんに渡したりして管理しておきましょう。