WordPressにお問い合わせページを作成する(1)

お問い合わせを入力するページを作成する

前回の「最小構成のWordPressプラグインを作る」では最小構成のプラグインを作成しました。

前回作成したコード：GitHub

作成するプラグインはサイトに寄せられたお問い合わせを管理する機能になるため、お問い合わせページからの入力があってこそ活用できるものになります。
そこで今回からは、サイト側からお問い合わせを入力するページを作成していきます。

作成するお問い合わせページはプラグイン内のページではなく公開するサイト側のページになるため、WordPressの固定ページから「お問い合わせ」というタイトルのページと対応するテーマのテンプレートファイルを1つ作成していきます。
お問い合わせで入力されたデータはインストールしたWordPressと同じデータベースにテーブルを追加してデータを格納していきますが、今回と次回については表示するお問い合わせページを作成し、その後にデータベースとの連携を行なっていきます。

お問い合せページについて

作成するお問い合わせページは以下のように(1)入力ページ、(2)入力内容を確認するページ、(3)完了ページの3ページ構成にします。

WordPress管理ページの左メニューにある「固定ページ」の「新規追加」を押してください。
一度「固定ページ」を押してから表示される固定ページ一覧で「新規追加ボタン」を押しても大丈夫です。

新規追加ボタンを押すと、固定ページを新しく作成するページが表示されます。
以下のようにタイトルを「お問い合わせ」、URLスラッグを「contact」と入力し、右上にある「公開ボタン」を押してください。

これで新しくお問い合わせページが作成されました。
WordPressのサイトを開いてみると、右上のメニューに作成した「お問い合わせ」が追加されていることを確認できます。

今は「お問い合わせ」を開いても以下のようにタイトル以外は何も表示されません。
これから、ここにお問い合わせを入力するためのフォームを設置していきます。

テーマにお問い合わせページのテンプレートファイルを作成する

続いて、お問い合わせページのテンプレートファイルを作成していきます。

現在はWordPressの標準テーマである「Twenty Twenty-Two」が有効になっているので、テンプレートファイルは/wp-content/themes/twentytwentytwoフォルダの中に作成します。
フォルダの直下に、page-contact.phpというファイルを1つ作成してください。
（今回はワークショップ作成時に最新のテーマである「Twenty Twenty-Two」を使っていますが、「Twenty Twenty-One」より以前のテーマや、今後登場する新しいテーマでも同様のステップで作成できます。）

page-contact.phpをコードエディタで開き、以下のコードを記述してください。
style要素によるCSSの記述が長いですが、プラグイン作成の主旨からは外れるため解説は省略します。
コピペなどでそのまま記述してください。（テーマ内に設置する都合上、あえてhead要素内に記述していません）

page-contact.php

<?php

get_header();

?>

<style>
#contact {
	margin: 0 auto 200px;
	padding: 70px 40px 0;
	width: 100%;
	max-width: 1200px;
	box-sizing: border-box;
	background: #fff;
}
#contact header {
	text-align: center;
}
#contact h1 {
	display: inline-block;
	margin-bottom: 30px;
	font-size: 1.5rem;
	border-bottom: 1px solid #222;
}
#contact p,
#contact ul,
#contact form {
	margin: 0 auto;
	width: 100%;
	max-width: 700px;
	box-sizing: border-box;
}
#contact p {
	margin-bottom: 35px;
	width: 100%;
	max-width: 700px;
	font-size: 1rem;
	line-height: 1.8em;
}
#contact .list_error {
	margin-bottom: 40px;
	padding: 20px;
	color: #d54545;
	border: 4px solid #d54545;
	list-style-type: none;
}
#contact .list_error li {
	margin-left: 1.5em;
	margin-bottom: 5px;
	text-indent: -1.5em;
}
#contact .list_error li:last-child {
	margin-bottom: 0;
}
#contact .list_error li::before {
	display: inline-block;
	content: "";
	margin-right: 10px;
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background: #e99898;
}
#contact dl {
	margin: 0 auto;
	width: 700px;
}
#contact dl dt {
	margin-bottom: 10px;
	font-size: 1rem;
	font-weight: bold;
	color: #222;
	line-height: 1.6em;
}
#contact dl dd {
	margin-left: 0;
	margin-bottom: 30px;
	line-height: 1.0em;
}
#contact dl dd input[type=text],
#contact dl dd input[type=email],
#contact dl dd textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 15px 20px;
	width: 100%;
	border: 2px solid #2794d9;
	border-radius: 7px;
	box-sizing: border-box;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.6em;
	color: #222;
	background-color: #fff;
}
#contact dl dd textarea {
  max-width: 100%;
  min-height: 80px;
}
#contact dl dd input[type=text]:focus,
#contact dl dd input[type=email]:focus,
#contact dl dd textarea:focus {
  border: 2px #2794d9 solid inset;
}
#contact dl dd p {
	margin-bottom: 0;
	padding-top: 8px;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.6em;
}
#contact dl dd p a {
	color: #006cdb;
}
#contact .btn_area {
	display: flex;
	justify-content: space-between;
	width: 100%;
	text-align: center;
}
#contact .link_area {
	width: 100%;
	text-align: center;
}

