こんにちは、安立です。
先日久しぶりにWordpressの実装をしました。
問い合わせフォームの実装で、Snow Monkey Formsを使用してみました。
なのですが、PHPのテンプレートファイル内での呼び出しがオフィシャルにはサポートされていないものでした。
今回はそこに立ち向かった話となります。
前提
WordPressのテーマには、クラシックテーマとブロックテーマがありますが、今回はクラシックテーマを使う前提です。
というのも、Snow Monkey Formsで作ったフォームはブロックとなるので、ブロックテーマであればとても簡単に組み込めます。
ところがどっこい、クラシックテーマのテンプレートファイルに使おうと思うとちょっとした工夫が必要となります。
検証にあたってクラシックテーマはCocoonを使わせていただきました。
オフィシャルな方法
自分が行った方法の紹介の前に・・・
実はSnow Monkey Formsのフォーラムで解決策が一つ提示されているのです。
Snow Monkey Forms をPHPファイル内で使用する方法について
echo apply_filters( 'the_content', '<!-- wp:snow-monkey-forms/snow-monkey-form {"formId":xxxxx} /-->' );
上記のコードで可能です。
Snow Monkey Formsで作ったフォームにはformIdが付与されるため、それをキーにPHPテンプレート内で呼び出すというものです。
ですがここで問題があります。
この方法はformIdをキーとしているという点です。
案件で行う場合、ローカル環境、開発環境、STG環境、本番環境など様々な環境があります。
formIdはフォーム作成した時に自動で採番されるので、何も対策していないと環境毎にバラバラのものとなります。
されはて、これは困りましたね。
環境別に呼び出すformIdを変更したり、開発環境のDBから記事データを抽出してその他の環境に持っていく・・・なども考えられますがちょっと面倒ですよね。
ということで、どうにかできないかを考えみましょう。
対応策を考えた
なるべくWordPressの通常の機能を使いつつ、異なる環境間でも手間をかけずにフォームをテンプレートに埋め込む方法はないものか・・・
と考えた結果、思いつきました。
結論をまず書きましょう。
以下です。
- Snow Monkey Formsでフォームを作成
- 固定ページに1のフォームを読み込む
- 2の固定ページにユニークなslugを指定する
- 3のslugをキーにapply_filtersでテンプレートにコンテンツを出力
- 2で作成した固定ページは直接にはアクセスできないようにする
※本来であればformIdの方がユニークで、重複する危険がなく良いのですが複数環境だと使い勝手が悪くなるため、苦肉の策といった形です。
※slugはユニークである事が担保されないため、気をつけましょう。
1. Snow Monkey Formsでフォームを作成
Snow Monkey Formsでお問い合わせフォームを作る方法の記事などを参考に作りましょう。
2. 固定ページに1のフォームを読み込む
固定ページにSnow Monkey Formsで使ったフォームを読み込みましょう。
2-1. ブロックで「Snow Monkey Form」を選択する
固定ページのタイトルは表示には使わないので、わかりやすい名前をつけておきましょう。
2-2. プルダウンから1で作成したフォームを選択する
これで固定ページにフォームを埋め込めました。
3. 作成した固定ページにユニークなslugを指定する
テンプレートの読み込みに使うため、固定ページのリンク設定から、ユニークなslugを指定しましょう。
ここではcontact-formと設定しています。
ここまで設定したら、固定ページを公開しましょう。
4. 作成した固定ページをPHPのテンプレートファイルに出力する
テンプレートはなんでも良いのですが、今回は投稿ページにフォームを設置してみましょう。
下図の赤枠部分に設置するものとします。
投稿ページのテンプレートはsingle.phpとなるので、single.phpをエディタで開いて、フォームを設置したい箇所に以下のコードを貼り付けましょう。
<?php
$contact_form_page = get_page_by_path( 'contact-form' );
if($contact_form_page) {
echo apply_filters( 'the_content', $contact_form_page->post_content );
}
?>
get_page_by_pathでslugを指定すると、作成したページを引っ張ってこれるので、引っ張ってきたもののコンテンツの中身をapply_filtersを使って出力してます。
テンプレートにコードを貼り付けた結果の表示が下図です。
赤枠部分がフォームです。
成功！
やったね！！！
5. 固定ページを直接アクセスできないようにする
作成した固定ページは直接使うことはないので、直アクセスは禁止しておきましょう。
404扱いにしてしまうのが無難ですかね。
以下のコードでいけます。
function custom_page_404() {
// 固定ページのスラッグを指定
if ( is_page( 'contact-form' ) ) {
global $wp_query;
$wp_query->set_404();
status_header( 404 );
nocache_headers();
}
}
add_action( 'template_redirect', 'custom_page_404' );
何かしらの方法でサイトマップのxmlとかに自動出力している場合は、出力されないようにするなどもしておいた方が良さそうですのでご注意ください。
まとめ
というわけで、Snow Monkey Forms をPHPのテンプレートファイル内で使用する方法を紹介しました。
知恵を絞れば考えつくものですね。
ブロックテンテーマを使えばこのような苦労もしなくて済むので、積極的にブロックテーマを採用していきたいですよね。
それでは良いエンジニアライフを。
またいつか。
Discussion