在“媒体"窗口中选择图片后添加/更新自定义字段(Wordpress) [英] Add / Update Custom Fields After Select Pictures in Media Window (Wordpress)

问题描述

我有一个关于wordpress的问题，我只是在添加/编辑帖子"页面中添加了一个名为添加滑块"的按钮. 这是我在function.php中的代码:

I have a question about wordpress, I just added a button called Add Slider in Add/Edit Post Page. here's my code in my function.php :

//Add button to create slider
add_action('media_buttons','add_my_media_button',15);

function add_my_media_button(){
    echo '<a href="#" id="insert-my-media" class="button">Add Slider</a>';
}

function include_media_button_js_file(){
    wp_enqueue_script('media_button',get_bloginfo('template_directory').'/js/media_button.js',array('jquery'),'1.0',true);
}

add_action('wp_enqueue_media','include_media_button_js_file');

这是我的media_button.js代码

and this my media_button.js code

jQuery(function($){
$(document).ready(function(){
    $('#insert-my-media').click(open_media_window);
})

function open_media_window(){
    if (this.window === undefined) {
        this.window = wp.media({
            title: 'Insert a media',
            library: {type:'image'},
            multiple: true,
            button: {text:'Insert'}
        });

        var self = this; //needed to retrieve the function below
        this.window.on('select',function(){
            var files = self.window.state().get('selection').toArray();
            var values;
            for (var i = 0; i < files.length; i++) {
                var file = files[i].toJSON();
                if(values===undefined){
                    var values = file.url;
                }
                else{
                    var values = values+','+file.url;
                }
            };
            wp.media.editor.insert(values);
        });
    }

    this.window.open();
    return false;   
}
});

用户在媒体窗口中选择图片并按下插入按钮后，它将图片的url值添加到内容编辑器的邮箱中.

after user select the pictures in media window and press Insert button it will add url value of pictures to content editor post box.

我的问题是如何在自定义字段"框中自动添加此值并自动添加/更新，而无需单击添加自定义字段"按钮.

My question is how to add this value automatically on custom fields box and add/update that automatically without click add custom field button.

因此，用户可以添加/更新该图片url的自定义字段，而无需查看/检查自定义字段以在wordpress中的屏幕选项"上的帖子编辑器中查看.

So user can add / update custom fields for that pictures url without view/ check custom fields to view in post editor on Screen Options in wordpress.

请帮助我解决这个问题，谢谢.

Please help me for this question, Thanks.

推荐答案

我这样修改我的jquery/js.

I modify my jquery / js like this..

$(document).ready(function(){
    // $('#insert-my-media').click(open_media_window);
    if($('#images_id').val() != '' && $('#images_url').val() != ''){
        $('#open_media').text("Edit Slider");
    }
    $('#open_media').click(function(e){
        e.preventDefault();
        var target = $('#images_id');
        var target_url = $('#images_url');
        var btnSave = $('#publishing-action input.button');

        if(target.val() == '' && target_url.val() == ''){

            var wpmedia = wp.media({
                title: 'Insert a media',
                library: {type:'image'},
                multiple: true,
                button: {text:'Insert'}
            });

            wpmedia.on('select', function(){
                var ids = [];
                var urls = [];
                var models =  wpmedia.state().get('selection').toArray();
                for (var i = 0; i < models.length; i++) {
                    var file = models[i].toJSON();
                    ids.push(file.id);
                    urls.push(file.url);
                };
                target.val(ids.join(","));
                target_url.val(urls.join(","));
                $('#deleting_slider').val("");
                $('#open_media').text("Adding...");
                btnSave.click();
            });
            wpmedia.open();
        }else{
            wp.media.gallery
            .edit('[gallery ids="'+ target.val() +'" urls="'+ target_url.val() +'"]')
            .on('update', function(g){
                var ids = [];
                var urls = [];
                for (var i = 0; i < g.models.length; i++) {
                    var file = g.models[i].toJSON();
                    ids.push(file.id);
                    urls.push(file.url);
                };
                target.val(ids.join(","));
                target_url.val(urls.join(","));
                $('#deleting_slider').val("");
                $('#open_media').text("Editing...");
                btnSave.click();
            });
        }

    });

    $('#save_desc').click(function(e){
        e.preventDefault();
        var target = $('#desc_editor');
        var btnSave = $('#publishing-action input.button');         
                target.val(target.val());
                btnSave.click();
    });

    $('#delete_slider').click(function(e){
        e.preventDefault();
        /*var target = $('#images_id');
        var target_url = $('#images_url');*/
        var btnSave = $('#publishing-action input.button'); 
            /*target.val("");
            target_url.val("");*/
            $('#deleting_slider').val("Deleting...");
            $('#delete_slider').text("Deleting...");
            btnSave.click();
    });

    });

