Cách tạo Menu WordPress đáp ứng sẵn sàng cho thiết bị di động

Bạn có muốn tạo một menu WordPress đáp ứng sẵn sàng cho thiết bị di động không? Người dùng di động đã vượt qua người dùng máy tính để bàn cho rất nhiều trang web. Thêm một menu đáp ứng di động giúp người dùng dễ dàng điều hướng trang web của bạn hơ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 thiết bị di động.


Tạo menu WordPress đáp ứng 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 plugin 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.

Đến cuối hướng dẫn này, bạn sẽ tìm hiểu cách tạo menu di động trượt, menu di động thả xuống và menu chuyển đổi di động.

Sẵn sàng? Bắt đầu nào.

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 tiếp tục đọc.

Phương pháp 1: Thêm Menu Responsive trong WordPress bằ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 ra trên màn hình di động.

Trình đơn plugin thử nghiệm đáp ứng

Điều đầu tiên bạn cầ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 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ài đặt plugin.

Cài đặt menu đáp ứng

Trước tiên, bạn cần nhập chiều rộng của màn hình tại đó plugin sẽ bắt đầu hiển thị menu phản hồi. Giá trị mặc định là 800px sẽ 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 đã tạo ra một menu, thì 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 đáp ứng 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 bạn trên màn hình nhỏ hơn.

Đừng quên bấm vào nút ‘Cập nhật Tùy chọn Cập nhật để lưu các cài đặt của bạn.

Bây giờ bạn có thể truy cập trang web của mình 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.

Trình đơn plugin thử nghiệm

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ài đặt plugin Plugin và điều chỉnh chúng nếu cần.

Phương pháp 2: Thêm trình đơn thả xuống Chọn Menu bằng cách sử dụng Trình cắm

Một cách khác để thêm một menu đáp ứng là bằng cách thêm một 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.

Menu chọn phản hồi

Điều đầu tiên bạ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.

Khi kích hoạt, bạn cần truy cập Ngoại hình »Responsive Chọn để định cấu hình cài đặt plugin.

Chọn cài đặt menu

Bạn cần cuộn xuống ‘Kích hoạt vị trí chủ đề Phần. Theo mặc định, plugin được kích hoạt trên tất cả các vị trí chủ đề. Bạn có thể thay đổi điều đó bằng cách bật có chọn lọc cho các vị trí chủ đề cụ thể.

Đừng quên bấm vào nút lưu tất cả cài đặt để lưu các thay đổi của bạn.

Bây giờ bạn có thể truy cập trang web của mình và thay đổi kích thước màn hình trình duyệt để xem menu chọn phản ứng nhanh.

Phương pháp 3: Tạo Menu đáp ứng thân thiện với thiết bị di động với hiệu ứng Toggle

Một trong những phương pháp được sử dụng phổ biến nhất để hiển thị menu trên màn hình di động là 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 đã thực hiện điều này trước đây, thì hãy xem hướng dẫn của chúng tôi về việc dán đoạn trích từ web trong WordPress.

Trước tiên, bạn cần mở một trình soạn thảo văn bản như notepad và dán mã này.

( chức năng() {
var nav = document.getEuityById (‘trang web điều hướng’), nút, menu;
if (! nav) {
trở về;
}

nút = nav.getElementsByTagName (‘nút’) [0];
menu = nav.getElementsByTagName (‘ul’) [0];
nếu (nút!) {
trở về;
}

// Nút ẩn nếu menu bị thiếu hoặc trống.
if (! menu | |! menu.childNodes.length) {
button.style.display = ‘none’;
trở về;
}

button.onclick = function () {
if (-1 === menu. className.indexOf (‘nav-menu’)) {
menu.groupName = ‘nav-menu’;
}

if (-1! == button. className.indexOf (‘toggled-on’)) {
button. className = button. className.replace (‘toggled-on’, ”);
menu.groupName = menu. className.replace (‘toggled-on’, ”);
} khác {
button. className + = ‘toggled-on’;
menu.groupName + = ‘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àn hình 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 / wp-content / Themes / your-theme-dir / js / thư mục trên trang web WordPress của bạn.

Thay thế thư mục chủ đề của bạn bằng thư mục 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 lên 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 chủ đề của bạn..

wp_enqueue_script (‘wpb_togglemenu’, get_template_directory_uri (). ‘/js/navlation.js’, mảng (‘jquery’), ‘20160909’, true);

Bây giờ chúng tôi 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 một tập tin chủ đề..

Thực đơn
<?php wp_nav_menu (mảng (‘theme_location’ => ‘chính’, ‘menu_group’ => ‘menu hải quân’)); ?>

Chúng tôi giả định rằng vị trí chủ đề được xác định bởi chủ đề của bạn được gọi là chính. Nếu không, thì hãy sử dụng vị trí chủ đề được xác định bởi chủ đề WordPress của bạn.

Bước cuối cùng là thêm CSS để menu của chúng tôi sử dụng các lớp CSS phù hợp để chuyển đổi hoạt động khi được xem trên thiết bị di động.

/* Chức năng điều hướng */
.điều hướng chính {
lề trên: 24px;
lề trên: 1.714285714rem;
văn bản-align: trung tâm;
}
.điều hướng chính li {
lề trên: 24px;
lề trên: 1.714285714rem;
cỡ chữ: 12px;
cỡ chữ: 0,857142857rem;
chiều cao dòng: 1.42857143;
}
.điều hướng chính a {
màu: # 5e5e5e;
}
.điều hướng chính a: di chuột,
.điều hướng chính a: tập trung {
màu: # 21759b;
}
.menu chính ul.nav,
.menu chính điều hướng div.nav > ul {
không trưng bày;
}

.điều hướng chính ul.nav-menu.toggled-on,
.chuyển đổi thực đơn {
hiển thị: khối nội tuyến;
}

// CSS để sử dụng trên thiết bị di động

Màn hình @media và (min-width: 600px) {

.menu chính ul.nav,
.menu chính điều hướng div.nav > ul {
viền dưới: 1px solid #ededed;
viền trên: 1px solid #ededed;
hiển thị: nội tuyến-khối! quan trọng;
văn bản-align: trái;
chiều rộng: 100%;
}
.điều hướng chính ul {
lề: 0;
văn bản thụt lề: 0;
}
.điều hướng chính li a,
.điều hướng chính li {
hiển thị: khối nội tuyến;
trang trí văn bản: không có;
}
.điều hướng chính li a {
đáy-biên: 0;
màu: # 6a6a6a;
chiều cao dòng: 3.692307692;
biến đổi văn bản: chữ hoa;
khoảng trắng: nowrap;
}
.điều hướng chính li a: di chuột,
.điều hướng chính li a: tập trung {
màu: # 000;
}
.điều hướng chính li {
lề: 0 40px 0 0;
lề: 0 2.857142857rem 0 0;
vị trí: tương đối;
}
.điều hướng chính li ul {
lề: 0;
đệm: 0;
vị trí: tuyệt đối;
hàng đầu: 100%;
chỉ số z: 1;
chiều cao: 1px;
chiều rộng: 1px;
tràn: ẩn;
clip: orth (1px, 1px, 1px, 1px);
}
.điều hướng chính li ul ul {
đầu trang: 0;
trái: 100%;
}
.điều hướng chính ul li: di chuột > ul,
.điều hướng chính ul li: tập trung > ul,
.điều hướng chính. tập trung > ul {
biên trái: 0;
clip: kế thừa;
tràn: kế thừa;
chiều cao: thừa kế;
chiều rộng: kế thừa;
}
.điều hướng chính li ul li a {
nền: #efefef;
viền dưới: 1px solid #ededed;
hiển thị: khối;
cỡ chữ: 11px;
cỡ chữ: 0,785714286rem;
chiều cao dòng: 2.181818182;
đệm: 8px 10px;
đệm: 0,571428571rem 0,714285714rem;
chiều rộng: 180px;
chiều rộng: 12,85714286rem;
khoảng trắng: bình thường;
}
.điều hướng chính li ul li a: di chuột,
.điều hướng chính li ul li a: tập trung {
nền: # e3e3e3;
màu: # 444;
}
.chính-điều hướng .c Hiện-menu-mục > một,
.điều hướng chính .c Hiện-menu-tổ tiên > một,
.điều hướng chính .c Hiện_page_item > một,
.điều hướng chính .c Hiện_page_ancestor > một {
màu: # 636363;
font-weight: in đậm;
}
.chuyển đổi thực đơn {
không trưng bày;
}

}

Bây giờ bạn có thể truy cập trang web của mình và thay đổi kích thước màn hình trình duyệt để xem menu chuyển đổi phản ứng nhanh của bạn đang hoạt động.

Chuyển đổi xem trước menu

Xử lý sự cố: Tùy thuộc vào chủ đề WordPress của bạn, bạn có thể cần điều chỉnh CSS. Sử dụng công cụ kiểm tra phần tử để tìm ra xung đột CSS với chủ đề của bạn.

Phương pháp 4: Thêm một Menu di động trượt trong WordPress

Một kỹ thuật phổ biến khác để thêm menu di động là sử dụng menu bảng điều khiển trượt (như được hiển thị trong Phương pháp 1).

Phương pháp 4 yêu cầu bạn thêm mã vào các tệp chủ đề WordPress của mình và đó chỉ là một cách khác để thực hiện các kết quả tương tự như Phương pháp 1.

Trước tiên, bạn cần mở một trình soạn thảo văn bản đơn giản như Notepad và thêm đoạn mã sau vào một tệp văn bản trống.

(hàm ($) {
$ (‘# chuyển đổi’). chuyển đổi (
chức năng() {
$ (‘# popout’). animate ({left: 0}, ‘chậm’, function () {
$ (‘# chuyển đổi’). html (‘đóng‘);
});
},
chức năng() {
$ (‘# popout’). animate ({left: -250}, ‘chậm’, function () {
$ (‘# chuyển đổi’). html (‘đóng‘);
});
}
);
}) (jQuery);

Don Tiết quên thay thế example.com bằng tên miền của riêng bạn và 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.

Bây giờ bạn sẽ cần một hình ảnh sẽ được sử dụng như một biểu tượng menu. Biểu tượng hamburger thường được sử dụng làm biểu tượng menu. Bạn sẽ tìm thấy hàng tấn hình ảnh như vậy từ các trang web khác nhau. Chúng tôi sẽ sử dụng biểu tượng trình đơn từ thư viện Biểu tượng Tài liệu của Google.

Khi bạn tìm thấy một hình ảnh mà bạn muốn sử dụng, hãy lưu nó dưới dạng menu.png.

Tiếp theo, bạn cần mở ứng dụng khách FTP và tải tệp slidepanel.js lên thư mục / wp-content / your-theme / js /.

Nếu thư mục chủ đề của bạn không có thư mục JS, thì bạn cần tạo tiêu đề và sau đó tải tệp của bạn lên.

Sau đó, bạn cần tải tập tin menu.png lên / wp-content / Themes / your-theme / hình ảnh / thư mục.

Khi các tệp được tải lên, chúng tôi cần đảm bảo rằng chủ đề của bạn tải tệp JavaScript bạn vừa thêm. Chúng tôi sẽ đạt được điều này bằng cách thu hút tệp JavaScript.

Thêm mã này vào tập tin chủ đề của bạn..

wp_enqueue_script (‘wpb_slidepanel’, get_template_directory_uri (). ‘/js/slidepanel.js’, mảng (‘jquery’), ‘20160909’, đúng);

Bây giờ chúng tôi cần thêm mã thực tế trong tệp tiêu đề chủ đề của bạn để hiển thị menu điều hướng. Bạn nên tìm mã tương tự như thế này:

<?php wp_nav_menu (mảng (‘theme_location’ => ‘chính’, ‘menu_group’ => ‘menu hải quân’)); ?>

Bạn muốn bọc menu điều hướng hiện có bằng mã HTML để hiển thị menu bảng điều khiển trượt trên màn hình nhỏ hơn.

Chỉ

<?php wp_nav_menu (mảng (‘theme_location’ => ‘chính’, ‘menu_group’ => ‘menu hải quân’)); ?>

Lưu ý rằng menu điều hướng chủ đề của bạn vẫn còn đó. Chúng tôi vừa gói nó xung quanh HTML mà chúng tôi cần để kích hoạt menu slidepanel.

Bước cuối cùng là thêm CSS để ẩn biểu tượng hình ảnh menu trên màn hình lớn hơn. Bạn cũng sẽ cần điều chỉnh vị trí của biểu tượng menu.

Đây là một CSS mẫu mà bạn có thể sử dụng làm điểm bắt đầu:

Màn hình @media và (min-width: 769px) {
#toggle {
không trưng bày;
}

}

Màn hình @media và (chiều rộng tối đa: 768px) {
#Bật ra {
vị trí: cố định;
chiều cao: 100%;
chiều rộng: 250px;
nền: rgb (25, 25, 25);
nền: rgba (25, 25, 25, .9);
màu trắng;
đầu trang: 0px;
bên trái: -250px;
tràn: tự động;
}

#toggle {
phao: phải;
vị trí: cố định;
đầu trang: 60px;
phải: 45px;
chiều rộng: 28px;
chiều cao: 24px;

}

.menu điều hướng li {
viền dưới: 1px solid #eee;
phần đệm: 20px;
chiều rộng: 100%;
}

.menu điều hướng li: hover {
nền: #CCC;
}

.menu điều hướng li a {
màu: #FFF;
trang trí văn bản: không có;
chiều rộng: 100%;
}
}

Tùy thuộc vào chủ đề WordPress của bạn, bạn có thể cần điều chỉnh CSS để tránh xung đột.

Đây là cách nó trông trên trang web demo của chúng tôi:

Menu trượt trong Responsive trong WordPress

Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách tạo một menu WordPress đáp ứng sẵn sàng cho thiết bị di động. Bạn cũng có thể muốn xem hướng dẫn của chúng tôi về cách thêm menu đáp ứng toàn màn hình trong WordPress

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map