Khi bạn thiết kế website bán hàng bằng wordpress, sản phẩm chi tiết thường kèm 1 hoặc nhiều hình phụ khác, bạn đang loay hoay, hãy xem qua bài viết này, những gì đơn giản nhất, tính năng đầy đủ nhất sẽ được trình bày ngay sau đây.

Tạo gallery hình sản phẩm bằng plugin
Bạn xem hình kế bên, trong chi tiết sản phẩm có 1 hình lớn và 3 hình nhỏ phía dưới.

Trong bài này happiweb sẽ hướng dẫn bạn tạo 3 hình nhỏ này (theo demo của tui, với bạn có thể hơn).

Đầu tiên bạn truy cập link sau để tại plugin: http://iwayanwirka.duststone.com/multiple-gallery-on-post/, có thể nói plugin này đơn giản rất và tính năng đầy đủ  nhất mà happiweb biết.

Khi tải xong bạn active plugin, tiếp đó bạn vào Settings >> Multiple Gallery on Post Settings để cấu hình.


cau hinh Multiple Gallery on Post
Ở đây happiweb đã tạo sẵn post_type là sản phẩm, bạn có thể tùy chọn post hay page tùy thuộc vào theme của bạn.

Đặt tiêu đề trong ô Metabox Title, và để ý giá trị trong ô Metabox Slug, trong ô Output Location có 3 lựa chọn
- Hiển thị sau nội dung
- Hiển thị trước nội dung
- Dạng shortcode
Trong ví dụ này happiweb chọn shortcode, lý do khi khám phá bạn sẽ hiểu.

upload hinh trong gallery
Khi đăng sản phẩm bạn sẽ thấy cho mục dạng dạng như thế này. Bạn upload hình ảnh, có thể di chuyển vị trí những hình này.

Chú ý Metabox Slug, bởi vì nó là chìa khóa của vấn đề.



Để hiển thị những hình ảnh đã upload thì sao nhỉ ? Xem code dưới

<?
$metavalue = mgop_get_metadata("gallery", $post_id);
foreach ($metavalue as $img_id) {
    $img_thumb_thumb = wp_get_attachment_image_src($img_id, 'img_thumb');
    $img_lagre_thumb = wp_get_attachment_image_src($img_id, 'medium');
    ?>
    <a class="group1" href="<?= $img_lagre_thumb[0]; ?>">
        <img class="item" src="<?= $img_thumb_thumb[0]; ?>"/></a>
    <?php
}
?> 


  • gallery: chính là giá trị trong ô Metabox Slug
  • $post_id: là ID của sản phẩm.
  • img_thumb, medium: là các tên mình quy định kích thước của hình bằng hàm add_image_size
  • $img_lagre_thumb[0]: đường dẫn hình lớn
  • $img_thumb_thumb[0]: đường dẫn hình nhỏ
Bài viết xin được tạm dừng ở đây, với plugin này có nhiều thứ mà bạn và happiweb cần khám khá để phục vụ cho công việc thiết kế website bằng wordpress của mình.

Nếu bạn có cách nào cũng tuyệt như bài viết này hãy chia sẻ với chúng tôi và tất cả những người đam mê wordpress nhé.

Đăng nhận xét

Vui lòng không spam comment bạn nhé!

 
Top