javascript - WordPress 自定义帖子类型图像 uploader 问题

Question

我的自定义帖子类型图像 uploader 有一个错误，我无法理解。当我一次上传所有图像时，我的图像 uploader 工作得很好，但如果我需要编辑帖子，那么我的问题就来了。当我按下 WordPress 管理中的更新按钮时，我的所有图像都被删除，只留下损坏的图像。仅当我在按更新之前使用媒体 uploader 时才会保存图像。因此，如果我想编辑帖子，我每次都必须上传图像，并且我需要解决这个问题。

我有两个文件:image_uploader.php 和 image_upload.js。

第一个 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({
	title: 'Choose an image',
	button: {
		text: "Use this Image"
	},
	multiple: false

});

addButton.addEventListener( 'click', function() {
		if ( customUploader ){
			customUploader.open();
		}
	
}	);
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 }]) );
	toggleVisibility( 'ADD' );
} );

deleteButton.addEventListener( 'click', function(){
	img.removeAttribute( 'src' );
	hidden.removeAttribute( 'value' );
	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({
	title: 'Choose an image',
	button: {
		text: "Use this Image"
	},
	multiple: false

});

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

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 }]) );
	toggleVisibility2( 'ADD2' );
} );

deleteButton2.addEventListener( 'click', function(){
	img2.removeAttribute( 'src' );
	hidden2.removeAttribute( 'value' );
	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
	// Meta box 1
		function register_metaboxes() {
			add_meta_box('image_metabox', 'Billeder','image_uploader_callback');
		}
		add_action( 'add_meta_boxes','register_metaboxes' );
		
		// Meta box 2
	function register_metaboxes2() {
			add_meta_box('image2_metabox', 'Billeder2','image2_uploader_callback');
		}
		add_action( 'add_meta_boxes','register_metaboxes2' );

function register_admin_script() {
			wp_enqueue_script( 'wp_img_upload', 'image-upload.js', array('jquery', 'media-upload'), true );
			
		wp_localize_script( 'wp_img_upload', 'customUploads', array( 'imageData' => get_post_meta( get_the_ID(), 'custom_image_data', true ) ) );
		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 ) {
			wp_nonce_field( basename( __FILE__ ), 'custom_image_nonce' ); ?>

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

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

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

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

Answer 1

我不确定你想在那里完成什么，并且在不设置新安装的情况下调试你的代码非常困难，但我认为有更好的方法来做到这一点。

Wordpress 有一个非常有用的扩展，称为 ACF https://www.advancedcustomfields.com/这使您可以将自定义元字段添加到一种或多种帖子类型。我强烈推荐它，即使免费版本也足以满足大多数情况。