PHP
JavaScript
WordPress

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

More than 1 year has passed since last update.

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>