WordPressで画像アップロード付き投稿フォームをつくるメモ
協業してるWEBデザイナーがWordPress(以下WP)と格闘していたので、
応援しようと、とりあえず画像投稿ができるサンプルをつくりました。
コードがぐちゃぐちゃの状態なので、これに加えて、
エラーの補足や投稿オプションなども追加しないとまともなものになりません。
ご注意を。
さて、投稿フォームは、
[1]form.php
[2]form_next.php
の2つからなるのですが、
これらのファイルをWPをアップロードしたディレクトリのテーマにテンプレートとして保存します。
今回は、/wp-content/themes/original 直下に配置します。
(テーマテンプレート名がoriginalです)
WPの管理画面で固定ページをつくります。
今回は、
「投稿フォーム用ページ」
と
「投稿結果ページ」
をつくります。
「投稿フォーム用ページ」にform.phpのテンプレートを適用します。
「投稿結果ページ」にform_next.phpのテンプレートを適用します。
form.phpのactionの値には投稿結果ページのパーマリンクURLを指定します。
<form action="<以下のform_next.phpテンプレートを適用した固定ページのURL>" method="post" name="form" enctype="multipart/form-data">
これで、投稿フォーム用ページから画像ファイルと一緒に投稿できるはずです。
(ただし、サーバー側のPHPでmove_uploaded_fileなどの関数が正常動作することが前提です。)
[1]form.php
<?php /* Template Name: お問い合わせ1 */ ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>投稿フォーム</title> </head> <body> <form action="<以下のform_next.phpテンプレートを適用した固定ページのURL>" method="post" name="form" enctype="multipart/form-data"> <table cellpadding="5" cellspacing="0" id="contact"> <tr> <td>タイトル</td> <td> <input name="title" type="text" size="50"> </td> </tr> <tr> <td>カテゴリー</td> <td> <input type="radio" name="category" id="cat1" value="1" /><label for="1">カテゴリー1</label> <input type="radio" name="category" id="cat2" value="2" /><label for="2">カテゴリー2</label> </td> </tr> <td>投稿内容</td> <td> <textarea name="contents" cols="50" rows="10"></textarea> </td> </tr> <tr> <td>アップロード</td> <td><input type="file" name="pict01" size="30" /></td> </tr> <tr> <td colspan="2"> <input type="submit" name="submit" value="投稿する"> </td> </tr> </table> </form> </body> </html>
[2]form_next.php
<?php /* Template Name: お問い合わせ2 */ ?> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> 投稿が完了しました。<br> 承認されるまで、しばらくお待ちください。 <? //フォームの内容を変数に格納 $post_category = $_POST["category"]; $post_title = $_POST["title"]; $post_contents = $_POST["contents"]; //投稿 $postarr = array(); $postarr['post_status'] = 'draft'; $postarr['post_type']='post'; $postarr['post_author']=$user_ID; $postarr['post_category'] = array($post_category,); $postarr['post_title'] = $post_title; $postarr['post_content'] = $post_contents; //投稿ID $post_id=wp_insert_post($postarr); //アップロードするディレクトリとファイルを設定 $filename=basename($_FILES['pict01']['name']); $filename=trim($filename); $filename=ereg_replace(" ", "-", $filename); $upload_dir_var=wp_upload_dir(); $upload_dir=$upload_dir_var['path']; $uploaddir=realpath($upload_dir); $uploadfile=$uploaddir.'/'.$filename; //ファイルを uploadfileにfilenameでアップロードする if ($_FILES["pict01"]["size"] === 0){ //echo "ファイルはアップロードされてません!! アップロードファイルを指定してください。"; }else { $result = @move_uploaded_file( $_FILES["pict01"]["tmp_name"], $uploadfile); if ($result === TRUE ){ //echo "アップロード成功!!"; }else{ //echo "アップロード失敗!!"; } } //ファイルタイプ $typefile=$_FILES['pict01']['type']; //ファイル名の拡張子なし $slugname=preg_replace('/\.[^.]+$/', '', basename($uploadfile)); //アップロードファイルがある場合、以下実行 if ( file_exists($uploadfile) ) { //拡張子をチェックする $exten = ''; if ( $typefile == 'image/jpeg' ) { $exten = 'jpg'; } elseif ( $typefile == 'image/png' ) { $exten = 'png'; } elseif ( $typefile == 'image/gif' ) { $exten = 'gif'; } if($exten == ''){ //echo " file type error. You can upload jpg, png, gif "; } //アップロードファイルを添付する $attachment = array( 'post_mime_type' => $typefile, 'post_title' => $slugname, 'post_content' => '', 'post_status' => 'inherit' ); $attach_id = wp_insert_attachment( $attachment, $uploadfile, $post_id ); require_once(ABSPATH . "wp-admin" . '/includes/image.php'); $attach_data = wp_generate_attachment_metadata( $attach_id, $uploadfile ); wp_update_attachment_metadata( $attach_id, $attach_data ); //ファイル添付が完了したら if($attach_id != 0){ //post_idの投稿に画像を反映させる処理 $img_src = wp_get_attachment_url($attach_id); wp_update_post( array( 'ID' => $post_id, 'post_content' => $postarr['post_content']. '<img src="'.$img_src. '" >' ) ); //投稿の更新が成功した場合は投稿 ID。失敗した場合は 0。 }else{ //echo "error attach <br>"; } } // fin if file_exists ?> </body> </html>