사용자 지정 이미지 필드와 다른 필드를 동시에 추가

사용자 지정 이미지 필드와 다른 필드를 동시에 추가

기본적으로 이미지 쌍과 이미지 내에 정의된 이미지에 대한 레이블이 있는 사용자 지정 CMS 페이지를 원합니다.새로운 WordPress 테마의 사용자 지정 페이지에 내용을 입력하기 위해 이 항목 쌍을 사용할 예정입니다.

WordPress 2.8의 Handling Plugins Options(플러그인 옵션 처리) 덕분에 CMS 내에 새로운 설정 페이지를 만들고 그 안에 있는 텍스트 상자를 얼마든지 채울 수 있었습니다.

이제 각 텍스트 상자에 사용자가 미디어 브라우저를 열고 워드프레스에 업로드한 기존 이미지를 선택하거나 새로운 이미지를 업로드하여 선택할 수 있는 필드를 추가해야 합니다.

저는 이것에 대한 간단한 깨끗한 예를 온라인에서 찾을 수 없었습니다.제가 찾은 스택 오버플로에 대한 이와 관련된 질문들도 이 작업의 명확한 우아한 예는 없는 것 같습니다.

기록을 위해, 저는 처음에 이미 설치한 플러그인(Developers Custom Fields)으로 이것을 하려고 계획했는데, 이 플러그인으로 사용자 지정 이미지 필드를 추가하는 것은 꽤 간단하기 때문에 매우 쉬울 것이라고 생각했습니다.하지만 제가 틀린 것 같고 이런 종류의 분야를 명시하는 명확한 예가 없습니다.

사용자 지정 이미지 필드 추가(다른 필드를 동시에 추가하는 것과 무관)를 설명하는 예를 알고 있는 경우 기본 WordPress API 코드를 사용하거나 개발자 지정 필드 플러그인과의 통합을 사용합니다.

정확히 언급하지는 않았지만, 리피터블 필드를 다루고 있는 것 같습니다.

관심 플러그인 2개:고급 사용자 정의 필드 및 사용자 정의 컨텐츠 유형 관리자.

오늘 G+의 WordPress 커뮤니티 중 하나에서 이 기사를 보았습니다.
플러그인 내에서 WordPress 3.5 Media Uploader 사용.

이 솔루션은 원래 이후 삭제된 SO 질문에 게시되었습니다.다시 작성, 수정 및 테스트를 수행합니다.

<?php
/**
 * Plugin Name: (SO) Repeatable fields demo
 * Plugin URI:  http://stackoverflow.com/a/14452453/1287812
 * Description: How to make repeatable fields in a meta box
 * Author:      brasofilo
 * License:     GPLv3
 */

add_action( 'admin_init', 'add_post_gallery_so_14445904' );
add_action( 'admin_head-post.php', 'print_scripts_so_14445904' );
add_action( 'admin_head-post-new.php', 'print_scripts_so_14445904' );
add_action( 'save_post', 'update_post_gallery_so_14445904', 10, 2 );

/**
 * Add custom Meta Box to Posts post type
 */
function add_post_gallery_so_14445904() 
{
    add_meta_box(
        'post_gallery',
        'Custom Uploader',
        'post_gallery_options_so_14445904',
        'post',
        'normal',
        'core'
    );
}

/**
 * Print the Meta Box content
 */
