言わずと知れた有名プラグイン「Contact Form 7」。

WordPressでお問い合わせフォームと言えばこれって感じです。

もちろんこのサイトでも使っていますし、他のサイトでも私はContact Form 7しか使ったことがありません。

そんなContact Form 7ですが、現バージョン（2019年8月時点）では、AMPに対応しておらず・・・。

AMP対応していないサイトなら特に問題ないし、対応サイトでも該当ページのみお問い合わせフォームを消すなり、AMP出力を除外すればいいのですが。

導入文の後、「こちらをクリック」からフォームに移動するのではなく、リンクを挟まず直下にフォームを設置したかったので試行錯誤してみました。

どうやって対応させたか

目次へ戻る

<form>自体はAMPに対応していて、フォーマットに沿ってフォームを作ればOKです。

なのですが、Contact Form 7はJavaScriptも結構使われていて、そのJavaScriptはAMPでは使えないという問題が・・・。

ソース上でAMPに対応させることは簡単だったのですが、実際に動かすのが大変で。

色々と調べた結果、プラグインファイルもいじる必要がある気がしたので動かすことは諦めました。

頻繁に更新されているプラグインだし、更新の度に書き換えるのは面倒だし。

で、どうやったかというと、CSSでAMPページの時はフォームに飛ぶリンクボタンが表示されるようにしました。

手順は次の通りです。

  1. AMPエラー対策
  2. 記事にAMPの時のボタンを表示させるhtmlを記述
  3. CSSでAMPとそうでない時の表示を切り替える

あまり良いやり方ではないと思いますが、一応メモしておきます。

AMPエラー対策でやったことは２つだけ

目次へ戻る

色々やらなければならないことがあるのかなと思っていましたが、２つだけでOKでした。

  • メタタグを追加
  • <form>タグの一部属性を置換

これだけです。

以下の記事を参照しました。

https://www.mitsue.co.jp/knowledge/blog/frontend/201708/29_1526.html

正式に対応させるならやるべきことは他にもいくつかあるので注意です。

今回はあくまでAMPエラー回避のためだけにやりました。

見た目ではフォームが表示され、AMPエラーもありませんが、フォームは動きません（汗

メタタグを追加

以下を追加しました。

<script async custom-element=”amp-form” src=”https://cdn.ampproject.org/v0/amp-form-0.1.js“></script>

理屈とかそういうのは考えずに、おまじないだと思うようにしてます。

AMPページでフォームを使うには個のメタタグがないとダメみたいですね。

あ、AMPページでの話ですよ。

非AMPページではこのメタタグが入らないように条件分岐して追加します。

<form>タグを置換

具体的にはaction属性をaction-xhr属性に置換します。

<form action=”○○○” method=”post” class=”wpcf7-form” novalidate=”novalidate“>

を

<form action-xhr=”○○○” method=”post” class=”wpcf7-form” novalidate=”novalidate“>

にするということです。

functions.phpなどのテーマファイルに、

preg_replace('/<form([^>]+?)action([^>]+?)\?amp=1([^>]*)>/is','<form$1action-xhr$2$3 target="_top">', $content);

という感じで置換しました。

実際にはこれをthe_content()のフィルターにしたり、AMPページかどうかの条件分岐が入りますが。

私が作ったテーマでは以下のように実装してあります。

function bunnypress_content_amp( $content ){
	if( !bunnypress_amp_check() ) {
		return $content;
	}
	$content = preg_replace('/<form([^>]+?)action([^>]+?)\?amp=1([^>]*)>/is','<form$1action-xhr$2$3 target="_top">', $content); } add_filter('the_content','bunnypress_content_amp')

bunnypress_amp_check()という自作関数でAMPページがどうかを判別しています。

記事にAMPの時のボタンを表示させるhtmlを記述

目次へ戻る

元々、

{contact-form-7 id="○○○"}

だったのを、

<div class="amp">
<a href="フォームへのURL">ご注文はコチラ</a>
</div>
<div class="not_amp">
{contact-form-7 id="○○○"}
</div>

という感じです。

CSSでAMPとそうでない時の表示を切り替える

目次へ戻る

AMPページかどうかを判別するために、<body>クラスを追加します。

functions.phpに追加するコードは次の通り。

function bunnypress_amp_class($classes) {
	$classes [] = 'bunnypress_amp_class';
	return $classes;
}
if( bunnypress_amp_check() ) add_filter('body_class', 'bunnypress_amp_class');

これでAMPページの時はbunnypress_amp_classというクラスが追加されるようになりました。

あとはCSSを、

.amp{
	display:none;
}
.bunnypress_amp_class .amp{
	display:block;
}
.bunnypress_amp_class .not_amp{
	display:none;
}

などとしておけば振り分け完了です。

完成サンプル

目次へ戻る

そうして出来上がったページが以下です。

WordPressテーマ「BunnyPress」を作りました

最下部の「ご注文はコチラ」というところに注目です。

↓AMPページのURLはこちら
https://yws.tokyo/bunnypress/?amp=1

とりあえずこれで様子を見ることにします。

あとがき

目次へ戻る

そもそもフォームを記事の下に持ってこなければこんな苦労はないんだけど。

素人の考えだけどページの遷移は可能な限り少ない方がいいかな～と。

物販アフィリエイトする商品のLPも直フォーム多いしね。

フォームもContact Form 7を使わなければもっとスマートにできた可能性はあります。

でもContact Form 7って国産の有名プラグインだし、使いたいじゃん？

無理やり感は否めないけど、フォームタグの置換とか、<body>クラスの追加とかはとりあえずやっておけば後々役立つ日が来ると信じてみます。