Wordpress Custom Post Typ Bild Uploader Ausgabe

Question

Ich habe einen Fehler mit meinem benutzerdefinierten Beitragstyp Bild-Uploader kann ich nicht meinen Kopf herum. Mein Bild-Uploader funktioniert einwandfrei, wenn ich meine Bilder auf einmal hochlade, aber wenn ich einen Beitrag bearbeiten muss, kommt mein Problem. Wenn ich die Update-Taste in Wordpress admin drücke, werden alle meine Bilder gelöscht und nur ein gebrochenes Bild bleibt übrig. Die Bilder werden nur gespeichert, wenn ich den Medien-Uploader verwendet habe, bevor Sie auf Aktualisieren klicken. Also, wenn ich einen Beitrag bearbeiten will, muss ich jedes Mal die Bilder uploaden, und ich muss das beheben.

Ich habe zwei Dateien: image_uploader.php und image_upload.js.

Zuerst ein image_upload.js und zweiten image_uploader.php

var addButton = document.getElementById('image-upload-button'); 
 
var deleteButton = document.getElementById('image-delete-button'); 
 
var img = document.getElementById('image-tag'); 
 
var hidden = document.getElementById('img-hidden-field'); 
 
var customUploader = wp.media({ 
 
\t title: 'Choose an image', 
 
\t button: { 
 
\t \t text: "Use this Image" 
 
\t }, 
 
\t multiple: false 
 

 
}); 
 

 
addButton.addEventListener('click', function() { 
 
\t \t if (customUploader){ 
 
\t \t \t customUploader.open(); 
 
\t \t } 
 
\t 
 
} \t); 
 
customUploader.on('select', function() { 
 
    var attachment = customUploader.state().get('selection').first().toJSON(); 
 
    img.setAttribute('src', attachment.url); 
 
    hidden.setAttribute('value', JSON.stringify([{ id: attachment.id, url: attachment.url }])); 
 
\t toggleVisibility('ADD'); 
 
}); 
 

 
deleteButton.addEventListener('click', function(){ 
 
\t img.removeAttribute('src'); 
 
\t hidden.removeAttribute('value'); 
 
\t toggleVisibility('DELETE'); 
 
}); 
 

 
var toggleVisibility = function(action) { 
 
    if ('ADD' === action) { 
 
     addButton.style.display = 'none'; 
 
     deleteButton.style.display = ''; 
 
     img.setAttribute('style', 'width: 100%;'); 
 
    } 
 

 
    if ('DELETE' === action) { 
 
     addButton.style.display = ''; 
 
     deleteButton.style.display = 'none'; 
 
     img.removeAttribute('style'); 
 
    } 
 
}; 
 

 

 
window.addEventListener('DOMContentLoaded', function() { 
 
    if ("" === customUploads.imageData || 0 === customUploads.imageData.length) { 
 
     toggleVisibility('DELETE'); 
 
    } else { 
 
     img.setAttribute('src', customUploads.imageData.src); 
 
     hidden.setAttribute('value', JSON.stringify([ customUploads.imageData ])); 
 
     toggleVisibility('ADD'); 
 
    } 
 
}); 
 

 
// Second Image 
 
var addButton2 = document.getElementById('image-upload-button2'); 
 
var deleteButton2 = document.getElementById('image-delete-button2'); 
 
var img2 = document.getElementById('image-tag2'); 
 
var hidden2 = document.getElementById('img-hidden-field2'); 
 
