Subir miniatura de la publicación desde la parte frontal

9

Nos gustaría que los usuarios puedan subir la miniatura de la publicación al editar publicaciones. ¿Cómo se haría esto? Me imagino que haría uso de las funciones ajax de wordpress.

Algunas ideas,

Maravilloso

Robin I Knight
fuente

Respuestas:

25

Cargar archivos en ajax es un poco complicado porque no es posible cargar archivos usando el objeto XMLHttpRequest del navegador, por lo que debe usar algún tipo de complemento de carga Ajax y el más fácil sería el complemento de formulario JQuery que hace las cosas mucho más fáciles y es incluido en WordPress. Entonces, para usarlo, debe ponerlo en cola:

add_action('wp_print_scripts','include_jquery_form_plugin');
function include_jquery_form_plugin(){
    if (is_page('12')){ // only add this on the page that allows the upload
        wp_enqueue_script( 'jquery' );
        wp_enqueue_script( 'jquery-form',array('jquery'),false,true ); 
    }
}

en esa página, agregue su formulario de carga y JQuery para llamar al complemento JQuery Form, por ejemplo:

<form id="thumbnail_upload" method="post" action="#" enctype="multipart/form-data" >
  <input type="file" name="thumbnail" id="thumbnail">
  <input type='hidden' value='<?php wp_create_nonce( 'upload_thumb' ); ?>' name='_nonce' />
  <input type="hidden" name="post_id" id="post_id" value="POSTID">
  <input type="hidden" name="action" id="action" value="my_upload_action">
  <input id="submit-ajax" name="submit-ajax" type="submit" value="upload">
<form>
<div id="output1"></div>
<script>
$(document).ready(function() { 
    var options = { 
        target:        '#output1',      // target element(s) to be updated with server response 
        beforeSubmit:  showRequest,     // pre-submit callback 
        success:       showResponse,    // post-submit callback 
        url:    ajaxurl                 // since 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php     
    }; 

    // bind form using 'ajaxForm' 
    $('#thumbnail_upload').ajaxForm(options); 
});
function showRequest(formData, jqForm, options) {
//do extra stuff before submit like disable the submit button
$('#output1').html('Sending...');
$('#submit-ajax').attr("disabled", "disabled");
}
function showResponse(responseText, statusText, xhr, $form)  {
//do extra stuff after submit
}
</script>

debes actualizar POSTID con la ID de publicación real. luego cree la función Ajax para aceptar la carga del archivo y actualizar la miniatura de la publicación

//hook the Ajax call
//for logged-in users
add_action('wp_ajax_my_upload_action', 'my_ajax_upload');
//for none logged-in users
add_action('wp_ajax_nopriv_my_upload_action', 'my_ajax_upload');

function my_ajax_upload(){
//simple Security check
    check_ajax_referer('upload_thumb');

//get POST data
    $post_id = $_POST['post_id'];

//require the needed files
    require_once(ABSPATH . "wp-admin" . '/includes/image.php');
    require_once(ABSPATH . "wp-admin" . '/includes/file.php');
    require_once(ABSPATH . "wp-admin" . '/includes/media.php');
//then loop over the files that were sent and store them using  media_handle_upload();
    if ($_FILES) {
        foreach ($_FILES as $file => $array) {
            if ($_FILES[$file]['error'] !== UPLOAD_ERR_OK) {
                echo "upload error : " . $_FILES[$file]['error'];
                die();
            }
            $attach_id = media_handle_upload( $file, $post_id );
        }   
    }
//and if you want to set that image as Post  then use:
  update_post_meta($post_id,'_thumbnail_id',$attach_id);
  echo "uploaded the new Thumbnail";
  die();
} 

espero que esto ayude

Bainternet
fuente
Esto es brillante. Solo un par de consultas. Es decir, a dónde tiene que ir todo. Obviamente, el formulario va en la página en cuestión y esa será la identificación de la publicación con la que se utilizará. La primera acción de agregar es la del área HEAD o de functions.php. y el bloque ajax final que comienza con // engancha la llamada ajax. ¿A dónde va ese bit? Muchas gracias.
Robin I Knight
el primer y el último fragmento de código se pueden colocar en cualquier lugar de sus funciones. .
Bainternet
Lo que no entiendo sobre esto es cómo sabe el formulario usar my_ajax_upload ()? ¿No debería incluirse eso en la llamada ajax? Pregunto esto porque tengo un ciclo de publicaciones que estoy permitiendo editar y necesitan diferentes funciones para procesar ciertas publicaciones.
Pollux Khafra
El formulario sabe usar my_ajax_upload porque su valor de acción está enganchado ( add_action(...) para my_ajax_uploadfuncionar.
Bainternet
¿Ha cambiado algo recientemente en WP que pueda afectar esta funcionalidad? Por alguna razón, no tengo $_POSTdatos para cuando llego my_ajax_upload, aunque en la devolución de llamada JS showRequestel formDataparámetro contiene todo lo que espero.
drzaus