Highlight từ khóa tìm kiếm trong kết quả WordPress

3 tháng ago, Hướng dẫn WordPress, Views
Highlight từ khóa tìm kiếm trong kết quả WordPress

Giới Thiệu: Tầm Quan Trọng Của Việc Highlight Từ Khóa Tìm Kiếm

Trong thế giới kỹ thuật số ngày nay, trải nghiệm người dùng (UX) đóng vai trò then chốt trong việc giữ chân khách truy cập trên website của bạn. Một yếu tố quan trọng góp phần vào UX là khả năng tìm kiếm hiệu quả. Khi người dùng thực hiện tìm kiếm trên trang web WordPress của bạn, việc highlight từ khóa họ đã tìm kiếm trong kết quả không chỉ giúp họ nhanh chóng xác định thông tin liên quan mà còn cải thiện đáng kể trải nghiệm tổng thể.

Việc highlight từ khóa tìm kiếm giúp người dùng dễ dàng quét qua kết quả và tập trung vào những phần quan trọng. Điều này đặc biệt hữu ích trên các trang web có lượng nội dung lớn, nơi việc tìm kiếm thông tin cụ thể có thể trở nên khó khăn. Bằng cách làm nổi bật các từ khóa, bạn giúp người dùng tiết kiệm thời gian và công sức, từ đó tăng khả năng họ tìm thấy những gì họ cần và quay lại trang web của bạn trong tương lai.

Bài viết này sẽ hướng dẫn bạn các phương pháp khác nhau để highlight từ khóa tìm kiếm trong kết quả WordPress, từ sử dụng plugin đơn giản đến tùy chỉnh mã PHP. Chúng ta sẽ khám phá các ưu và nhược điểm của từng phương pháp, giúp bạn chọn ra giải pháp phù hợp nhất với nhu cầu và trình độ kỹ thuật của mình.

Tại Sao Nên Highlight Từ Khóa Tìm Kiếm Trong WordPress?

Việc highlight từ khóa tìm kiếm mang lại nhiều lợi ích quan trọng cho cả người dùng và chủ sở hữu trang web:

  • Cải thiện Trải Nghiệm Người Dùng (UX): Người dùng dễ dàng tìm thấy thông tin họ cần một cách nhanh chóng và hiệu quả.
  • Tăng Khả Năng Tìm Thấy Nội Dung Liên Quan: Giúp người dùng tập trung vào những phần quan trọng của kết quả tìm kiếm.
  • Giảm Tỷ Lệ Thoát Trang (Bounce Rate): Khi người dùng tìm thấy thông tin họ cần nhanh hơn, họ có nhiều khả năng ở lại trang web lâu hơn.
  • Tăng Tỷ Lệ Chuyển Đổi (Conversion Rate): Nếu trang web của bạn có mục tiêu cụ thể (ví dụ: bán hàng, đăng ký), việc cải thiện khả năng tìm kiếm có thể dẫn đến tỷ lệ chuyển đổi cao hơn.

Nói tóm lại, việc highlight từ khóa tìm kiếm là một cải tiến nhỏ nhưng mang lại hiệu quả lớn, giúp trang web WordPress của bạn trở nên thân thiện và hữu ích hơn cho người dùng.

Các Phương Pháp Highlight Từ Khóa Tìm Kiếm Trong WordPress

Có nhiều cách để highlight từ khóa tìm kiếm trong kết quả WordPress, mỗi cách có ưu và nhược điểm riêng. Dưới đây là một số phương pháp phổ biến nhất:

1. Sử Dụng Plugin WordPress

Đây là phương pháp đơn giản và nhanh chóng nhất, đặc biệt phù hợp với những người không rành về code. Có nhiều plugin WordPress miễn phí và trả phí được thiết kế để highlight từ khóa tìm kiếm. Một số plugin phổ biến bao gồm:

  • Search Excerpt: Plugin miễn phí, đơn giản, giúp hiển thị đoạn trích trong kết quả tìm kiếm và highlight từ khóa.
  • Highlight Search Terms: Plugin chuyên dụng chỉ để highlight từ khóa, không có nhiều tính năng bổ sung.
  • Relevanssi: Plugin tìm kiếm mạnh mẽ thay thế chức năng tìm kiếm mặc định của WordPress, cung cấp nhiều tính năng, bao gồm highlight từ khóa.

