WordPress添加小屏不折叠次级菜单及主导航旁登录链接求助

Hey there! Let's work through your navigation problems one by one—sounds like you're hitting a few responsive design quirks plus a conflict when trying to add a secondary nav alongside your primary menu. Here's how to sort this out:

1. Add a Non-Collapsing Login Link to Primary Navigation (Mobile) #

First, we'll hook the login/logout link directly into your primary nav, then use CSS to make it stay visible next to your logo on small screens instead of getting folded into the hamburger menu.

Step 1: Add the Link via PHP #

Add this code to your theme's functions.php file (or a child theme's functions.php to avoid losing changes on updates):

function add_persistent_login_link($items, $args) {
    // Target only the primary navigation location
    if ($args->theme_location === 'primary') {
        // Generate login/logout URL based on user status
        $auth_url = is_user_logged_in() ? wp_logout_url() : wp_login_url();
        $auth_text = is_user_logged_in() ? 'Logout' : 'Login';
        
        // Create the menu item (adjust classes to match your theme's menu items)
        $login_item = '<li class="menu-item menu-item-login-link"><a href="' . esc_url($auth_url) . '">' . esc_html($auth_text) . '</a></li>';
        
        // Insert the link at the START of the primary nav (swap $items . $login_item to put it at the end)
        $items = $login_item . $items;
    }
    return $items;
}
add_filter('wp_nav_menu_items', 'add_persistent_login_link', 10, 2);

Step 2: Style It for Mobile #

Add this CSS to your theme's customizer (Appearance > Customize > Additional CSS) or your child theme's style.css file:

/* Adjust the max-width to match your theme's mobile breakpoint */
@media (max-width: 768px) {
    /* Keep the login link visible next to the logo/hamburger */
    .menu-item-login-link {
        position: absolute;
        top: 15px; /* Match your logo's vertical position */
        right: 70px; /* Leave space for the hamburger menu */
        display: block !important;
        margin: 0;
    }
    
    /* Ensure the rest of the primary nav still collapses normally */
    .primary-navigation ul:not(.toggled) {
        display: none;
    }
}

Tweak the top and right values to align perfectly with your logo and hamburger menu.

2. Create a Non-Collapsing Secondary Navigation (Mobile) #

If your theme doesn't already support a secondary menu location, we'll register one first, then style it to stay visible on mobile.

Step 1: Register the Secondary Menu Location #

Add this to your functions.php file:

function register_custom_nav_menus() {
    register_nav_menus(array(
        'primary'   => __('Primary Navigation', 'your-theme-slug'),
        'secondary' => __('Secondary Navigation', 'your-theme-slug')
    ));
}
add_action('init', 'register_custom_nav_menus');

Replace your-theme-slug with your actual theme's slug (you can find this in your theme's style.css at the top).

Step 2: Output Both Navigations in Your Header #

Open your theme's header.php file (or the template part that handles navigation, e.g., template-parts/navigation/navigation-primary.php). Add the secondary nav code next to your primary nav code—not replacing it. For example:

<!-- Primary Navigation -->
<nav class="primary-navigation" role="navigation">
    <?php
    wp_nav_menu(array(
        'theme_location' => 'primary',
        'menu_class'     => 'primary-menu',
        'fallback_cb'    => false,
    ));
    ?>
</nav>

<!-- Secondary Navigation -->
<nav class="secondary-navigation" role="navigation">
    <?php
    wp_nav_menu(array(
        'theme_location' => 'secondary',
        'menu_class'     => 'secondary-menu',
        'fallback_cb'    => false,
    ));
    ?>
</nav>

Step 3: Style the Secondary Nav for Mobile #

Add this CSS to keep it visible on small screens:

@media (max-width: 768px) {
    .secondary-navigation {
        display: block !important;
        margin: 10px 0; /* Adjust spacing as needed */
    }
    
    .secondary-menu {
        display: flex;
        gap: 15px;
        list-style: none;
        padding: 0;
        margin: 0;
        flex-wrap: wrap; /* Let items wrap if needed */
    }
    
    .secondary-menu a {
        text-decoration: none;
        /* Match your theme's link styles */
    }
}

3. Fix: Primary Navigation Disappears When Adding Secondary Nav #

This almost always happens because you're replacing the primary nav code instead of adding the secondary nav alongside it. Double-check these things:

• In header.php, ensure you have two separate wp_nav_menu() calls—one for theme_location => 'primary' and one for theme_location => 'secondary'.
• Check your theme's Customizer (Appearance > Customize > Menus) to make sure both the Primary and Secondary menus are assigned to their respective locations.
• If your theme uses a custom navigation walker or template part, verify you haven't modified that file to remove the primary nav output.

内容的提问来源于stack exchange，提问作者Omer Yaqub