Carregar miniatura da postagem no front end

9

Gostaríamos que os usuários pudessem fazer upload da miniatura da postagem ao editar as postagens. Como isso seria feito. Eu imaginaria que faria uso das funções ajax do wordpress.

Alguma ideia,

Maravilhoso

Robin I Knight
fonte

Respostas:

25

O upload de arquivos no ajax é um pouco complicado, porque não é possível fazer o upload de arquivos usando o objeto XMLHttpRequest do navegador, portanto, você precisa usar algum tipo de plug-in de upload do Ajax e o mais fácil seria o JQuery Form Plugin, que facilita muito as coisas. incluído no WordPress. Então, para usá-lo, você precisa enfileirá-lo:

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 ); 
    }
}

nessa página, adicione seu formulário de upload e o JQuery para chamar o plugin JQuery Form, por exemplo:

<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>

você deve atualizar POSTID com o ID da postagem real. crie a função Ajax para aceitar o upload do arquivo e atualizar a miniatura da postagem

//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 isto ajude

Bainternet
fonte
Isto é brilhante. Apenas algumas perguntas. Ou seja, para onde tudo precisa ir. Obviamente, o formulário está na página em questão e esse será o ID da postagem com o qual usar. A primeira ação de adição é a da área HEAD ou do functions.php. e o bloco final do ajax começando com // ligar a chamada do ajax. Para onde vai isso? Muito Obrigado.
Robin I Knight
o primeiro e o último trechos de código podem ser colocados em qualquer lugar em suas funções.php e o segundo trecho precisa estar na página em que você deseja exibir seu formulário de upload, você também pode transformar o segundo trecho em um código curto para facilitar as coisas .
Bainternet 9/03/11
O que eu não entendo é como o formulário sabe usar my_ajax_upload ()? Isso não deveria ser incluído na chamada ajax? Eu pergunto isso porque tenho um loop de postagens que estou permitindo editar e elas precisam de funções diferentes para processar determinadas postagens.
Pollux Khafra
O formulário sabe usar my_ajax_upload porque seu valor de ação é hooked ( add_action(...) para my_ajax_uploadfuncionar.
Bainternet
Alguma coisa mudou recentemente no WP que afetaria essa funcionalidade? Por alguma razão, não tenho $_POSTdados no momento em que chego my_ajax_upload, embora no retorno de chamada showRequestdo JS o formDataparâmetro contenha tudo o que espero.
drzaus