Ưu điểm:

  • Dễ cài đặt và sử dụng.
  • Không yêu cầu kiến thức lập trình.
  • Nhiều plugin miễn phí và trả phí để lựa chọn.

Nhược điểm:

  • Có thể làm chậm trang web nếu chọn plugin không được tối ưu hóa.
  • Một số plugin có thể không tương thích với theme của bạn.
  • Tính năng tùy chỉnh có thể hạn chế.

Hướng dẫn sử dụng plugin:

  1. Tìm kiếm và cài đặt plugin mong muốn từ kho plugin WordPress.
  2. Kích hoạt plugin.
  3. Điều chỉnh cài đặt của plugin (nếu cần) trong trang quản trị WordPress.
  4. Kiểm tra kết quả tìm kiếm trên trang web của bạn để xem từ khóa đã được highlight chưa.

2. Tùy Chỉnh Mã PHP Trong Theme

Phương pháp này đòi hỏi kiến thức về PHP và cách chỉnh sửa theme WordPress. Tuy nhiên, nó cho phép bạn kiểm soát hoàn toàn cách highlight từ khóa và tích hợp nó một cách liền mạch vào thiết kế trang web của bạn.

Bước 1: Tạo Child Theme

Trước khi chỉnh sửa bất kỳ mã nào, hãy tạo một child theme để tránh mất các thay đổi khi theme của bạn được cập nhật. Child theme là một theme con kế thừa tất cả các tính năng và thiết kế của theme gốc, cho phép bạn tùy chỉnh mà không ảnh hưởng đến theme gốc.

Bước 2: Chỉnh Sửa File `search.php`

File `search.php` là file chịu trách nhiệm hiển thị kết quả tìm kiếm. Bạn cần tìm file này trong thư mục của theme gốc (thường nằm trong `/wp-content/themes/[tên-theme-của-bạn]/`). Sau đó, sao chép file này vào thư mục child theme của bạn và chỉnh sửa nó.

Bước 3: Thêm Mã Highlight Từ Khóa

Trong file `search.php`, bạn cần tìm đoạn code hiển thị tiêu đề và nội dung của kết quả tìm kiếm. Thông thường, nó sẽ trông giống như thế này:

<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div class="entry-content"><?php the_excerpt(); ?></div>

Bạn cần sử dụng hàm PHP `str_replace()` hoặc `preg_replace()` để tìm và thay thế từ khóa tìm kiếm bằng phiên bản được highlight. Dưới đây là một ví dụ sử dụng `str_replace()`:

<?php
$search_term = get_search_query();
$title = get_the_title();
$excerpt = get_the_excerpt();

$highlighted_title = str_replace($search_term, '<span class="highlighted">' . $search_term . '</span>', $title);
$highlighted_excerpt = str_replace($search_term, '<span class="highlighted">' . $search_term . '</span>', $excerpt);
?>

<h2><a href="<?php the_permalink(); ?>"><?php echo $highlighted_title; ?></a></h2>
<div class="entry-content"><?php echo $highlighted_excerpt; ?></div>

Giải thích:

  • `get_search_query()`: Lấy từ khóa tìm kiếm mà người dùng đã nhập.
  • `get_the_title()`: Lấy tiêu đề của bài viết.
  • `get_the_excerpt()`: Lấy đoạn trích của bài viết.
  • `str_replace()`: Tìm và thay thế tất cả các phiên bản của từ khóa tìm kiếm trong tiêu đề và đoạn trích bằng phiên bản được bọc trong thẻ `<span class=”highlighted”>`.

Bước 4: Thêm CSS để Style Highlight

Bạn cần thêm CSS vào file `style.css` của child theme để định dạng cho lớp `highlighted`. Ví dụ:

.highlighted {
  background-color: yellow;
  font-weight: bold;
}

