Menu tiêu đề đáp ứng trên thiết bị di động cho Chủ đề mẫu của Genesis

(Lưu ý: Hướng dẫn này dành cho các chủ đề Genesis cũ hơn; nó không dành cho bất kỳ chủ đề nào được coi là “sẵn sàng trợ năng”.)

Nhiều bạn đã yêu cầu một hướng dẫn, tương tự như menu Genesis đáp ứng trước đó của tôi, để thêm menu điều hướng trên thiết bị di động vào tiện ích Header Right. Mặc dù nhiều chủ đề Genesis WordPress hiện có menu điều hướng trên thiết bị di động, nhưng cái này dành cho chủ đề Genesis Sample. Có menu điều hướng trên thiết bị di động dễ sử dụng là một phần quan trọng trong chiến lược thiết kế trang web trên thiết bị di động của bạn.

Một liên kết đến mã dưới dạng Github Gist nằm ở cuối.

Như trong hướng dẫn trước, bạn có thể thêm menu tiêu đề di động trong ba bước.

Ba bước để điều hướng trang web đáp ứng

Có ba bước bạn cần thực hiện để thêm menu di động vào tiêu đề của mình:

  1. Tạo một tệp JQuery nhỏ để thêm biểu tượng điều hướng trên điện thoại di động
  2. Đặt hàng trước tệp jQuery trong functions.php của bạn
  3. Thêm phần phương tiện đáp ứng vào cuối style.css của bạn

Bước 1: Tạo tệp JQuery để thêm biểu tượng menu di động

  • Trước tiên, hãy điều hướng đến thư mục chủ đề con của bạn (Nếu bạn đang sử dụng chủ đề Genesis Sample, đây là / wp-content / themes / genesis-sample) và tạo một thư mục mới có tên “script”.
  • Sao chép mã jQuery bên dưới vào một trình soạn thảo văn bản và lưu nó dưới dạng “header-mobile-nav.js”.
  • Lưu nó vào /genesis-sample/scripts/ thư mục hoặc /scripts/ thư mục chủ đề con của bạn .
jQuery( function($) {
        'use strict';

	// Insert mobile menu before the Genesis Header Right widget navigation menu
	$( '<div id="header-mobile-menu">&#x2261; Menu</div>' ).insertBefore( 'nav.nav-header ul.genesis-nav-menu' );
	
	// Add .hide class to .nav-header .genesis-nav-menu to hide it for small screen sizes.
	$( 'nav.nav-header ul.genesis-nav-menu' ).addClass( 'hide' );

	// Toggle Header Right widget navigation menu for mobile menu.
	$('#header-mobile-menu').on( 'click', function() {
		$('nav.nav-header ul.genesis-nav-menu').slideToggle();
		$(this).toggleClass('active');
	});
});

Mã header-mobile-nav.js này thêm vào:

  • một div với id # header-mobile-menu để tạo nút; nó cũng thêm một biểu tượng và từ “Menu”
  • thêm một lớp .hide vào ”.nav-header .genesis-nav-menu”, để có thể ẩn menu điều hướng tiêu đề ở kích thước màn hình nhỏ
  • thêm mã để chuyển đổi mở và đóng menu # header-mobile-menu.

Bước 2: Đặt trước jQuery Script

Tiếp theo, bạn cần yêu cầu chủ đề của bạn sử dụng tập lệnh jQuery, vì vậy bạn sắp xếp nó. Bạn thêm mã bên dưới vào functions.php của chủ đề con của bạn.

Nếu bạn đang sử dụng chủ đề Genesis Sample sử dụng phông chữ của Google, bạn có thể thêm dòng danh sách menu vào chức năng đó, như bên dưới.

<?php
// Note: Add only code below to your functions.php

add_action( 'wp_enqueue_scripts', 'amethyst_enqueue_scripts' );
function amethyst_enqueue_scripts() {

	//Add mobile button script to Header Right widget navigation menu
    wp_enqueue_script( 'header_nav_for_mobile', get_bloginfo( 'stylesheet_directory' ) . 'https://g3f2z8v4.rocketcdn.me/scripts/header-mobile-nav.js', array('jquery'), '1.0.0' );
}

