Lập trình WordPress

WordPress: Tuỳ biến Gallery shortcode markup

Điểm bài viết
[Tổng cộng: 1 Trung bình: 4]

WordPress và nút Thêm Media thần thánh giúp bạn dễ dàng thêm album ảnh, nhưng bạn có biết rằng chúng ta có thể tận dụng Gallery shortcode để xây dựng những markup khác như slideshow không?

Gallery Shortcode trong WordPress

Gallery Shortcode trong WordPress vốn dĩ là một native shortcode giúp bạn tạo 1 grid album ảnh để chèn vào trong bài viết. Trong phần lớn tình huống, gần như nhiều người không thường sử dụng chức năng này.

Với mục đích tận dụng các native features được hỗ trợ bởi WordPress thay vì sử dụng các plugin/hacking từ bên thứ ba, Code Tốt sẽ trình bày phương án giúp các bạn tuỳ biến output của Gallery Shortcode sao cho phù hợp với markup mình mong muốn.

Bài toán thay đổi markup Gallery shortcode

Bài toán đặt ra là thay vì hiển thị 1 loạt các content, thì ta sẽ chỉ tìm ra các img src và output nó trong 1 <div> mà thôi, tức đạt điều kiện lý tưởng để xây dựng cấu trúc dành cho slideshow thông thường như sau:

<div class="gallery">
  <div class="gallery-item">
    <img src="<?php echo $image_url; ?>" alt="">
  </div>
</div>

Hoặc trong 1 page list các partners, ta muốn có dạng sau:

<div class="partner-list">
  <div class="partner-item">
    <a href="#" class="parner-link">
      <img src="<?php echo $image_url; ?>" alt="">
    </a>
  </div>
</div>

Bạn thấy đấy, nếu bạn output mặc định như Gallery thì kết quả sẽ không thể nào ra như mình mong muốn đúng không?

0 0 đánh giá
Đánh giá bài viết