Các chủ đề WordPress đáp ứng trên thiết bị di động cần các menu điều hướng cũng đáp ứng trên thiết bị di động để có thể sử dụng chúng dễ dàng trên các thiết bị có màn hình nhỏ. Chủ đề Genesis WordPress tùy chỉnh này sử dụng kỹ thuật ẩn điều hướng thông thường bằng nút menu di động trên điện thoại thông minh. Kỹ thuật nút này tương tự như kỹ thuật được sử dụng bởi các chủ đề Twenty Twelve và Twenty Thirteen mặc định của WordPress.
Bản trình diễn điều hướng trên thiết bị di động
- Trang web này - chỉ cần lấy cạnh của trình duyệt của bạn và làm cho nó hẹp hơn hoặc xem nó trên điện thoại của bạn
Để biết thêm các phương pháp tạo menu điều hướng trên thiết bị di động, hãy xem Cuộc phiêu lưu trong Điều hướng thích ứng.
Bạn có thể thêm menu trang web đáp ứng vào điều hướng chính của chủ đề con Genesis bằng ba bước đơn giản. Mã tương tự có thể được sử dụng cho điều hướng phụ và tiêu đề. Đoạn mã dưới đây dành cho một trang web sử dụng HTML5 trên Genesis 2.0.
Cập nhật 18/03/14: Hiện đã có hướng dẫn cho menu điều hướng trên thiết bị di động trong tiện ích Genesis Header Right.
Ba bước để điều hướng trang web đáp ứng
- Tạo một tệp JQuery nhỏ để thêm nút điều hướng trên thiết bị di động
- Đặt hàng trước tệp jQuery trong functions.php của bạn
- Thêm hai phần phương tiện đáp ứng vào cuối style.css của bạn
Lưu ý: Đảm bảo TẮT plugin bộ nhớ cache của bạn trước khi thêm tệp mới. Bật lại sau khi mọi thứ hoạt động trở lại.
Bước 1: Tạo tệp JQuery để thêm nút menu di động
Đầu tiên chúng ta cần thêm nút bật tắt menu. Vì jQuery được sử dụng cho chức năng bật tắt, chúng tôi cũng sẽ thêm nút với jQuery. Bằng cách này, nếu trình duyệt đã tắt jQuery, nút sẽ không được thêm vào và điều hướng sẽ chỉ nằm trong một danh sách cột duy nhất, nhưng vẫn có thể sử dụng được.
Trong thư mục / genesis-sample của bạn, hãy tạo một thư mục có tên là “script”. Sau đó, sử dụng trình soạn thảo văn bản, sao chép đoạn mã dưới đây để tạo tệp jQuery, đặt tên là “drop-down-nav.js” và lưu nó vào thư mục / scripts trong chủ đề con của bạn.
jQuery( function($) {
'use strict';
// Insert mobile menu icon before the primary navigation ul
$( '<div id="menu-mobile">≡ Menu</div>' ).insertBefore( 'ul.menu-primary' );
// Add .displaynone class to ul.menu-primary to hide ul.menu-primary for small screen sizes
$( 'ul.menu-primary' ).addClass( 'displaynone' );
// Toggle nav for mobile menu
$('#menu-mobile').click (function(){
$('.menu-primary').slideToggle();
$(this).toggleClass('active');
});
});
Mã jQuery này thêm vào:
- một div với id # menu-mobile để tạo nút; nó cũng thêm một biểu tượng và từ “Menu”
- thêm một lớp .displaynone vào ul.menu-primary để có thể ẩn toàn bộ menu điều hướng ở kích thước màn hình nhỏ
- thêm mã để chuyển đổi mở và đóng menu di động.
Bước 2: Đặt tên cho tệp jQuery trong tệp functions.php của bạn
Tiếp theo xếp hàng (tải) tập lệnh jQuery bằng cách thêm mã này vào cuối functions.php của chủ đề con của bạn.
<?php
// Note: Add only code below to your functions.php
add_action( 'wp_enqueue_scripts', 'amethyst_load_mobile_nav_script' );
function amethyst_load_mobile_nav_script() {
//Add mobile button script to primary navigation menu
wp_enqueue_script( 'nav_for_mobile', get_bloginfo( 'stylesheet_directory' ) . 'https://g3f2z8v4.rocketcdn.me/scripts/drop-down-nav.js', array('jquery'), '0.5' );
}
Bước 3: Thêm kiểu vào style.css của Chủ đề của bạn
Tiếp theo, chúng tôi thêm một số mã kiểu vào style.css chủ đề con.
Đầu tiên, chúng tôi tìm phần kích thước màn hình của iPad ở chế độ dọc. Đối với chủ đề Genesis Sample, nó bắt đầu trên dòng 1571. Tìm dòng:
@media only screen and (max-width: 767px) {
Thay đổi 767px thành 768px, rồi thêm phần còn lại của mã. Đảm bảo giữ mã cột đã có trong phần này.
@media only screen and (max-width: 768px) {
/* Start Mobile Menu Navigation - Only on .nav-primary
--------------------------------------------------- */
/* Hide .nav-primary */
.nav-primary .genesis-nav-menu.displaynone {
display: none;
}
.nav-primary {
text-align: center;
}
.nav-primary #menu-mobile {
background-color: #333;
color: #999;
cursor: pointer;
display: block;
font-family: Lato, sans-serif;
font-size: 18px;
font-size: 1.8rem;
height: auto;
line-height: 18px;
padding: 20px 16px;
padding: 2rem 1.6rem;
text-transform: uppercase;
}
.nav-primary #menu-mobile:hover,
.nav-primary #menu-mobile:focus,
.nav-primary #menu-mobile:active {
background-color: #333;
color: #fff;
display: block;
}
/* Only .nav-primary is mobile */
.nav-primary .genesis-nav-menu .menu-item,
.nav-primary .genesis-nav-menu a,
.nav-primary .genesis-nav-menu .sub-menu {
text-align: center;
width: 100%;
}
.nav-primary .genesis-nav-menu .menu-item > .sub-menu {
clear: both;
margin: 0;
opacity: 1;
position: inherit;
width: 100%;
}
} /* This bracket already exists */
Thứ hai, một phần phương tiện bổ sung là cần thiết để làm cho menu điều hướng trên thiết bị di động trở lại điều hướng bình thường cho màn hình lớn hơn và để ẩn nút điều hướng trên thiết bị di động. Thêm phần này ở cuối style.css.
@media only screen and (min-width: 769px) {
/* This makes the nav menu normal again when the browser window expands */
.nav-primary .genesis-nav-menu {
display: block !important;
height: auto;
}
/* Hide Mobile Menu Button */
.nav-primary #menu-mobile {
display: none;
height: 0;
}
}
Lưu style.css và bây giờ khi bạn thay đổi kích thước trình duyệt cho trang web của mình hoặc xem nó trên máy tính bảng hoặc điện thoại thông minh, bạn sẽ thấy menu điều hướng đáp ứng trên thiết bị di động. Bạn có thể tạo kiểu tùy thích. Câu hỏi? Để lại một bình luận.
Chủ đề Genesis có sẵn ở đây.
Chỉnh sửa: Đã thêm mã cho chủ đề con Genesis 1.8.
Đây là chủ đề con của Genesis 1.8.
Thêm jQuery như trên; mã giống nhau. Bạn cũng sẽ xếp hàng jQuery trong functions.php của mình giống như trên. Tôi thích nó hơn khi các tập lệnh Superfish KHÔNG được tải, nhưng nó có vẻ hoạt động tốt với nó.
Sau đó, bạn sẽ thêm CSS này vào style.css trong phần truy vấn phương tiện hiện có cho chiều rộng 600px:
@media only screen and (max-width: 600px) {
/* Mobile Menu added */
#menu-mobile {
background-color: #f5f5f5;
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
cursor: pointer;
display: inline-block;
padding: 7px 3%;
width: 100%;
}
#menu-mobile:hover {
background-color: #fff;
}
.menu-primary.displaynone {
display: none;
}
} /* This bracket already exists */
Và sau đó thêm nó vào cuối style.css:
/* This makes the nav menu normal again when the browser window expands */
@media only screen and (min-width: 601px) {
.menu-primary {
display: block !important;
height: auto;
}
/* Hide Mobile Menu Button */
#menu-mobile {
display: none;
height: 0;
}
}
Bạn cũng có thể cần phải điều chỉnh CSS để phù hợp với các kiểu điều hướng của mình.
Đây là menu di động đã tắt tập lệnh Superfish.