var customUploader2 = wp.media({ 
 
\t title: 'Choose an image', 
 
\t button: { 
 
\t \t text: "Use this Image" 
 
\t }, 
 
\t multiple: false 
 

 
}); 
 

 
addButton2.addEventListener('click', function() { 
 
\t \t if (customUploader2){ 
 
\t \t \t customUploader2.open(); 
 
\t \t } 
 
\t 
 
} \t); 
 

 
customUploader2.on('select', function() { 
 
    var attachment2 = customUploader2.state().get('selection').first().toJSON(); 
 
    img2.setAttribute('src', attachment2.url); 
 
    hidden2.setAttribute('value', JSON.stringify([{ id: attachment2.id, url: attachment2.url }])); 
 
\t toggleVisibility2('ADD2'); 
 
}); 
 

 
deleteButton2.addEventListener('click', function(){ 
 
\t img2.removeAttribute('src'); 
 
\t hidden2.removeAttribute('value'); 
 
\t toggleVisibility2('DELETE2'); 
 
}); 
 

 
var toggleVisibility2 = function(action) { 
 
    if ('ADD2' === action) { 
 
     addButton2.style.display = 'none'; 
 
     deleteButton2.style.display = ''; 
 
     img2.setAttribute('style', 'width: 100%;'); 
 
    } 
 

 
    if ('DELETE2' === action) { 
 
     addButton2.style.display = ''; 
 
     deleteButton2.style.display = 'none'; 
 
     img2.removeAttribute('style'); 
 
    } 
 
}; 
 

 

 
window.addEventListener('DOMContentLoaded', function() { 
 
    if ("" === customUploads2.imageData2 || 0 === customUploads2.imageData2.length) { 
 
     toggleVisibility2('DELETE2'); 
 
    } else { 
 
     img2.setAttribute('src', customUploads2.imageData2.src); 
 
     hidden2.setAttribute('value', JSON.stringify([ customUploads2.imageData2 ])); 
 
     toggleVisibility2('ADD2'); 
 
    } 
 
});

<?php 
 
\t // Meta box 1 
 
\t \t function register_metaboxes() { 
 
\t \t \t add_meta_box('image_metabox', 'Billeder','image_uploader_callback'); 
 
\t \t } 
 
\t \t add_action('add_meta_boxes','register_metaboxes'); 
 
\t \t 
 
\t \t // Meta box 2 
 
\t function register_metaboxes2() { 
 
\t \t \t add_meta_box('image2_metabox', 'Billeder2','image2_uploader_callback'); 
 
\t \t } 
 
