Hướng dẫn ẩn menu mobile WordPress cho người mới

5 tháng ago, Hướng dẫn WordPress, Views
Hướng dẫn ẩn menu mobile WordPress cho người mới

Giới thiệu

Trong thế giới thiết kế web hiện đại, khả năng đáp ứng trên thiết bị di động (responsive design) là yếu tố then chốt để tạo ra trải nghiệm người dùng (UX) tốt. WordPress, một trong những hệ quản trị nội dung (CMS) phổ biến nhất, cung cấp nhiều tùy chọn để tối ưu hóa website của bạn cho các thiết bị di động. Một trong những điều bạn có thể muốn tùy chỉnh là menu điều hướng trên phiên bản mobile. Trong bài viết này, chúng ta sẽ khám phá các phương pháp khác nhau để ẩn menu mobile WordPress, đặc biệt hữu ích khi bạn muốn thay thế bằng một menu khác tùy chỉnh hoặc đơn giản là không muốn hiển thị menu mặc định.

Tại sao bạn nên ẩn menu mobile?

Có nhiều lý do chính đáng để ẩn menu mobile WordPress mặc định của bạn:

  • Bạn muốn sử dụng một menu di động tùy chỉnh được thiết kế riêng cho thương hiệu của bạn.
  • Menu mặc định quá phức tạp và khó sử dụng trên màn hình nhỏ.
  • Bạn muốn đơn giản hóa trải nghiệm người dùng trên thiết bị di động bằng cách chỉ hiển thị các liên kết quan trọng nhất.
  • Bạn đang sử dụng một plugin tạo menu mobile chuyên dụng và không muốn xung đột với menu mặc định.

Việc ẩn menu mobile mặc định có thể cải thiện đáng kể UX trên thiết bị di động, giúp người dùng dễ dàng điều hướng và tìm thấy thông tin họ cần.

Các phương pháp ẩn menu mobile WordPress

Có một số phương pháp bạn có thể sử dụng để ẩn menu mobile WordPress. Chúng ta sẽ xem xét một số phương pháp phổ biến nhất, từ đơn giản đến phức tạp hơn.

Sử dụng CSS

Phương pháp đơn giản nhất để ẩn menu mobile là sử dụng CSS (Cascading Style Sheets). Bạn có thể thêm CSS tùy chỉnh vào theme của bạn để ẩn menu dựa trên kích thước màn hình.

  1. Xác định class hoặc ID của menu mobile. Thường thì, các theme WordPress sử dụng class như .mobile-menu, .responsive-menu, hoặc .navbar-toggle. Sử dụng công cụ kiểm tra trình duyệt (nhấn F12) để tìm ra class hoặc ID chính xác.
  2. Truy cập phần “Tùy biến” (Customize) trong dashboard WordPress (Appearance -> Customize).
  3. Chọn “CSS bổ sung” (Additional CSS).
  4. Thêm đoạn CSS sau (thay thế .mobile-menu bằng class/ID thực tế của menu):

@media (max-width: 768px) {
  .mobile-menu {
    display: none !important;
  }
}

Trong đoạn CSS trên, @media (max-width: 768px) chỉ định rằng các quy tắc CSS chỉ áp dụng cho các màn hình có chiều rộng tối đa là 768px (thường là kích thước của máy tính bảng trở xuống). display: none !important; ẩn phần tử HTML có class .mobile-menu. !important đảm bảo rằng quy tắc CSS này sẽ ghi đè bất kỳ quy tắc CSS khác có thể đang hiển thị menu.

Sử dụng Plugin

Nếu bạn không thoải mái khi làm việc với CSS, bạn có thể sử dụng một plugin WordPress để ẩn menu mobile. Có nhiều plugin miễn phí và trả phí có thể giúp bạn thực hiện việc này.

  1. Tìm và cài đặt một plugin ẩn menu mobile. Một số plugin phổ biến bao gồm “Hide Menu”, “Conditional Menus”, hoặc “Responsive Menu”.
  2. Kích hoạt plugin.
  3. Tìm cài đặt của plugin trong dashboard WordPress.
  4. Sử dụng các tùy chọn của plugin để ẩn menu mobile dựa trên kích thước màn hình hoặc các điều kiện khác.

Ví dụ, plugin “Conditional Menus” cho phép bạn hiển thị các menu khác nhau dựa trên các điều kiện khác nhau, bao gồm cả kích thước màn hình. Bạn có thể tạo một menu trống cho phiên bản mobile hoặc sử dụng một menu khác tùy chỉnh.

Chỉnh sửa file theme (Phương pháp nâng cao)