Bước 3. Thêm CSS

Bạn có thể thêm CSS sau vào cuối biểu định kiểu của mình - style.css hoặc vào Giao diện> Tùy chỉnh> CSS bổ sung.

@media only screen and (max-width: 768px) {

	/* Start Header Right Widget Mobile Menu Navigation
	 --------------------------------------------------- */

	.nav-header .genesis-nav-menu.hide {
		display: none;
	}

	#header-mobile-menu {
		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-align: center;
		text-transform: uppercase;
	}

	#header-mobile-menu:hover,
	#header-mobile-menu:focus,
	#header-mobile-menu:active {
		color: #333;
		display: block;
	}

	.nav-header .genesis-nav-menu .menu-item,
	.nav-header .genesis-nav-menu a,
	.nav-header .genesis-nav-menu .sub-menu {
		border: 0;
		text-align: center;
		width: 100%;
	}

	.nav-header .genesis-nav-menu .menu-item > .sub-menu {
		clear: both;
		margin: 0;
		opacity: 1;
		position: inherit;
		width: 100%;
	}

}


@media only screen and (min-width: 769px) {

	/* This makes the header nav menu normal again when the browser window expands */
	.nav-header .genesis-nav-menu { 
		display: block !important; 
		height: auto; 
	}

	/* Hide Header Mobile Menu Button */
	#header-mobile-menu {
		display: none;
		height: 0;
	}

}

Giải thích CSS:

Phần phương tiện đầu tiên @media only screen and (max-width: 768px) { thêm CSS cho menu di động cho kích thước màn hình nhỏ hơn 768px. Phần còn lại của CSS chỉ là tạo kiểu cho các liên kết menu để tất cả chúng đều mở rộng cùng một lúc, mở rộng toàn bộ chiều rộng của màn hình, v.v. Phần media thứ hai @media only screen and (min-width: 769px) { trả chủ đề về menu mặc định ở kích thước màn hình bình thường.

Mã này cũng có trong Github Gist - Mobile Responsive Header Menu for Genesis Sample Theme --- http://amethystwebsitedesign.com/mobile-responsive-header-menu-for-genesis-sample-theme/ · GitHub.

Nếu bạn thích hướng dẫn này, hãy đăng ký bên dưới để nhận thêm hướng dẫn trong email của bạn.

Một số lưu ý khác về menu điều hướng di động này

  • Các menu điều hướng này sử dụng văn bản có biểu tượng để xác định menu di động vì khi tôi tạo menu cho khách hàng lần đầu tiên, chúng không liên quan biểu tượng ba dòng hoặc biểu tượng bánh hamburger với menu điều hướng, mặc dù tất cả đều sử dụng điện thoại thông minh (Các ứng dụng thường sử dụng .)
    Kể từ đó, một số thử nghiệm khả năng sử dụng cũng cho thấy nhiều người dùng vẫn chưa quen với biểu tượng ba dòng và các lựa chọn khác được khuyến nghị. Bạn có thể đọc thêm về nghiên cứu trên Exis Web; cũng có một nghiên cứu khác được liên kết ở cuối tài liệu tham khảo này.
  • Menu này sử dụng văn bản “Menu” và nó không được dịch, chủ yếu để làm cho mã dễ theo dõi hơn. Nếu bạn cần nó bằng một ngôn ngữ khác, hãy tự dịch “Menu” trong mã jQuery trước khi lưu nó. Nếu bạn cần một tệp có thể dịch được, tôi khuyên bạn chỉ nên sử dụng biểu tượng có đường viền xung quanh nó theo nghiên cứu ở trên.
  • Ký tự HTML &#x2261; có nghĩa là “tương đương với”, vì vậy nếu nó được đọc bởi trình đọc màn hình, mặc dù nó có thể không đúng về mặt kỹ thuật, nhưng nó không phải là lựa chọn tồi nhất trước văn bản “Menu”.