如何向自定义帖子类型添加多张图片?

时间:2014-08-25 作者:Justin

我想创建一个简单的插件,将多个图像添加到自定义帖子类型中。我已经创建了一个插件,可以将单个图像添加到自定义帖子类型中,但我不知道如何添加多个。enter image description here这就是我的处境。

js文件-

    jQuery(document).ready(function($) {

    // add image uploader functionality
        var meta_image_frame;

      $(\'.meta-image-button\').live(\'click\', function(e){
            e.preventDefault();

            if( meta_image_frame ){
                wp.media.editor.open();
                return;
            }

            meta_image_frame = wp.media.frames.file_frame = wp.media({
                title: \'Portfolio Image Gallery Selection Window\',
                button: {text: \'Add to Gallery\'},
                library: { type: \'image\'},
                  multiple: false
            });

            meta_image_frame.on(\'select\', function(){
                var media_attachment = meta_image_frame.state().get(\'selection\').first().toJSON();

                   var url = \'\';

                $(\'#meta-image\').val(media_attachment.url);


            });

            meta_image_frame.open();

      });

      $(\'#add-input\').click(function(event){

            add_input()
        }); 

        function add_input(){


            var input = "<p><label for=\'meta-image\' class=\'\'>Add Project Image</label>"
                              +"<input type=\'text\' name=\'meta-image\' id=\'meta-image\' value=\'\' />"
                              +"<input type=\'button\' class=\'meta-image-button button\' value=\'Upload Image\' />"
                              +"<input type=\'button\' class=\'meta-image-button button remove-button\' value=\'Remove Image\' /></p>";

            $(\'#images-container\').append(input);

        }

}); //end main jquery function
这是我的php文件-

    <?php

/*----------------------------------------------------------
                       Create Post Type
------------------------------------------------------------*/

function portfolio_create_post_type(){
    $labels = array(
            \'name\' => __(\'Portfolio\', \'portfolio\'),
            \'singular_name\' => __(\'Project\', \'portfolio\'),
            \'add_new\' => __(\'New project\', \'portfolio\'),
            \'add_new_item\' => __(\'Add new project\', \'portfolio\'),
            \'edit_item\' => __(\'Edit project\', \'portfolio\'),
            \'new_item\' => __(\'New project\', \'portfolio\'),
            \'view_item\' => __(\'View project\', \'portfolio\'),
            \'search_item\' => __(\'Search project\', \'portfolio\'),
            \'not_found\' => __(\'No products Found\', \'portfolio\'),
            \'not_found_in_trash\' => __(\'No products found in trash\', \'portfolio\')
        );
    $args = array(
            \'labels\' => $labels,
            \'public\' => true,
            \'supports\' => array(
                    \'title\',
                    \'thumbnail\',
                    \'editor\',
                ),
            \'taxonomies\' => array(\'post_tag\', \'category\')
        );
    register_post_type(\'Portfolio\', $args);
}

add_action(\'init\', \'portfolio_create_post_type\' );


/*----------------------------------------------------------
                       Create Meta Box
------------------------------------------------------------*/


function portfolio_meta_box(){
    add_meta_box( \'portfolio_gallery\', \'Project Gallery\', \'project_meta_box_cb\',\'Portfolio\', \'normal\', \'high\' );
}//portfolio_meta_box

add_action( \'add_meta_boxes\', \'portfolio_meta_box\' );

/*----------------------------------------------------------
                  Meta Box Fields
------------------------------------------------------------*/

function project_meta_box_cb(){
                wp_nonce_field( basename( __FILE__ ), \'prfx_nonce\' );
                $prfx_stored_meta = get_post_meta( $post->ID );

                ?>
                <div class="wrap">
                <input type="button" id="add-input" value="Add Image">

                <div id="images-container">


                </div><!-- end images container -->
                </div>
                <?php
            }

/*----------------------------------------------------------
                  Save the Data
------------------------------------------------------------*/
function project_meta_save( $post_id ) {

        // Checks save status
        $is_autosave = wp_is_post_autosave( $post_id );
        $is_revision = wp_is_post_revision( $post_id );
        $is_valid_nonce = ( isset( $_POST[ \'prfx_nonce\' ] ) && wp_verify_nonce( $_POST[ \'prfx_nonce\' ], basename( __FILE__ ) ) ) ? \'true\' : \'false\';

        // Exits script depending on save status
        if ( $is_autosave || $is_revision || !$is_valid_nonce ) {
            return;
        }

        // Checks for input and sanitizes/saves if needed
       if( isset( $_POST[ \'meta-image\' ] ) ) {
        update_post_meta( $post_id, \'meta-image\', $_POST[ \'meta-image\' ] );

    }
}

add_action( \'save_post\', \'project_meta_save\' );

/*----------------------------------------------------------
                  Load Javascript File
------------------------------------------------------------*/
function project_image_enqueue() {
    global $typenow;
    if( $typenow == \'portfolio\' ) {
        wp_enqueue_media();

        // Registers and enqueues the required javascript.
        wp_register_script( \'meta-box-image\', plugin_dir_url( __FILE__ ) . \'meta-box-image.js\', array( \'jquery\' ) );
        wp_localize_script( \'meta-box-image\', \'meta_image\');
        wp_enqueue_script( \'meta-box-image\' );
    }
}
add_action( \'admin_enqueue_scripts\', \'project_image_enqueue\' );

?>

2 个回复
最合适的回答,由SO网友:streetfire 整理而成

这可能是您的另一种选择。这个Advanced Custom Fields 插件有一个图像字段,允许上载和选择图像。您可以将该字段设置为显示在自定义帖子类型页面上,还可以将一行代码集成到模板文件中。您可以根据需要创建任意多个图像字段。Learn more about the Image field here.

SO网友:Anh Tran

您可以使用Meta Box 插件,支持各种图像字段(您可以从媒体库中选择或上载图像,就像将图像插入post editor一样。您可以选择:

  • image_advanced 字段的作用类似于Add Media WordPress按钮file_input 允许您选择现有图像或使用图像的外部URLplupload_image 其中显示拖放文件的占位符。此外,此插件允许您clone 如果需要,请输入字段,以便更轻松地构建库。

    您可以将插件与任何自定义帖子类型集成,并创建所需的任意多个字段。这是list of supported fields.

结束

相关推荐

将字符计数添加到自定义Metabox

我知道有一种方法可以将字符计数器添加到WP中的摘录元盒,但我想将字符计数器添加到自定义元盒。下面的脚本将获取元数据库中的计数器,元数据库中有选项卡,但不计数。任何帮助都会很好。谢谢,这是我在StackExchange中的第一个问题。jQuery(document).ready(function(){ jQuery(\"#bgnp-metabox-tabs\").after(\"<p style=\\\"text-align:left;\\\"><small>Exce