wordpressでプラグインを使わずにフォームを自作する手順

はじめに

wordpressではフォーム用のプラグインが多くあります。通常であればこれらのプラグインを使用してお問い合わせフォームやお申し込みフォームを構築することが多いと思います。ただ、プラグインではなく自前でフォームを構築しなければならない場面があるかもしれません。そのような場面のために、wordpressでお問い合わせフォームを自作する手順をメモしておきます。

やりたいこと

はじめに何をできるようにしたいかをまとめておきます。
今回はwordpressのテーマに沿った形で単純なお問い合わせフォームを自作します。
なお、自作といってもお問い合わせフォームの部分は以下のGitHubで公開されているものを使用させて頂きます。デモも公開されており、どういうお問い合わせフォームをつくるかも容易に把握できると思います。大変参考になりました。作成者様には感謝です。

kobebeauty/php-contact-form | GitHub

上記のお問い合わせフォームをwordpressに組み込んで動作させるために必要な手順を以下にメモします。

以下に上記で公開されているお問い合わせフォームの概要をのせておきます。

  • 入力→確認→完了画面のようにページ遷移があるお問い合わせフォーム
  • 入力画面では「名前」、「メールアドレス」、「お問い合わせ内容」の3項目の入力フォームを用意し、各項目でバリデーション

環境と前提について

環境は以下です。

  • OS : OS X El Capitan ver 10.11.3
  • wordpressの動作環境 : MAMP 3.0.7.3を使用
  • wordpress : ver 4.4.2
  • wordpressで使用するテーマ : Twenty Sixteen

以下の作業の前提として、すでにwordpressが動作する環境ができているものとしています。もしこれから自分のPC上でwordpressを動作させる環境を構築する場合はこちらのローカル環境のwordpressに複数のテストサイトを構築して管理する方法が参考になるかもしれません。また、セキュリティ対策などは特にしていないので、各自の状況に合わせて追加してください。あと、基本的にお問い合わせフォームの部分はいじらずそのまま使っています。

子テーマを作成

これからの作業でTwenty Sixteenのテーマファイルを直接修正しないようにするために子テーマを作成しておきます。といっても、非常に簡単です。

子テーマとは?という場合は以下のサイトに非常に分かりやすく書いてあり見ればすぐに分かると思います。

WordPressテーマをカスタマイズするなら子テーマを使った方が良い理由、使い方など | 寝ログ


子テーマ用フォルダとファイルを作成する

子テーマを作るためにはじめに子テーマ用のフォルダを「theme」フォルダ直下に作成します。ここでは子テーマの名前を「twentysixteen-custom」とし、同名のフォルダを以下のように作成します。
make-folder-for-child

続いて作成した「twentysixteen-custom」フォルダの中に、子テーマとして最低限動作させるために必要な「style.css」と「function.php」を作成します。「style.css」と「function.php」の中身はそれぞれ以下のようにします。なぜ以下のようにするかは上で紹介したサイトに分かりやすく書かれているので省略します。

twentysixteen-custom/style.css
/*
Theme Name: Twenty Sixteen Custom
Template: twentysixteen
*/
<?php

// 親テーマ引き継ぎ用関数
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

?>

これで子テーマの準備は完了です。この時点で子テーマ「twentysixteen-custom」フォルダ内は以下の様になっています。
content-of-child

上記の子テーマ「twentysixteen-custom」フォルダ内に、冒頭で紹介したお問い合わせフォームのソースコードを入れておきます。以下のように、contactフォルダをそのまま「twentysixteen-custom」フォルダに入れておきます。
template-folder

お問い合わせフォーム用の固定ページを作成する

作業としては、お問い合わせフォームで必要な入力画面、確認画面、完了画面、エラー画面の4つの固定ページを作成するだけになります。ただし、各固定ページではそれぞれの独自のページテンプレートを適用します。詳しくは後述します。なお、1ページだと長くなってしまうため、3ページに分けています。

入力画面用の固定ページを作成する