然后我创建一个名为metabox.php的文件来创建metabox

and then I make file called metabox.php to create metabox

<?php


function koplan_add_metabox(){
add_meta_box(
        'koplan_metabox_gallery',
        'Slider Gallery',
        'koplan_show_metabox',
        'post'
);
}
function koplan_add_maps_metabox(){
    add_meta_box(
            'koplan_metabox_maps',
        'Maps Descriptions',
        'koplan_show_maps_metabox',
        'post'
);
}
function koplan_show_metabox($post){
$ids = get_post_meta($post->ID, 'gallery_images', true);
$urls = get_post_meta($post->ID,'images',true); 
?>
<a href="#" id="open_media" class="button">Add Slider</a>
<hr>
<input type="hidden" name="gallery_images" id="images_id" value="<?php echo $ids; ?>">
<input type="hidden" name="gallery_urls" id="images_url" value="<?php echo $urls; ?>">
<input type="hidden" name="deleting_slider_post_meta" id="deleting_slider" value="<?php echo $urls; ?>">
<?php

    if($ids=="" and  $urls==""){
       return;
    }
    else{
        echo do_shortcode('[gallery ids="'.$ids.'" urls="'.$urls.'"]');
    }
?>
<hr>
<a href="#" id="delete_slider" name="delete_slider_post_meta" class="button">Delete Slider</a>
<?php
}

function koplan_save_gallery_metabox($post_id){
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
        return;
}

    if(! isset($_POST['gallery_images']) && !isset($_POST['gallery_urls'])){
        return;
    }

    $ids = sanitize_text_field( $_POST['gallery_images'] );
    $urls = sanitize_text_field( $_POST['gallery_urls'] );

    $terms = wp_get_object_terms( $post_id, 'category', array( 'fields' => 'names' ) );
        /*$termsname = $terms[0]->name;*/
        if(strlen($terms[1]) > strlen($terms[0])){
            $term = $terms[1];
        }
        else{
            $term = $terms[0];  
        }

    $sldata = '<slider images="'.$term.'" />';
    update_post_meta($post_id, 'slider', $sldata);
    update_post_meta($post_id, 'gallery_images', $ids);
    update_post_meta($post_id, 'images', $urls);

    if(isset($_POST['deleting_slider_post_meta']) && $_POST['deleting_slider_post_meta'] != ""){
        delete_post_meta($post_id, 'slider', $sldata);
        delete_post_meta($post_id, 'gallery_images', $ids);
        delete_post_meta($post_id, 'images', $urls);
    }
    }

function koplan_show_maps_metabox($post){
    $desc = get_post_meta($post->ID,'mapsdesc',true);
    if($desc!=""){
?>
    <textarea name="maps_descriptions" id="desc_editor" placeholder="Insert Descriptions Here" class="wp-editor-area" cols="40" autocomplete="off" style="height:320px; width:100%;"><?php echo $desc; ?></textarea>
<?php
}else{
?>
<textarea name="maps_descriptions" id="desc_editor" placeholder="Insert Descriptions Here" class="wp-editor-area" cols="40" autocomplete="off" style="height:320px; width:100%;"></textarea>
<?php
}
?>  
<hr>
<a href="#" class="button" id="save_desc">Save</a>
<?php
}

function koplan_save_maps_desc_metabox($post_id){
if (define('DOING_AUTOSAVE') && DOING_AUTOSAVE){
    return;
}
if(!isset($_POST['maps_descriptions'])){
    return;
}
$desc = $_POST['maps_descriptions'];
update_post_meta($post_id,'mapsdesc',$desc);
}

add_action( 'add_meta_boxes', 'koplan_add_metabox' );
add_action('add_meta_boxes','koplan_add_maps_metabox');
add_action( 'save_post', 'koplan_save_gallery_metabox' );
add_action( 'save_post', 'koplan_save_maps_desc_metabox' );

?>

我说问题解决了，案件结案了.谢谢，谢谢stackoverflow

I said problem solved, case closed. Thanks all, thanks stackoverflow

这篇关于在“媒体"窗口中选择图片后添加/更新自定义字段(Wordpress)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！