ようこそのお運びで、厚く御礼申し上げます。
６２日目です。今回はお問い合わせフォームに確認画面をつけてみます。
データベースのテーブルを作成して、お問い合わせフォームを作ってみる。確認ページを作成して「入力→確認→完了」を実現させる
前回作成したお問い合わせフォームをもとに、入力→確認→完了となるお問い合わせフォームを作ります。
入力ページの後に、確認ページが表示されるようにします。
前回までの流れとしては以下を参照
今回の仕様です。
- 前回までのテーブル追加・削除、お問い合わせフォームをカスタマイズ
- 入力→確認→完了を実現する
- 確認ページには入力した内容を表示
- 確認ページには「送信する」ボタン、「戻る」ボタンを設置
- タイトルが入力されていない場合は「送信する」はできない
まず、前回と同じくショーとコードを記入
表示画面より、投稿画面に必要事項を入力する
内容を入力し「確認画面へ」をクリックし、確認ページへ移動。
※戻る場合は、入力した値がテキスト入力フォームに入るようにする。
「送信する」をクリックして完了。
※DBのテーブルに登録処理が行われる。直後にリダイレクトする。
※今回はエラー処理やメール送信処理を省略しています。
今回はデータベースのテーブルを直接確認。
前回のコードに、確認画面の処理を追加したコードを作成。
確認画面のコードを追加した、お問い合わせフォームのコードについて抜粋しました（一部省略）。
new Paka3_DatabaseTable ;
class Paka3_DatabaseTable{
public $paka3_db_version = "1.0";
public function __construct(){
global $wpdb;
//データベースのテーブル名
$this->table_name = $wpdb->prefix . 'paka3Table';
//(ショートコードorDB処理)
if(isset($_POST['new'])){
add_shortcode("paka3Contact",array($this,'paka3_new'));
}elseif($_POST['check']){
add_shortcode("paka3Contact",array($this,'paka3_check'));
}elseif($_POST['create']){
add_action( 'init', array($this,'paka3_created') );
}else{
add_shortcode("paka3Contact",array($this,'paka3_new'));
}
}
//保存(create)
public function paka3_created(){
if((isset($_POST['paka3_title']) || isset($_POST['paka3_contents']))
&& check_admin_referer('paka3database')){
//更新処理処理
global $wpdb;
$title = $wpdb->escape($_POST['paka3_title']);
$contents = $wpdb->escape($_POST['paka3_contents']);
$wpdb->insert( $this->table_name,
array('created'=>current_time('mysql'),'modified'=>current_time('mysql'),
'title' => $title, 'contents' => $contents )
);
//再読み込みを防ぐためリダイレクト
wp_redirect( add_query_arg( array( 'completed' => 1 ) ) );
exit();
}
}
//表示(new)
public function paka3_new(){
$str = $_GET['completed'] ? "送信されました
" : "";
$title = $_POST['paka3_title'] ? $_POST['paka3_title'] : "";
$contents = $_POST['paka3_contents'] ? $_POST['paka3_contents'] : "";
$form =<<< EOS
お問い合わせ
{$str}
EOS;
return $form;
}
//##################################
//表示(check)
//##################################
public function paka3_check(){
$wp_n = wp_nonce_field('paka3database');
//formの値を作成
$form ='';
foreach($_POST as $akey => $aval){
if($akey!='check'){
$form .= '';
$$akey = esc_html($aval);
}
}
//入力チェック
$create = 1;
$button = '';
if($paka3_title==""){
$str="タイトルが入力されていません";
$create = 0;$button="";
}
//
$html =<<< EOS
お問い合わせ
{$str} EOS; return $html; } }ポイントはどこ？
今回は、前回の「入力→完了」を「入力→確認→完了」にしたので、その部分のみポイントを解説します。
- ページの状態を条件分岐
//(ショートコードorDB処理) if(isset($_POST['new'])){ //新規入力ページ add_shortcode("paka3Contact",array($this,'paka3_new')); }elseif($_POST['check']){ //確認ページ add_shortcode("paka3Contact",array($this,'paka3_check')); }elseif($_POST['create']){ //完了DB登録処理。 add_action( 'init', array($this,'paka3_created') ); }else{ //何もなければ新規入力へ add_shortcode("paka3Contact",array($this,'paka3_new')); } - 新規入力：paka3_new関数について
まず値の初期化$title = $_POST['paka3_title'] ? $_POST['paka3_title'] : ""; $contents = $_POST['paka3_contents'] ? $_POST['paka3_contents'] : ""; - 確認ページへのフラグを作成
※前回の完了ページへのフラグ[created]は削除<input type="hidden" name="check" value="1" />
- 確認ページ：paka3_check関数について
wp_nonce_fieldはセキュリティ対策です。
以下のふたつは組み合わせて使います。
1.check_admin_refererは管理画面から正しく更新されているか、またnoticeに正当性があるかチェック
2.wp_notice_fieldは他のサイトからではないということを認証する(form内に記述）
WordPress Codex日本語版:wp_notice_field$wp_n = wp_nonce_field('paka3database'); - 完了ページと戻るページへのページ移動の際に送るPOSTデータ（フォーム）を作成し、変数に入れる（後で表示）。
$form =''; foreach($_POST as $akey => $aval){ if($akey!='check'){ $form .= '<input type="hidden" name="'.$akey.'" value="'.esc_html($aval).'" />'; $$akey = esc_html($aval); } }※”$$”はその値を変数名としてあつかう。
- タイトルがない場合の入力チェックも作成(簡易)
//入力チェック $create = 1; $button = '<button class="btn btn-primary btn-large btn-block" type="submit">送信する</button>'; if($paka3_title==""){ $str="タイトルが入力されていません"; $create = 0;$button=""; } - 完了ページへのフラグ[create]を作成
<input type="hidden" name="create" value="{$create}" />
コードをプラグイン用のファイルにします
それではfunction.phpに書いたコードを消して、
「Paka3_Contact.php」というファイルを作成し、以下のコードを記入します。
このファイルを[wp-content]>「plugins」ディレクトリに入れ、管理画面で有効にして完了です。
今回のまとめ
一つのファイルにまとめかったので、少しわかりづらい構造になっていますが、今回は、入力→確認→完了がWordPressでも可能ということを試してみました。もうちょっとフラグ操作とかはちゃんとした方が良さそうですが、今回はこんなところです。