【发布时间】：2020-06-06 00:07:12
【问题描述】：
我正在尝试为网站创建额外的导航菜单。我首先遵循了一些指南，但已恢复复制粘贴主题导航栏以进行调试，但这并没有解决我的问题。
当我向 WordPress 菜单添加子菜单时，这些子菜单只会显示为菜单下方的菜单项，而不是下拉菜单。
查看网站https://myrightdev.funka.website/
我可以从 chrome 开发工具中看到主导航栏（带有徽标的导航栏）有一个 for 菜单项。但我不确定在代码中插入的位置。详情见我的header.php，二级导航菜单名为secondary_navigation
<?php
/**
* Header file for the Twenty Twenty WordPress default theme.
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package WordPress
* @subpackage Twenty_Twenty
* @since Twenty Twenty 1.0
*/
?><!DOCTYPE html>
<html class="no-js" <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="profile" href="https://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php
wp_body_open();
?>
<header id="site-header" class="header-footer-group" role="banner">
<?php
if (has_nav_menu('secondary_navigation') || !has_nav_menu('expanded')) {
?>
<div class="header-navigation-wrapper">
<nav class="secondary-menu-wrapper"
>
<ul class="secondary-menu reset-list-style">
<?php
if (has_nav_menu('secondary_navigation')) {
wp_nav_menu(array(
'container' => '',
'items_wrap' => '%3$s',
'menu_class' => 'secondaryMenuClass',
'theme_location' => 'secondary_navigation',
));
} elseif (!has_nav_menu('expanded')) {
wp_list_pages(
array(
'match_menu_classes' => true,
'show_sub_menu_icons' => true,
'title_li' => false,
'walker' => new TwentyTwenty_Walker_Page(),
)
);
}
?>
</ul>
</nav>
</div>
<?php
}
?>
<div class="header-inner section-inner">
<div class="header-titles-wrapper">
<?php
// Check whether the header search is activated in the customizer.
$enable_header_search = get_theme_mod('enable_header_search', true);
if (true === $enable_header_search) {
?>
<button class="toggle search-toggle mobile-search-toggle" data-toggle-target=".search-modal"
data-toggle-body-class="showing-search-modal" data-set-focus=".search-modal .search-field"
aria-expanded="false">
<span class="toggle-inner">
<span class="toggle-icon">
<?php twentytwenty_the_theme_svg('search'); ?>
</span>
<span class="toggle-text"><?php _e('Search', 'twentytwenty'); ?></span>
</span>
</button><!-- .search-toggle -->
<?php } ?>
<div class="header-titles">
<?php
// Site title or logo.
twentytwenty_site_logo();
// Site description.
twentytwenty_site_description();
?>
</div><!-- .header-titles -->
<button class="toggle nav-toggle mobile-nav-toggle" data-toggle-target=".menu-modal"
data-toggle-body-class="showing-menu-modal" aria-expanded="false"
data-set-focus=".close-nav-toggle">
<span class="toggle-inner">
<span class="toggle-icon">
<?php twentytwenty_the_theme_svg('ellipsis'); ?>
</span>
<span class="toggle-text"><?php _e('Menu', 'twentytwenty'); ?></span>
</span>
</button><!-- .nav-toggle -->
</div><!-- .header-titles-wrapper -->
<div class="header-navigation-wrapper">
<?php
if (has_nav_menu('primary') || !has_nav_menu('expanded')) {
?>
<nav class="primary-menu-wrapper" aria-label="<?php esc_attr_e('Horizontal', 'twentytwenty'); ?>"
role="navigation">
<ul class="primary-menu reset-list-style">
<?php
if (has_nav_menu('primary')) {
wp_nav_menu(
array(
'container' => '',
'items_wrap' => '%3$s',
'theme_location' => 'primary',
)
);
} elseif (!has_nav_menu('expanded')) {
wp_list_pages(
array(
'match_menu_classes' => true,
'show_sub_menu_icons' => true,
'title_li' => false,
'walker' => new TwentyTwenty_Walker_Page(),
)
);
}
?>
</ul>
</nav><!-- .primary-menu-wrapper -->
<?php
}
if (true === $enable_header_search || has_nav_menu('expanded')) {
?>
<div class="header-toggles hide-no-js">
<?php
if (has_nav_menu('expanded')) {
?>
<div class="toggle-wrapper nav-toggle-wrapper has-expanded-menu">
<button class="toggle nav-toggle desktop-nav-toggle" data-toggle-target=".menu-modal"
data-toggle-body-class="showing-menu-modal" aria-expanded="false"
data-set-focus=".close-nav-toggle">
<span class="toggle-inner">
<span class="toggle-text"><?php _e('Menu', 'twentytwenty'); ?></span>
<span class="toggle-icon">
<?php twentytwenty_the_theme_svg('ellipsis'); ?>
</span>
</span>
</button><!-- .nav-toggle -->
</div><!-- .nav-toggle-wrapper -->
<?php
}
if (true === $enable_header_search) {
?>
<div class="toggle-wrapper search-toggle-wrapper">
<button class="toggle search-toggle desktop-search-toggle"
data-toggle-target=".search-modal" data-toggle-body-class="showing-search-modal"
data-set-focus=".search-modal .search-field" aria-expanded="false">
<span class="toggle-inner">
<?php twentytwenty_the_theme_svg('search'); ?>
<span class="toggle-text"><?php _e('Search', 'twentytwenty'); ?></span>
</span>
</button><!-- .search-toggle -->
</div>
<?php
}
?>
</div><!-- .header-toggles -->
<?php
}
?>
</div><!-- .header-navigation-wrapper -->
</div><!-- .header-inner -->
<?php
// Output the search modal (if it is activated in the customizer).
if (true === $enable_header_search) {
get_template_part('template-parts/modal-search');
}
?>
</header><!-- #site-header -->
<?php
// Output the menu modal.
get_template_part('template-parts/modal-menu');
我已尽力复制二级导航菜单下方的标准二十二十主题菜单的菜单功能。关于如何使这些子菜单项表现得像二十二十个菜单上的子菜单项的任何想法？
【问题讨论】：
-
这似乎更像是一个样式问题？您的屏幕截图显示的两个菜单具有 包含在
<ul class="sub-menu">中的子菜单项 - 这是您通过使用wp_nav_menu和默认导航菜单步行器获得的默认功能。但是任何类型的 样式 都会使这些子菜单最初隐藏，并且仅在父项悬停时才显示它们，似乎完全不存在。 -
谢谢，但即使我使用与主菜单中使用的完全相同的 CSS 类，我仍然会遇到相同的错误。不知道发生了什么
-
“不确定发生了什么” - 我们也不能，你刚才所说的。你需要解释或展示你做了什么确切。