如何在自定義帖子中上傳多個特色圖片（Wordpress）

Question

實際上我的數據存儲在后端但我無法在前端顯示它，我也想在帖子類型 wordpress 插件中添加多個圖像

Answer 1

您可以按照以下代碼：

//Add meta box in the post or page
add_action( 'add_meta_boxes', 'custom_postpage_meta_box' );
function custom_postpage_meta_box(){

    $post_types = array('post');
    foreach($post_types as $pt){
        add_meta_box('custom_postpage_meta_box',__( 'More Featured Images', 'textdomain'),'custom_postpage_meta_box_func',$pt,'side','low');
    }
}

//Load the field in meta screen
function custom_postpage_meta_box_func($post){

    $meta_keys = array('second_featured_image');

    foreach($meta_keys as $meta_key){
        $image_meta_val=get_post_meta( $post->ID, $meta_key, true);
        ?>
        <div class="custom_postpage_wrapper" id="<?php echo $meta_key; ?>_wrapper" style="margin-bottom:20px;">
            <img onclick="custom_postpage_add_image('<?php echo $meta_key; ?>');" src="<?php%20echo%20(%24image_meta_val!=''?wp_get_attachment_image_src(%20%24image_meta_val)%5B0%5D:'');%20?>" style="width:100%;cursor:pointer;display: <?php echo ($image_meta_val!=''?'block':'none'); ?>" alt="">
            <a class="addimage" style="cursor:pointer;" onclick="custom_postpage_add_image('<?php echo $meta_key; ?>');"><?php _e('Set featured image','textdomain'); ?></a><br>
            <a class="removeimage" style="cursor:pointer;display: <?php echo ($image_meta_val!=''?'block':'none'); ?>" onclick="custom_postpage_remove_image('<?php echo $meta_key; ?>');"><?php _e('Remove featured image','textdomain'); ?></a>
            <input type="hidden" name="<?php echo $meta_key; ?>" id="<?php echo $meta_key; ?>" value="<?php echo $image_meta_val; ?>">
        </div>
    <?php } ?> <script>function custom_postpage_add_image(key){

        var $wrapper = jQuery('#'+key+'_wrapper');

        custom_postimage_uploader = wp.media.frames.file_frame = wp.media({
            title: '<?php _e('select image','textdomain'); ?>',
            button: {
                text: '<?php _e('select image','textdomain'); ?>'
            },
            multiple: false
        });
        custom_postpage_uploader.on('select', function() {

            var attachment = custom_postpage_uploader.state().get('selection').first().toJSON();
            var img_url = attachment['url'];
            var img_id = attachment['id'];
            $wrapper.find('input#'+key).val(img_id);
            $wrapper.find('img').attr('src',img_url);
            $wrapper.find('img').show();
            $wrapper.find('a.removeimage').show();
        });
        custom_postpage_uploader.on('open', function(){
            var selection = custom_postpage_uploader.state().get('selection');
            var selected = $wrapper.find('input#'+key).val();
            if(selected){
                selection.add(wp.media.attachment(selected));
            }
        });
        custom_postpage_uploader.open();
        return false;
    }

    function custom_postpage_remove_image(key){
        var $wrapper = jQuery('#'+key+'_wrapper');
        $wrapper.find('input#'+key).val('');
        $wrapper.find('img').hide();
        $wrapper.find('a.removeimage').hide();
        return false;
    }</script> <?php wp_nonce_field( 'custom_postpage_meta_box', 'custom_postpage_meta_box_nonce' );
    ?>
}

//Save the meta box
add_action( 'save_post', 'custom_postimage_meta_box_save' );
function custom_postimage_meta_box_save($post_id){

    if ( ! current_user_can( 'edit_posts', $post_id ) ){ return 'You have no permission to edit this post types'; }

    if (isset( $_POST['custom_postimage_meta_box_nonce'] ) && wp_verify_nonce($_POST['custom_postimage_meta_box_nonce'],'custom_postimage_meta_box' )){

        $meta_keys = array('second_featured_image');
        foreach($meta_keys as $meta_key){
            if(isset($_POST[$meta_key]) && intval($_POST[$meta_key])!=''){
                update_post_meta( $post_id, $meta_key, intval($_POST[$meta_key]));
            }else{
                update_post_meta( $post_id, $meta_key, '');
            }
        }
    }
}

有關更多詳細信息，請閱讀文章https://yourblogcoach.com/upload-multiple-featured-images-in-a-post-or-page/

謝謝