Hiển thị từ khóa tìm kiếm và số kết quả WordPress

5 tháng ago, Hướng dẫn WordPress, Views
Hiển thị từ khóa tìm kiếm và số kết quả WordPress

Hiển Thị Từ Khóa Tìm Kiếm và Số Kết Quả Tìm Kiếm trong WordPress

WordPress là một nền tảng quản lý nội dung (CMS) phổ biến, được sử dụng rộng rãi để xây dựng và quản lý trang web. Một trong những tính năng quan trọng của một trang web là khả năng tìm kiếm nội dung. Khi người dùng tìm kiếm trên trang web của bạn, việc hiển thị từ khóa tìm kiếm và số lượng kết quả tìm kiếm có thể cải thiện trải nghiệm người dùng đáng kể.

Bài viết này sẽ hướng dẫn bạn cách hiển thị từ khóa tìm kiếm và số lượng kết quả tìm kiếm trên trang WordPress của bạn một cách chi tiết, giúp bạn tạo ra một trang tìm kiếm thân thiện và hiệu quả hơn.

Tại Sao Cần Hiển Thị Từ Khóa và Số Lượng Kết Quả Tìm Kiếm?

Việc hiển thị từ khóa tìm kiếm và số lượng kết quả tìm kiếm mang lại nhiều lợi ích:

  • Cải thiện trải nghiệm người dùng: Người dùng biết chính xác họ đã tìm kiếm từ gì và trang web đã tìm thấy bao nhiêu kết quả liên quan. Điều này giúp họ đánh giá được mức độ liên quan của kết quả tìm kiếm.
  • Tăng tính minh bạch: Hiển thị từ khóa tìm kiếm giúp người dùng xác nhận rằng họ đã nhập đúng từ khóa và trang web đã hiểu đúng yêu cầu của họ.
  • Hướng dẫn người dùng: Nếu không có kết quả nào được tìm thấy, việc hiển thị từ khóa giúp người dùng biết chính xác từ khóa nào không tìm thấy kết quả và họ có thể thử lại với các từ khóa khác.
  • Nâng cao độ tin cậy: Việc cung cấp thông tin rõ ràng về quá trình tìm kiếm giúp tăng độ tin cậy của trang web trong mắt người dùng.

Cách Hiển Thị Từ Khóa Tìm Kiếm

Có nhiều cách để hiển thị từ khóa tìm kiếm trong WordPress. Dưới đây là một số phương pháp phổ biến:

Sử dụng hàm `get_search_query()`

Hàm `get_search_query()` là một hàm tích hợp sẵn trong WordPress cho phép bạn lấy từ khóa tìm kiếm hiện tại. Bạn có thể sử dụng hàm này trong tệp `search.php` của theme để hiển thị từ khóa tìm kiếm.

Ví dụ:


<?php
$search_query = get_search_query();
if ( ! empty( $search_query ) ) {
    echo '<p>Bạn đang tìm kiếm: <strong>' . esc_html( $search_query ) . '</strong></p>';
}
?>

Trong đoạn mã trên:

  • `get_search_query()` lấy từ khóa tìm kiếm.
  • `empty( $search_query )` kiểm tra xem từ khóa tìm kiếm có rỗng hay không.
  • `esc_html( $search_query )` làm sạch từ khóa tìm kiếm để ngăn chặn các cuộc tấn công XSS.

Sử dụng biến `$_GET`

Bạn cũng có thể sử dụng biến `$_GET` để lấy từ khóa tìm kiếm từ URL. Tuy nhiên, phương pháp này ít được khuyến khích hơn vì nó không đảm bảo an toàn như sử dụng hàm `get_search_query()`.

Ví dụ:


<?php
if ( isset( $_GET['s'] ) && ! empty( $_GET['s'] ) ) {
    $search_query = sanitize_text_field( $_GET['s'] );
    echo '<p>Bạn đang tìm kiếm: <strong>' . esc_html( $search_query ) . '</strong></p>';
}
?>

Trong đoạn mã trên:

  • `isset( $_GET[‘s’] )` kiểm tra xem biến `s` (chứa từ khóa tìm kiếm) có tồn tại trong URL hay không.
  • `sanitize_text_field( $_GET[‘s’] )` làm sạch từ khóa tìm kiếm để ngăn chặn các cuộc tấn công XSS.

Cách Hiển Thị Số Lượng Kết Quả Tìm Kiếm

Để hiển thị số lượng kết quả tìm kiếm, bạn có thể sử dụng biến `$wp_query->found_posts`. Biến này chứa tổng số bài viết phù hợp với từ khóa tìm kiếm.

Ví dụ:


<?php
global $wp_query;
$total_results = $wp_query->found_posts;
$search_query = get_search_query();

if ( ! empty( $search_query ) ) {
    echo '<p>Tìm thấy ' . $total_results . ' kết quả cho từ khóa: <strong>' . esc_html( $search_query ) . '</strong></p>';
} else {
    echo '<p>Không tìm thấy kết quả nào.</p>';
}
?>

Trong đoạn mã trên:

  • `global $wp_query;` khai báo biến `$wp_query` là biến toàn cục.
  • `$wp_query->found_posts` lấy tổng số bài viết tìm thấy.
  • Đoạn mã kiểm tra xem có từ khóa tìm kiếm hay không trước khi hiển thị số lượng kết quả. Nếu không có từ khóa tìm kiếm, nó sẽ hiển thị thông báo “Không tìm thấy kết quả nào.”

