Vị trí chủ đề điều hướng tùy chỉnh trong Genesis

Trong nhóm Genesis Facebook, một người dùng đã hỏi:

Đây là một câu hỏi cho các nhà phát triển Genesis ở đây: Tôi nhận thấy rằng khi tôi tạo vị trí menu tùy chỉnh và menu tùy chỉnh bằng cách sử dụng hàm wp_nav_menu (), hỗ trợ menu con không khả dụng cho các menu đó. Làm cách nào để tạo menu tùy chỉnh trong genesis có hỗ trợ menu con?

Hướng dẫn chỉ dành cho thành viên này cung cấp các bước để đăng ký vị trí chủ đề điều hướng tùy chỉnh và hiển thị menu được chỉ định cho vị trí đó trong tiêu đề trang với đánh dấu thích hợp và liên kết bỏ qua tương ứng trong Genesis.Custom Menu

Bước 1

Thêm custom vị trí chủ đề menu.

Chỉnh sửa .config/theme-supports.php

Thay đổi

'genesis-after-entry-widget-area' => '',
'genesis-footer-widgets'          => 3,
'genesis-menus'                   => [
	'primary'   => __( 'Header Menu', 'genesis-sample' ),
	'secondary' => __( 'Footer Menu', 'genesis-sample' ),
],

đến

'genesis-after-entry-widget-area' => '',
'genesis-footer-widgets'          => 3,
'genesis-menus'                   => [
	'primary'   => __( 'Header Menu', 'genesis-sample' ),
	'secondary' => __( 'Footer Menu', 'genesis-sample' ),
	'custom' => __( 'Custom Menu', 'genesis-sample' ),
],

Bước 2

Thêm phần sau vào cuối .functions.php

add_action( 'genesis_header', 'sk_custom_do_nav', 12 );
/**
 * Echoes the "Custom Navigation" menu.
 */
function sk_custom_do_nav() {

    // Do nothing if menu not supported.
    if ( ! genesis_nav_menu_supported( 'custom' ) || ! has_nav_menu( 'custom' ) ) {
        return;
    }

    $class = 'menu genesis-nav-menu menu-custom';
    if ( genesis_superfish_enabled() ) {
        $class .= ' js-superfish';
    }

    genesis_nav_menu( array(
        'theme_location' => 'custom',
        'menu_class'     => $class,
    ) );

}

// Add typical attributes for navigation elements.
add_filter( 'genesis_attr_nav-custom', 'genesis_attributes_nav' );

add_filter( 'genesis_attr_nav-custom', 'sk_skiplinks_attr_nav_custom' );
/**
 * Adds ID markup to custom navigation.
 *
 * @param array $attributes Existing attributes for custom navigation element.
 * @return array Amended attributes for custom navigation element.
 */
function sk_skiplinks_attr_nav_custom( $attributes ) {

    $attributes['id'] = 'genesis-nav-custom';

    return $attributes;

}

add_filter( 'genesis_skip_links_output', 'sk_skip_links_output' );
/**
 * Adds skip link for custom navigation.
 *
 * @param array $links Exiting skiplinks.
 * @return array Amended skiplinks.
 */
function sk_skip_links_output( $links ) {

    if ( genesis_nav_menu_supported( 'custom' ) && has_nav_menu( 'custom' ) ) {
        $links['genesis-nav-custom'] = __( 'Skip to custom navigation', 'genesis' );
    }

    return $links;

}

Bước 3

Hãy thêm Menu tùy chỉnh vào danh sách các menu được kết hợp (có menu Chính theo mặc định) trong menu di động.

trong sự thay đổiconfig/responsive-menus.php

return [
	'script' => [
		'menuClasses' => [
			'others' => [ '.nav-primary' ],
		],
	],
	'extras' => [
		'media_query_width' => '960px',
	],
];

đến

return [
	'script' => [
		'menuClasses' => [
			'combine' => [
				'.nav-primary',
				'.nav-custom',
			],
			'others' => [ '.nav-primary' ],
		],
	],
	'extras' => [
		'media_query_width' => '960px',
	],
];

Bước 4

Thêm phần sau vào chủ đề con :style.css

@media only screen and (min-width: 960px) {
    .nav-custom .genesis-nav-menu a {
        padding-left: 15px;
        padding-right: 15px;
    }
}

Bước 5

Tại Giao diện> Menu> Quản lý vị trí, chỉ định menu mong muốn của bạn trong vị trí Menu tùy chỉnh.