Làm cách nào để ẩn menu chủ đề?

Trong hầu hết các trường hợp, các chủ đề WordPress đã có các kiểu được xác định cho phép chúng chuyển đổi menu điều hướng thông thường thành menu di động. Thật tiện lợi nếu bạn cần một giải pháp nhanh chóng. Ví dụ: bạn có bố cục truyền thống cho máy tính để bàn và menu hamburger trên thiết bị di động. Tuy nhiên, nếu bạn muốn tùy chỉnh thêm hoặc thậm chí thay thế hoàn toàn menu di động hiện có của mình, điều đó cũng có thể thực hiện được. Có một số cách để ẩn menu di động trong WordPress, bằng plugin hoặc mã

Cách ẩn menu di động trong WordPress

Hoàn thành tùy chỉnh trang web đòi hỏi một chút kiến ​​thức và kinh nghiệm. Nếu bạn muốn tùy chỉnh an toàn mà không gặp rủi ro, bạn có thể sử dụng các chuyên gia để tùy chỉnh và bảo trì trang web của mình. Mặc dù có một số phần dễ dàng mà bạn có thể tự thực hiện, nhưng việc tùy chỉnh nghiêm túc hơn đòi hỏi phải có sự tiếp xúc chuyên nghiệp. Khi nói đến menu di động trong WordPress, bạn có thể sử dụng các plugin để đơn giản hóa quy trình. Hoặc, nếu bạn có kiến ​​thức về mã hóa, bạn có thể tạo các thay đổi trực tiếp bên trong mã

Để giúp bạn thay đổi cách menu di động xuất hiện trên trang web của mình, đây là hai cách phổ biến nhất để hoàn thành

  • Ẩn menu di động trong WordPress bằng plugin
  • Ẩn menu di động bằng mã CSS

Cách ẩn menu di động trong WordPress bằng plugin

Bạn có thể đã tìm thấy một chủ đề WordPress có hành vi menu di động thú vị và muốn dễ dàng sao chép nó. Phương pháp này không yêu cầu kiến ​​thức về mã hóa nên sẽ thuận tiện hơn cho công việc này. Sau khi bạn cài đặt plugin, bạn sẽ có thể xóa hoàn toàn menu di động của mình trên thiết bị di động. Ngoài ra, một số plugin sẽ cho phép bạn tùy chỉnh chuyên sâu. Bên cạnh ẩn cơ bản, bạn cũng có thể sử dụng nó để chỉ xóa các thành phần cụ thể trong menu của mình

Tạo menu di động mới

Bước đầu tiên là vào Giao diện> Menu. Ở đó bạn sẽ có thể tạo một menu mới bằng cách nhấp vào tùy chọn “tạo menu mới” ở trên cùng. Đặt tên cho menu mới của bạn và xác nhận điều này bằng nút “Tạo Menu” ở góc dưới bên phải của màn hình

Creating a new mobile menu in WordPress.Bạn có thể dễ dàng chọn các yếu tố mà menu của bạn sẽ hiển thị

Sau các bước này, lựa chọn ở bên trái sẽ không thể nhấp được nữa và bạn có thể thêm các mục cho menu mới của mình. Khi bạn hoàn thành việc thêm các mục mới, chỉ cần nhấp vào “Lưu Menu”

Tìm và cài đặt plugin

Bước tiếp theo là tìm và cài đặt plugin. Có rất nhiều plugin có thể giúp bạn thao tác và tùy chỉnh menu. Một số phổ biến nhất là WP Mobile Menu, Max Mega Menu, Responsive Menu, v.v. Để giải thích, hãy cài đặt và kích hoạt WP Mobile Menu

Khi bạn đã hoàn tất, hãy chuyển đến Tùy chọn menu di động trên thanh bên trái WordPress của bạn. Các tùy chọn plugin bên trong, giờ đây bạn có thể chọn xem bạn muốn hiển thị menu di động mới của mình ở bên trái hay bên phải. Chọn menu đã tạo trước đó rồi cuộn xuống “Hide Original Theme Menu”. Ở đó, bạn có thể chọn xóa các thành phần cụ thể khỏi menu gốc. Nếu bạn nhấp vào trường “Tìm phần tử”, bạn sẽ nhận được bản xem trước trực tiếp các lựa chọn để chọn. Sau khi bạn hoàn tất quá trình lựa chọn, chỉ cần lưu các thay đổi