function post_gallery_options_so_14445904() 
{
    global $post;
    $gallery_data = get_post_meta( $post->ID, 'gallery_data', true );

    // Use nonce for verification
    wp_nonce_field( plugin_basename( __FILE__ ), 'noncename_so_14445904' );
?>

<div id="dynamic_form">

    <div id="field_wrap">
    <?php 
    if ( isset( $gallery_data['image_url'] ) ) 
    {
        for( $i = 0; $i < count( $gallery_data['image_url'] ); $i++ ) 
        {
        ?>

        <div class="field_row">

          <div class="field_left">
            <div class="form_field">
              <label>Image URL</label>
              <input type="text"
                     class="meta_image_url"
                     name="gallery[image_url][]"
                     value="<?php esc_html_e( $gallery_data['image_url'][$i] ); ?>"
              />
            </div>
            <div class="form_field">
              <label>Description</label>
              <input type="text"
                     class="meta_image_desc"
                     name="gallery[image_desc][]"
                     value="<?php esc_html_e( $gallery_data['image_desc'][$i] ); ?>"
              />
            </div>
          </div>

          <div class="field_right image_wrap">
            <img src="<?php esc_html_e( $gallery_data['image_url'][$i] ); ?>" height="48" width="48" />
          </div>

          <div class="field_right">
            <input class="button" type="button" value="Choose File" onclick="add_image(this)" /><br />
            <input class="button" type="button" value="Remove" onclick="remove_field(this)" />
          </div>

          <div class="clear" /></div> 
        </div>
        <?php
        } // endif
    } // endforeach
    ?>
    </div>

    <div style="display:none" id="master-row">
    <div class="field_row">
        <div class="field_left">
            <div class="form_field">
                <label>Image URL</label>
                <input class="meta_image_url" value="" type="text" name="gallery[image_url][]" />
            </div>
            <div class="form_field">
                <label>Image Link</label>
                <input class="meta_image_desc" value="" type="text" name="gallery[image_desc][]" />
            </div>
        </div>
        <div class="field_right image_wrap">
        </div> 
        <div class="field_right"> 
            <input type="button" class="button" value="Choose File" onclick="add_image(this)" />
            <br />
            <input class="button" type="button" value="Remove" onclick="remove_field(this)" /> 
        </div>
        <div class="clear"></div>
    </div>
    </div>

    <div id="add_field_row">
      <input class="button" type="button" value="Add Field" onclick="add_field_row();" />
    </div>

</div>

  <?php
}

/**
 * Print styles and scripts
 */
function print_scripts_so_14445904()
{
    // Check for correct post_type
    global $post;
    if( 'post' != $post->post_type )
        return;
    ?>  
    <style type="text/css">
      .field_left {
        float:left;
      }

      .field_right {
        float:left;
        margin-left:10px;
      }

      .clear {
        clear:both;
      }

      #dynamic_form {
        width:580px;
      }

      #dynamic_form input[type=text] {
        width:300px;
      }

      #dynamic_form .field_row {
        border:1px solid #999;
        margin-bottom:10px;
        padding:10px;
      }

      #dynamic_form label {
        padding:0 6px;
      }
    </style>

    <script type="text/javascript">
        function add_image(obj) {
            var parent=jQuery(obj).parent().parent('div.field_row');
            var inputField = jQuery(parent).find("input.meta_image_url");

            tb_show('', 'media-upload.php?TB_iframe=true');

            window.send_to_editor = function(html) {
                var url = jQuery(html).find('img').attr('src');
                inputField.val(url);
                jQuery(parent)
                .find("div.image_wrap")
                .html('<img src="'+url+'" height="48" width="48" />');

                // inputField.closest('p').prev('.awdMetaImage').html('<img height=120 width=120 src="'+url+'"/><p>URL: '+ url + '</p>'); 

                tb_remove();
            };

            return false;  
        }

        function remove_field(obj) {
            var parent=jQuery(obj).parent().parent();
            //console.log(parent)
            parent.remove();
        }

        function add_field_row() {
            var row = jQuery('#master-row').html();
            jQuery(row).appendTo('#field_wrap');
        }
    </script>
    <?php
}

/**
 * Save post action, process fields
 */
