WordPressのページ間でPOSTデータを送受信する

WordPressで「post」と言うと投稿データのことですが、WordPressの記事内にフォームを作り「POST」データを送受信する方法です。

投稿本文欄でPHPを扱えるようにするプラグインを使えばよりイージーにできますが、セキュリティの懸念もあるため使いません。

プラグインに頼らずWPが本来備えている functions.php のショートコード機能を利用します。

概要

ページAのフォームからPOSTでデータを送り、
ページBにショートコードを置いてPOSTデータを取得します。

メール送信など高度な処理が目的ではありません。
ページAのフォームで入力した値をページBで返すことが目的です。

functions.php

テーマフォルダにある functions.php に以下を追記。

function form_post() {
  if(isset($_POST)){
    $form_post = $_POST;
    print_r($form_post);
  }
}
add_shortcode('sc_form_post', 'form_post');

これで「sc_form_post」というショートコードができました。
このショートコードが実行されると、そのページにPOSTデータがあれば出力します。

ページA

本文欄へ以下のようにHTMLを書き普通にHTMLフォームを作ります。

<form method="post" action="/page-b">
名前：<input type="text" name="name">
アドレス：<input type="email" name="email">
<input type="submit" value="送信">
</form>

ページB

本文欄の好きな箇所へ functions.php に作ったショートコードを置きます。

[sc_form_post]

これでページAのフォームからページBへPOSTされたデータが出力されます。

ショートコードをカスタマイズする

先ほど作ったショートコードをフォームの内容に合わせてカスタマイズします。

function form_post() {
  if(isset($_POST)){
    $name = $_POST['name'];
    $email = $_POST['email'];
    echo '<ul>';
    echo '<li>'.$name.'</li>'
    echo '<li>'.$email.'</li>'
    echo '</ul>';
  }
}
add_shortcode('sc_form_post', 'form_post');

受け取ったPOSTデータを自由に扱えます。

しかしこの状態だとPOSTデータの出力が functions.php に依存しており、表示を変える時に functions.php を編集する必要があります。

JavaScriptで扱いやすくスタマイズする

POSTを受け取った後の操作を functions.php に依存せず、汎用的にPOSTデータを扱えるようにPHPからJSへデータを受け渡します。

function form_post() {
  if(isset($_POST)){
    $postArray = json_encode($_POST, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT);
    echo '<script>var postArray = '. $postArray .';</script>';
  }
}
add_shortcode('sc_form_post', 'form_post');

これでショートコード「sc_form_post」の仕事はPOSTデータの受け渡しだけになりました。

ショートコードを呼び出したページで以下のようにJSでPOSTデータを扱えます。

[sc_form_post]
<script>
if(typeof postArray['email'] !== 'undefined') {
  var name = postArray['name'];
  var email = postArray['email'];
}
</script>