Thêm slide panel menu trong theme WordPress

Thêm Slide Panel Menu trong Theme WordPress: Hướng Dẫn Chi Tiết

Slide panel menu, hay còn gọi là off-canvas menu, là một giải pháp thiết kế hiện đại và hiệu quả để cải thiện trải nghiệm người dùng trên website WordPress, đặc biệt là trên các thiết bị di động. Thay vì hiển thị một menu điều hướng truyền thống chiếm nhiều không gian, slide panel menu ẩn mình bên ngoài màn hình và chỉ xuất hiện khi người dùng tương tác, thường là bằng cách nhấp vào một biểu tượng (hamburger icon) hoặc vuốt. Bài viết này sẽ hướng dẫn bạn chi tiết cách thêm slide panel menu vào theme WordPress của bạn, từ việc sử dụng plugin đến code tay.

Tại Sao Nên Sử Dụng Slide Panel Menu?

Slide panel menu mang lại nhiều lợi ích cho website WordPress, bao gồm:

• Cải thiện trải nghiệm người dùng trên thiết bị di động: Slide panel menu giúp tiết kiệm không gian màn hình, đặc biệt quan trọng trên các thiết bị có kích thước nhỏ.
• Thiết kế hiện đại và chuyên nghiệp: Một slide panel menu được thiết kế tốt có thể nâng cao tính thẩm mỹ và chuyên nghiệp cho website.
• Dễ dàng điều hướng: Người dùng có thể dễ dàng truy cập các trang quan trọng trên website mà không cần cuộn trang quá nhiều.
• Tăng tốc độ tải trang: Vì menu được ẩn, website có thể tải nhanh hơn, đặc biệt nếu menu chứa nhiều hình ảnh hoặc nội dung.

Cách Thêm Slide Panel Menu Bằng Plugin

Sử dụng plugin là cách đơn giản và nhanh chóng nhất để thêm slide panel menu vào WordPress. Có rất nhiều plugin miễn phí và trả phí có sẵn, mỗi plugin đều có những tính năng và tùy chọn riêng. Dưới đây là một vài plugin phổ biến:

• WP Mobile Menu: Một plugin miễn phí phổ biến với nhiều tùy chọn tùy chỉnh, bao gồm màu sắc, phông chữ, và biểu tượng.
• ShiftNav – Responsive Menu: Plugin này cho phép bạn sử dụng menu WordPress hiện có làm slide panel menu.
• Hero Menu: Một plugin trả phí mạnh mẽ với nhiều tính năng nâng cao, bao gồm hỗ trợ mega menu và nhiều tùy chọn tùy chỉnh khác.

Hướng Dẫn Sử Dụng WP Mobile Menu

Đây là hướng dẫn sử dụng WP Mobile Menu để tạo slide panel menu:

1. Cài đặt và kích hoạt plugin WP Mobile Menu từ kho plugin WordPress.
2. Truy cập “Mobile Menu” trong dashboard WordPress.
3. Trong tab “General Settings”, bạn có thể tùy chỉnh các tùy chọn cơ bản như màu sắc, phông chữ, và biểu tượng menu.
4. Trong tab “Menu”, bạn có thể chọn menu WordPress mà bạn muốn sử dụng làm slide panel menu.
5. Trong tab “Look & Feel”, bạn có thể tùy chỉnh giao diện của slide panel menu, bao gồm chiều rộng, vị trí, và hiệu ứng chuyển động.
6. Lưu các thay đổi và kiểm tra website của bạn trên thiết bị di động để xem slide panel menu.

Cách Thêm Slide Panel Menu Bằng Code (Code Tay)

Nếu bạn muốn có toàn quyền kiểm soát thiết kế và chức năng của slide panel menu, bạn có thể thêm nó bằng code. Cách này đòi hỏi bạn phải có kiến thức về HTML, CSS, và JavaScript.

Bước 1: Tạo HTML cho Slide Panel Menu

Trước tiên, bạn cần tạo HTML cho slide panel menu. Bạn có thể thêm HTML này vào file header.php của theme WordPress của bạn, hoặc tạo một file template riêng và include nó vào header.php.

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <a href="#">Trang Chủ</a>
  <a href="#">Giới Thiệu</a>
  <a href="#">Dịch Vụ</a>
  <a href="#">Sản Phẩm</a>
  <a href="#">Liên Hệ</a>
</div>

<span style="font-size:30px;cursor:pointer" onclick="openNav()">≡</span>

Giải thích:

• <div id="mySidenav" class="sidenav">: Đây là container cho slide panel menu.
• <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>: Đây là nút đóng menu.
• <a href="#">...</a>: Đây là các liên kết trong menu.
• <span style="font-size:30px;cursor:pointer" onclick="openNav()">≡</span>: Đây là biểu tượng (hamburger icon) để mở menu.

Bước 2: Thêm CSS để Style cho Slide Panel Menu

Tiếp theo, bạn cần thêm CSS để style cho slide panel menu. Bạn có thể thêm CSS này vào file style.css của theme WordPress của bạn, hoặc tạo một file CSS riêng và include nó vào header.php.

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

Giải thích:

• .sidenav: Style cho container của slide panel menu.
• .sidenav a: Style cho các liên kết trong menu.
• .sidenav .closebtn: Style cho nút đóng menu.
• #main: Style cho nội dung chính của trang (nếu bạn muốn đẩy nội dung chính sang một bên khi menu mở).
• @media screen and (max-height: 450px): Media query cho các thiết bị có chiều cao màn hình nhỏ.

Bước 3: Thêm JavaScript để Điều Khiển Slide Panel Menu

Cuối cùng, bạn cần thêm JavaScript để điều khiển slide panel menu. Bạn có thể thêm JavaScript này vào file footer.php của theme WordPress của bạn, hoặc tạo một file JavaScript riêng và include nó vào footer.php.

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft= "0";
}

Giải thích:

• openNav(): Hàm này được gọi khi người dùng nhấp vào biểu tượng mở menu. Nó sẽ thay đổi chiều rộng của slide panel menu thành 250px và đẩy nội dung chính sang một bên.
• closeNav(): Hàm này được gọi khi người dùng nhấp vào nút đóng menu. Nó sẽ thay đổi chiều rộng của slide panel menu thành 0 và đưa nội dung chính trở lại vị trí ban đầu.

Lưu ý quan trọng:

• Bạn cần đảm bảo rằng bạn đã thay thế các liên kết href="#" bằng các liên kết thực tế đến các trang trên website của bạn.
• Nếu bạn sử dụng code tay, bạn cần phải tự kiểm tra và đảm bảo rằng slide panel menu hoạt động tốt trên tất cả các thiết bị và trình duyệt.
• Backup website của bạn trước khi thực hiện bất kỳ thay đổi nào đối với theme WordPress.

Kết Luận

Thêm slide panel menu vào theme WordPress của bạn là một cách tuyệt vời để cải thiện trải nghiệm người dùng trên thiết bị di động và nâng cao tính thẩm mỹ cho website của bạn. Bạn có thể sử dụng plugin để đơn giản hóa quá trình này, hoặc bạn có thể thêm slide panel menu bằng code tay để có toàn quyền kiểm soát thiết kế và chức năng. Hy vọng bài viết này đã cung cấp cho bạn đầy đủ thông tin cần thiết để thêm slide panel menu vào website WordPress của bạn một cách thành công.