Ưu điểm:

  • Kiểm soát hoàn toàn cách highlight từ khóa.
  • Tích hợp liền mạch vào thiết kế trang web.
  • Hiệu suất tốt hơn so với một số plugin.

Nhược điểm:

  • Yêu cầu kiến thức về PHP và CSS.
  • Có thể phức tạp đối với người mới bắt đầu.
  • Cần cẩn thận khi chỉnh sửa mã để tránh gây lỗi.

3. Sử Dụng JavaScript

Phương pháp này sử dụng JavaScript để highlight từ khóa ở phía client-side. Nó có thể hữu ích nếu bạn không muốn chỉnh sửa file PHP hoặc nếu bạn cần highlight từ khóa trên các trang không phải là kết quả tìm kiếm.

Bước 1: Thêm JavaScript vào Theme

Bạn có thể thêm JavaScript vào theme của bạn bằng cách sử dụng hook `wp_enqueue_scripts`. Tạo một file JavaScript (ví dụ: `highlight-search.js`) và lưu nó trong thư mục child theme của bạn. Sau đó, thêm đoạn code sau vào file `functions.php` của child theme:

function enqueue_custom_scripts() {
  wp_enqueue_script( 'highlight-search', get_stylesheet_directory_uri() . '/highlight-search.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_custom_scripts' );

Bước 2: Viết Mã JavaScript

Trong file `highlight-search.js`, bạn cần viết mã JavaScript để lấy từ khóa tìm kiếm và highlight nó trên trang. Dưới đây là một ví dụ:

jQuery(document).ready(function($) {
  var searchTerm = new URLSearchParams(window.location.search).get('s');
  if (searchTerm) {
    var regex = new RegExp(searchTerm, 'gi');
    $('body').each(function() {
      $(this).html($(this).html().replace(regex, function(matched) {
        return '<span class="highlighted">' + matched + '</span>';
      }));
    });
  }
});

Giải thích:

  • `new URLSearchParams(window.location.search).get(‘s’)`: Lấy từ khóa tìm kiếm từ URL.
  • `new RegExp(searchTerm, ‘gi’)`: Tạo một regular expression để tìm kiếm từ khóa một cách không phân biệt chữ hoa chữ thường (g) và tìm tất cả các phiên bản (i).
  • `$(‘body’).each(function() { … })`: Lặp qua tất cả các phần tử `body` trên trang.
  • `$(this).html($(this).html().replace(regex, function(matched) { … }))`: Tìm và thay thế tất cả các phiên bản của từ khóa tìm kiếm trong nội dung của phần tử `body` bằng phiên bản được bọc trong thẻ `<span class=”highlighted”>`.

Bước 3: Thêm CSS để Style Highlight

Tương tự như phương pháp PHP, bạn cần thêm CSS vào file `style.css` của child theme để định dạng cho lớp `highlighted`. Ví dụ:

.highlighted {
  background-color: yellow;
  font-weight: bold;
}

Ưu điểm:

  • Highlight từ khóa ở phía client-side, không cần chỉnh sửa file PHP.
  • Có thể được sử dụng trên các trang không phải là kết quả tìm kiếm.
  • Linh hoạt trong việc tùy chỉnh cách highlight.

Nhược điểm:

  • Yêu cầu kiến thức về JavaScript.
  • Có thể ảnh hưởng đến hiệu suất trang web nếu JavaScript không được tối ưu hóa.
  • Không hoạt động nếu JavaScript bị tắt trên trình duyệt của người dùng.

Kết Luận

Việc highlight từ khóa tìm kiếm trong kết quả WordPress là một cách tuyệt vời để cải thiện trải nghiệm người dùng và giúp người dùng tìm thấy thông tin họ cần một cách nhanh chóng và dễ dàng. Bạn có thể chọn phương pháp phù hợp nhất với nhu cầu và trình độ kỹ thuật của mình, từ sử dụng plugin đơn giản đến tùy chỉnh mã PHP hoặc JavaScript. Dù bạn chọn phương pháp nào, hãy đảm bảo rằng nó được thực hiện một cách cẩn thận và tối ưu hóa để tránh ảnh hưởng đến hiệu suất trang web của bạn.

Related Topics by Tag
, , , ,

..