Highlight menu item trong WordPress

Giới thiệu về Highlight Menu Item trong WordPress

Trong quá trình xây dựng một trang web WordPress, việc tạo ra một hệ thống menu điều hướng hiệu quả là vô cùng quan trọng. Một hệ thống menu tốt không chỉ giúp người dùng dễ dàng tìm thấy thông tin họ cần mà còn góp phần cải thiện trải nghiệm người dùng tổng thể. Một trong những yếu tố quan trọng của một menu tốt là khả năng “highlight” mục menu đang được truy cập. Điều này giúp người dùng biết được họ đang ở trang nào trên website, từ đó tăng tính trực quan và dễ sử dụng.

Highlight menu item, hay còn gọi là làm nổi bật mục menu, là kỹ thuật sử dụng CSS và đôi khi cả JavaScript để thay đổi giao diện của mục menu hiện tại, ví dụ như đổi màu nền, đổi màu chữ, hoặc thêm hiệu ứng hình ảnh. Mục đích là để thu hút sự chú ý của người dùng và giúp họ dễ dàng nhận biết vị trí của mình trên trang web.

Bài viết này sẽ đi sâu vào các phương pháp khác nhau để highlight menu item trong WordPress, từ những cách đơn giản sử dụng CSS đến những cách phức tạp hơn sử dụng JavaScript và các plugin.

Các phương pháp Highlight Menu Item sử dụng CSS

Phương pháp đơn giản nhất và thường được sử dụng nhất để highlight menu item là sử dụng CSS. WordPress tự động thêm các class CSS khác nhau vào các mục menu dựa trên trạng thái hiện tại của trang. Chúng ta có thể tận dụng các class này để tùy chỉnh giao diện của mục menu.

Sử dụng class `.current-menu-item`

WordPress tự động thêm class `.current-menu-item` vào mục menu tương ứng với trang hiện tại đang được truy cập. Chúng ta có thể sử dụng class này để thêm các thuộc tính CSS mong muốn.

Ví dụ, để thay đổi màu nền của mục menu hiện tại thành màu đỏ, bạn có thể thêm đoạn CSS sau vào file `style.css` của theme hoặc sử dụng custom CSS trong WordPress:

.current-menu-item > a {
    background-color: red;
    color: white;
}

Đoạn code này sẽ chọn thẻ `a` (link) bên trong phần tử có class `.current-menu-item` và thay đổi màu nền thành màu đỏ và màu chữ thành màu trắng.

Sử dụng class `.current-menu-ancestor`

Trong trường hợp menu có nhiều cấp độ (ví dụ: menu dropdown), khi bạn đang ở một trang con, class `.current-menu-item` chỉ được thêm vào mục menu tương ứng với trang con đó. Tuy nhiên, có thể bạn muốn highlight cả mục menu cha để người dùng biết được mối liên hệ giữa trang con và trang cha. Để làm điều này, bạn có thể sử dụng class `.current-menu-ancestor`.

WordPress thêm class `.current-menu-ancestor` vào các mục menu cha của trang hiện tại. Tương tự như `.current-menu-item`, bạn có thể sử dụng class này để tùy chỉnh giao diện.

Ví dụ, để thay đổi màu chữ của mục menu cha hiện tại thành màu xanh lá cây, bạn có thể thêm đoạn CSS sau:

.current-menu-ancestor > a {
    color: green;
}

Sử dụng class `.current-page-ancestor` và `.current_page_item`

Đối với các trang (Pages) thay vì Post, WordPress sử dụng các class `.current_page_item` và `.current_page_ancestor` (thay vì `.current-menu-item` và `.current-menu-ancestor`). Vì vậy, hãy chắc chắn bạn sử dụng đúng class tùy thuộc vào loại nội dung bạn đang làm việc.

Ví dụ:

.current_page_item > a {
    font-weight: bold;
}

.current_page_ancestor > a {
    text-decoration: underline;
}

Một số lưu ý khi sử dụng CSS

• Luôn sử dụng `> a` (hoặc `> span` nếu bạn không dùng thẻ `a`) để chọn đúng thẻ link hoặc span bên trong mục menu.
• Kiểm tra tính đặc thù của CSS. Nếu các thuộc tính CSS của bạn không được áp dụng, có thể do một CSS rule khác có tính đặc thù cao hơn đang ghi đè.
• Sử dụng công cụ Developer Tools của trình duyệt để kiểm tra các class CSS được thêm vào các mục menu.

