カスタムの書き込みパネルに画像アップロードフィールドを直接追加する方法を教えてください。
Wordpress管理者の "Pages"の下に新しいページを追加し、いくつかのカスタムフィールドを追加しました。アップロード画像フィールドをページエディタに追加できるようにしたいのですが、カスタムフィールドでこれを行う方法はありますか。
それとも、この能力が必要な場合に私が取るべき別の方向性はありますか？
ファイルのアップロードについてもっと知りたい人のために、ここに主要なトピックと問題点をカバーする簡単な入門書があります。これは、Linuxマシン上のWordPress 3.0を念頭に置いて書かれており、コードは概念を教えるための基本的な概要にすぎません。私はここの何人かの人々が実装上の改善のためのアドバイスを提供できると確信しています。
基本的なアプローチの概要
画像と投稿を関連付けるには、少なくとも3つの方法があります。post_metaフィールドを使用して画像パスを保存する、post_metaフィールドを使用して画像のメディアライブラリIDを保存する、または添付として画像を投稿に割り当てる。この例では、post_metaフィールドを使用して画像のメディアライブラリIDを格納します。 YMMV.
マルチパートエンコーディング
デフォルトでは、WordPressの作成＆編集フォームにはenctypeがありません。ファイルをアップロードしたい場合は、フォームタグに "enctype = 'multipart/form-data'"を追加する必要があります。そうしないと、$ _ FILESコレクションがまったくプッシュされません。 WordPress 3.0には、そのためのフックがあります。いくつかの以前のバージョンでは（詳細はわからない）あなたはformタグを文字列で置き換える必要があります。
function xxxx_add_edit_form_multipart_encoding() {
echo ' enctype="multipart/form-data"';
}
add_action('post_edit_form_tag', 'xxxx_add_edit_form_multipart_encoding');
メタボックスとアップロードフィールドを作成する
たいていの場合、メタボックスの作成方法については既に知っているので、メタボックスの作成については詳しく説明しませんが、ファイルフィールドを含む単純なメタボックスのみが必要であることを説明します。以下の例では、既存の画像を探し、存在する場合はそれを表示するためのコードをいくつか含めました。また、post_metaフィールドを使用してエラーを渡す単純なエラー/フィードバック機能も含めました。 WP_Errorクラスを使用するようにこれを変更したいと思うでしょう…それはただデモンストレーションのためです。
function xxxx_render_image_attachment_box($post) {
// See if there's an existing image. (We're associating images with posts by saving the image's 'attachment id' as a post meta value)
// Incidentally, this is also how you'd find any uploaded files for display on the frontend.
$existing_image_id = get_post_meta($post->ID,'_xxxx_attached_image', true);
if(is_numeric($existing_image_id)) {
echo '<div>';
$arr_existing_image = wp_get_attachment_image_src($existing_image_id, 'large');
$existing_image_url = $arr_existing_image[0];
echo '<img src="' . $existing_image_url . '" />';
echo '</div>';
}
// If there is an existing image, show it
if($existing_image_id) {
echo '<div>Attached Image ID: ' . $existing_image_id . '</div>';
}
echo 'Upload an image: <input type="file" name="xxxx_image" id="xxxx_image" />';
// See if there's a status message to display (we're using this to show errors during the upload process, though we should probably be using the WP_error class)
$status_message = get_post_meta($post->ID,'_xxxx_attached_image_upload_feedback', true);
// Show an error message if there is one
if($status_message) {
echo '<div class="upload_status_message">';
echo $status_message;
echo '</div>';
}
// Put in a hidden flag. This helps differentiate between manual saves and auto-saves (in auto-saves, the file wouldn't be passed).
echo '<input type="hidden" name="xxxx_manual_save_flag" value="true" />';
}
function xxxx_setup_meta_boxes() {
// Add the box to a particular custom content type page
add_meta_box('xxxx_image_box', 'Upload Image', 'xxxx_render_image_attachment_box', 'post', 'normal', 'high');
}
add_action('admin_init','xxxx_setup_meta_boxes');
ファイルアップロードの処理
これが大きな問題です。実際にはsave_postアクションにフックすることでファイルのアップロードを処理します。以下にコメントの多い機能を含めましたが、それが使用する2つの重要なWordPress機能に注目したいと思います。
wp_handle_upload（） アップロードの処理に関するすべてのマジックを行います。あなたはそれに$ _FILES配列とオプションの配列であなたのフィールドへの参照を渡すだけです（これらについてあまり心配しないでください - あなたが設定する必要がある唯一の重要なものはtest_form = falseです。私を信頼してください）。ただし、この関数はアップロードされたファイルをメディアライブラリに追加しません。それは単にアップロードを行い、新しいファイルのパス（そして手軽に、フルURLも）を返すだけです。問題がある場合はエラーを返します。
wp_insert_attachment（） はメディアライブラリに画像を追加し、適切なサムネイルをすべて生成します。単にアップロードしたファイルへのオプションの配列（タイトル、投稿ステータスなど）、およびローカルパス（URLではない）を渡すだけです。画像をメディアライブラリに入れることの素晴らしいところは、wp_delete_attachmentを呼び出してそれにアイテムのメディアライブラリIDを渡すことで、後ですべてのファイルを簡単に削除できることです（これは以下の関数で行います）。この関数では、wp_generate_attachment_metadata（）とwp_update_attachment_metadata（）も使用する必要があります。これらは期待通りの動作をします - メディアアイテムのメタデータを生成します。
function xxxx_update_post($post_id, $post) {
// Get the post type. Since this function will run for ALL post saves (no matter what post type), we need to know this.
// It's also important to note that the save_post action can runs multiple times on every post save, so you need to check and make sure the
// post type in the passed object isn't "revision"
$post_type = $post->post_type;
// Make sure our flag is in there, otherwise it's an autosave and we should bail.
if($post_id && isset($_POST['xxxx_manual_save_flag'])) {
// Logic to handle specific post types
switch($post_type) {
// If this is a post. You can change this case to reflect your custom post slug
case 'post':
// HANDLE THE FILE UPLOAD
// If the upload field has a file in it
if(isset($_FILES['xxxx_image']) && ($_FILES['xxxx_image']['size'] > 0)) {
// Get the type of the uploaded file. This is returned as "type/extension"
$arr_file_type = wp_check_filetype(basename($_FILES['xxxx_image']['name']));
$uploaded_file_type = $arr_file_type['type'];
// Set an array containing a list of acceptable formats
$allowed_file_types = array('image/jpg','image/jpeg','image/gif','image/png');
// If the uploaded file is the right format
if(in_array($uploaded_file_type, $allowed_file_types)) {
// Options array for the wp_handle_upload function. 'test_upload' => false
$upload_overrides = array( 'test_form' => false );
// Handle the upload using WP's wp_handle_upload function. Takes the posted file and an options array
$uploaded_file = wp_handle_upload($_FILES['xxxx_image'], $upload_overrides);
// If the wp_handle_upload call returned a local path for the image
if(isset($uploaded_file['file'])) {
// The wp_insert_attachment function needs the literal system path, which was passed back from wp_handle_upload
$file_name_and_location = $uploaded_file['file'];
// Generate a title for the image that'll be used in the media library
$file_title_for_media_library = 'your title here';
// Set up options array to add this file as an attachment
$attachment = array(
'post_mime_type' => $uploaded_file_type,
'post_title' => 'Uploaded image ' . addslashes($file_title_for_media_library),
'post_content' => '',
'post_status' => 'inherit'
);
// Run the wp_insert_attachment function. This adds the file to the media library and generates the thumbnails. If you wanted to attch this image to a post, you could pass the post id as a third param and it'd magically happen.
$attach_id = wp_insert_attachment( $attachment, $file_name_and_location );
require_once(ABSPATH . "wp-admin" . '/includes/image.php');
$attach_data = wp_generate_attachment_metadata( $attach_id, $file_name_and_location );
wp_update_attachment_metadata($attach_id, $attach_data);
// Before we update the post meta, trash any previously uploaded image for this post.
// You might not want this behavior, depending on how you're using the uploaded images.
$existing_uploaded_image = (int) get_post_meta($post_id,'_xxxx_attached_image', true);
if(is_numeric($existing_uploaded_image)) {
wp_delete_attachment($existing_uploaded_image);
}
// Now, update the post meta to associate the new image with the post
update_post_meta($post_id,'_xxxx_attached_image',$attach_id);
// Set the feedback flag to false, since the upload was successful
$upload_feedback = false;
} else { // wp_handle_upload returned some kind of error. the return does contain error details, so you can use it here if you want.
$upload_feedback = 'There was a problem with your upload.';
update_post_meta($post_id,'_xxxx_attached_image',$attach_id);
}
} else { // wrong file type
$upload_feedback = 'Please upload only image files (jpg, gif or png).';
update_post_meta($post_id,'_xxxx_attached_image',$attach_id);
}
} else { // No file was passed
$upload_feedback = false;
}
// Update the post meta with any feedback
update_post_meta($post_id,'_xxxx_attached_image_upload_feedback',$upload_feedback);
break;
default:
} // End switch
return;
} // End if manual save flag
return;
}
add_action('save_post','xxxx_update_post',1,2);
権限、所有権、およびセキュリティ
アップロードに問題がある場合は、権限に関係している可能性があります。私はサーバー設定の専門家ではありませんので、この部分が気になる場合は訂正してください。
まず、wp-content/uploadsフォルダが存在し、その所有者がApacheであるapacheであることを確認してください。もしそうなら、あなたは744にパーミッションを設定することができなければならず、そしてすべてはちょうどうまくいくはずです。所有権は重要です - ディレクトリが適切に所有されていないなら777にpermを設定しても助けにならないことが時々あります。
Htaccessファイルを使用してアップロードおよび実行されるファイルの種類を制限することも検討する必要があります。これにより、画像以外のファイルをアップロードしたり、画像に偽装したスクリプトを実行したりすることができなくなります。あなたはおそらくもっと権威のある情報のためにこれをグーグルするべきですが、あなたはこのように単純なファイルタイプ制限をすることができます：
<Files ^(*.jpeg|*.jpg|*.png|*.gif)>
order deny,allow
deny from all
</Files>
@MathSmathが提供したコードは正しいです。ただし、多数のアップロードフィールドを処理する場合、または複数のファイルをアップロードする場合は、それを大幅に変更する必要があります。
その上、それはファイルをアップロードするためにWordPressメディアライブラリを利用しません（それは舞台裏のすべての汚い仕事をします）。
Meta Box のようなプラグインを見てください。プラグインはファイルをアップロードするための両方の方法をサポートします。
特に複数のアップロードを作成したい場合は、コードを書いたり保守したりする手間を省くことができます。
免責事項：私はMeta Boxの作者です。