WordPresで固定ページや投稿ページの作成をするフォームを作ります。
このフォームは私が自身で運営するサイトで使用するためのものです。
ログイン設定して使用します。
基本的なセキュリティ対策は施しますが、ページ制作フォームをフロントエンドに出してしまうと問題が生じる可能性があります。
セキュリティ問題もご理解いただいた上で本記事をご覧ください。
ページ内リンク
デモ
jQuery UI Datepickerコード
<script type="text/javascript">
$(function() {
$.datepicker.setDefaults( $.datepicker.regional[ "ja" ] );
$('#game-date').datepicker({ dateFormat: 'yy-mm-dd' });
});
</script>フォーム内の試合日でjQuery UI Datepickerコードを使用しています。
上記はそのコードです。
詳細はjQuery UIのDatepickerの日付ピッカーで確認てください。
HTMLコード
<form class="game-form" action="" method="post">
<div>
<label for="game-date">試合日:</label>
<input type="text" id="game-date" name="gamedate">
</div>
<div>
<label for="match-order">第何試合:</label>
<select id="match-order" name="matchorder">
<option value=""></option>
<option value="第1試合">第1試合</option>
<option value="第2試合">第2試合</option>
<option value="第3試合">第3試合</option>
<option value="第4試合">第4試合</option>
<option value="第5試合">第5試合</option>
<option value="第6試合">第6試合</option>
</select>
</div>
<div>
<label for="match-time">試合時間:</label>
<input type="text" id="match-time" name="matchtime" list="match-time-list">
<datalist id="match-time-list">
<option value="13:10"></option>
<option value="14:20"></option>
<option value="15:30"></option>
<option value="14:00"></option>
<option value="15:10"></option>
</datalist>
</div>
<div>
<label for="remarks">備考(10文字以下で):</label>
<textarea id="remarks" name="remarks" maxlength="10" rows="4"></textarea>
</div>
<input type="submit" value="送信" name="send">
</form>
<button class="return-button"><a href="#">戻る</a></button>HTMLで作るフォームです。
閲覧者に入力してもらったデータを別URL等へ送るわけではなく、このページ内で処理するので、action=""と何も指定していません。
method="post"です。
method属性にはgetとpostがあります。
詳しくは
フォームデータの送信 – ウェブ開発を学ぶ | MDN
でご確認ください。
閲覧者が入力するフォームには データが大きくても対応できるpostを設定します。
「select」と「datalist」
「select」はメールフォームやカスタムフィールドでよく使われています。
選択項目があってその中から選ぶものです。
「datalist」はあらかじめデータを用意して選ぶこともできますし、自分で入力することもできます。
「datalist」の設定方法
「datalist」の設定方法は親要素のinputタグの中にlist属性を設定します。
list属性には datalistタグ に設定するid=""を設定します。
datalistタグの中にoptionタグで選択値を設定します。
PHPのフォームのセキュリティ対策コード
<?php
function htmlspch($s) {
return htmlspecialchars($s, ENT_QUOTES|ENT_HTML5, "UTF-8");
}
?>上記はセキュリティ対策として特殊文字を無効化しているコードです。
具体的には「<」「 ) 」「 ” 」等を別の記号に置き換え事で悪意のスクリプトなどを入力された時にそのコードを無効にしています。
function htmlspch($s) {自身で独自の関数を作るときのコードです。htmlspch()関数を作っています。htmlspchの部分は何でもよく自身で決めれますが、WordPresの関数名で使われているものはだめです。
$sは関数の引数で、今回の場合フォームで入力された内容です。
return htmlspecialchars($s, ENT_QUOTES|ENT_HTML5, "UTF-8");htmlspecialcharsはPHPの関数で閲覧者が入力した文字をHTMLで表示できるように変換します。
具体的には先程説明した様に 「<」「 ) 」「 ” 」等を別の記号 変換したりします。
$sは先程も説明しましたが、フォームから入力された文字です。
ENT_QUOTES|ENT_HTML5は変換する種類の様なものです。
ENT_CONPAT（初期値）ENT_NOQUOTESなどあります。
詳細は
PHP: htmlspecialchars – Manual
PHPのフォームからの送信受取コード
<?php
if ($_SERVER["REQUEST_METHOD"] === "POST") {
if (!empty($_POST["gamedate"])) {echo "/". $gameDate = htmlspch($_POST["gamedate"]);}
if (!empty($_POST["matchorder"])) {echo "/". $matchOrder = htmlspch($_POST["matchorder"]);}
if (!empty($_POST["matchtime"])) {echo "/". $matchTime = htmlspch($_POST["matchtime"]);}
if (!empty($_POST["remarks"])) {echo "/". $remarks = htmlspch($_POST["remarks"]);}
}
?>上記ではフォームに入力された内容を 、独自のセキュリティ対策の関数htmlspch()を通して、 個別の変数に格納してHTMLで表示させています。
if ($_SERVER["REQUEST_METHOD"] === "POST") {送信の内容がPOSTだった場合の条件分岐です。
フォームからの送信はURLに送信内容が表示されるgetがあります。
また送信されるものの中にはページリンクなどもあるので、条件分岐設定しています。
if (!empty($_POST["gamedate"]))もし<input type="text" id="game-date" name="gamedate">に入力があった場合の条件分岐です。!emptyは厳密に「何も無いという事がない場合」という意味です。
echo "/". $gameDate = htmlspch($_POST["gamedate"]);} 入力内容の$_POST["gamedate"] を独自関数htmlspch()に通して、変数$gameDateに格納し、前に「/」を付けて、表示させるという事です。
WordPresのフォームでページ作成するコード
ここからはこの記事の「デモ」に設定していません。
デモに下記コードを設定すると、デモに入力された内容でページがどんどん増えてしまうからです。
<?php
if(isset($_POST['send'])){
$gday = new DateTime($gameDate);$machDay = $gday->format('Y.m.d');
$gamePageTitle = $machDay.$matchOrder.$matchTime."開始";
if($matchOrder=="第1試合"){$matchOrderSlug = "1st";}
if($matchOrder=="第2試合"){$matchOrderSlug = "2nd";}
if($matchOrder=="第3試合"){$matchOrderSlug = "3rd";}
$gamePageSlug = "date-".$gameDate."-".$matchOrderSlug;
$post = array(
'post_name' => $gamePageSlug,
'post_title' => $gamePageTitle,
'post_type' => 'game',
'post_status' => 'publish',
);
$page_id = wp_insert_post( $post );
if($page_id) {
update_post_meta($page_id, 'remarks', $remarks );
update_post_meta($page_id, 'match-date', $gameDate );
update_post_meta($page_id, 'match-order', $matchOrder );
update_post_meta($page_id, 'match-time', $matchTime );
}
}
?>上記はWordPresのwp_insert_post関数を使ってページを作成するコードです。
通常WordPresでページ作成する場合は、管理画面からクリックして、新規ページに新規IDを設定させて作ります。
wp_insert_post関数を使えば、コードでページを作成する事ができます。
if(isset($_POST['send'])){条件分岐で「sendボタンがクリックされた時」に「{}」内の処理を行うという事です。
$gday = new DateTime($gameDate);$machDay = $gday->format('Y.m.d');上記は日付ピッカーの入力形式、例えば2020年1月29日なら2020-01-29と形式されているフォーマットを2020.01.29に変更して、変数$machDayに格納しています。
new DateTime()関数はyy-mm-dd形式の日時をその他のフォーマットに変更します。
$gamePageTitle = $machDay.$matchOrder.$matchTime."開始";ここからはページの各パーツをフォームの入力から作ります。
上記コードはページのタイトルを変数に格納しています。
「PHPのフォームからの送信受取コード」でフォームからの入力が格納されている各変数 $machDay $matchOrder $matchTime でページのタイトルを作っています。
例えば
$machDay に「2020.1.31」
$matchOrder に「第2試合」
$matchTime に「14:20」
が各変数に格納されているとしたら、ページのタイトルは
「2020.1.31第2試合14:20開始」
というページタイトルになり、変数$gamePageTitleに格納します。
if($matchOrder=="第1試合"){$matchOrderSlug = "1st";}
if($matchOrder=="第2試合"){$matchOrderSlug = "2nd";}
if($matchOrder=="第3試合"){$matchOrderSlug = "3rd";}
$gamePageSlug = "date-".$gameDate."-".$matchOrderSlug;次は上記コードでページスラッグを作っています。
ページのスラッグは英数で作ります。$matchOrderに格納されている値は選択肢でこちらで事前設定していて、日本語ですので、条件分岐で第1試合の場合は 1st を変数$matchOrderSlugに格納すると設定します。
例えばページタイトルが 「2020.1.31第2試合14:20開始」の場合、ページスラッグは「date-2020-01-31-2nd」 となり変数$gamePageSlugに格納します。
$post = array(ここからが wp_insert_post 関数です。
変数$postに複数の条件を設定します。
'post_name' => $gamePageSlug,ページのスラッグを指定します。
先程解説した変数$gamePageSlugです。
'post_title' => $gamePageTitle,変数$gamePageTitleはページのタイトルを指定しています。
'post_type' => 'game','post_title'はページの種類を指定します。gameというのはカスタム投稿タイプの「game」という事です。
固定ページの場合はpage、投稿ページの場合はpostとなります。
'post_status' => 'publish','post_status'は公開状態を指定します。'publish'は公開済みという事です。
他には下記があります。
予約済 (future) 未来の日付に公開を予定されています。
下書き (draft)適切な ユーザーレベル を持つユーザーが見ることができる、未完成の投稿です。
承認待ち (pending)publish_posts 権限を持つユーザー（普通は 編集者 権限グループを割り当てられたユーザー）による公開を待っています。
非公開 (private)管理者レベルの WordPress ユーザーだけが見ることができます。
投稿ステータス – WordPress Codex 日本語版
$page_id = wp_insert_post( $post );上記コードは$postの指定内容でwp_insert_post関数を実行し、新規ページのIDか、エラーを$page_idに返しています。
if($page_id) {条件分岐でページIDが取得できていれば「{ }」内の処理を実行します。
update_post_meta($page_id, 'remarks', $remarks );このコードはカスタムフィールド(メタデータ)を設定しています。
カスタムフィールド名remarksに変数$remarksに格納されているフォームからの入力内容を、カスタムフィールドの値として設定しています。
「wp_insert_post」内容のリンク先
WordPressの管理画面以外でページを作成する関数wp_insert_postについては
関数リファレンス/wp insert post – WordPress Codex 日本語版
をご覧ください。