- 1. Mục đích và Ứng dụng
- 2. Cách Sử Dụng Cơ Bản
- 3. Danh Sách Thuộc Tính Hỗ Trợ
- 4. Ví Dụ Thực Tế
- a) Hiển thị icon tìm kiếm mặc định
- b) Icon có nhãn hiển thị
- c) Giao diện input với placeholder riêng
- d) Tuỳ chỉnh bo góc và độ đậm icon
- e) Kích hoạt dark mode thủ công
- 5. Ghi Chú Kỹ Thuật
- 6. Kết Luận
- 7. Ví dụ chuyển đổi chế độ tối trực tiếp (Live Dark Mode Toggle)
1. Mục đích và Ứng dụng
Shortcode [init_live_search] cho phép bạn hiển thị một icon tìm kiếm hoặc một ô nhập liệu để kích hoạt modal tìm kiếm Init Live Search. Bạn có thể chèn shortcode này vào bất kỳ bài viết, widget, template, hoặc khối HTML nào để người dùng dễ dàng truy cập tính năng tìm kiếm nhanh.
2. Cách Sử Dụng Cơ Bản
Chỉ cần chèn đoạn sau vào nơi bạn muốn hiển thị nút tìm kiếm:
[init_live_search]Shortcode sẽ hiển thị một biểu tượng tìm kiếm SVG. Khi người dùng click vào, modal tìm kiếm sẽ hiện ra ngay lập tức.
3. Danh Sách Thuộc Tính Hỗ Trợ
Bạn có thể tuỳ biến giao diện bằng cách thêm các thuộc tính sau:
| Thuộc tính | Giá trị mặc định | Mô tả |
|---|---|---|
type |
icon |
Chọn kiểu hiển thị: icon (nút SVG) hoặc input (ô tìm kiếm) |
placeholder |
Search... |
Placeholder của ô input nếu dùng type="input" |
label |
(rỗng) | Hiển thị chữ bên cạnh icon (chỉ áp dụng với type="icon") |
class |
(rỗng) | Thêm class tuỳ chỉnh, ví dụ dark, custom-style |
stroke_width |
1 |
Độ dày đường viền trong icon SVG |
radius |
9999px |
Bo góc của input nếu dùng type="input" |
4. Ví Dụ Thực Tế
a) Hiển thị icon tìm kiếm mặc định
[init_live_search]b) Icon có nhãn hiển thị
[init_live_search label="Tìm kiếm"]c) Giao diện input với placeholder riêng
[init_live_search type="input" placeholder="Nhập từ khóa..."]d) Tuỳ chỉnh bo góc và độ đậm icon
[init_live_search type="input" radius="8px" stroke_width="2"]e) Kích hoạt dark mode thủ công
[init_live_search class="dark"]5. Ghi Chú Kỹ Thuật
- Modal được kích hoạt bằng JavaScript đã có sẵn trong plugin – không cần viết thêm mã.
- Shortcode có thể dùng nhiều lần trên cùng một trang mà không xung đột.
- Nếu bạn tắt CSS mặc định của plugin, hãy tự thêm style cho các class
.ils-input-launch,.ils-icon-launch, v.v.
6. Kết Luận
Shortcode [init_live_search] là công cụ linh hoạt và hiệu quả để chèn tính năng tìm kiếm hiện đại vào bất kỳ vị trí nào trên website WordPress của bạn. Dù bạn dùng giao diện truyền thống hay headless, tính năng này vẫn đảm bảo tính tương thích cao và trải nghiệm người dùng mượt mà.
7. Ví dụ chuyển đổi chế độ tối trực tiếp (Live Dark Mode Toggle)
Nếu trang web của bạn chuyển giữa chế độ sáng và tối bằng cách toggle class như uk-light trên thẻ <html>, bạn có thể sử dụng đoạn JavaScript sau để tự động đồng bộ giao diện tối cho phần hiển thị từ shortcode:
function syncDarkMode() {
const isDark = document.documentElement.classList.contains('uk-light');
document.querySelectorAll('.ils-input-launch, .ils-icon-launch').forEach(el => {
el.classList.toggle('dark', isDark);
});
}
syncDarkMode();
const observer = new MutationObserver(syncDarkMode);
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ['class']
});Chỉ cần thay thế editor-wrapper bằng ID hoặc class của phần tử bao ngoài được render bởi shortcode của bạn. Logic này hoạt động trơn tru với các cách chuyển đổi chế độ tối dựa trên theme, bao gồm cả UIkit, Tailwind hoặc Alpine.js.
Bình luận