WordPressプラグイン「MW WP Form」に画像添付できるようにカスタマイズ

f:id:jsaz:20161127225955j:plain

シンプルなショートコードベースのフォームプラグイン「MW WP Form」
プラグイン「MW WP Form」
MW WP Formは使われていたけど・・・
MW WP Formの画像添付の流れを解析
画像添付できるようにカスタマイズしたこと
最初のコンタクトから6日で完了

シンプルなショートコードベースのフォームプラグイン「MW WP Form」

ココナラ経由でお問い合わせフォームに画像を添付したいというリクエストがありました。

詳しくヒアリング、調査してみると、
・WordPressでお店のサイトを運用中
・お問い合わせフォームに画像を添付したい
・フォームは業者に頼んでPHPで作ってもらった
・でも固定ページとプラグイン一覧には「MW WP Form」がある
・「MW WP Form」は画像添付ができる
と、いうことがわかりました。

プラグイン「MW WP Form」

MW WP Formとは、確認画面付きのフォームでショートコードを配置してページを作っていくのでデザインのカスタマイズがしやすいというのが特徴のようです。

■プラグイン開発者：キタジマタカシさんのサイト
plugins.2inc.org

■画像添付ができることが紹介されている
2inc.org

■使い方
確認画面付き問い合わせフォーム「MW WP Form」導入の4ステップ
nandemo-nobiru.com

■動かなかった場合の注意点
MW WP Formがうまく動かなかった、私の基本的なミス3つ
plus-put.com

MW WP Formは使われていたけど・・・

「フォームは業者に頼んでPHPで作ってもらった」という点が怪しかったのですが、対応は可能だと伝えるとすぐに正式に依頼をいただくことができました。

該当のネットに掲載されている通りに、問い合わせフォームの固定ページにショートコードを入稿してみますが、ページに反映されません。。。

[mwform_image name="image"]

やはり、なにかおかしいとテーマフォルダをのぞいてみると・・・

なんとお問い合わせフォームは、固定ページの独自テンプレートが使われていました。。。

これが「業者に頼んでPHPで作ってもらった」という意味だったようです。
業者の方がMW WP Formで出力したHTMLを固定ページの独自テンプレートに直接記述し、cssなどを使いデザインをしやすいように作ったように思いました。
デザインを優先した担当の人だったんですね。。。

MW WP Formの画像添付の流れを解析

ということで、その独自テンプレートの中でPHPを使い画像のアップロード処理を作らなければいけなくなりました。

MW WP Formではどのようにファイルの添付を行っているのでしょうか、調べてみました。

・WordPressのアップロード処理を使いアップロード
・そのアップロードファイルのURLを取得し、お問い合わせ完了後に送信されるメールに記載する

簡単にまとめるとこのような流れでした。

メール送信部分も外部のPHP スクリプトが使われていました。
ということで、ほぼMW WP Formが使われていないことが判明。。。笑

画像添付できるようにカスタマイズしたこと

入力、確認、完了ページの３サイトが存在していて、完了時にメールを送信していました。
下記、ページごとに実際に行った作業内容です。
単純にWordPressの機能を使ってPHPでフォームを作成したものなので、PHPで応募フォームやお問い合わせフォームを作りたい方は流用できるかもしれません。

■お問い合わせ入力ページ：画像添付用のHTMLを入稿

■お問い合わせ確認ページ：確認画面遷移時にファイルをアップロードする。アップロードファイルのURLを完了ページに送る

$img_url = null;
if(isset($_FILES['form_image']['name']) && !empty($_FILES['form_image']['name'])){
	//WordPress基本設定読み込み
	if (!file_exists('[ワードプレスインストールフォルダ]/wp-load.php')) {
		exit("wordpress file is not found.");
	}
	require_once('[ワードプレスインストールフォルダ]/wp-load.php');
	//WPアップロードフォルダ
	$upload_dir = wp_upload_dir();
	//添付画像ファイル名
	$filename = $_FILES['form_image']['name'];
	//添付tmp画像ファイル名
	$tmpfilename = $_FILES['form_image']['tmp_name'];
	//UP画像ファイルパス
	$filepath = $upload_dir['path'] . "/" . $filename;
	//UP画像URL
	$img_url = $upload_dir['url'] . "/" . $filename;

	//ファイルが存在しない場合はダウンロードする
  	if (!file_exists($filepath) ) {
		try {
			//ディレクトリを再帰的に作成する
			$is_mkdir = wp_mkdir_p($upload_dir['path']);
			if (!$is_mkdir) {
				throw new Exception("error is wp_mkdir_p."); 
			}
			//有効なファイル形式か調べる
			$wp_filetype = wp_check_filetype($filename, null );
			if (!$wp_filetype) {
				throw new Exception("error is wp_check_filetype."); 
			}
			//ファイルアップロード
			move_uploaded_file($tmpfilename, $filepath);
		} catch (Exception $e) {
			exit("画像添付に失敗しました、戻ってやりなおしてください。\n[" . $e->getMessage() . "]");
		}
	} else {
		//ファイルは存在しているので何もしない
	}
}
?>

■お問い合わせ完了ページ：元請企業さんが作ったメール送信PHP スクリプトに画像のURLを追記