Plugin “Hình ảnh gắn Link HAL” là một công cụ WordPress mạnh mẽ, được thiết kế để giúp bạn dễ dàng tạo các bộ sưu tập ảnh (gallery) với khả năng gắn liên kết (link) cho mỗi ảnh. Các bộ sưu tập này sẽ được hiển thị dưới dạng lưới (grid) responsive hoàn hảo trên cả máy tính (PC) và thiết bị di động.
🌟 Tính Năng Nổi Bật
-
Tạo Danh Sách Ảnh Có Link: Mỗi hình ảnh trong bộ sưu tập có thể được gắn một liên kết riêng biệt.
-
Hiển Thị Dạng Lưới Linh Hoạt: Plugin tự động điều chỉnh bố cục để tạo thành lưới ảnh đẹp mắt.
-
Responsive Chuẩn: Đảm bảo hiển thị tối ưu trên mọi kích thước màn hình (từ PC đến di động).
-
Tùy Chỉnh Kích Thước Ô Ảnh: Bạn có thể định nghĩa số lượng ảnh hiển thị trên một hàng (từ 1, 2, 3, 4, 6, 8 ô) cho từng ảnh, tạo ra các bố cục độc đáo.
-
Sử Dụng Shortcode Đơn Giản: Dễ dàng nhúng vào bất kỳ bài viết, trang hoặc widget nào.
-
Liên Kết Danh Mục (Category Linking): Cho phép liên kết một Danh mục HAL cụ thể với một Bộ sưu tập HAL, giúp việc quản lý và nhúng nội dung linh hoạt hơn.
📝 Hướng Dẫn Sử Dụng Chi Tiết
Plugin tạo ra một loại nội dung tùy chỉnh (Custom Post Type) riêng biệt để quản lý các bộ sưu tập ảnh.
1. Cài Đặt và Kích Hoạt Plugin
-
Lưu đoạn mã PHP bạn cung cấp vào một tệp tin (ví dụ:
hal-linked-images.php). -
Tải tệp tin này lên thư mục
/wp-content/plugins/trên website WordPress của bạn. -
Đăng nhập vào trang quản trị WordPress, vào mục Plugins, và kích hoạt plugin Hình ảnh gắn Link HAL v3.2.2.
2. Tạo Bộ Sưu Tập Ảnh Mới
Sau khi kích hoạt, bạn sẽ thấy một mục menu mới tên là Hình ảnh liên kết trong menu quản trị.
-
Vào Hình ảnh liên kết > Thêm mới.
-
Đặt Tiêu đề cho bộ sưu tập (ví dụ: “Sưu tập ảnh quảng cáo”).
-
Di chuyển xuống Meta Box (Hộp siêu dữ liệu) tên là Ảnh và Link.
-
Nhấn nút Thêm ảnh (ở trên hoặc dưới bảng) để thêm một hàng mới.
-
Cột Ảnh:
-
Nhấn nút Chọn ảnh.
-
Chọn hoặc tải lên hình ảnh qua Thư viện Media của WordPress.
-
Sau khi chọn, URL và ID của ảnh sẽ được điền tự động.
-
-
Cột Link: Nhập URL mà bạn muốn ảnh này dẫn tới. (Để trống nếu không muốn gắn link).
-
Cột Mở tab?: Tích chọn nếu muốn liên kết mở ra trong một tab/cửa sổ mới (
target="_blank"). -
Cột Số ảnh: Chọn số ô ảnh mà hình ảnh này sẽ chiếm trên một hàng (1, 2, 3, 4, 6, 8). Giá trị này giúp bạn kiểm soát bố cục.
-
Hành động: Sử dụng nút Xóa để loại bỏ hàng ảnh không cần thiết.
-
-
Nhấn Đăng/Cập nhật để lưu bộ sưu tập.
3. Sử Dụng Shortcode để Hiển Thị
Bạn có hai cách để nhúng bộ sưu tập ảnh vào nội dung:
3.1. Nhúng bằng ID của Bộ Sưu Tập (HAL List)
Sau khi tạo và lưu bộ sưu tập, ở hộp Shortcode HAL bên lề phải, bạn sẽ thấy mã shortcode duy nhất.
-
Mã Shortcode:
[hal id=POST_ID] -
Thay
POST_IDbằng ID của bài viết HAL List bạn vừa tạo.-
Ví dụ: Nếu ID của bộ sưu tập là 123, shortcode sẽ là:
[hal id=123]
-
-
Sao chép mã này và dán vào bất kỳ bài viết, trang, hoặc widget nào.
3.2. Nhúng bằng Slug của Danh mục HAL (HAL Category)
Bạn có thể liên kết một danh mục cụ thể với một Bộ sưu tập HAL đã tạo.
-
Vào Hình ảnh liên kết > Danh mục HAL.
-
Tạo hoặc chỉnh sửa một danh mục.
-
Trong phần Liên kết HAL, chọn tên của Bộ sưu tập ảnh (HAL List) mà bạn muốn liên kết với danh mục này.
-
Sử dụng shortcode sau:
[hal cat="category-slug"]-
Thay
category-slugbằng slug (tên đường dẫn) của danh mục HAL. -
Ví dụ: Nếu slug là
quang-cao-tet, shortcode sẽ là:[hal cat="quang-cao-tet"]
-
4. Giải thích về Bố cục (CSS – Lưới Responsive)
Plugin sử dụng CSS sau để tạo bố cục lưới:
-
PC/Màn hình lớn: Ảnh sẽ chiếm không gian theo tỷ lệ 100% / [Số ảnh bạn chọn].
-
Di động (Màn hình dưới 768px): Bố cục sẽ được điều chỉnh để đảm bảo khả năng xem tốt nhất:
-
1 ảnh/hàng: Chiếm 100%
-
2 ảnh/hàng: Chiếm 100%
-
3 ảnh/hàng: Ảnh đầu tiên chiếm 100%, 2 ảnh sau chia nhau 50% mỗi ảnh.
-
4 ảnh/hàng: Mỗi ảnh chiếm 50%.
-
6 ảnh/hàng: Mỗi ảnh chiếm 33.33%.
-
8 ảnh/hàng: Mỗi ảnh chiếm 25%.
-
Điều này có nghĩa là bạn chỉ cần quan tâm đến việc chọn Số ảnh mong muốn, plugin sẽ tự lo phần responsive.
