Tạo gallery ảnh wordpress

Gallery ảnh là một phần không thể thiếu của thư viện ảnh trong bất kì một website nào

Vậy để tạo một gallery ảnh cho một post type bất kì, mình sẽ có một đoạn code như sau, mong là sẽ hỗ trợ được các bạn trong quá trình xây dựng theme của mình.

<?php
// Add meta box
add_action( 'admin_menu', 'misha_meta_box_add' );

// Gallery cpt
function gallery_meta_callback($post) {
	wp_nonce_field( basename(__FILE__), 'gallery_meta_nonce' );
	$ids = get_post_meta($post->ID, '_tdc_gallery_id', true);
	?>
	<table class="form-table">
		<tr><td>
			<a class="gallery-add button" href="#" data-uploader-title="Thêm hình ảnh" data-uploader-button-text="Thêm nhiều hình ảnh" style="margin:0px 0px 10px 0px;">Upload Images</a>
			<ul id="gallery-metabox-list">
				<?php if ($ids) : foreach ($ids as $key => $value) : $image = wp_get_attachment_image_src($value); ?>
					<li>
						<input type="hidden" name="tdc_gallery_id[<?php echo $key; ?>]" value="<?php echo $value; ?>">
						<img class="image-preview" src="<?php echo $image[0]; ?>">
						<a class="change-image button button-small" href="#" data-uploader-title="Đổi hình khác" data-uploader-button-text="Đổi hình khác">Change Image</a><br>
						<small><a class="remove-image" href="#">Delete</a></small>
					</li>
				<?php endforeach; endif; ?>
			</ul>
		</td></tr>
	</table>
<?php }
function gallery_meta_save($post_id) {
	if (!isset($_POST['gallery_meta_nonce']) || !wp_verify_nonce($_POST['gallery_meta_nonce'], basename(__FILE__))) return;
	if (!current_user_can('edit_post', $post_id)) return;
	if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
	if(isset($_POST['tdc_gallery_id'])) {
		update_post_meta($post_id, '_tdc_gallery_id', $_POST['tdc_gallery_id']);
	} else {
		delete_post_meta($post_id, '_tdc_gallery_id');
	}
}
add_action('save_post', 'gallery_meta_save');

Thêm đoạn css sau vào file admin.css dùng cho admin.

.misha_gallery_mtb li figure {
  height: 100px;
  width: 100px;
  display: inline-block;
  margin: 0px;
  background-position: center center;
  background-size: cover !important;
}
.misha_gallery_mtb li {
  display: inline-block;
  padding: 0px 5px;
  position: relative;
}
.misha_gallery_mtb {
  margin: 0px -5px;
}
.misha_gallery_mtb li a.misha_gallery_remove {
  position: absolute;
  width: 15px;
  height: 15px;
  text-align: center;
  line-height: 13px;
  background: #ff0000;
  border-radius: 50%;
  top: 0px;
  right: 0px;
  color: #fff;
  font-weight: 700;
}
#gallery-metabox-list,
#video_list_cpt {
  margin: 0px -10px;
}
#gallery-metabox-list li {
  float: left;
  text-align: center;
  padding: 0px 10px;
  width: 10%;
}
#video_list_cpt li {
  float: left;
  text-align: center;
  padding: 0px 10px;
  width: 20%;
}
img {
  max-width: 100%;
}

.misha_gallery_mtb li span {
  width: 100px;
  height: 100px;
  display: inline-block;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

Thêm js để xử lí các sự kiện.

jQuery(document).ready(function(){
   var file_frame;
   jQuery(document).on('click', '#gallery-metabox a.gallery-add', function(e) {
      e.preventDefault();
      if (file_frame) file_frame.close();
      file_frame = wp.media.frames.file_frame = wp.media({
         title: jQuery(this).data('uploader-title'),
         button: {
            text: jQuery(this).data('uploader-button-text'),
        },
        multiple: true
    });

      file_frame.on('select', function() {
         var listIndex = jQuery('#gallery-metabox-list li').index(jQuery('#gallery-metabox-list li:last')),
         selection = file_frame.state().get('selection');

         selection.map(function(attachment, i) {
            attachment = attachment.toJSON(),
            index = listIndex + (i + 1);
            jQuery('#gallery-metabox-list').append('<li><input type="hidden" name="tdc_gallery_id[' + index + ']" value="' + attachment.id + '"><img class="image-preview" src="' + attachment.sizes.thumbnail.url + '"><a class="change-image button button-small" href="#" data-uploader-title="Change image" data-uploader-button-text="Change image">Đổi hình</a><br><small><a class="remove-image" href="#">Remove image</a></small></li>');
        });
     });
      fnSortable();
      file_frame.open();

  });

   jQuery(document).on('click', '#gallery-metabox a.change-image', function(e) {
      e.preventDefault();
      var that = jQuery(this);
      if (file_frame) file_frame.close();
      file_frame = wp.media.frames.file_frame = wp.media({
         title: jQuery(this).data('uploader-title'),
         button: {
             text: jQuery(this).data('uploader-button-text'),
         },
         multiple: false
     });

      file_frame.on( 'select', function() {
         attachment = file_frame.state().get('selection').first().toJSON();
         that.parent().find('input:hidden').attr('value', attachment.id);
         that.parent().find('img.image-preview').attr('src', attachment.sizes.thumbnail.url);
     });
      file_frame.open();
  });

   jQuery(document).on('click', '#gallery-metabox a.remove-image', function(e) {
       e.preventDefault();
       jQuery(this).parents('li').animate({ opacity: 0 }, 200, function() {
         jQuery(this).remove();
         resetIndex();
     });
   });

   function resetIndex() {
    jQuery('#gallery-metabox-list li').each(function(i) {
       jQuery(this).find('input:hidden').attr('name', 'tdc_gallery_id[' + i + ']');
   });
}

function fnSortable() {
    jQuery('#gallery-metabox-list').sortable({
       opacity: 0.6,
       stop: function() {
          resetIndex();
      }
  });
}
});

Chúc các bạn thao tác thành công