Highlight Menu Item sử dụng JavaScript

Mặc dù CSS là phương pháp đơn giản và hiệu quả, nhưng đôi khi chúng ta cần sử dụng JavaScript để có được sự linh hoạt cao hơn, đặc biệt là khi muốn tạo ra các hiệu ứng phức tạp hoặc khi các class CSS mặc định của WordPress không đáp ứng được yêu cầu.

Ví dụ, bạn có thể muốn highlight menu item dựa trên một phần của URL thay vì dựa trên các class mặc định.

Dưới đây là một ví dụ về cách sử dụng JavaScript để highlight menu item dựa trên URL:

document.addEventListener('DOMContentLoaded', function() {
    const currentURL = window.location.href;
    const menuLinks = document.querySelectorAll('#main-menu a'); // Thay '#main-menu' bằng selector của menu của bạn

    menuLinks.forEach(link => {
        if (currentURL.includes(link.href)) {
            link.classList.add('active-menu-item');
        }
    });
});

Đoạn code này thực hiện các bước sau:

1. Lắng nghe sự kiện `DOMContentLoaded` để đảm bảo rằng DOM đã được tải xong trước khi thực hiện.
2. Lấy URL hiện tại của trang.
3. Lấy tất cả các thẻ `a` (links) trong menu (ở đây giả sử menu có ID là `main-menu`).
4. Lặp qua từng link và kiểm tra xem URL hiện tại có chứa URL của link đó hay không.
5. Nếu có, thêm class `active-menu-item` vào link đó.

Sau đó, bạn có thể sử dụng CSS để tùy chỉnh giao diện của các mục menu có class `active-menu-item`:

.active-menu-item {
    background-color: yellow;
    font-weight: bold;
}

Một số lưu ý khi sử dụng JavaScript

• Đảm bảo rằng code JavaScript của bạn được đặt trong thẻ “ và được đặt trước thẻ “ hoặc sử dụng sự kiện `DOMContentLoaded` để đảm bảo DOM đã được tải xong.
• Thay selector `#main-menu` bằng selector chính xác của menu của bạn. Bạn có thể kiểm tra selector bằng công cụ Developer Tools của trình duyệt.
• Sử dụng các class CSS rõ ràng và có ý nghĩa để dễ dàng tùy chỉnh giao diện.

Highlight Menu Item sử dụng Plugin

Nếu bạn không muốn viết code CSS hoặc JavaScript, bạn có thể sử dụng các plugin WordPress để highlight menu item. Có rất nhiều plugin miễn phí và trả phí có sẵn trên thị trường, cung cấp các tính năng khác nhau.

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

• **Page Menu Highlight:** Plugin này cho phép bạn highlight các mục menu dựa trên trang hiện tại một cách dễ dàng.
• **Highlight Current Menu Item:** Plugin này tự động highlight mục menu hiện tại bằng cách thêm một class CSS.
• **Menu Swapper:** Plugin này cho phép bạn tạo ra các menu khác nhau cho các trang khác nhau, từ đó bạn có thể tùy chỉnh việc highlight menu item cho từng trang.

Khi chọn plugin, hãy xem xét các yếu tố sau:

• Đánh giá và xếp hạng của plugin.
• Số lượng cài đặt đang hoạt động.
• Tính tương thích với phiên bản WordPress của bạn.
• Các tính năng mà plugin cung cấp.

Sau khi cài đặt và kích hoạt plugin, hãy làm theo hướng dẫn của plugin để cấu hình việc highlight menu item.

Kết luận

Highlight menu item là một yếu tố quan trọng để cải thiện trải nghiệm người dùng trên trang web WordPress của bạn. Bài viết này đã trình bày các phương pháp khác nhau để highlight menu item, từ những cách đơn giản sử dụng CSS đến những cách phức tạp hơn sử dụng JavaScript và các plugin. Tùy thuộc vào nhu cầu và kỹ năng của bạn, bạn có thể chọn phương pháp phù hợp nhất.

Hãy thử nghiệm các phương pháp khác nhau và tìm ra cách highlight menu item phù hợp nhất với thiết kế và chức năng của trang web của bạn.