WordPress

DBのテーブルを作成して、お問い合わせフォームを作ってみる(確認ページ有り):【62日目】WordPress1日1プラグイン

更新日:

ようこそのお運びで、厚く御礼申し上げます。
62日目です。今回はお問い合わせフォームに確認画面をつけてみます。

データベースのテーブルを作成して、お問い合わせフォームを作ってみる。確認ページを作成して「入力→確認→完了」を実現させる

前回作成したお問い合わせフォームをもとに、入力→確認→完了となるお問い合わせフォームを作ります。

入力ページの後に、確認ページが表示されるようにします。

前回までの流れとしては以下を参照

今回の仕様です。

まず、前回と同じくショーとコードを記入
140320-0005

表示画面より、投稿画面に必要事項を入力する

140321-0001

内容を入力し「確認画面へ」をクリックし、確認ページへ移動
※戻る場合は、入力した値がテキスト入力フォームに入るようにする。
140321-0002

「送信する」をクリックして完了。
※DBのテーブルに登録処理が行われる。直後にリダイレクトする。

※今回はエラー処理やメール送信処理を省略しています。
今回はデータベースのテーブルを直接確認。

140321-0004

前回のコードに、確認画面の処理を追加したコードを作成。

確認画面のコードを追加した、お問い合わせフォームのコードについて抜粋しました(一部省略)

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}
{$wp_n}{$form}   確認データの表示(省略)
{$form}
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でも可能ということを試してみました。もうちょっとフラグ操作とかはちゃんとした方が良さそうですが、今回はこんなところです。

-WordPress
-, , , ,

Copyright© アルパカ@ラボ:大分県臼杵市でホームページ運営やWordPressやってます。 , 2019 All Rights Reserved Powered by AFFINGER5.