Khi khách hàng doanh nghiệp công ty có nhu cầu thiết kế website giới thiệu công ty bằng WordPress muốn hiển thị hình ảnh đối tác hay thư viện hình ảnh ngoài trang chủ và quản lý hình ảnh đối tác của họ trong quản trị thì làm thế nào ?
Sau đây Sơn Web sẽ hướng dẫn bạn các bước đơn giản để hiện thị resposnive thư viện hình ảnh hoặc hình ảnh đối tác ngoài giao diện website các 3 bước sau :
Bước 1: Custom Post Type UI đệ tạo post type chứa các hình ảnh đối tác hoặc thư viện hình ảnh
Bước 2: Sử dụng js slick để tạo hiệu ứng và responsive hiển hị ảnh ảnh đối tác
Bước 3: Dùng hàm wordpress hiển thị hình
Bước 4. Áp dụng js slick để responsive & định dạng hình ảnh đối tác.
Bước 1: Sử dụng plugin custom post type UI
Đầu tiên bạn vào quản trị WordPress và trong phần cài mới plugin search plugin custom post type ui , sau đó tiến hành cài đặt và kích hoạt plugin.
Sử dụng plugin này cũng rất đơn giản. , trong phần add new post type , bạn đặt tên label và slug cho post type như hình sau:
Việc cài đặt plugin để tạo post type tới đây là Ok. Tiếp theo bạn sẽ chuyển qua bước 2.
Bước 2 Add js slick vào trong theme wordpress của bạn
Để thêm các js vào trong theme bạn đang lập trình wordpress cũng rất đơn giản .Bạn copy nguyên thư mục slick vào trong folder theme của bạn sau đó mở file functions.php để add vào ví dụ như sau :
[crayon] wp_enqueue_script( ‘slick’,get_template_directory_uri() . ‘/library/js/slick/slick.min.js’,
array(‘jquery’),
‘1.2’ );
wp_enqueue_style( ‘slick’, get_template_directory_uri() . ‘/library/js/slick/slick.css’, array(), ‘1.0’, ‘all’ );
wp_enqueue_style( ‘slick-theme’, get_template_directory_uri() . ‘/library/js/slick/slick-theme.css’, array(), ‘1.0’, ‘all’ );
[/crayon]
Bước 3 : Để lấy hình ảnh media Trong post type Thư viện hình ảnh bạn dùng hàm get_posts trong WordPress hoặc bạn có thể cách sau . Để không phải tạo từng bài viết mới trong post type Thư viên hình ảnh .Tạo 1 trang mới là thư viện hình ảnh.Và add gallery trong content của bài viết đó như sau :
Sau đó bạn dùng hàm get_post_gallery để lấy gallery trong trang thư viện hình ảnh theo ví dụ sau :
[crayon]
[/crayon]
Với 35 là id của trang thư viện hình ảnh.Việc thiết kế website trên WordPress sẽ giúp bạn tiết kiệm rất nhiều thời gian để làm một trang website.
Bước 4 dùng js slick trong wordpress
Tới đây gần như bạn đã hoàn thành .Tuy nhiên để dùng hàm slick.js nhứ thế nào bạn có thể tham khảo tại đây:
http://kenwheeler.github.io/slick/