Phương pháp này phức tạp hơn và đòi hỏi bạn phải có kiến thức về PHP và cấu trúc theme WordPress. Bạn cần chỉnh sửa trực tiếp các file theme để loại bỏ code hiển thị menu mobile. Lưu ý: Sao lưu theme của bạn trước khi thực hiện bất kỳ thay đổi nào. Sai sót trong quá trình chỉnh sửa có thể làm hỏng website của bạn.

  1. Xác định file theme chứa code hiển thị menu mobile. Thông thường, file này là header.php hoặc một file template con (ví dụ: template-parts/navigation.php).
  2. Sử dụng trình soạn thảo code (ví dụ: VS Code, Sublime Text) để mở file theme.
  3. Tìm code liên quan đến menu mobile. Code này có thể bao gồm các hàm WordPress như wp_nav_menu() hoặc các thẻ HTML như <nav>, <ul>.
  4. Loại bỏ hoặc comment code hiển thị menu mobile. Bạn có thể sử dụng comment HTML (<!-- ... -->) hoặc comment PHP (// ... hoặc /* ... */) để tạm thời vô hiệu hóa code.
  5. Lưu file theme và kiểm tra website của bạn trên thiết bị di động.

Quan trọng: Khi cập nhật theme, những thay đổi bạn đã thực hiện trong các file theme có thể bị mất. Hãy sử dụng theme con (child theme) để tránh mất các tùy chỉnh khi cập nhật theme chính.

Sử dụng Child Theme (Theme Con)

Khi thực hiện bất kỳ chỉnh sửa nào đối với theme WordPress, việc sử dụng child theme là cực kỳ quan trọng. Child theme là một theme kế thừa các tính năng và thiết kế của theme chính (parent theme), nhưng cho phép bạn tùy chỉnh mà không ảnh hưởng đến các file của theme chính. Điều này có nghĩa là khi bạn cập nhật theme chính, các tùy chỉnh của bạn trong child theme sẽ không bị ghi đè.

  • Bảo toàn các tùy chỉnh: Khi cập nhật theme chính, các thay đổi của bạn sẽ không bị mất.
  • Dễ dàng quản lý: Child theme giúp bạn dễ dàng theo dõi và quản lý các tùy chỉnh của mình.
  • An toàn hơn: Tránh làm hỏng theme chính do sai sót trong quá trình chỉnh sửa.

Để tạo child theme, bạn cần tạo một thư mục mới trong thư mục wp-content/themes/. Tên thư mục nên có dạng [tên-theme-chính]-child. Sau đó, tạo một file style.css trong thư mục child theme và thêm đoạn code sau:


/*
 Theme Name:   [Tên Child Theme]
 Theme URI:    [Địa chỉ website của bạn]
 Description:  Child theme cho [Tên Theme Chính]
 Author:       [Tên của bạn]
 Author URI:   [Địa chỉ website của bạn]
 Template:     [Tên thư mục của theme chính]
 Version:      1.0.0
*/

@import url("../[tên-theme-chính]/style.css");

/*
  Add your custom CSS here
*/

Thay thế các thông tin trong dấu ngoặc vuông bằng thông tin thực tế của bạn. Sau đó, kích hoạt child theme trong dashboard WordPress (Appearance -> Themes).

Kiểm tra và Tối ưu hóa

Sau khi đã ẩn menu mobile, hãy kiểm tra website của bạn trên nhiều thiết bị di động khác nhau (điện thoại, máy tính bảng) để đảm bảo rằng menu đã được ẩn thành công và trải nghiệm người dùng không bị ảnh hưởng. Sử dụng các công cụ kiểm tra responsive design (ví dụ: Google Chrome DevTools) để mô phỏng các kích thước màn hình khác nhau.

  • Kiểm tra trên nhiều thiết bị: Đảm bảo rằng menu được ẩn trên tất cả các thiết bị di động bạn muốn hỗ trợ.
  • Kiểm tra tốc độ tải trang: Việc ẩn menu có thể ảnh hưởng đến tốc độ tải trang, đặc biệt nếu bạn sử dụng JavaScript để ẩn menu. Tối ưu hóa code của bạn để đảm bảo tốc độ tải trang nhanh.
  • Thu thập phản hồi từ người dùng: Hỏi ý kiến của người dùng về trải nghiệm trên thiết bị di động. Phản hồi của họ có thể giúp bạn cải thiện thiết kế và chức năng của website.

Ngoài ra, hãy xem xét việc sử dụng các công cụ tối ưu hóa hiệu suất website (ví dụ: Google PageSpeed Insights) để xác định các vấn đề tiềm ẩn và cải thiện tốc độ tải trang.

Kết luận

Ẩn menu mobile WordPress là một cách hiệu quả để cải thiện trải nghiệm người dùng trên thiết bị di động. Bằng cách sử dụng CSS, plugin hoặc chỉnh sửa file theme, bạn có thể tùy chỉnh menu mobile của mình để phù hợp với nhu cầu và mục tiêu của bạn. Hãy nhớ sử dụng child theme để bảo toàn các tùy chỉnh của bạn khi cập nhật theme chính. Chúc bạn thành công!

, , , ,

..