function update_post_gallery_so_14445904( $post_id, $post_object ) 
{
    // Doing revision, exit earlier **can be removed**
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )  
        return;

    // Doing revision, exit earlier
    if ( 'revision' == $post_object->post_type )
        return;

    // Verify authenticity
    if ( !wp_verify_nonce( $_POST['noncename_so_14445904'], plugin_basename( __FILE__ ) ) )
        return;

    // Correct post type
    if ( 'post' != $_POST['post_type'] ) 
        return;

    if ( $_POST['gallery'] ) 
    {
        // Build array for saving post meta
        $gallery_data = array();
        for ($i = 0; $i < count( $_POST['gallery']['image_url'] ); $i++ ) 
        {
            if ( '' != $_POST['gallery']['image_url'][ $i ] ) 
            {
                $gallery_data['image_url'][]  = $_POST['gallery']['image_url'][ $i ];
                $gallery_data['image_desc'][] = $_POST['gallery']['image_desc'][ $i ];
            }
        }

        if ( $gallery_data ) 
            update_post_meta( $post_id, 'gallery_data', $gallery_data );
        else 
            delete_post_meta( $post_id, 'gallery_data' );
    } 
    // Nothing received, all fields are empty, delete option
    else 
    {
        delete_post_meta( $post_id, 'gallery_data' );
    }
}

결과:

위에서 @brasofilo의 답변을 사용했는데 이미지 ID도 저장하는 것을 놓쳐서 사용할 수 있었습니다.wp_get_attachment_image예를들면.

여기 제 수정 코드가 있는데, 이미지 ID도 저장됩니다.또한 두 개의 배열을 사용하여 어떤 페이지 템플릿과 메타 상자가 나타나는 게시 유형에 대해 각각 정의합니다.코드는 다음과 같습니다.

<?php
/**
 * Plugin Name: Repeatable image fields
 * Plugin URI:  https://stackoverflow.com/a/36456957/4800442
 * Description: Repeatable image fields in a meta box.
 * Author:      brasofilo
 * License:     GPLv3
 */

add_action( 'admin_init', 'add_post_gallery_so_14445904' );
add_action( 'add_meta_boxes_page', 'add_page_gallery_so_14445904' );
add_action( 'admin_head-post.php', 'print_scripts_so_14445904' );
add_action( 'admin_head-post-new.php', 'print_scripts_so_14445904' );
add_action( 'save_post', 'update_post_gallery_so_14445904', 10, 2 );

// Make it work only in selected templates
$rep_fields_templates = array('page-aboutus.php');
$rep_fields_posts     = array('service',
                              'style',
                              'brand');

/**
 * Add custom Meta Box
 */

// Add meta box to custom posts 
function add_post_gallery_so_14445904() 
{
    global $rep_fields_posts;       
    add_meta_box(
        'post_gallery',
        'Slideshow Gallery',
        'post_gallery_options_so_14445904',
        $rep_fields_posts,
        'normal',
        'core'
    );
}

// Add meta box to custom page templates
function add_page_gallery_so_14445904() 
{       
    global $post, $rep_fields_templates;
    if ( in_array( get_post_meta( $post->ID, '_wp_page_template', true ), $rep_fields_templates ) ) {
        add_meta_box(
            'post_gallery',
            'Slideshow Gallery',
            'post_gallery_options_so_14445904',
            'page',
            'normal',
            'core'
        );
    }
}

/**
 * Print the Meta Box content
 */