#contact dl dd p {
	padding: 10px 20px;
	width: 100%;
	border: 2px solid #c1e1f5;
	border-radius: 7px;
	box-sizing: border-box;
	font-size: 1rem;
	font-weight: 500;
	color: #222;
}

#contact .btn_area input[name=btn_back],
#contact .btn_area input[name=btn_submit] {
	padding: 12px 5%;
	width: calc(50% - 20px);
}

input[name=btn_confirm],
input[name=btn_submit] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: inline-block;
	padding: 12px 140px;
	width: 100%;
	border-radius: 7px;
	box-sizing: border-box;
	border: none;
	cursor: pointer;
	color: #fff;
	font-size: 1rem;
	font-weight: bold;
	letter-spacing: .1em;
	background: #2794d9 right 20px center / 28px auto no-repeat;
	transition: opacity .2s ease;
}
input[name=btn_confirm]:hover,
input[name=btn_submit]:hover {
	opacity: 0.7;
}
input[name=btn_confirm][disabled] {
	cursor: not-allowed;
	background-color: #b0e0de;
}

input[name=btn_back] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: inline-block;
	padding: 12px 140px;
	border-radius: 7px;
	border: 2px solid #2794d9;
	cursor: pointer;
	color: #2794d9;
	font-size: 1rem;
	font-weight: bold;
	letter-spacing: .1em;
	background: #fff left 20px center / 28px auto no-repeat;
	transition: opacity .2s ease;
}
input[name=btn_back]:hover {
	opacity: 0.7;
}

a.btn_back {
	color: #2794d9;
	font-size: 1rem;
	font-weight: bold;
	background: #fff left 20px center / 28px auto no-repeat;
	transition: opacity .3s ease;
}
a.btn_back:hover {
	opacity: 0.7;
	text-decoration: none;
}
</style>

<article id="contact">
	<header>
		<h1>お問い合わせ</h1>
	</header>

	<form action="" method="post">
		<dl>
			<dt>お名前</dt>
			<dd><input type="text" name="input_name" value=""></dd>
			<dt>メールアドレス</dt>
			<dd><input type="email" name="input_email" value=""></dd>
			<dt>お問い合わせ内容</dt>
			<dd>
				<textarea name="input_content"></textarea>
			</dd>
		</dl>
		<div class="btn_area">
			<input type="submit" name="btn_confirm" value="送信内容の確認">
		</div>
		<input type="hidden" name="csrf_token" value="">
	</form>

</article>

<?php get_footer(); ?>

変更を保存してブラウザでもう一度お問い合わせページを開いてみると、以下のようにフォームが表示されます。

まだ形だけフォームを設置した状態ですが、2行目に以下のコードを追記してください。

page-contact.php

<?php
var_dump($_POST);

get_header();

?>

---- 以下省略 ----

上記のコードを追記してから、お問い合わせのフォームに入力して「送信内容の確認ボタン」を押してみてください。
同じページを再表示しますが、以下のようにページ上部に入力したデータが出力されます。

var_dump関数でスーパーグローバル変数$_POSTを出力しているだけですが、先ほどボタンを押したことでフォームがPOSTメソッドによって送信されていることが確認できます。

今回はここまでになります。
次回は入力ページから確認ページ、完了ページへの表示の切り替えを実装していきます。

今回作成したコード：GitHub