¿Cómo puedo añadir un campo de carga de imágenes directamente a un panel personalizado de escritura?
https://wordpress.stackexchange.com/questions/4307
-
16-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
¡Tengo una nueva página en "páginas" en la administración de WordPress, y ha añadido varios campos personalizados. También me gustaría ser capaz de añadir un campo de carga de imágenes al editor de la página - ¿hay alguna manera de hacerlo a través de campos personalizados-?
O hay una dirección diferente tengo que tomar si necesito esta capacidad?
Solución
Para cualquier persona que quiera saber más sobre la carga de archivos, aquí está una cartilla rápida que cubre los principales temas y puntos de dolor. Esto está escrito con WordPress 3.0 en una máquina Linux en mente, y el código es sólo una descripción básica para enseñar los conceptos. Estoy seguro de que algunas personas aquí podría ofrecer asesoramiento para la mejora de la aplicación.
Esquema de su enfoque básico
Existen al menos tres maneras de asociar imágenes con mensajes: utilizando un campo post_meta para almacenar la ruta de la imagen, utilizando un campo post_meta para almacenar los medios de comunicación de la imagen de la biblioteca Identificación (más sobre esto más adelante), o la asignación de la imagen para el puesto como un archivo adjunto. En este ejemplo se utilizará un campo post_meta para almacenar ID biblioteca multimedia de la imagen. Tu caso es distinto.
multiparte codificación
Por defecto, WordPress' crear y editar formularios no tienen enctype. Si desea cargar un archivo, tendrá que añadir una "enctype =" multipart / form-data" a la etiqueta de formulario - de lo contrario la colección $ _FILES no conseguirá empujado a través del todo. En WordPress 3.0, hay un gancho para eso. En algunas versiones anteriores (no estoy seguro de los detalles) que tiene que reemplazar cadena de la etiqueta de formulario.
function xxxx_add_edit_form_multipart_encoding() {
echo ' enctype="multipart/form-data"';
}
add_action('post_edit_form_tag', 'xxxx_add_edit_form_multipart_encoding');
Crea el Meta Box y Subir Campo
No irá muy lejos en la creación de cajas de meta ya que la mayoría de ustedes probablemente ya saben cómo hacerlo, pero sólo voy a decir que sólo se necesita una caja meta simple con un campo de archivo en él. En el siguiente ejemplo he incluido algo de código para buscar una imagen existente, y lo mostrará si existe. También he incluido algunas funciones de error / retroalimentación simple que pasa errores utilizando un campo post_meta. Usted querrá cambiar esto para utilizar la clase WP_Error ... es sólo para demostración.
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');
Cuidado de la carga de archivos
Este es el grande - en realidad el manejo de la carga de archivos mediante la conexión en la acción save_post. He incluido a continuación una función comentado fuertemente, pero me gustaría tener en cuenta las dos funciones fundamentales que utilicen WordPress:
wp_handle_upload () hace toda la magia de, bueno, el manejo de la carga. Usted sólo tiene que pasar una referencia a su campo en el array $ _FILES, y una serie de opciones (no se preocupe demasiado acerca de estos - el único importante que hay que configurar es test_form = false confiar en mí.). Esta función no es, sin embargo, añadir el archivo subido a la biblioteca multimedia. Simplemente se hace la carga y devuelve la ruta del archivo nuevo (y, convenientemente, la dirección URL completa así). Si hay un problema, se devuelve un error.
wp_insert_attachment () añade la imagen a la biblioteca de medios, y genera todas las miniaturas correspondientes. Usted sólo tiene que pasar un array de opciones (título, estado de correos, etc.), y la ruta local (no URL) para el archivo que acaba de cargar. La gran cosa acerca de poner sus imágenes en la biblioteca de medios es que se puede eliminar fácilmente todos los archivos más tarde llamando wp_delete_attachment y pasándolo medios de la biblioteca Identificación del artículo (lo que estoy haciendo en la función más adelante). Con esta función, también tendrá que utilizar wp_generate_attachment_metadata () y wp_update_attachment_metadata (), que hacen exactamente lo que se espera que hacen -. Generan metadatos para el elemento de medios
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);
Permisos, Seguridad y propiedad
Si tiene problemas para subir, puede ser que tenga que ver con los permisos. No soy un experto en la configuración del servidor, así que por favor, corríjanme si esta parte es poco firme.
En primer lugar, asegúrese de que su wp-content / uploads carpeta existe, y es propiedad de apache: apache. Si es así, usted debe ser capaz de establecer los permisos a 744 y todo lo que sólo debe trabajar. La propiedad es importante -. Incluso dejando permanentes a 777 veces no ayudará si el directorio no es propiedad correctamente
También debería considerar limitar los tipos de archivos cargados y ejecutados usando un archivo .htaccess. Esto evita que la gente de la carga de archivos que no son imágenes, y de la ejecución de secuencias de comandos disfrazados de imágenes. Probablemente debería google esto para más información autorizada,pero se puede hacer el tipo de archivos simple limitando de esta manera:
<Files ^(*.jpeg|*.jpg|*.png|*.gif)>
order deny,allow
deny from all
</Files>
Otros consejos
El código que se proporciona @MathSmath derecha. Sin embargo, si se maneja muchos campos de carga, o si desea cargar varios archivos, entonces usted tiene que modificar mucho.
Además, no utiliza la biblioteca de medios de WordPress para subir archivos (que hace todo el trabajo sucio detrás de la escena).
Te sugiero que eche un vistazo a un plugin como Meta Caja . El plugin es compatible con ambas formas de subir archivos:
- Via
input[type="file"]HTML5, que utiliza un código similar anteriormente (véase docs ) y - A través de WordPress de bibliotecas multimedia (ver docs ).
Puede ayudar a reducir el esfuerzo de escritura y mantener el código, sobre todo cuando se quiere crear varios archivos.
exención de responsabilidad: yo soy el autor del Meta Box
.