WordPressでACF Proなしで画像ギャラリー（繰り返しフィールド）を自作する方法【コピペOK】

// メタボックスのHTML出力
function works_gallery_meta_box_callback($post) {
  wp_nonce_field('works_gallery_nonce_action', 'works_gallery_nonce');
  $images = get_post_meta($post->ID, '_works_gallery_images', true);
  if (!is_array($images)) $images = array();
  ?>
  <style>
   #works-gallery-container {
     display: flex;
     flex-wrap: wrap;
     gap: 5px;
   }
   .works-gallery-item {
     cursor: grab;
     position: relative;
     display: inline-block;
   }
   .works-gallery-item:active {
     cursor: grabbing;
   }
   .works-gallery-item.ui-sortable-helper {
     opacity: 0.8;
     box-shadow: 0 4px 12px rgba(0,0,0,0.3);
     transform: scale(1.05);
   }
   .sortable-placeholder {
     width: 150px;
     height: 150px;
     border: 2px dashed #0073aa;
     background: #f0f6fc;
     display: inline-block;
     margin: 5px;
   }
 </style>
 <div id="works-gallery-container">
  <?php foreach ($images as $index => $image_id) :
   $image_url = wp_get_attachment_image_url($image_id, 'thumbnail');
   if (!$image_url) continue;
  ?>
  <div class="works-gallery-item">
    <img src="<?php echo esc_url($image_url); ?>" style="width:150px; height:150px; object-fit:cover; display:block;">
    <input type="hidden" name="works_gallery_images[]" value="<?php echo esc_attr($image_id); ?>">
    <button type="button" class="works-gallery-remove" style="position:absolute; top:0; right:0; background:red; color:#fff; border:none; cursor:pointer; padding:2px 6px;">×</button>
  </div>
  <?php endforeach; ?>
 </div>
 <p>
   <button type="button" id="works-gallery-add" class="button">画像を追加</button>
 </p>
 <p class="description">※ 画像をドラッグ&ドロップで並び替えできます</p>
 <script>
  jQuery(document).ready(function($) {
    $('#works-gallery-add').on('click', function(e) {
      e.preventDefault();
      var frame = wp.media({
        title: '画像を選択',
        multiple: true,
        library: { type: 'image' },
        button: { text: '画像を追加' }
      });
      frame.on('select', function() {
        var attachments = frame.state().get('selection').toJSON();
        $.each(attachments, function(i, attachment) {
          var thumbUrl = attachment.sizes.thumbnail ? attachment.sizes.thumbnail.url : attachment.url;
          var html = '<div class="works-gallery-item">';
          html += '<img src="' + thumbUrl + '" style="width:150px; height:150px; object-fit:cover; display:block;">';
          html += '<input type="hidden" name="works_gallery_images[]" value="' + attachment.id + '">';
          html += '<button type="button" class="works-gallery-remove" style="position:absolute; top:0; right:0; background:red; color:#fff; border:none; cursor:pointer; padding:2px 6px;">×</button>';
          html += '</div>';
          $('#works-gallery-container').append(html);
        });
      });
      frame.open();
    });
    $(document).on('click', '.works-gallery-remove', function() {
    $(this).closest('.works-gallery-item').remove();
  });
  $('#works-gallery-container').sortable({
    items: '.works-gallery-item',
    cursor: 'grabbing',
    placeholder: 'sortable-placeholder',
    tolerance: 'pointer',
    revert: 200
  });
});
</script>
<?php 
}