Laden Sie das Post-Thumbnail vom Frontend hoch

9

Wir möchten, dass Benutzer beim Bearbeiten von Posts die Miniaturansicht der Beiträge hochladen können. Wie würde das gemacht werden? Ich würde mir vorstellen, dass es die Ajax-Funktionen von WordPress nutzen würde.

Irgendwelche Ideen,

Wunderbar

Robin I Knight
quelle

Antworten:

25

Das Hochladen von Dateien in Ajax ist etwas schwierig, da es nicht möglich ist, Dateien mit dem XMLHttpRequest-Objekt des Browsers hochzuladen. Sie müssen daher eine Art Ajax-Upload-Plugin verwenden. Am einfachsten ist das JQuery Form Plugin, das die Dinge viel einfacher macht in WordPress enthalten. Um es zu verwenden, müssen Sie es in die Warteschlange stellen:

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

Fügen Sie auf dieser Seite Ihr Upload-Formular und die JQuery hinzu, um beispielsweise das JQuery Form-Plugin aufzurufen:

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

Sie müssen POSTID mit der tatsächlichen Post-ID aktualisieren. Erstellen Sie dann die Ajax-Funktion, um das Hochladen der Datei zu akzeptieren und das Post-Thumbnail zu aktualisieren

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

hoffe das hilft

Bainternet
quelle
Das ist brilliant. Nur ein paar Fragen. Das heißt, wohin muss alles gehen. Offensichtlich befindet sich das Formular auf der betreffenden Seite und dies ist die Post-ID, mit der verwendet werden soll. Die erste Aktion zum Hinzufügen ist die für den HEAD-Bereich oder für die functions.php. und der letzte Ajax-Block, der mit // beginnt, bindet den Ajax-Aufruf. Wohin geht das bisschen? Danke vielmals.
Robin I Knight
Das erste und das letzte Codeausschnitt können an einer beliebigen Stelle in Ihrer functions.php platziert werden. Das zweite Snippet muss auf der Seite platziert werden, auf der Sie Ihr Upload-Formular anzeigen möchten. Sie können auch das zweite Snippet in einen Shortcode umwandeln, um die Arbeit zu vereinfachen .
Bainternet
Was ich nicht verstehe, ist, woher das Formular weiß, dass es my_ajax_upload () verwendet? Sollte das nicht im Ajax-Aufruf enthalten sein? Ich frage dies, weil ich eine Schleife von Posts habe, die ich bearbeiten kann und die unterschiedliche Funktionen für die Verarbeitung bestimmter Posts benötigen.
Pollux Khafra
Das Formular kann my_ajax_upload verwenden, da sein Aktionswert add_action(...für die my_ajax_uploadFunktion mit Hook ( ) verknüpft ist .
Bainternet
Hat sich in letzter Zeit in WP etwas geändert, das diese Funktionalität beeinträchtigen würde? Aus irgendeinem Grund habe ich $_POSTzum Zeitpunkt meiner Ankunft keine Daten my_ajax_upload, obwohl showRequestder formDataParameter im JS-Rückruf alles enthält, was ich erwarte.
Drzaus