まずはじめに、入力画面の固定ページを作成します。この入力画面は冒頭で紹介したお問い合わせフォームのソースコード内にあるindex.phpに対応します。このindex.phpを使って固定ページを作成します。
固定ページ作成の流れは以下のようになります。

  • ページテンプレートを作成
  • wordpressでは独自のページテンプレートを作成して固定ページに適用できます。ページテンプレートを作成して、それを固定ページに適用します。なお、独自のページテンプレートの作成と固定ページへの適用方法についてはwordpressで独自のページテンプレートを作成して固定ページに適用するための手順に別途まとめたので参考にして頂ければと思います。

  • 作成したページテンプレートを固定ページに適用


入力画面用のページテンプレートを作成する

Twenty Sixteenのテーマフォルダにある、固定ページ用のテンプレートファイルpage.phpに、index.phpの内容を追加・修正して入力画面用のページテンプレートを作成します。ページテンプレートのファイル名はcontact-index.phpとして、子テーマフォルダtwentysixteen-customに置きます。
はじめにページテンプレートのソースをのせます。index.phpの内容をpage.phpに組み込んでいるだけです。

twentysixteen-custom/contact/contact-index.php
<?php
/**
 * Template Name: contact-index
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages and that
 * other "pages" on your WordPress site will use a different template.
 *
 * @package WordPress
 * @subpackage Twenty_Sixteen
 * @since Twenty Sixteen 1.0
 */

 ////////////////////////////////////////////////////////
 // ここから下がindex.phpのソース引用部分
 ////////////////////////////////////////////////////////
 
 // ファイル読み込み
 require_once('common/init.php');
 require_once('common/validate.php');

 //操作アクションを取得
 $act = isset($_POST["act"]) ? intval($_POST["act"]) : 1;

 if ($act == 1) {
 	// セッションデータクリア
 	$contact_data = array();
 	// 初期値セット
 	$err_msg = array();
 	$name = '';
 	$email = '';
 	$message = '';

 } elseif ($act == 2) { // 確認ボタンを押下された場合
 	// POSTデータをセッションに格納
 	$_SESSION["contact_data"] = isset($_POST["contact_data"]) ? $_POST["contact_data"] : array();
 	// セッションデータを配列にセット
 	$contact_data = $_SESSION["contact_data"];
 	// 各項目データをセット
 	$name = isset($contact_data["name"]) ? $contact_data["name"] : "";
 	$email = isset($contact_data["email"]) ? $contact_data["email"] : "";
 	$message = isset($contact_data["message"]) ? $contact_data["message"] : "";
 	// 入力チェック
 	$err_msg = checkInputData($contact_data);
 	if(!$err_msg){
 		header("Location: http://localhost:8888/testsite/contact-confirm/");
 		exit();
 	}

 } else {
 	// セッションデータ取得
 	$contact_data = isset($_SESSION["contact_data"]) ? $_SESSION["contact_data"] : array();
 	// 各項目データをセット
 	$name = isset($contact_data["name"]) ? $contact_data["name"] : "";
 	$email = isset($contact_data["email"]) ? $contact_data["email"] : "";
 	$message = isset($contact_data["message"]) ? $contact_data["message"] : "";
 }

///////////////////////////////////////////////////////
// ここから上がindex.phpのソース引用部分
////////////////////////////////////////////////////////
 
get_header(); ?>

