【Wordpress】画像が追加できるカスタムフィールドを実装した際、4枚以上の画像登録・反映ができない

このサイトを参考に、画像が投稿画面に追加できるカスタムフィールドを作成しています。

現状でできている事

・画像の追加・削除
・ドラッグによる画像の入れ替え

ここまでは希望の通りに出来ているのですが、3枚までしか登録ができず、4枚目以降の画像を選択しても反映されません。

行っている記述

<?php add_action("admin_init", "metaboxs_init"); function metaboxs_init(){ add_meta_box( 'myupload', 'アイテム画像', 'myupload_postmeta', 'post', 'side','high' ); add_action('save_post', 'save_myupload_postmeta'); } function myupload_postmeta(){ global $post; $post_id = $post->ID; $myupload_images = get_post_meta( $post_id, 'myupload_images', true ); if($myupload_images){ foreach( $myupload_images as $key => $img_id ){ $thumb_src = wp_get_attachment_image_src ($img_id,'thumbnail'); if ( empty ($thumb_src[0]) ){ delete_post_meta( $post_id, 'myupload_images', $img_id ); } else { $myupload_li.= "\t".'<li class="img" id="img_'.$img_id.'">'."\n". "\t\t".'<span class="img_wrap">'."\n". "\t\t\t".'<a href="#" class="myupload_images_remove" title="画像を削除する"></a>'."\n". "\t\t\t".'<img src="'.$thumb_src[0].'"/>'."\n". "\t\t\t".'<input type="hidden" name="myupload_images[]" value="'.$img_id.'" />'."\n". "\t\t".'</span>'."\n". "\t".'</li>'."\n"; } } } ?> <style type="text/css"> #myupload_images { display:block; clear:both; list-style-type: none; } #myupload_images:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } #myupload_images li { display:block; width:100%; margin:0; padding:5px 0; text-align:center; } #myupload_images li span.img_wrap { display:inline-block; margin:0; height:auto; width:auto; padding:4px; position:relative; background:#ccc; } #myupload_images li span img { margin:0; padding:0; max-height: 160px; width:auto; vertical-align:text-bottom; } #myupload_images li span input { display:none; } #myupload_images li span a.myupload_images_remove { position:absolute; top:-8px; right:-8px; height:32px; width:32px; text-align:center; vertical-align:middle; background:#ccc; border-radius:50%; } #myupload_images li span a.myupload_images_remove:before { content:'×'; display:inline-block; text-decoration:none; width:1em; margin-right:.2em; text-align:center; font-size:20px; line-height:20px; padding:6px; color:#fff; font-weight:bold; } #myupload_images li span a.myupload_images_remove:hover { background:#aaa; } #myupload_buttons a, #myupload_buttons input { padding:10px 15px; height:40px; line-height:20px; font-weight:bold; text-align:center; } </style> <div id="myupload_buttons"> <a id="myupload_media" type="button" class="button" title="画像を追加">アイテム画像の追加</a> <input type="submit" name="save" id="save2" class="button" value="更新" /> <p>※ ×アイコンから消したい場合は、先に「更新」を押す。</p> </div> <ul id="myupload_images"> <?php echo $myupload_li; ?> </ul> <input type="hidden" name="myupload_postmeta_nonce" value="<?php echo wp_create_nonce(basename(__FILE__)); ?>" /> <script type="text/javascript"> jQuery( function(){ var custom_uploader; jQuery('#myupload_media').click(function(e) { e.preventDefault(); if (custom_uploader) { custom_uploader.open(); return; } custom_uploader = wp.media({ title: _wpMediaViewsL10n.mediaLibraryTitle, library: { type: 'image' }, button: { text: '画像を選択' }, multiple: true, frame: 'select', editing: false, }); custom_uploader.on('ready', function() { // jQuery('select.attachment-filters [value="uploaded"]').attr( 'selected', true ).parent().trigger('change'); //「この投稿への画像」をデフォルト表示 不要ならコメントアウト }); custom_uploader.on('select', function() { var images = custom_uploader.state().get('selection'), ex_ul = jQuery('#myupload_images'), ex_id = 0, array_ids = []; if ( ex_ul[0] ){ //すでに登録されている画像を配列に格納 ex_ul.children('li').each( function( ){ ex_id = Number(jQuery(this).attr( 'id' ).slice(4)); array_ids.push( ex_id ); }); } console.log(images); images.each(function( file ){ new_id = file.toJSON().id; if ( jQuery.inArray( new_id, array_ids ) > -1 ){ ex_ul.find('li#img_'+ new_id).remove(); } ex_ul.append('<li class="img" id=img_'+ new_id +'></li>').find('li:last').append( '<span class="img_wrap">' + '<a href="#" class="myupload_images_remove" title="画像を削除する"></a>' + '<img src="'+file.attributes.sizes.thumbnail.url+'" />' + '<input type="hidden" name="myupload_images[]" value="'+ new_id +'" />' + '</span>' ); }); }); custom_uploader.open(); }); jQuery( ".myupload_images_remove" ).on( 'click', function( e ) { e.preventDefault(); e.stopPropagation(); img_obj = jQuery(this).parents('li.img').remove(); }); jQuery( "#myupload_images" ).sortable({ axis : 'y', cursor : "move", tolerance : "pointer", opacity: 0.6 }); }); </script> <?php } /*データ更新時の保存*/ function save_myupload_postmeta( $post_id ){ if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id; if (!wp_verify_nonce($_POST['myupload_postmeta_nonce'], basename(__FILE__))) return $post_id; if ( 'page' == $_POST['post_type'] ) { if ( !current_user_can( 'edit_page', $post_id ) ) return $post_id; } else { if ( !current_user_can( 'edit_post', $post_id ) ) return $post_id; } $new_images = isset($_POST['myupload_images']) ? $_POST['myupload_images']: null; $ex_images = get_post_meta( $post_id, 'myupload_images', true ); if ( $ex_images !== $new_images ){ if ( $new_images ){ update_post_meta( $post_id, 'myupload_images', $new_images ); } else { delete_post_meta( $post_id, 'myupload_images', $ex_images ); } } } ?>

 
記述や設定などは上記で完結はしているものの、4枚以上を登録する方法がわからずご教授頂ければ幸いです。

宜しくお願い致します。

コメントを投稿

0 コメント