在自定义主题WordPress上添加下拉菜单

Question

我正在尝试为正在开发的主题创建下拉菜单，但是子菜单项显示在父菜单项旁边。

我将其保存为子菜单项

这就是我们的程序应该在我们周围的样子，现在简直是混乱

这就是我在functions.php中导航的内容

function register_my_menus() {
  register_nav_menus(
    array(
      'header-menu' => __( 'Header Menu' ),
      'extra-menu' => __( 'Extra Menu' )
    )
  );
}

add_action( 'init', 'register_my_menus' );

   $defaults = array(
    'default-image'          => '',
    'width'                  => 0,
    'height'                 => 0,
    'flex-height'            => false,
    'flex-width'             => false,
    'uploads'                => false,
    'random-default'         => false,
    'header-text'            => true,
    'default-text-color'     => '',
    'wp-head-callback'       => '',
    'admin-head-callback'    => '',
    'admin-preview-callback' => '',
);
add_theme_support( 'custom-header', $defaults );

并在我的header.php中

<div id="menu">
    <ul>
        <li id="access"><?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'menu-header' ) ); ?></li>
    </ul>
</div>

我似乎无法在网上找到任何东西。 任何帮助，将不胜感激！

Answer 1

您必须为菜单创建类，并且必须将这些类应用于菜单。 您可以使用Walker将几个条件类添加到菜单中。

有关更多详细信息，请参阅

https://developer.wordpress.org/reference/functions/wp_nav_menu/

wp_nav_menu( array( 
  'sort_column' => 'menu_order', 
  'container_class' => 'menu-header',
  'menu_class' => 'your_class' //you can add your class here,
  'container' => 'div',
  'menu' => 'main-nav',
  'theme_location'    => 'my-header-menu', // Select the menu name registered in functions.php
  'walker'            => "", // Instance of a custom walker class to add conditional classes into your nav menu
));

Answer 2

您需要向菜单添加不同的类。 并将适当的CSS应用于position（ left: (n)px; top: (n)px; ）这些类。

wp_nav_menu( array( 
  'sort_column' => 'menu_order', 
  'container_class' => 'menu-header',
  'menu_class' => 'custom_menu' //add class,
  'container' => 'div',
  'menu' => 'main-nav',
));

希望它能对您有所帮助:)

Answer 3

将此代码添加到functions.php文件中

add_action('wp_enqueue_scripts', 'buena_child_scripts');

function register_flatlearn_menu(){
  //register menu
  register_nav_menus(
    array(
      'primary-menu' => __('Primary Menu'),
      'footer-menu' => __('Footer Menu')
      )
    );
  }
  //attach with action hook
  add_action("init","register_flatlearn_menu");

在此代码之后，将以下代码添加到header.php文件中，如下所示：

<nav>
  <?php
     wp_nav_menu(array(
       'sort_column' => 'menu_order',
       'menu-id' =>'primary-menu',
       'depth' => 0,
       'container' =>'false' ,
       'menu_class' => 'nav topnav',
     ));
  ?>
</nav>