<div id="primary" class="content-area">
	<main id="main" class="site-main" role="main">
 
  ////////////////////////////////////////////////////////
  // ここから下が追記部分
  ////////////////////////////////////////////////////////  
  
  <?php while ( have_posts() ) : the_post(); ?>
    <h1><?php the_title(); ?></h1>
  <?php endwhile; ?>
  
  ////////////////////////////////////////////////////////
  // ここから上が追記部分
  ////////////////////////////////////////////////////////

  ////////////////////////////////////////////////////////
  // ここから下がindex.phpのソース引用部分
  ////////////////////////////////////////////////////////
		
		<?php if (count($err_msg) > 0) { ?>
		<div>
			<ul class="error">
				<?php foreach ($err_msg as $msg) { ?>
				<li><?php echo $msg; ?></li>
				<?php } ?>
			</ul>
		</div>
		<?php } ?>

		<div class="page-content">
			<p class="mb30">以下を入力し確認するボタンを押してください。<span class="red">*</span>は入力必須です。</p>

			<form class="form-horizontal" name="contactform" role="form" method="post" action="" novalidate>
				<div class="form-group">
					<label for="inputName" class="col-sm-3 control-label">お名前<span class="red">*</span></label>
					<div class="col-sm-9">
						<input type="text" class="form-control" name="contact_data[name]" placeholder="お名前" value="<?php echo htmlspchar($name); ?>">
					</div>
				</div>
				<div class="form-group">
					<label for="inputEmail" class="col-sm-3 control-label">メールアドレス<span class="red">*</span></label>
					<div class="col-sm-9">
						<input type="email" class="form-control" name="contact_data[email]" placeholder="メールアドレス" value="<?php echo htmlspchar($email); ?>">
					</div>
				</div>
				<div class="form-group">
					<label for="inputMessage" class="col-sm-3 control-label">お問い合わせ内容<span class="red">*</span></label>
					<div class="col-sm-9">
						<textarea class="form-control" name="contact_data[message]" rows="5"><?php echo htmlspchar($message); ?></textarea>
					</div>
				</div>
				<div class="btn-area">
					<button type="submit" name="btnSubmit" class="btn btn-success">確認する<i class="fa fa-arrow-circle-right"></i></button>
					<input type="hidden" name="act" value="2">
				</div>
			</form>

		</div>
		
    ////////////////////////////////////////////////////////
    // ここから上がindex.phpのソース引用部分
    ////////////////////////////////////////////////////////

	</main><!-- .site-main -->

	<?php get_sidebar( 'content-bottom' ); ?>

</div><!-- .content-area -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

コード自体は少し長くなっていますが、新しいコードはほとんどありません。page.phpの一部をindex.phpと置き換えただけになります。
上記のコードにindex.phpの引用部分を書いていますが、他の変更点は以下になります。

  • contact-index.phpの冒頭でTemplate Name :contact-indexを記述
  • 以下のコードを追記
  •     <?php while ( have_posts() ) : the_post(); ?>
          <h1><?php the_title(); ?></h1>
        <?php endwhile; ?>

    上記のコードは固定ページのタイトルを取得しています。

  • 以下の部分で確認画面のURLを指定
  • header("Location: http://localhost:8888/testsite/contact-confirm/");

    お問い合わせフォームで入力した内容確認のために表示する確認画面のURLを指定します。まだ確認画面の固定ページを作成していないので、後ほどここで指定したURLに合わせて確認画面の固定ページを作成します。

上記のcontact-index.phpを以下のようにtwentysixteen-customのテーマフォルダに置いて、後はwordpressの管理画面から固定ページへ適用します。
add-contact-index

入力画面用のページテンプレートを固定ページに適用

ここでは、以下のように「お問い合わせ」というタイトルで固定ページを新規追加し、作成したcontact-index.phpを適用します。以下の画像の1つ目の赤枠の通り、URLとしてhttp://localhost:8888/testsite/contact/と指定していますが、このURLを次に作成する確認画面で使用します。また、2つ目の赤枠のように、「ページ属性」→「テンプレート」で、作成したページテンプレートcontact-indexを適用しています。
set-contact-index

そして実際にこの固定ページにアクセスしてみると、以下のように表示されます。
contact-template-view

これでお問い合わせフォームの入力画面が完成しました。後は、上記と同じ手順で確認画面、完了画面、エラー画面用の固定ページを作成するだけになります。

SPONSORED LINK

この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。

この投稿へのトラックバック

  1. […] なお、自作といってもお問い合わせフォームの部分は以下のGitHubで公開されているものを使用させて頂きます。 以下の作業の前提として、すでにwordpressが動作する環境ができているものとしています。 ここでは子テーマの名前を「twentysixteen-custom」とし、同名のフォルダを以下のように作成します。 「style.css」と「function.php」の中身はそれぞれ以下のようにします。 [紹介元] WordPressでプラグインを使わずにフォームを自作する手順 […]

  2. […] https://www.virment.com […]

トラックバック URL