Bạn có muốn tạo một menu WordPress đáp ứng cho thiết bị di động không? Người dùng di động đã vượt trội so với người dùng máy tính để bàn trên nhiều trang web. Thêm một menu di động có thể tùy chỉnh giúp người dùng dễ dàng điều hướng trang web của bạn. Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách dễ dàng tạo một menu WordPress đáp ứng sẵn sàng cho các thiết bị di động.
Đây là một hướng dẫn chuyên sâu. Chúng tôi sẽ hiển thị cả phương thức bổ trợ cho người mới bắt đầu (không mã hóa) và phương pháp mã hóa cho người dùng cao cấp hơn của chúng tôi.
Vào cuối hướng dẫn này, bạn sẽ tìm hiểu cách tạo menu bật lên trượt, menu bật lên thả xuống và menu bật lên bật tắt.
Sẵn sàng? Hãy để chúng tôi bắt đầu.
Video hướng dẫn
Đăng ký WPBeginner
Nếu bạn không thích video hoặc cần thêm hướng dẫn, hãy đọc tiếp.
phương pháp 1: Thêm một menu đáp ứng trong WordPress bằng cách sử dụng plugin
Phương pháp này dễ dàng hơn và được khuyến nghị cho người mới bắt đầu vì nó không yêu cầu mã hóa tùy chỉnh.
Trong phương pháp này, chúng tôi sẽ tạo một menu hamburger trượt trên màn hình di động.
Điều đầu tiên bạn nên làm là cài đặt và kích hoạt plugin Responsive Menu. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress.
Sau khi kích hoạt, plugin sẽ thêm một mục menu mới có nhãn “Menu Responsive” vào thanh quản trị WordPress của bạn. Nhấp vào nó sẽ đưa bạn đến trang cấu hình của plugin.
Trước tiên, bạn phải nhập chiều rộng của màn hình, tại thời điểm đó, plugin sẽ bắt đầu hiển thị menu phản hồi. Mặc định là 800 px, nên hoạt động cho hầu hết các trang web.
Sau đó, bạn cần chọn menu bạn muốn sử dụng cho menu đáp ứng của bạn. Nếu bạn chưa tạo menu, bạn có thể tạo một menu bằng cách truy cập Ngoại hình »Menu. Xem hướng dẫn của chúng tôi về cách thêm menu điều hướng trong WordPress để biết hướng dẫn chi tiết.
Tùy chọn cuối cùng trên màn hình là cung cấp một lớp CSS cho menu không phản hồi hiện tại của bạn. Điều này sẽ cho phép plugin ẩn menu không phản hồi của nó trên màn hình nhỏ hơn.
Đừng quên nhấp vào “Tùy chọn cập nhật” nút để lưu các thiết lập của bạn.
Bây giờ bạn có thể truy cập trang web của họ và thay đổi kích thước màn hình trình duyệt của bạn để xem menu phản hồi hoạt động.
Plugin menu responsive đi kèm với nhiều tùy chọn khác cho phép bạn thay đổi hành vi và diện mạo của menu responsive của bạn. Bạn có thể khám phá các tùy chọn này trên trang cấu hình của plugin và điều chỉnh chúng khi cần thiết.
phương pháp 2: Thêm menu lựa chọn thả xuống bằng cách sử dụng plugin
Một cách khác để thêm menu đáp ứng là thêm menu chọn thả xuống. Phương pháp này không yêu cầu bất kỳ kỹ năng mã hóa nào, vì vậy nó được khuyên dùng cho người mới bắt đầu.
Điều đầu tiên cần làm là cài đặt và kích hoạt plugin Responsive Chọn Menu. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress.
Sau khi kích hoạt, bạn phải truy cập Ngoại hình »Responsive Chọn để cấu hình các cài đặt plugin.
Bạn nên cuộn xuống phần “Kích hoạt vị trí chủ đề”. Theo mặc định, plugin được kích hoạt ở tất cả các vị trí chủ đề. Bạn có thể thay đổi điều đó bằng cách kích hoạt có chọn lọc nó cho các vị trí chủ đề cụ thể.
Đừng quên nhấp vào nút Lưu Tất cả Cài đặt để lưu trữ các thay đổi của bạn.
Bây giờ bạn có thể truy cập trang web của họ và thay đổi kích thước màn hình trình duyệt để xem menu lựa chọn đáp ứng đang hoạt động.
phương pháp 3: Tạo một menu thân thiện với thiết bị di động đáp ứng với hiệu ứng chuyển đổi
Một trong những phương pháp được sử dụng rộng rãi nhất để hiển thị menu trên màn hình di động là thông qua việc sử dụng hiệu ứng chuyển đổi.
Phương pháp này yêu cầu bạn thêm mã tùy chỉnh vào các tệp WordPress của mình. Nếu bạn chưa từng làm điều này trước đây, hãy xem hướng dẫn của chúng tôi về việc dán các đoạn web vào WordPress.
Trước tiên, bạn phải mở một trình soạn thảo văn bản như notepad và dán mã này.
( function() {
var nav = document.getElementById( 'site-navigation' ), button, menu;
if ( ! nav ) {
return;
}
button = nav.getElementsByTagName( 'button' )[0];
menu = nav.getElementsByTagName( 'ul' )[0];
if ( ! button ) {
return;
}
// Hide button if menu is missing or empty.
if ( ! menu || ! menu.childNodes.length ) {
button.style.display = 'none';
return;
}
button.onclick = function() {
if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
menu.className="nav-menu";
}
if ( -1 !== button.className.indexOf( 'toggled-on' ) ) {
button.className = button.className.replace( ' toggled-on', '' );
menu.className = menu.className.replace( ' toggled-on', '' );
} else {
button.className += ' toggled-on';
menu.className += ' toggled-on';
}
};
} )(jQuery);
Bây giờ bạn cần lưu tệp này dưới dạng navigation.js trên máy tính để bàn của bạn.
Tiếp theo, bạn cần mở ứng dụng khách FTP để tải tệp này lên thư mục / wp-content / Themes / your-theme-dir / js / trên trang web WordPress của bạn.
Thay thế thư mục chủ đề của bạn với thư mục của chủ đề hiện tại của bạn. Nếu thư mục chủ đề của bạn không có thư mục js thì bạn cần tạo nó.
Sau khi tải tệp JavaScript, bước tiếp theo là đảm bảo trang web WordPress của bạn tải JavaScript này. Bạn sẽ cần thêm đoạn mã sau vào tệp tin.php của chủ đề.
wp_enqueue_script( 'wpb_togglemenu', get_template_directory_uri() . '/js/navigation.js', array('jquery'), '20160909', true );
Bây giờ chúng ta cần thêm menu điều hướng vào chủ đề WordPress của chúng tôi. Thông thường menu điều hướng được thêm vào tệp header.php của một chủ đề.