Kết Hợp Hiển Thị Từ Khóa và Số Lượng Kết Quả Tìm Kiếm

Để tạo ra một thông báo tìm kiếm đầy đủ, bạn có thể kết hợp việc hiển thị từ khóa và số lượng kết quả tìm kiếm.

Ví dụ:


<?php
global $wp_query;
$total_results = $wp_query->found_posts;
$search_query = get_search_query();

if ( ! empty( $search_query ) ) {
    if ( $total_results > 0 ) {
        echo '<p>Tìm thấy ' . $total_results . ' kết quả cho từ khóa: <strong>' . esc_html( $search_query ) . '</strong></p>';
    } else {
        echo '<p>Không tìm thấy kết quả nào cho từ khóa: <strong>' . esc_html( $search_query ) . '</strong></p>';
    }
} else {
    echo '<p>Vui lòng nhập từ khóa tìm kiếm.</p>';
}
?>

Đoạn mã này sẽ hiển thị một trong ba thông báo sau:

  • “Tìm thấy [số lượng] kết quả cho từ khóa: [từ khóa]” (nếu có kết quả).
  • “Không tìm thấy kết quả nào cho từ khóa: [từ khóa]” (nếu không có kết quả).
  • “Vui lòng nhập từ khóa tìm kiếm.” (nếu không có từ khóa nào được nhập).

Vị Trí Đặt Mã

Mã hiển thị từ khóa và số lượng kết quả tìm kiếm thường được đặt trong tệp `search.php` của theme WordPress. Nếu theme của bạn không có tệp `search.php`, WordPress sẽ sử dụng tệp `index.php` để hiển thị kết quả tìm kiếm. Bạn có thể tạo một tệp `search.php` và đặt mã vào đó, hoặc chỉnh sửa tệp `index.php`.

Thông thường, bạn nên đặt mã này ở đầu trang, trước khi hiển thị danh sách các kết quả tìm kiếm. Điều này giúp người dùng dễ dàng nhìn thấy thông tin về tìm kiếm của họ.

Tùy Chỉnh Giao Diện

Bạn có thể tùy chỉnh giao diện của thông báo tìm kiếm bằng cách sử dụng CSS. Ví dụ, bạn có thể thay đổi màu sắc, kích thước chữ, hoặc thêm các biểu tượng để làm cho thông báo trở nên nổi bật hơn.

Ví dụ:


<style>
.search-results-info {
    font-size: 1.2em;
    color: #333;
    margin-bottom: 20px;
}
.search-results-info strong {
    font-weight: bold;
    color: #007bff;
}
</style>

<?php
global $wp_query;
$total_results = $wp_query->found_posts;
$search_query = get_search_query();

if ( ! empty( $search_query ) ) {
    if ( $total_results > 0 ) {
        echo '<p class="search-results-info">Tìm thấy ' . $total_results . ' kết quả cho từ khóa: <strong>' . esc_html( $search_query ) . '</strong></p>';
    } else {
        echo '<p class="search-results-info">Không tìm thấy kết quả nào cho từ khóa: <strong>' . esc_html( $search_query ) . '</strong></p>';
    }
} else {
    echo '<p class="search-results-info">Vui lòng nhập từ khóa tìm kiếm.</p>';
}
?>

Trong đoạn mã trên, chúng ta đã thêm một lớp CSS `search-results-info` cho thẻ `

` và tùy chỉnh giao diện của lớp này trong thẻ “.

Sử Dụng Plugin

Ngoài việc chỉnh sửa trực tiếp tệp theme, bạn cũng có thể sử dụng plugin để hiển thị từ khóa và số lượng kết quả tìm kiếm. Có nhiều plugin miễn phí và trả phí có thể giúp bạn thực hiện việc này một cách dễ dàng.

Một số plugin phổ biến bao gồm:

  • SearchWP: Một plugin tìm kiếm mạnh mẽ với nhiều tính năng, bao gồm hiển thị từ khóa và số lượng kết quả.
  • Relevanssi: Một plugin tìm kiếm thay thế cho tìm kiếm mặc định của WordPress, cung cấp kết quả tìm kiếm liên quan hơn và các tính năng tùy chỉnh.
  • Better Search: Một plugin tìm kiếm đơn giản và dễ sử dụng, với tính năng hiển thị từ khóa và số lượng kết quả.

Kết Luận

Việc hiển thị từ khóa tìm kiếm và số lượng kết quả tìm kiếm là một cách đơn giản nhưng hiệu quả để cải thiện trải nghiệm người dùng trên trang web WordPress của bạn. Bằng cách sử dụng các hàm tích hợp sẵn của WordPress, chỉnh sửa tệp theme hoặc sử dụng plugin, bạn có thể dễ dàng thêm tính năng này vào trang web của mình và giúp người dùng tìm kiếm nội dung một cách nhanh chóng và dễ dàng hơn.

Hãy nhớ kiểm tra kỹ mã sau khi thực hiện thay đổi để đảm bảo rằng nó hoạt động chính xác và không gây ra lỗi cho trang web của bạn. Chúc bạn thành công!

Related Topics by Tag
, , , ,

..