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

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

投稿本文欄でPHPを扱えるようにするプラグインならよりイージーにできますが、セキュリティの懸念もあるため使いません。プラグインに頼らずWPが本来備えている function.php のショートコード機能を利用します。

概要

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

function.php

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

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

これで「sc_form_post」というショートコードができました。

ページA

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

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

ページB

本文欄の好きな箇所へ function.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データの出力が function.php に依存しており、表示を変える時に function.php を編集する必要があります。

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

POSTを受け取った後の操作を function.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 !== 'undefined') {
  var name = postArray['name'];
  var email = postArray['email'];
}
</script>