Help us understand the problem. What is going on with this article?

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>
KazuyoshiGoto
UI/UXエンジニア。デザイン、サービス設計、機能(UI)設計、サーバサイド、SEO、ウェブマーケティングなどWebの全般に関わり、現在はBtoBの領域中心にWebとユーザーのふれあい方(体験:UX)に関して垣根なく取り組んでいます。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした