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 bảng điều khiển hình ảnh jQuery. Menu bảng điều khiển thanh trượt có thể được sử dụng để nâng cao 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 hình ảnh vào chủ đề WordPress.
Lưu ý: Đây là một hướng dẫn cấp trung 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 hình ảnh 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ủ đề của chúng tôi cho người dùng trên máy tính portátiles và máy tính để bàn có thể thấy toàn bộ menu. Trước khi bạn bắt đầu, điều quan trọng là phải biết rằng có nhiều chủ đề WordPress khác nhau và bạn cần phải xử lý một số 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 thông thường trên máy tính của bạn, chẳng hạ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’). công tắc điện (
đặc tính () {
$ (‘# bật ra’). animate ({trái: 0}, ‘chậm’, hàm () {
$ (‘# chuyển đổi’). html (“
‘);
});
},
chức năng () {
$ (‘# popout’). animate ({left: -250}, ‘chậm’, function () {
$ (‘# Chuyển đổi’). Html (‘‘);
});
}
);
}) (jQuery);
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 vào máy tính để bàn của bạn. Mã này sử dụng jQuery để chuyển giữa một menu bảng điều khiển thanh trượt. Nó cũng hoạt hình hiệu ứng bánh răng.
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, bạn phải tạo một thư mục và tải tệp slidepanel.js trong 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 hà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 sử dụng một 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 hình ảnh WordPress. Về cơ bản, 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’, mảng (‘jquery’), ‘20131010’, đúng);
Bây giờ mọi thứ đã được cấu hình, bạn nên thay đổi menu mặc định cho chủ đề của mình. 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:
