【WordPressカスタマイズ相談】現役プログラマが解決策を教えます

WordPress(ワードプレス)のお悩み、うまくいかなくてお困りなこと、不具合調査、新規制作依頼まで、ウェブアプリケーションエンジニアがあなたをサポートします。

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

f:id:jsaz:20161127225955j:plain

シンプルなショートコードベースのフォームプラグイン「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が使われていないことが判明。。。笑

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

入力、確認、完了ページの3サイトが存在していて、完了時にメールを送信していました。
下記、ページごとに実際に行った作業内容です。
単純に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を追記

最初のコンタクトから6日で完了

思わぬ落とし穴がありましたが、無事お客様には満足いただける対応ができました。業者か個人かはわかりませんが、他では数倍の見積もりを出されて困っていたそうです。

また今回はMW WP Formというプラグインを知ることができました。
ワードプレスのフォームプラグインはContact Form 7一択かと思っていましたが、これからは用途に応じて使い分けができるようになりました。


「どの会社に頼めば良いのか」「誰に尋ねれば良いのか」「いくらぐらいが相場なのか」といったWordPressのご相談、受け付けております。
特定の一箇所のみの修正はワンコイン対応可能ですが、その他は数千円から一万円前後でカスタマイズを行っています。

WordPressでお困りごとがある際は是非ご相談ください。
ご相談はコチラから↓↓↓
wowme.jp
ココナラでも受付中↓↓↓
coconala.com

広告を非表示にする