Choosing what elements to hide on your WordPress website.Live Preview là một trong những tiện ích tốt nhất trong WordPress

Thay thế hoặc ẩn menu

Sau khi bạn đã chọn nội dung cần ẩn, chỉ cần quay lại Giao diện>Menu. Chọn từ menu thả xuống menu di động đã tạo trước đó của bạn và đặt “Vị trí hiển thị” của nó. Menu ban đầu của bạn hiện đã bị ẩn và được thay thế bằng menu tùy chỉnh của bạn

Giờ đây, bạn có thể truy cập trang web của mình để xem thực đơn mới đang hoạt động. Giờ đây, plugin sẽ ẩn menu di động của chủ đề của bạn và thay vào đó hiển thị menu tùy chỉnh

Cách ẩn menu bằng mã CSS

Một phương pháp khác để ẩn menu di động yêu cầu kiến ​​thức nhất định về mã CSS và thực hành. Những người thường tạo chủ đề WordPress tùy chỉnh đã biết mức độ phức tạp của một số tùy chỉnh. Và, với những điểm này, đây không phải là phương pháp được khuyến nghị chính xác cho người mới bắt đầu. Tuy nhiên…

Tìm tên thực đơn của bạn

Bước đầu tiên là tìm menu bạn muốn chỉnh sửa. Có lẽ cách dễ nhất là sử dụng các công cụ dành cho nhà phát triển trình duyệt tích hợp. Truy cập trang web của bạn nơi bạn muốn thực hiện thay đổi và mở công cụ dành cho nhà phát triển. Nếu bạn đang sử dụng Google Chrome, bạn có thể thực hiện bằng phím tắt Ctrl+Shift+I. Ở đầu màn hình, bạn sẽ tìm thấy tùy chọn Toggle Device Toolbar sẽ cho bạn biết trang web của bạn trông như thế nào trên thiết bị di động. Bạn thậm chí có thể thay đổi các loại và độ phân giải khác nhau

Bây giờ bạn đã thấy cách nó hiển thị trên thiết bị di động, hãy chọn nút giống như mũi tên và nhấp vào menu của bạn để kiểm tra nó. Nó sẽ ngay lập tức dẫn bạn đến phần mã nơi bạn có thể thấy lớp CSS cho một menu nhất định. Tức là bạn sẽ thấy tên lớp đó

Ẩn menu của bạn bằng một dòng mã mới

Sau khi bạn có được tên thích hợp, chỉ cần vào Giao diện>Tùy chỉnh và chọn “CSS bổ sung”. Nói chung, điều này thường ở dưới cùng của thanh bên trái. Nhấp vào nó, và bạn sẽ được cung cấp màn hình tiếp theo. Ở đó, bạn có thể nhấp vào cuối màn hình để chọn chế độ xem trên thiết bị di động và ở trên màn hình, bạn sẽ nhập mã để ẩn menu

Mã số. . tên menu {hiển thị. không ai;}

Cuối cùng, nhấp vào nút Xuất bản và bạn đã hoàn tất. Nếu bạn quen thuộc hơn một chút với mã CSS, rất nhiều thay đổi này có thể được hoàn thành bên trong tệp CSS. Tuy nhiên, bạn sẽ phải chú ý đến các truy vấn phương tiện. Chúng sẽ cho phép bạn tạo các quy tắc khác nhau cho các thiết bị khác nhau, vì vậy bạn có thể kiểm soát nhiều hơn đối với các trang web và hành vi trên menu của mình

An illustration of a coder with CSS code in the background.CSS không khó, nhưng nó cần thời gian để tìm hiểu tất cả các quy tắc

Nếu bạn là người mới bắt đầu chỉnh sửa bố cục, tùy chọn plugin có lẽ là cách tốt nhất để bắt đầu. Nếu bạn bắt đầu thay đổi mã mà không biết chính xác mình đang làm gì, bạn có thể dễ dàng phá vỡ giao diện trang web của mình. Có nhiều quy tắc và thuộc tính trong CSS ghi đè lẫn nhau. Vì vậy, nếu bạn muốn ẩn menu di động của mình trong WordPress mà không gặp rủi ro, hãy sử dụng các plugin để hoàn thành công việc cho bạn