Thêm slide panel menu trong theme WordPress

5 tháng ago, WordPress Themes, Views

Giới thiệu về Slide Panel Menu trong WordPress

Trong thế giới thiết kế web hiện đại, 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 và chuyển đổi họ thành khách hàng. Một trong những yếu tố quan trọng góp phần vào UX tốt là hệ thống điều hướng trực quan và dễ sử dụng. Slide panel menu, hay còn gọi là off-canvas menu, là một giải pháp tuyệt vời để cải thiện khả năng điều hướng trên các trang web WordPress, đặc biệt là trên các thiết bị di động.

Slide panel menu là một menu ẩn, thường nằm bên trái hoặc bên phải màn hình, và trượt vào khi người dùng nhấp vào một biểu tượng (thường là biểu tượng hamburger). Loại menu này giúp tiết kiệm không gian màn hình, đặc biệt là trên các thiết bị có kích thước nhỏ, đồng thời cung cấp một cách gọn gàng và trực quan để hiển thị các tùy chọn điều hướng.

Bài viết này sẽ hướng dẫn bạn cách thêm slide panel menu vào theme WordPress của mình, từ những phương pháp đơn giản sử dụng plugin đến những cách phức tạp hơn đòi hỏi kiến thức về code.

Tại sao nên sử dụng Slide Panel Menu?

Việc triển khai slide panel menu mang lại nhiều lợi ích cho trang web của bạn, bao gồm:

Cải thiện trải nghiệm người dùng: Slide panel menu giúp người dùng dễ dàng tìm thấy những gì họ cần, đặc biệt là trên các thiết bị di động. Menu được ẩn đi cho đến khi cần, giúp trang web trông gọn gàng và ít lộn xộn hơn.
Tiết kiệm không gian màn hình: Đây là một lợi thế lớn, đặc biệt là trên các thiết bị di động. Thay vì hiển thị toàn bộ menu trên màn hình, slide panel menu chỉ hiển thị khi người dùng yêu cầu.
Tăng tính thẩm mỹ: Slide panel menu có thể được thiết kế để phù hợp với giao diện tổng thể của trang web, tạo ra một giao diện chuyên nghiệp và hấp dẫn.
Cải thiện SEO: Mặc dù không trực tiếp, nhưng một trang web có trải nghiệm người dùng tốt thường có thứ hạng cao hơn trên các công cụ tìm kiếm.

Các phương pháp thêm Slide Panel Menu vào WordPress

Có nhiều cách để thêm slide panel menu vào theme WordPress của bạn. Dưới đây là một số phương pháp phổ biến:

Sử dụng plugin: Đây là phương pháp đơn giản và nhanh chóng nhất, phù hợp với những người không có nhiều kiến thức về code.
Chỉnh sửa theme bằng CSS và JavaScript: Phương pháp này đòi hỏi kiến thức về code, nhưng cho phép bạn tùy chỉnh slide panel menu theo ý muốn.
Sử dụng child theme: Luôn luôn nên sử dụng child theme khi chỉnh sửa theme WordPress để tránh mất các thay đổi khi theme chính được cập nhật.

Thêm Slide Panel Menu bằng Plugin

Đây là phương pháp dễ nhất và nhanh 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 trên kho plugin WordPress. Dưới đây là một số plugin phổ biến:

Responsive Menu: Một plugin miễn phí và dễ sử dụng, cho phép bạn tạo slide panel menu với nhiều tùy chọn tùy chỉnh.
WP Mobile Menu: Một plugin mạnh mẽ với nhiều tính năng nâng cao, bao gồm tùy chỉnh giao diện, hỗ trợ nhiều ngôn ngữ và tích hợp với WooCommerce.
ShiftNav: Một plugin trả phí với nhiều tùy chọn tùy chỉnh nâng cao, cho phép bạn tạo slide panel menu phức tạp và chuyên nghiệp.

Hướng dẫn sử dụng plugin Responsive Menu

Để sử dụng plugin Responsive Menu, hãy làm theo các bước sau:

Cài đặt và kích hoạt plugin Responsive Menu từ kho plugin WordPress.
Truy cập Responsive Menu trong bảng điều khiển WordPress.
Trong tab General Options, chọn menu bạn muốn sử dụng làm slide panel menu.
Tùy chỉnh các tùy chọn khác theo ý muốn, chẳng hạn như vị trí menu, màu sắc và phông chữ.
Nhấp vào nút Save Changes để lưu các thay đổi.

Thêm Slide Panel Menu bằng CSS và JavaScript

Nếu bạn muốn có nhiều quyền kiểm soát hơn đối với giao diện và chức năng của slide panel menu, bạn có thể tạo nó bằng CSS và JavaScript. Phương pháp này đòi hỏi kiến thức về code, nhưng cho phép bạn tùy chỉnh mọi khía cạnh của menu.

Bước 1: Tạo Child Theme

Trước khi bắt đầu chỉnh sửa theme, bạn nên tạo một child theme để tránh mất các thay đổi khi theme chính được cập nhật. Tạo một thư mục mới trong thư mục wp-content/themes của bạn và đặt tên cho nó, ví dụ: ten-theme-con. Sau đó, tạo hai tệp trong thư mục này: style.css và functions.php.

