Tự tạo Slash Command cho Init Live Search chỉ với 3 đoạn code

Giới thiệu

Từ phiên bản Init Live Search 1.6.7, bạn có thể tự định nghĩa slash command ngay từ theme hoặc plugin của mình mà không cần sửa bất kỳ dòng code nào trong plugin gốc. UI sẽ tự động xử lý, hiển thị và render kết quả hoàn chỉnh, miễn là bạn trả về đúng dữ liệu.

Bài viết này sẽ hướng dẫn bạn tạo một command mới có tên /random_post – dùng để hiển thị danh sách bài viết ngẫu nhiên.

Bước 1: Tùy chỉnh truy vấn kết quả

Trước tiên, bạn cần sử dụng filter init_plugin_suite_live_search_query_args để chỉnh lại truy vấn khi người dùng nhập đúng command.

add_filter('init_plugin_suite_live_search_query_args', function ($args, $mode, $request) {
    if ($mode === 'recent') {
        $term = sanitize_text_field($request->get_param('term') ?? '');

        if ($term === '/random_post') {
            $args['orderby'] = 'rand';
            $args['post_status'] = 'publish';
        }
    }

    return $args;
}, 10, 3);

Lưu ý rằng command này tái sử dụng endpoint /recent có sẵn, chỉ cần truyền thêm ?term=/random_post để thay đổi hành vi.

Bước 2: Khai báo tên lệnh để hỗ trợ gợi ý

Bạn nên khai báo command mới để plugin tự hiển thị gợi ý khi người dùng gõ / trong ô tìm kiếm:

add_filter('init_plugin_suite_live_search_commands', function ($commands) {
    $commands['random_post'] = __('Show random posts as a list', 'init-live-search');
    return $commands;
});

Lúc này, khi gõ /ran, người dùng sẽ thấy /random_post xuất hiện trong danh sách gợi ý.

Bước 3: Hook sự kiện JS để xử lý slash command

Phần cuối cùng là hook vào sự kiện ils:search-started để xử lý command nếu người dùng gõ bằng tay. Bạn có thể thêm đoạn này vào JS của theme:

window.addEventListener('ils:search-started', (e) => {
    const term = (e.detail?.term || '').trim();
    if (term !== '/random_post') return;

    const endpoint = InitPluginSuiteLiveSearch.api.replace('/search', '/recent') + '?term=/random_post';

    window.ilsHelpers.showLoading();

    fetch(endpoint)
        .then(res => {
            if (!res.ok) throw new Error();
            return res.json();
        })
        .then(data => {
            if (!Array.isArray(data) || data.length === 0) {
                window.ilsHelpers.showMessage(InitPluginSuiteLiveSearch.i18n.no_results);
                return;
            }

            window.ilsHelpers.setCommand('recent', 'term', '/random_post');
            window.ilsHelpers.renderResults(data);
        })
        .catch(() => {
            window.ilsHelpers.showMessage(InitPluginSuiteLiveSearch.i18n.error);
        });
});

Code trên tận dụng toàn bộ hệ thống giao diện sẵn có: từ nút yêu thích, ảnh thumb, excerpt, bộ lọc danh mục, cho đến infinite scroll. Bạn không cần dựng lại giao diện bằng tay.

Kết luận

Chỉ với ba đoạn code đơn giản, bạn đã có thể tự tạo một slash command hoàn toàn mới cho Init Live Search. Toàn bộ UI được xử lý tự động, kết quả hiển thị đẹp, tương thích với mọi tính năng sẵn có của plugin.

Từ đây, bạn có thể mở rộng ra hàng loạt lệnh khác như /featured_post, /most_commented, /today, hoặc bất kỳ logic gì mà bạn có thể nghĩ ra. Init Live Search 1.6.7 đã trao toàn quyền cho bạn.