WordPress新手求助：如何添加自定义属性并创建指定样式菜单？

Hey there! As a fellow WordPress enthusiast, I’ve built custom menus just like this before—let’s break down exactly how to get that styled, data-rich menu working for you:

First, head over to Appearance > Menus in your WP dashboard:

• Create (or edit) your primary menu with the "Home", "About", "Resume", "Portfolio" items you need.
• Turn on the "CSS Classes" option under Screen Options (top-right corner) — this lets you add custom classes to each menu item (e.g., menu-home, menu-about). We’ll use these to map the Font Awesome icons later.
• Note down each menu item’s ID (you can find this by hovering over the "Edit" link for a menu item—look for post=XX in the URL, where XX is the ID) or use the item’s slug (the friendly URL name).

WordPress uses "Walker" classes to generate menu HTML, so we’ll create a custom one to inject those data-id, data-slug attributes and style the links properly.

Add this code to your theme’s functions.php file (make sure to back up the file first!):

class Custom_Menu_Walker extends Walker_Nav_Menu {
    // Start outputting a single menu item's <li> tag
    function start_el(&$output, $item, $depth = 0, $args = null, $id = 0) {
        // Get menu item details
        $item_id = $item->ID;
        $item_slug = sanitize_title($item->title);
        $active_class = (in_array('current-menu-item', $item->classes)) ? ' cv-active' : '';
        
        // Build the <li> tag with custom data attributes
        $output .= '<li class="links-to-floor-li' . $active_class . '" data-id="' . $item_id . '" data-slug="' . $item_slug . '">';
        
        // Map menu item classes to Font Awesome icons
        $icon_class = '';
        if (in_array('menu-home', $item->classes)) {
            $icon_class = 'fa fa-home';
        } elseif (in_array('menu-about', $item->classes)) {
            $icon_class = 'fa fa-user';
        } elseif (in_array('menu-resume', $item->classes)) {
            $icon_class = 'fa fa-graduation-cap';
        } elseif (in_array('menu-portfolio', $item->classes)) {
            $icon_class = 'fa fa-briefcase';
        }
        
        // Build the <a> tag with icon, tooltip, and title
        $title = esc_attr($item->title);
        $url = esc_attr($item->url);
        $output .= '<a href="' . $url . '" class="' . $icon_class . ' tooltip-menu" title="' . strtoupper($title) . '">';
        $output .= $title;
        $output .= '</a>';
    }
    
    // Close the <li> tag
    function end_el(&$output, $item, $depth = 0, $args = null) {
        $output .= '</li>';
    }
}

What this does: #

• Adds data-id (using the menu item’s WordPress ID) and data-slug (a sanitized version of the item title) to each <li>
• Automatically adds the cv-active class to the current menu item
• Maps your custom menu classes to the correct Font Awesome icons
• Adds the tooltip-menu class and uppercase title attribute to each link

Now modify your existing menu code to use our custom walker:

<nav id="cv-main-menu">
    <?php
    $args = array(
        'theme_location' => 'primary',
        'walker' => new Custom_Menu_Walker(),
        'container' => false, // Remove the default <div> wrapper
        'items_wrap' => '<ul>%3$s</ul>' // Match your desired <ul> structure
    );
    wp_nav_menu($args);
    ?>
</nav>

The container => false and items_wrap parameters ensure we get the exact <ul> structure from your example, no extra wrappers.

To make the tooltip and active styling work, add this CSS to your theme’s style.css or customizer’s Additional CSS section:

/* Tooltip styling */
.tooltip-menu {
    position: relative;
}
.tooltip-menu::after {
    content: attr(title);
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.3s;
    white-space: nowrap;
}
.tooltip-menu:hover::after {
    opacity: 1;
}

/* Active menu item styling */
.links-to-floor-li.cv-active a {
    /* Add your active state styles here—e.g., color, border, etc. */
    color: #your-active-color;
}

• Make sure Font Awesome is loaded in your theme (you can add it via functions.php with wp_enqueue_style() or use a plugin if needed)
• Double-check that you added the custom CSS classes (menu-home, etc.) to each menu item in the admin
• Test the menu to confirm the data-id/data-slug attributes are present (right-click > Inspect Element to verify)

内容的提问来源于stack exchange，提问作者Sheraz Akram