Trong quá trình học wordpress chắc chắn các bạn sẽ gặp dạng website có gallery hình ảnh như: Web bán hàng dùng để trình chiếu hình các ảnh của 1 sản phẩm, web du lịch trình chiếu các hình của một tour du lịch, web bất động sản trình chiếu hình ảnh của nhà cửa… Việc tạo một gallery hình ảnh trong wordpress đã có rất nhiều plugin hỗ trợ.
Nhưng đa số đều khó tùy biến và khá nặng, vì thế hôm nay mình sẽ hướng dẫn cho các bạn tạo gallery hình ảnh trong wordpress sử dụng plugin Advanced Custom Fields (ACF) giúp bạn custom giao diện gallery theo ý của các bạn.
** Lưu ý plugin ACF chỉ giúp các bạn tạo phần post gallery trong trong khu vực post bài, còn việc hiển thị hình ảnh ra ngoài mình phải tự code nhé 🙂
Các bạn chú ý: Chỉ có phiên bản ACF pro mới làm được chức năng này nha!
Download: Advanced Custom Fields PRO Đây là phiên bản 5.6.10 nhé, mình có bán key bản quyên của plugin này giá 200k. Khi sử dụng key bản quyền bạn được cập nhật plugin phiên bản mới nhất, số lượng sử dụng ko giới hạn. Bạn nào có nhu cầu thì liên hệ mình nhé!
Đây là plugin khá phổ biến nên bạn cứ cài đặt một cách bình thường như plugin khác nha!
Bước 1: Vào menu Custom Fields trong admin tạo một group filed mới tên là Gallery hình ảnh, tùy chỉnh thông tin -> quan sát hình phía bên dưới!
Ở phần này chúng ta thêm 1 field mới với nội dung cụ thể như sau:
Bước 2: Cũng ở giao diện này bạn chọn post type cho phù hợp với dự án của bạn!
Ở ví dụ này mình chọn post type là bài viết!
Bước 3: Lưu filed
Sau khi thực hiện các bước trên bạn di chuyển tới vị trí “Bài viết” và thử thêm một bài viết mới, bạn sẽ thấy xuất hiện khu vực post gallery hình ảnh như sau:
Bạn có thể nhập một số dữ liệu demo và thêm 1 số hình vào khu vực Gallery hình ảnh! Bạn có thể duy chuyển để thay đổi vị trí của các hình trong gallery! Sau đó bấm đăng bài viết để lưu thông tin.
Gallery hình ảnh thường xuất hiện trong nội dung chi tiết của bài viết! Vì thế chúng ta phải vào file single.php trong theme để get gallery hình ảnh này ra! Để get gallery chúng ta sử dụng đoạn code sau.
<?php $gallery = get_field('gallery'); if($gallery){ echo '<ul>'; foreach ($gallery as $key => $value) { echo '<li><img src="'.$value['url'].'" alt="'.$value['alt'].'"></li>'; } echo '</ul>'; } ?>
Giải thích:
Ở bài viết này mình đã hướng dẫn cho bạn chức năng tạo gallery hình ảnh trong wordpress thông qua plugin ACF Pro. Bài viết này chỉ hướng dẫn xây dự chức năng, còn việc hiển thị, hiệu ứng, giao diện… như thế nào tuỳ mục đích sử dụng của bạn, các bạn có thể kết hợp với các thư viên slider jquey để làm.
Ở các website mình đã làm như code bất động sản wordpress, code du lịch wordpress mình sử dụng thư viện: lightGallery kết hợp với lightSlider các bạn có thể tham khảo thử nha!
Chúc các bạn học lập trình wordpress thành công!
Fonttiengviet.com là một dự án website do JKS thực hiện cho khách hàng Huy Academy.…
Chắc chắn nhiều anh em khi đọc bài viết này sẽ nghĩ tôi đang quảng…
Widget trong WordPress là một công cụ mạnh mẽ cho phép bạn dễ dàng thêm…
Hôm nay mình sẽ hướng dẫn cho anh em cách tạo website blog cực kỳ…
Sống cực tốt anh em ạ :D Sau nhiều năm gắng bó với nghề thiết…
Nhân dịp quay lại viết blog mình share cho anh em code mẫu website blog…
View Comments
Cái form "Book Online" kia làm bằng gì thế anh? Nếu làm bằng Contact Form thì: 1-làm thế nào để lấy được tiêu đề bài viết vào form. 2-Khi gửi đăng ký form thì nội dung của bài viết đó sẽ gửi đúng về cho ng nhận. Anh hướng dẫn em cái này ạ
Cái đó a dùng contact from 7 nha em!
1. Để nó tự động get tiêu đề vào thì em phải dùng jquery để gán giá trị nhé ví dụ: $('.input-tieude').val('url');
2. Để nó tự gởi mail cho khách thì trong khung của điển email nhận e thêm dấu ',' ví dụ: huykira@gmail.com, [email].
Em có thể tìm hiểu hàm wp_mail của wordpress để làm chức năng book online mà ko cần dùng contact from 7 nhé!
Anh ơi sao em get code trên vào file single thì nó k hiển thị ảnh ạ
Chỉ e code giới thiệu bằng lái xe bằng PHP vs
a ơi thế không có cách nào khác là dùng plugin à, không custom post type được à?