\t \t add_action('add_meta_boxes','register_metaboxes2'); 
 

 
function register_admin_script() { 
 
\t \t \t wp_enqueue_script('wp_img_upload', 'image-upload.js', array('jquery', 'media-upload'), true); 
 
\t \t \t 
 
\t \t wp_localize_script('wp_img_upload', 'customUploads', array('imageData' => get_post_meta(get_the_ID(), 'custom_image_data', true))); 
 
\t \t wp_localize_script('wp_img_upload', 'customUploads2', array('imageData2' => get_post_meta(get_the_ID(), 'custom_image2_data', true))); 
 

 
add_action('admin_enqueue_scripts', 'register_admin_script'); 
 

 
function image_uploader_callback($post_id) { 
 
\t \t \t wp_nonce_field(basename(__FILE__), 'custom_image_nonce'); ?> 
 

 
\t \t \t <div id="metabox_wrapper"> 
 
\t \t \t \t <img id="image-tag"> 
 
\t \t \t \t <input type="hidden" id="img-hidden-field" name="custom_image_data"> 
 
\t \t \t \t <input type="button" id="image-upload-button" class="button" value="Add Image"> 
 
\t \t \t \t <input type="button" id="image-delete-button" class="button" value="Delete Image"> 
 
\t \t \t </div> 
 
\t \t \t <?php 
 
\t \t } 
 
\t \t function image2_uploader_callback($post_id) { \t 
 

 
\t \t \t \t wp_nonce_field(basename(__FILE__), 'custom_image2_nonce'); ?> 
 
\t \t \t \t 
 
\t \t \t \t <label>Andet billede</label> 
 
\t \t \t \t <div id="metabox_wrapper2"> 
 
\t \t \t \t \t <img id="image-tag2"> 
 
\t \t \t \t \t <input type="hidden" id="img-hidden-field2" name="custom_image2_data"> 
 
\t \t \t \t \t <input type="button" id="image-upload-button2" class="button" value="Add Image"> 
 
\t \t \t \t \t <input type="button" id="image-delete-button2" class="button" value="Delete Image"> 
 
\t \t \t \t </div> 
 
\t \t \t <?php 
 
\t \t } 
 

 
function save_custom_image($post_id) { 
 
\t \t \t $is_autosave = wp_is_post_autosave($post_id); 
 
\t \t \t $is_revision = wp_is_post_revision($post_id); 
 
\t \t \t $is_valid_nonce = (isset($_POST[ 'custom_image_nonce' ]) && wp_verify_nonce($_POST[ 'custom_image_nonce' ], basename(__FILE__))); 
 
\t \t \t $image_data = ['id','src']; 
 
\t \t \t 
 
\t \t \t // Exits script depending on save status 
 
\t \t \t if ($is_autosave || $is_revision || !$is_valid_nonce) { 
 
\t \t \t \t return; 
 
\t \t \t } 
 
\t \t \t if (isset($_POST[ 'custom_image_data' ])) { 
 
\t \t \t \t $image_data = json_decode(stripslashes($_POST[ 'custom_image_data' ])); 
 
\t \t \t \t if (is_object($image_data[0])) { 
 
\t \t \t \t \t $image_data = array('id' => intval($image_data[0]->id), 'src' => esc_url_raw($image_data[0]->url 
 
\t \t \t \t \t)); 
 
\t \t \t \t } 
 
\t \t \t \t update_post_meta($post_id, 'custom_image_data', $image_data); 
 
\t \t \t } 
 
\t \t } 
 

 
\t \t add_action('save_post', 'save_custom_image'); 
 
\t \t 
 
\t \t // Image 2 
 
\t \t function save_custom_image2($post_id){ 
 
\t \t \t $is_autosave2 = wp_is_post_autosave($post_id); 
 
\t \t \t $is_revision2 = wp_is_post_revision($post_id); 
 
\t \t \t $is_valid_nonce2 = (isset($_POST[ 'custom_image2_nonce' ]) && wp_verify_nonce($_POST[ 'custom_image2_nonce' ], basename(__FILE__))); 
 
\t \t \t 
 
\t \t \t // Exits script depending on save status 
 
\t \t \t if ($is_autosave2 || $is_revision2 || !$is_valid_nonce2) { 
 
\t \t \t \t return; 
 
\t \t \t } 
 
\t \t \t if (isset($_POST[ 'custom_image2_data' ])) { 
 
\t \t \t \t $image_data2 = json_decode(stripslashes($_POST[ 'custom_image2_data' ])); 
 
\t \t \t \t if (is_object($image_data2[0])) { 
 
\t \t \t \t \t $image_data2 = array('id' => intval($image_data2[0]->id), 'src' => esc_url_raw($image_data2[0]->url 
 
\t \t \t \t \t)); 
 
\t \t \t \t } else { 
 
\t \t \t \t \t $image_data2 = []; 
 
\t \t \t \t } 
 
\t \t \t \t update_post_meta($post_id, 'custom_image2_data', $image_data2); 
 
\t \t \t \t } 
 
\t \t \t } \t 
 
\t \t add_action('save_post', 'save_custom_image2');

Answer 1

Ich bin nicht sicher, was Sie versuchen, es zu tun und es ist ziemlich schwer, den Code zu debuggen, ohne Neuinstallation einrichten, aber Ich denke, es gibt einen besseren Weg, das zu tun.

Wordpress haben eine sehr nützliche Erweiterung namens ACF https://www.advancedcustomfields.com/, die Ihnen die Möglichkeit gibt, benutzerdefinierte Meta-Felder zu einem oder mehreren Post-Typen hinzuzufügen. Ich empfehle es sehr, sogar die kostenlose Version reicht für die meisten Fälle.