如何在元字段中创建画廊时获取wp库的短代码

我在元字段上创建了一个图库媒体加载器。 它的工作完美。

当我点击Browse ，画廊媒体加载器打开，我选择图像，然后单击Insert Gallery但我没有得到输入元字段中的库的短代码。

这是我从互联网上获得的代码：

 var meta_image_frame_gallery; $( '#additional_image_1' ).click(function( event ) { event.preventDefault(); //var images = $( '#itv_additional_image_1' ).val(); //var gallery_state = images ? 'gallery-edit' : 'gallery-library'; if ( meta_image_frame_gallery ) { meta_image_frame_gallery.open(); return; } // create new media frame // You have to create new frame every time to control the Library state as well as selected images meta_image_frame_gallery = wp.media.frames.wp_media_frame = wp.media( { title: 'My Gallery', // it has no effect but I really want to change the title frame: "post", //toolbar: 'main-gallery', state: 'gallery-library', library: { type: 'image' }, multiple: true } ); } ); 

这是我的HTML代码：

我在jquery中非常弱，所以请指导我这个问题

Answer 1

你可以试试下面的代码：

jQuery的：

 $(document).ready( function(){ var meta_image_frame_gallery; $( '#additional_image_1' ).click(function( event ) { event.preventDefault(); if ( meta_image_frame_gallery ) { meta_image_frame_gallery.open(); return; } // create new media frame // You have to create new frame every time to control the Library state as well as selected images meta_image_frame_gallery = wp.media.frames.wp_media_frame = wp.media( { title: 'My Gallery', // it has no effect but I really want to change the title frame: "post", //toolbar: 'main-gallery', state: 'gallery-library', library: { type: 'image' }, multiple: true, } ); /* Add image gallery shortcode in itv_additional_image_1 input filed when close event call */ meta_image_frame_gallery.on('close',function() { //fetch the gallery state var controller = meta_image_frame_gallery.states.get('gallery-library'); var library = controller.get('library'); //get the shortcode and update the input field var new_shortcode = wp.media.gallery.shortcode(library).string(); $('#itv_additional_image_1').val(new_shortcode); }); /* Update event for image gallery */ meta_image_frame_gallery.on('update', function () { var controller = meta_image_frame_gallery.states.get('gallery-edit'); var library = controller.get('library'); var new_shortcode = wp.media.gallery.shortcode(library).string(); // Get the new/updated shortcode here. $('#itv_additional_image_1').val(new_shortcode); }); }); }); 

代码在工作中经过完美测试。 更新库项目也很完美。

Answer 2

你需要

• 为wp.media框架添加’close’事件
• 从close事件中的wp.media获取短代码并将其传递给输入
• 在wordpress上添加save_action挂钩，以便在保存/发布post时保存此值
• 此外，您可能需要从输入中获取当前图库项目并将其传递给wp.media框架，以便使用可以查看以前选择的图像。

您可以使用以下工作代码并在WordPress安装上进行测试。

 //add action for the custom gallery add_action("add_meta_boxes", "add_custom_meta_box_gallery"); function add_custom_meta_box_gallery() { add_meta_box("demo-meta-box", "Custom Meta Box", "custom_meta_box_gallery_markup", "post"); } function custom_meta_box_gallery_markup($object) { wp_nonce_field(basename(__FILE__), "meta-box-nonce"); ?> 
 Gallery     
 post_type) return $post_id; $meta_box_text_value = ""; if(isset($_POST["meta-box-gallery"])) { $meta_box_text_value = $_POST["meta-box-gallery"]; } update_post_meta($post_id, "meta-box-gallery", $meta_box_text_value); } add_action("save_post", "save_custom_meta_box_gallery", 10, 3); 

如果您发现压倒性的，可以尝试使用ACF插件中的 ACF Gallery模块