function post_gallery_options_so_14445904() 
{
    global $post;
    $gallery_data = get_post_meta( $post->ID, 'gallery_data', true );

    // Use nonce for verification
    wp_nonce_field( plugin_basename( __FILE__ ), 'noncename_so_14445904' );
    ?>

    <div id="dynamic_form">

        <div id="field_wrap">
        <?php 
        if ( isset( $gallery_data['image_url'] ) ) 
        {
            for( $i = 0; $i < count( $gallery_data['image_url'] ); $i++ ) 
            {
            ?>

            <div class="field_row">

              <div class="field_left">
                <div class="form_field">
                  <!--<label>Image URL</label>-->
                  <input type="hidden"
                         class="meta_image_url"
                         name="gallery[image_url][]"
                         value="<?php esc_html_e( $gallery_data['image_url'][$i] ); ?>"
                  />
                  <input type="hidden"
                         class="meta_image_id"
                         name="gallery[image_id][]"
                         value="<?php esc_html_e( $gallery_data['image_id'][$i] ); ?>"
                  />
                </div>
                <div class="form_field" style="margin-bottom: 20px">
                  <label>Description</label>
                  <textarea
                         class="meta_image_desc"
                         name="gallery[image_desc][]"
                         rows="3"
                         style="width: 100%"><?php esc_html_e( $gallery_data['image_desc'][$i] ); ?></textarea>
                </div>
                <input class="button" type="button" value="Choose File" onclick="add_image(this)" />&nbsp;&nbsp;&nbsp;
                <input class="button" type="button" value="Remove" onclick="remove_field(this)" />
              </div>

              <div class="field_right image_wrap">
                <img src="<?php esc_html_e( $gallery_data['image_url'][$i] ); ?>" />
              </div>
              <div class="clear" /></div> 
            </div>
            <?php
            } // endif
        } // endforeach
        ?>
        </div>

        <div style="display:none" id="master-row">
        <div class="field_row">
            <div class="field_left">
                <div class="form_field">
                    <!--<label>Image URL</label>-->
                    <input class="meta_image_url" value=""  name="gallery[image_url][]" />
                    <input class="meta_image_id" value=""  name="gallery[image_id][]" />
                </div>
                <div class="form_field" style="margin-bottom: 20px">
                    <label>Description</label>
                    <textarea class="meta_image_desc" name="gallery[image_desc][]" rows="3" style="width: 100%"></textarea>
                </div>
                <input type="button" class="button" value="Choose Image" onclick="add_image(this)" />&nbsp;&nbsp;&nbsp;
                <input class="button" type="button" value="Remove" onclick="remove_field(this)" />
            </div>
            <div class="field_right image_wrap">
            </div>
            <div class="clear"></div>
        </div>
        </div>

        <div id="add_field_row">
          <input class="button" type="button" value="Add Image" onclick="add_field_row();" />
        </div>
        <?php if ( 'trend' == get_post_type( $post->ID ) ) { ?>
        <p style="color: #a00;">Make sure the number if images you add is a <b>multiple of 5</b>.</p>
        <?php } ?>
    </div>
    <?php
}

/**
 * Print styles and scripts
 */
function print_scripts_so_14445904()
{
    // Check for correct post_type
    global $post, $rep_fields_templates, $rep_fields_posts;
    if ( !in_array( get_post_meta( $post->ID, '_wp_page_template', true ), $rep_fields_templates ) && 
         !in_array( get_post_type( $post->ID)                           , $rep_fields_posts ) )
        return;
    ?>  
    <style type="text/css">
      .field_left {
        float:left;
        width: 75%;
        padding-right: 20px;
        box-sizing:border-box;  
      }
      .field_right {
        float:left;
        width: 25%;
      }
      .image_wrap img {
          max-width: 100%;
      }
      #dynamic_form input[type=text] {
        width:100%;
      }
      #dynamic_form .field_row {
        border:1px solid #cecece;
        margin-bottom:10px;
        padding:10px;
      }
      #dynamic_form label {
        display: block;
        margin-bottom: 5px;
      }
    </style>

    <script type="text/javascript">
        function add_image(obj) {

            var parent=jQuery(obj).parent().parent('div.field_row');
            var inputField = jQuery(parent).find("input.meta_image_url");
            var inputFieldID = jQuery(parent).find("input.meta_image_id");
            var fileFrame = wp.media.frames.file_frame = wp.media({
                multiple: false
            });
            fileFrame.on('select', function() {
                var selection = fileFrame.state().get('selection').first().toJSON();
                inputField.val(selection.url);
                inputFieldID.val(selection.id);
                jQuery(parent)
                .find("div.image_wrap")
                .html('<img src="'+selection.url+'" />');
            });
            fileFrame.open();
        //});
        };

        function remove_field(obj) {
            var parent=jQuery(obj).parent().parent();
            parent.remove();
        }

        function add_field_row() {
            var row = jQuery('#master-row').html();
            jQuery(row).appendTo('#field_wrap');
        }
    </script>
    <?php
}