Trong tệp style.css, hãy thêm đoạn code sau:


/*
 Theme Name:   Tên Theme Con của bạn
 Theme URI:    http://example.com/ten-theme-con/
 Description:  Theme Con của [Tên Theme Chính]
 Author:       [Tên của bạn]
 Author URI:   http://example.com
 Template:     [Tên thư mục của theme chính]
 Version:      1.0.0
*/

@import url("../[Tên thư mục của theme chính]/style.css");

Thay thế các giá trị trong ngoặc vuông bằng thông tin phù hợp.

Trong tệp functions.php, hãy thêm đoạn code sau:


<?php
add_action( 'wp_enqueue_scripts', 'ten_theme_con_enqueue_styles' );
function ten_theme_con_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( 'parent-style' )
    );
}

Kích hoạt child theme trong bảng điều khiển WordPress.

Bước 2: Thêm HTML cho Slide Panel Menu

Trong tệp header.php của child theme, hãy thêm HTML cho slide panel menu. Vị trí chính xác nơi bạn cần thêm code sẽ phụ thuộc vào cấu trúc của theme của bạn. Thông thường, bạn sẽ muốn thêm nó ngay sau thẻ .

Dưới đây là một ví dụ về HTML cho slide panel menu:



  
    ×
     'primary', // Thay thế bằng vị trí menu của bạn
        'menu_id'        => 'slide-panel-menu-list',
      ) );
    ?>

Đảm bảo rằng bạn thay thế primary bằng vị trí menu thực tế của bạn. Nếu bạn chưa đăng ký một menu trong theme của mình, bạn sẽ cần thêm code vào tệp `functions.php` của bạn để đăng ký một menu.

Bước 3: Thêm CSS cho Slide Panel Menu

Trong tệp style.css của child theme, hãy thêm CSS để tạo kiểu cho slide panel menu. Dưới đây là một ví dụ:


#slide-panel-menu {
  position: fixed;
  top: 0;
  left: -300px;
  width: 300px;
  height: 100%;
  background-color: #333;
  color: #fff;
  overflow-y: auto;
  transition: left 0.3s ease-in-out;
  z-index: 9999;
}

#slide-panel-menu.open {
  left: 0;
}

.slide-panel-menu-inner {
  padding: 20px;
}

.slide-panel-menu-close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  color: #fff;
  text-decoration: none;
}

#menu-toggle {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  z-index: 10000;
}

#menu-toggle span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: #333;
  margin-bottom: 5px;
  transition: transform 0.3s ease-in-out;
}

#menu-toggle.open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

#menu-toggle.open span:nth-child(2) {
  opacity: 0;
}

#menu-toggle.open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

Bạn có thể tùy chỉnh CSS này để phù hợp với giao diện tổng thể của trang web của bạn.

Bước 4: Thêm JavaScript cho Slide Panel Menu

Trong tệp functions.php của child theme, hãy thêm JavaScript để xử lý việc đóng mở slide panel menu. Đầu tiên, bạn cần đăng ký và thêm tệp JavaScript vào theme của bạn:


function ten_theme_con_scripts() {
  wp_enqueue_script( 'slide-panel-menu', get_stylesheet_directory_uri() . '/js/slide-panel-menu.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'ten_theme_con_scripts' );

Sau đó, tạo một tệp mới trong thư mục js của child theme và đặt tên cho nó là slide-panel-menu.js. Trong tệp này, hãy thêm đoạn code sau:


jQuery(document).ready(function($) {
  $('#menu-toggle').click(function() {
    $('#slide-panel-menu').toggleClass('open');
    $(this).toggleClass('open');
  });

  $('.slide-panel-menu-close').click(function() {
    $('#slide-panel-menu').removeClass('open');
    $('#menu-toggle').removeClass('open');
  });
});

Đoạn code này sẽ thêm một trình xử lý sự kiện nhấp chuột vào biểu tượng menu và nút đóng, để đóng mở slide panel menu.

Kết luận

Thêm slide panel menu vào theme WordPress của bạn có thể cải thiện đáng kể trải nghiệm người dùng và tăng tính thẩm mỹ của trang web. Cho dù bạn chọn sử dụng plugin hay chỉnh sửa theme bằng CSS và JavaScript, hãy đảm bảo rằng slide panel menu của bạn dễ sử dụng, trực quan và phù hợp với giao diện tổng thể của trang web.

Việc chọn phương pháp nào phụ thuộc vào kỹ năng và yêu cầu của bạn. Nếu bạn không có nhiều kinh nghiệm về code, sử dụng plugin là một lựa chọn tốt. Nếu bạn muốn có nhiều quyền kiểm soát hơn, bạn có thể sử dụng CSS và JavaScript. Bất kể bạn chọn phương pháp nào, hãy nhớ kiểm tra kỹ lưỡng slide panel menu của bạn trên các thiết bị khác nhau để đảm bảo rằng nó hoạt động đúng cách.

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa