web-dev-qa-db-ja.com

カスタム投稿タイプに複数の画像を追加する方法

カスタム投稿タイプに複数の画像を追加するための簡単なプラグインを作成したいです。カスタム投稿タイプに単一の画像を追加するプラグインを作成しましたが、複数の追加方法を理解することができません。 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' );

?>
custom-post-typesplugin-developmentmetabox
2
Justin

これはあなたのための代替手段かもしれません。 高度なカスタムフィールド プラグインには画像のアップロードと選択を可能にする画像フィールドがあります。カスタム投稿タイプページに表示するようにフィールドを設定したり、テンプレートファイルに1行のコードを統合したりすることもできます。必要に応じていくつでも画像フィールドを作成できます。 ここImageフィールドについてもっと学びましょう。

3
streetfire

Meta Box プラグインを使うことができます。これはさまざまな画像フィールドをサポートします（ポストエディタに画像を挿入するのと同じように、メディアライブラリから選択するか、画像をアップロードできます）

  • WordPressの Add Media ボタンのように振る舞うimage_advancedフィールド
  • 既存の画像を選択するか、画像に外部 URLを使用することを可能にするfile_input
  • ドラッグ＆ドロップファイルのプレースホルダーを示すplupload_image

その上、このプラグインはあなたが望むなら clone フィールドにあなたを許すので、あなたはより簡単にギャラリーを作ることができます。

プラグインを任意のカスタム投稿タイプと統合し、必要なだけフィールドを作成できます。これは サポートされているフィールドのリストです 。

0
Anh Tran