/**
 * Save post action, process fields
 */
function update_post_gallery_so_14445904( $post_id, $post_object ) 
{
    // Doing revision, exit earlier **can be removed**
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )  
        return;

    // Doing revision, exit earlier
    if ( 'revision' == $post_object->post_type )
        return;

    // Verify authenticity
    if ( !wp_verify_nonce( $_POST['noncename_so_14445904'], plugin_basename( __FILE__ ) ) )
        return;

    global $rep_fields_templates, $rep_fields_posts;
    if ( !in_array( get_post_meta( $post_id, '_wp_page_template', true ), $rep_fields_templates ) && 
         !in_array( get_post_type( $post_id)                            , $rep_fields_posts ) ) 
        return;

    if ( $_POST['gallery'] ) 
    {
        // Build array for saving post meta
        $gallery_data = array();
        for ($i = 0; $i < count( $_POST['gallery']['image_url'] ); $i++ ) 
        {
            if ( '' != $_POST['gallery']['image_url'][ $i ] ) 
            {
                $gallery_data['image_url'][]  = $_POST['gallery']['image_url'][ $i ];
                $gallery_data['image_id'][]  = $_POST['gallery']['image_id'][ $i ];
                $gallery_data['image_desc'][] = $_POST['gallery']['image_desc'][ $i ];
            }
        }

        if ( $gallery_data ) 
            update_post_meta( $post_id, 'gallery_data', $gallery_data );
        else 
            delete_post_meta( $post_id, 'gallery_data' );
    } 
    // Nothing received, all fields are empty, delete option
    else 
    {
        delete_post_meta( $post_id, 'gallery_data' );
    }
}

다음은 테마에 데이터를 출력하는 방법의 예입니다.

<?php 
if ( '' != get_post_meta( get_the_ID(), 'gallery_data', true ) ) { $gallery = get_post_meta( get_the_ID(), 'gallery_data', true ); }

if ( isset( $gallery['image_id'] ) ) :

    for( $i = 0; $i < count( $gallery['image_id'] ); $i++ ) { 
        if ( '' != $gallery['image_id'][$i] ) {
            echo wp_get_attachment_image( $gallery['image_id'][$i], 'gallery_large' );
            if ( isset($gallery['image_desc'][$i]) ) echo $gallery['image_desc'][$i];
        }   
    }

endif; 
?>

Wordpress 3.5의 경우 새 미디어 업로더가 이 스크립트 변경 스크립트와 이전 스크립트로 열립니다.

<script type="text/javascript">
    function add_image(obj) {

        var parent=jQuery(obj).parent().parent('div.field_row');
        var inputField = jQuery(parent).find("input.meta_image_url");
        var fileFrame = wp.media.frames.file_frame = wp.media({
            multiple: false
        });
        fileFrame.on('select', function() {
            var url = fileFrame.state().get('selection').first().toJSON();
            inputField.val(url.url);
            jQuery(parent)
            .find("div.image_wrap")
            .html('<img src="'+url.url+'" height="48" width="48" />');
        });
        fileFrame.open();
    //});
    };

    function reomove_field(obj) {
        var parent=jQuery(obj).parent().parent();
        //console.log(parent)
        parent.remove();
    }

    function add_field_row() {
        var row = jQuery('#master-row').html();
        jQuery(row).appendTo('#field_wrap');
    }
</script>

언급URL : https://stackoverflow.com/questions/14445904/adding-custom-image-fields-and-other-fields-at-the-same-time