メールフォームプロCGIをWordPressに設置

2013/06/03
タグ: CGI, テーマ, テンプレート, 中級

WordPressのフォームについて、定番のContact Form7をはじめ、いろいろとプラグインにこと欠きません。
しかし、静的なHTMLサイトから移行してきた方は使い慣れたCGIフォームを実装したいという場合も多いようです。

ということで、今回は人気のメールフォームプロをWordPressに実装してみます。

INDEX

mailformpro CGI
WordPress用にカスタマイズ

mailformpro CGI

例としてあげてるのはメールフォームプロ（mailformpro3.2.0）です。
このCGIはHTMLのサイト構築で使ったことがあるのですが、基本的なフォーム機能はもちろんのこと、住所自動入力やオリジナルの送信完了画面などかなり高機能です。
フリーのメールフォームCGIとしてはかなり人気のあるプログラムでデザインもそのまま使ってもかなりイケてます。

メールフォームプロ自体のダウンロードと詳細情報はSYNCK GRAPHICAさんのサイトをご覧ください。

WordPress用にカスタマイズ

CGIのプログラムは下記のパスにアップするとします。

http://example.com/cgi/mailformpro/

WordPressで使う！という記事ですので、ここでは基本のサンプルファイルが動作したという条件で説明をしていきます。

カスタマイズといっても、それほど敷居の高いものではありません。基本は使っているテーマのヘッダ（header.php）にメールフォームプロに必要なCSSとJSライブラリを読み込むための記述を加えるだけです。

<!--[メールフォームプロ・参照ファイルここから]-->
<script charset="UTF-8" type="text/javascript" src="commons/jQuery.js"></script><script charset="UTF-8" type="text/javascript" src="commons/mfp.lang.js"></script>
<script charset="UTF-8" type="text/javascript" src="commons/mfp.extensions.js"></script><script charset="UTF-8" type="text/javascript" src="commons/mailform.js"></script>
<script id="mfp2zip" charset="UTF-8" type="text/javascript" src="postcodes/get.cgi"></script>
<!--[メールフォームプロ・参照ファイルここまで]-->

サンプルが何種類か用意されているので、使用したいタイプのサンプルファイルからコピーすればよいと思います。（ヘッダは同じだと思いますが）注意として相対パスになっているので、自分のサイト用に絶対パスに書き換えます。厳密には相対パスでも構いませんが、CMSに組み込む場合は絶対パスの方が分かりやすいでしょう。
例えば、example.com/cgi/にmailformproを設置するのであればこんな感じです。

<!--[メールフォームプロ・参照ファイルここから]-->
<script charset="UTF-8" type="text/javascript" src="http://example.com/cgi/mailformpro/commons/jQuery.js"></script>
<script charset="UTF-8" type="text/javascript" src="http://example.com/cgi/mailformpro/commons/mfp.lang.js"></script><script charset="UTF-8" type="text/javascript" src="http://example.com/cgi/mailformpro/commons/mfp.extensions.js"></script>
<script charset="UTF-8" type="text/javascript" src="http://example.com/cgi/mailformpro/commons/mailform.js"></script><script id="mfp2zip" charset="UTF-8" type="text/javascript" src="http://example.com/cgi/mailformpro/postcodes/get.cgi"></script>
<!--[メールフォームプロ・参照ファイルここまで]-->

mailform.jsにも相対パスが含まれているので変更が必要かもしれません。
あとはフォームのHTML自体を自分の必要な項目にカスタマイズして投稿や固定ページにコピーすればよいのですが、ここにも相対パスが登場するので、適時絶対パスに書き換えます。
専用のページテンプレート（form.php）を作成して、実際の固定ページで適用す方がよいかもしれません。

これでメールフォームプロCGIをへの設置が完了。
順を追っていけば、簡単に設置できます。
プラグインに飽き足らず、高機能なフォームが必要な場合はお勧めです！
ただし、このヘッダ追記は実際はフォーム設置ページにしか必要ありません。
本来は対象ページにのみ出力させるべきでしょう。
こちらについては次の記事を参考にしてください。

CGIなどで追加するヘッダ情報を指定ページのみに出力