Wordpressカスタム投稿タイプ画像アップローダの問題

Question

私は自分のカスタム投稿型画像アップローダにバグがあります。 イメージを一度にアップロードすると、イメージのアップローダが正常に動作していますが、投稿を編集する必要がある場合は、問題が発生します。私はWordpressの管理者の更新ボタンを押すと、私のすべての画像が削除され、壊れた画像だけが残っています。 イメージは、メディア・アップローダーを使用している場合にのみ、更新を押す前に保存されます。ですから、私が投稿を編集したいのであれば、毎回画像を盛り上げなければなりません。それを修正する必要があります。

image_uploader.phpとimage_upload.jsという2つのファイルがあります。

第1 image_upload.jsと第二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

、私はあなたがそこに達成しようと何をすべきかわからない、それが新規インストールを設定せずに自分のコードをデバッグすることは非常に難しいのですが、私はそれをするより良い方法があると思う。

Wordpressには、ACF https://www.advancedcustomfields.com/という非常に便利な拡張機能があり、カスタムメタフィールドを1つまたは複数のポストタイプに追加することができます。私は非常にそれをお勧めします、無料版でもほとんどの場合十分です。