Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
22
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

@KazuyoshiGoto

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>
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
22
Help us understand the problem. What are the problem?