WordPressテーマCocoonのお問い合わせフォームをプラグイン無しで実装しました

プラグインをどこまで減らせるか

今回サイトを作るにあたってプラグインを使わないでどこまでいけるのか試してみたいと思いました。有名プラグインで実装しない方法で調べてみるとGoogleの問い合わせフォームとプログラムで自作されている方の記事を見つけましたので、今回は自作して公開されている方の方法を感謝して使うことにしました。

WordPress でプラグインを利用せずメールフォームを自作!画面遷移せず非同期処理で実装
WordPress でプラグインを使わないオリジナルの自作メールフォームを紹介します。非同期処理により画面遷移しないため、メール送信処理が高速で実行されるのが最大のポイントです。必要な画面・ファイルは、固定ページと送信用 PHP ファイルのみです。サンプルプログラムのダウンロードも用意しました。

JavaScript関連の設定をoffにする

念のためにCocoon高速化設定の中にあるJavaScript関連の2つのチェックボックスを外しておきます。その後丁寧に書かれている上記の記事に従って作業を進めます。

Cocoonの仕組みを考えて一部の作業を変更する

メールフォームソースコード【sendmail.php】のうち1〜90行目は固定ページのテキスト部分にそのまま貼り付け、96〜117の行はカスタムJavaScriptの項目に貼り付けます。

試してみるとメールが文字化けする

作業が終わって実際に問い合わせをしてみると動くのですが送られてきたメールが文字化けします。ただし私の使っているOSはLinuxなのでWindowsやMacでは文字化けはしないのかもしれません。文字化けの修正は記事内のメールフォームソースコード【sendmail.php】5行目と7行目の間に

mb_language("ja");
mb_internal_encoding("UTF-8");

を追加します。

// PHP5.1.0以上はタイムゾーンの定義が必須
date_default_timezone_set('Asia/Tokyo');
mb_language("ja");
mb_internal_encoding("UTF-8");
// --------------------------
// 個別設定項目(3つ)
// --------------------------
// 送信先メールアドレス

追記したあとのphpファイルは上記のようになります。
次に68行目の

$header.='Content-Type:text/plain;charset=iso-2022-jp\nX-Mailer: PHP/'.phpversion();

の記述を

$header.='Content-Type:text/plain;charset=iso-2022-jp';

に変更するとメールの文字化けは解消しました。

Cocoonの高速化設定を有効にすると動かなくなる

動くことを確認してから先程offにした設定のチェックボックスをonにして動作をたしかかめてみると動かなくなってしまいました。

知識がないので調べてみますとJavaScriptを圧縮すると動かなくなっていること、縮小化するとエラーが出る一番の可能性はセミコロンの記述漏れであること、JavaScriptのエラーはコピペで調べてくれるサイトがあることを知りました。そのサイトで確認した結果メールフォームソースコード【HTML・CSS・JavaScript】114行目

})

の部分を

});

に変更すると動くようになりました。
以上でお問い合わせフォームが動作するようになりました。