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:
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?
Cách thay đổi output của Gallery Shortcode trong WordPress
Đầu tiên, ta cần tạo 1 function và sử dụng add_filter:
add_filter('post_gallery', 'codetot_gallery_shortcode_update', 10, 2);
function codetot_gallery_shortcode_update($output, $attr) {}
Function này sẽ nhận 2 variables là $output và $attr, trong đó $output là những thứ chúng ta sẽ sửa, còn $attr là những option mà khi tạo Gallery shortcode người dùng có thể truyền vào (ví dụ 2 hay 3 cột).
Giờ trong function, ta bắt đầu xử lý đầu tiên là extract toàn bộ phần $attr ra
Giờ ta sẽ xét đến các tình huống template cụ thể để output markup ra, trong trường hợp này là khi chạy lẻ 1 album (1 album có thể chứa 1 gallery shortcode ảnh duy nhất).