Gần đây, một trong những người dùng của chúng tôi đã hỏi chúng tôi làm thế nào họ có thể thay thế menu điều hướng của họ bằng menu bảng điều khiển jQuery. Menu bảng điều khiển trượt có thể được sử dụng để nâng cao đáng kể trải nghiệm người dùng trên các trang web di động. Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách thêm menu bảng điều khiển trong các chủ đề WordPress.
Lưu ý: Đây là hướng dẫn ở cấp độ trung cấp và yêu cầu đủ kiến thức về HTML và CSS.
Thay thế menu mặc định bằng menu bảng trượt trong WordPress
Mục tiêu ở đây là hiển thị menu bảng điều khiển cho người dùng trên màn hình nhỏ hơn trong khi duy trì menu mặc định của chủ đề cho người dùng trên máy tính portátiles và máy tính để bàn có thể xem menu đầy đủ. Trước khi bắt đầu, điều quan trọng cần biết là có nhiều chủ đề WordPress khác nhau và bạn sẽ phải xử lý một chút CSS sau này.
Điều đầu tiên bạn nên làm là mở một trình soạn thảo văn bản đơn giản trên máy tính của bạn, như Notepad và tạo một tệp mới. Sao chép và dán mã này:
(hàm ($) {
$ ('# chuyển đổi'). chuyển đổi (
chức năng () {
$ ('# bật ra'). animate ({trái: 0}, 'chậm', hàm () {
$ ('# chuyển đổi'). html ('
');
});
},
function() {
$('#popout').animate({ left: -250 }, 'slow', function() {
$('#toggle').html('');
});
}
);
}) (jQuery);
');
});
},
function() {
$('#popout').animate({ left: -250 }, 'slow', function() {
$('#toggle').html('Thay thế example.com bằng tên miền của riêng bạn và cũng thay thế chủ đề của bạn bằng thư mục chủ đề thực tế của bạn. Lưu tệp này dưới dạng slidepanel.js trên máy tính để bàn của bạn. Mã này sử dụng jQuery để chuyển đổi một menu bảng trượt. Nó cũng hoạt hình hiệu ứng chuyển đổi.
Mở một máy khách FTP như Filezilla và kết nối với trang web của bạn. Sau đó vào thư mục chủ đề của bạn và nếu bạn có thư mục js hãy mở 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 một thư mục và tải tệp slidepanel.js vào thư mục js.
Bước tiếp theo là thiết kế hoặc tìm một biểu tượng menu. Biểu tượng menu được sử dụng phổ biến nhất là biểu tượng có ba dòng. Bạn có thể tạo một cái bằng Photoshop hoặc tìm một trong nhiều hình ảnh google hiện có. Đối với hướng dẫn này, chúng tôi đang sử dụng biểu tượng menu 27x23px. Khi bạn đã tạo hoặc tìm thấy biểu tượng menu của mình, đổi tên nó thành menu.png và tải nó vào thư mục hình ảnh trong thư mục chủ đề của bạn.
Bước tiếp theo là xếp hàng tệp javascript cho bảng điều khiển slide trong WordPress. Về cơ bản, chỉ cần sao chép và dán mã này vào tệp tin.php của chủ đề.
wp_enqueue_script( 'wpb_slidepanel', get_template_directory_uri() . '/js/slidepanel.js', array('jquery'), '20131010', true );
Bây giờ mọi thứ đã được thiết lập, bạn nên sửa đổi menu mặc định của chủ đề. Nói chung, hầu hết các chủ đề hiển thị các menu điều hướng trong tệp header.php của chủ đề. Mở tệp header.php và tìm dòng tương tự như sau:
