日はじめにwordpressではフォーム用のプラグインが多くあります。通常であればこれらのプラグインを使用してお問い合わせフォームやお申し込みフォームを構築することが多いと思います。プラグインではなく自前でフォームを構築しなければならない場面があるかもしれません。そのような場面のために、wordpressでお問い合わせフォームを自作する手順をメモしておきます。やりたいことはじめに何をできるようにしたいかをまとめておきます。今回はwordpressのテーマに沿った形で単純なお問い合わせフォームを自作します。自作といってもお問い合わせフォームの部分は以下のGitHubで公開されているものを使用させて頂きます。デモも公開されており、どういうお問い合わせフォームをつくるかも容易に把握できると思います。作成者様には感謝です。GitHub上記のお問い合わせフォームをwordpressに組み込んで動作させるために必要な手順を以下にメモします。ようにページ遷移があるお問い合わせフォーム入力画面では「名前」、「メールアドレス」、「お問い合わせ内容」の3項目の入力フォームを用意し、各項目でバリデーション環境と前提について環境は以下です。Sixteen以下の作業の前提として、すでにwordpressが動作する環境ができているものとしています。これから自分のPC上でwordpressを動作させる環境を構築する場合はこちらのローカル環境のwordpressに複数のテストサイトを構築して管理する方法が参考になるかもしれません。セキュリティ対策などは特にしていないので、各自の状況に合わせて追加してください。あと、基本的にお問い合わせフォームの部分はいじらずそのまま使っています。Sixteenのテーマファイルを直接修正しないようにするために子テーマを作成しておきます。いっても、非常に簡単です。子テーマとは?という場合は以下のサイトに非常に分かりやすく書いてあり見ればすぐに分かると思います。寝ログ子テーマ用フォルダとファイルを作成する子テーマを作るためにはじめに子テーマ用のフォルダを「theme」フォルダ直下に作成します。ここでは子テーマの名前を「twentysixteen-custom」とし、同名のフォルダを以下のように作成します。続いて作成した「twentysixteen-custom」フォルダの中に、子テーマとして最低限動作させるために必要な「style.css」と「function.php」を作成します。「style.css」と「function.php」の中身はそれぞれ以下のようにします。以下のようにするかは上で紹介したサイトに分かりやすく書かれているので省略します。);}?>これで子テーマの準備は完了です。この時点で子テーマ「twentysixteen-custom」フォルダ内は以下の様になっています。上記の子テーマ「twentysixteen-custom」フォルダ内に、冒頭で紹介したお問い合わせフォームのソースコードを入れておきます。以下のように、contactフォルダをそのまま「twentysixteen-custom」フォルダに入れておきます。エラー画面の4つの固定ページを作成するだけになります。各固定ページではそれぞれの独自のページテンプレートを適用します。1ページだと長くなってしまうため、3ページに分けています。入力画面用の固定ページを作成するまずはじめに、入力画面の固定ページを作成します。この入力画面は冒頭で紹介したお問い合わせフォームのソースコード内にあるindex.phpに対応します。このindex.phpを使って固定ページを作成します。固定ページ作成の流れは以下のようになります。ページテンプレートを作成wordpressでは独自のページテンプレートを作成して固定ページに適用できます。ページテンプレートを作成して、それを固定ページに適用します。独自のページテンプレートの作成と固定ページへの適用方法についてはwordpressで独自のページテンプレートを作成して固定ページに適用するための手順に別途まとめたので参考にして頂ければと思います。Sixteenのテーマフォルダにある、固定ページ用のテンプレートファイルpage.phpに、index.phpの内容を追加・修正して入力画面用のページテンプレートを作成します。ページテンプレートのファイル名はcontact-index.phpとして、子テーマフォルダtwentysixteen-customに置きます。はじめにページテンプレートのソースをのせます。index.phpの内容をpage.phpに組み込んでいるだけです。class="mb30">以下を入力し確認するボタンを押してください。class="red">*</span>は入力必須です。?>コード自体は少し長くなっていますが、新しいコードはほとんどありません。page.phpの一部をindex.phpと置き換えただけになります。上記のコードにindex.phpの引用部分を書いていますが、他の変更点は以下になります。?>上記のコードは固定ページのタイトルを取得しています。http://localhost:8888/testsite/contact-confirm/");お問い合わせフォームで入力した内容確認のために表示する確認画面のURLを指定します。確認画面の固定ページを作成していないので、後ほどここで指定したURLに合わせて確認画面の固定ページを作成します。上記のcontact-index.phpを以下のようにtwentysixteen-customのテーマフォルダに置いて、後はwordpressの管理画面から固定ページへ適用します。入力画面用のページテンプレートを固定ページに適用ここでは、以下のように「お問い合わせ」というタイトルで固定ページを新規追加し、作成したcontact-index.phpを適用します。以下の画像の1つ目の赤枠の通り、URLとしてhttp://localhost:8888/testsite/contact/と指定していますが、このURLを次に作成する確認画面で使用します。2つ目の赤枠のように、「ページ属性」→「テンプレート」で、作成したページテンプレートcontact-indexを適用しています。実際にこの固定ページにアクセスしてみると、以下のように表示されます。これでお問い合わせフォームの入力画面が完成しました。エラー画面用の固定ページを作成するだけになります。WordPressでブログを作成している場合、そのブログのトップページとして投稿ページを一覧表示している場合が多いと思います。Analyticsからモバイル表示の問題が深刻のため対応するようメールが届いていました。WordPressサイトを構築する際に、現在は色々なレンタルサーバがあり選択肢も豊富です。コメントをキャンセルメールアドレスが公開されることはありません。virtualiment。