我的自定义帖子类型图片上传器有一个错误我无法理解。 当我上传我的图像时,我的图像上传器工作得很好,但如果我需要编辑帖子,那么我的问题就来了。当我按下Wordpress管理员中的更新按钮时,我的所有图像都被删除,只剩下一张损坏的图像。 如果我在按下更新之前使用了媒体上传器,则仅保存图像。因此,如果我想编辑一个帖子,我每次都要上传图像,我需要解决这个问题。
我有两个文件: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' );
答案 0 :(得分:0)
我不确定你在那里尝试做什么,并且在没有设置新安装的情况下调试代码非常困难,但我认为有更好的方法可以做到这一点。
Wordpress有一个非常有用的扩展名为ACF https://www.advancedcustomfields.com/,它可以为一个或多个帖子类型添加自定义元字段。我强烈推荐它,即使是免费版也足以满足大多数情况。