MAMPを使ったWordpressでのWEB制作方法13　初心者向け

#MAMPを使ったWordpressでのWEB制作方法13　初心者向け

前回の記事はこちら
[MAMPを使ったWordpressでのWEB制作方法12　初心者向け](https://qiita.com/fumiya0414/items/e5ff0b8cb29b6513db69)

今回はお問い合わせページを作成します。
contact7というプラグインを使って設定しましょう。

##お問い合わせページの作成

現在お問い合わせページは下のようにマークアップされています。
当然ですが送信ボタンを押しても何も反応しません。

またpage.phpのシートでレイアウトを共通化しているため
お問い合わせページへのリンクボタンも表示されています。

[![Image from Gyazo](https://i.gyazo.com/d3f6338bae667fd5e60cc4b5dd488549.png)](https://gyazo.com/d3f6338bae667fd5e60cc4b5dd488549)

まずはContact form7のプラグインを入れるため
新規追加から検索をしてみます。

[![Image from Gyazo](https://i.gyazo.com/f39b88870c361359de33ad676b7c1c7a.png)](https://gyazo.com/f39b88870c361359de33ad676b7c1c7a)

すると拡張機能も含めたcontact7関連のプラグインが一覧で出てきてしまいます。

このような場合はgoogle検索をしてプラグインの本体を探します。

[contact7](https://ja.wordpress.org/plugins/contact-form-7/)
ここからダウンロードをしましょう

DLしたzipファイルを管理画面からアップロードします。

[![Image from Gyazo](https://i.gyazo.com/09c54decb2a90215da931ff5b67ea384.gif)](https://gyazo.com/09c54decb2a90215da931ff5b67ea384)

アップロードできたら左タブのお問い合わせを開いて
新規コンタクトフォームを追加すると下の画面になります。
こちらの項目を設定していきましょう。

[![Image from Gyazo](https://i.gyazo.com/62d25d3f358f832f6618aefc5db41de6.png)](https://gyazo.com/62d25d3f358f832f6618aefc5db41de6)

本文の部分に作成したお問い合わせ（contact.html）の
tableの中身を貼り付けましょう。

[![Image from Gyazo](https://i.gyazo.com/8c803cc2768eed95b5c557abe93ba381.gif)](https://gyazo.com/8c803cc2768eed95b5c557abe93ba381)

この状態から各項目を設定していきます。

フォームのテンプレートから使用したい項目を選び
必要事項を記述するとタグが生成されます。

名前を設定してみましょう。

nameという名前でタグを作り[text name]をコピーします。

[![Image from Gyazo](https://i.gyazo.com/20f0a1eb322b8aaa103b9db00b717fed.png)](https://gyazo.com/20f0a1eb322b8aaa103b9db00b717fed)

名前部分のinputタグと入れ替えるだけです。
[![Image from Gyazo](https://i.gyazo.com/250a3a3d70b4dfa42c75a12c1e8269f6.png)](https://gyazo.com/250a3a3d70b4dfa42c75a12c1e8269f6)

各項目を設定して保存しましょう。
送信ボタンにはクラスを付与しておきます。

```
<table>
<tbody>
<tr>
<th>お名前</th>
<td>[text c_name]</td>
</tr>
<tr>
<th>電話番号</th>
<td>[text tel placeholder "090-1111-1111"]</td>
</tr>
<tr>
<th>メールアドレス</th>
<td>[email c_email]</td>
</tr>
<tr>
<th>お問い合わせ項目</th>
<td>
[select menu-377 "選択してください" "サービスについて" "料金について" "弊社について"]
</td>
</tr>
<tr>
<th>お問い合わせ内容</th>
<td>
[textarea info]
</td>
</tr>
<tr>
<td colspan="2">
[submit class:btn1 "送信"]             
</td>
</tr>
</tbody>
</table>
```

続いてメールタブにて送信先や送信元の情報を設定します。

[![Image from Gyazo](https://i.gyazo.com/7b7a2b0f29cb2e4e611cd54b433d0914.png)](https://gyazo.com/7b7a2b0f29cb2e4e611cd54b433d0914)

送信先：ユーザーがメールを送付するアドレスになります。つまり管理者アドレスです。
送信元：通知に使うアドレスです。送信元と同じで問題ありません。
題名：お問い合わせがありましたなどに設定しましょう
メッセージ本文：受け取る問い合わせ内容を設定しましょう。

自動返信はメール２の部分に設定することで
問い合わせに自動返信ができます。

必要事項を記入し保存をすると以下のショートコードが発行されます。

[![Image from Gyazo](https://i.gyazo.com/fae005b1fa292c1f07d77c9a98bd0d90.png)](https://gyazo.com/fae005b1fa292c1f07d77c9a98bd0d90)

これをコピーして固定ページ/お問い合わせのtableタグと入れ替えましょう。

[![Image from Gyazo](https://i.gyazo.com/a105bda2843afb59e7612811a68019ae.png)](https://gyazo.com/a105bda2843afb59e7612811a68019ae)

このような形になります。

[![Image from Gyazo](https://i.gyazo.com/c4ca3e9bf3b4dd284847a75d0ec17fd7.gif)](https://gyazo.com/c4ca3e9bf3b4dd284847a75d0ec17fd7)

動作確認をしましょう。
空の状態ですが送信ボタンを押すと動作していることがわかります。

##ページの条件分岐
お問い合わせページへのリンクは不要なので
条件分岐を設定しましょう。

```php:page.php
<?php get_header(); ?>

  <div class="wrapper">
    <div id="conL">
      <h2><?php the_title(); ?></h2>

      <?php if(have_posts()): while(have_posts()): the_post();?>
      <?php the_content(); ?>
      <?php endwhile; endif; ?>

      <!--ページの条件分岐-->
      <?php if (is_page(array('63'))) {?>

      <?php }else{ ?>
        <a class="btn" href="contact.html"><button class="btn1">お問い合わせ</button></a>
      <?php } ?>


    </div><!--conLend-->

<?php get_sidebar(); ?>
  </div>
<?php get_footer();?>
```

ページのIDがお問い合わせページの６３番（ご自身の環境に合わせてください。）
だった場合に何も表示しないという記述を追加しました。

ブラウザを再読込して確認しましょう。
[![Image from Gyazo](https://i.gyazo.com/6f0e34362b848ff3664695ecc5ab24e9.png)](https://gyazo.com/6f0e34362b848ff3664695ecc5ab24e9)

お問い合わせページの完成です。

以上でサイトの大枠は完成しました。

次はメニュー項目の追加をします。

[MAMPを使ったWordpressでのWEB制作方法14　初心者向け](https://qiita.com/fumiya0414/items/abd9d1e320660b8ee9c4)