如何在菜单代码中添加属性

时间:2016-05-22 作者:pagol

我想制作一个带有悬停动画的菜单。我的HTML语法如下所示:

<ul class="menus">
  <li class="current"><a href="#" data-hover="Home">Home</a></li>
  <li><a href="#" data-hover="About Us">About Us</a></li>
  <li><a href="#" data-hover="Blog">Blog</a></li>
  <li><a href="#" data-hover="Services">Services</a></li>
  <li><a href="#" data-hover="Products">Products</a></li>
  <li><a href="#" data-hover="Contact">Contact</a></li>
</ul>
如何添加数据属性,如data-hover="About Us" 为每个菜单动态?

2 个回复
最合适的回答,由SO网友:pagol 整理而成

我找到了一个小而好的解决方案。

add_filter( \'nav_menu_link_attributes\', \'cfw_add_data_atts_to_nav\', 10, 4 );
function cfw_add_data_atts_to_nav( $atts, $item, $args )
{
    $atts[\'data-hover\'] = $item->title;
    return $atts;
}
我对它进行了测试,效果很好。

SO网友:Alex

如果希望WordPress动态添加这些项,则需要向菜单声明中添加自定义walker类。

查找菜单在主题中的声明位置,并在主题中添加自定义walker类名wp_nav_menu 功能:

wp_nav_menu( array ( \'menu\'=> \'main-menu\', \'container\'=> \'\', \'walker\' => new Description_Walker));
菜单可能有一组值,但只需添加一行:

\'walker\' => new Description_Walker
然后,您需要创建自定义walker类来扩展menu类。这是一个巨大的例子:

wp_nav_menu( array(
  \'menu\'   => \'Something custom walker\',
  \'walker\' => new WPDocs_Walker_Nav_Menu()
) );

/**
 * Custom walker class.
 */
class WPDocs_Walker_Nav_Menu extends Walker_Nav_Menu {

    /**
     * Starts the list before the elements are added.
     *
     * Adds classes to the unordered list sub-menus.
     *
     * @param string $output Passed by reference. Used to append additional content.
     * @param int    $depth  Depth of menu item. Used for padding.
     * @param array  $args   An array of arguments. @see wp_nav_menu()
     */
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        // Depth-dependent classes.
        $indent = ( $depth > 0  ? str_repeat( "\\t", $depth ) : \'\' ); // code indent
        $display_depth = ( $depth + 1); // because it counts the first submenu as 0
        $classes = array(
            \'sub-menu\',
            ( $display_depth % 2  ? \'menu-odd\' : \'menu-even\' ),
            ( $display_depth >=2 ? \'sub-sub-menu\' : \'\' ),
            \'menu-depth-\' . $display_depth
        );
        $class_names = implode( \' \', $classes );

        // Build HTML for output.
        $output .= "\\n" . $indent . \'<ul class="\' . $class_names . \'">\' . "\\n";
    }

    /**
     * Start the element output.
     *
     * Adds main/sub-classes to the list items and links.
     *
     * @param string $output Passed by reference. Used to append additional content.
     * @param object $item   Menu item data object.
     * @param int    $depth  Depth of menu item. Used for padding.
     * @param array  $args   An array of arguments. @see wp_nav_menu()
     * @param int    $id     Current item ID.
     */
    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        global $wp_query;
        $indent = ( $depth > 0 ? str_repeat( "\\t", $depth ) : \'\' ); // code indent

        // Depth-dependent classes.
        $depth_classes = array(
            ( $depth == 0 ? \'main-menu-item\' : \'sub-menu-item\' ),
            ( $depth >=2 ? \'sub-sub-menu-item\' : \'\' ),
            ( $depth % 2 ? \'menu-item-odd\' : \'menu-item-even\' ),
            \'menu-item-depth-\' . $depth
        );
        $depth_class_names = esc_attr( implode( \' \', $depth_classes ) );

        // Passed classes.
        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $class_names = esc_attr( implode( \' \', apply_filters( \'nav_menu_css_class\', array_filter( $classes ), $item ) ) );

        // Build HTML.
        $output .= $indent . \'<li id="nav-menu-item-\'. $item->ID . \'" class="\' . $depth_class_names . \' \' . $class_names . \'">\';

        // Link attributes.
        $attributes  = ! empty( $item->attr_title ) ? \' title="\'  . esc_attr( $item->attr_title ) .\'"\' : \'\';
        $attributes .= ! empty( $item->target )     ? \' target="\' . esc_attr( $item->target     ) .\'"\' : \'\';
        $attributes .= ! empty( $item->xfn )        ? \' rel="\'    . esc_attr( $item->xfn        ) .\'"\' : \'\';
        $attributes .= ! empty( $item->url )        ? \' href="\'   . esc_attr( $item->url        ) .\'"\' : \'\';
        $attributes .= \' class="menu-link \' . ( $depth > 0 ? \'sub-menu-link\' : \'main-menu-link\' ) . \'"\';

        // Build HTML output and pass through the proper filter.
        $item_output = sprintf( \'%1$s<a%2$s>%3$s%4$s%5$s</a>%6$s\',
            $args->before,
            $attributes,
            $args->link_before,
            apply_filters( \'the_title\', $item->title, $item->ID ),
            $args->link_after,
            $args->after
        );
        $output .= apply_filters( \'walker_nav_menu_start_el\', $item_output, $item, $depth, $args );
    }
}
您可以看到这样的部分:

// Build HTML.
$output .= $indent . \'<li id="nav-menu-item-\'. $item->ID . \'" class="\' . $depth_class_names . \' \' . $class_names . \'">\';
只需添加data-hover="\' .$item->title. \'" 或者类似的东西,它会自动添加你想要的东西。

我的代码来自:

此外,这里还有一个关于在需要时制作walker课程的教程:

相关推荐

WordPress中声明SplitMenuWalker::Walk($Elements,$max_Depth)时出现警告

我开始在WordPress网站上收到以下错误:警告:SplitMenuWalker::walk($elements,$max\\u depth)的声明应与/home/relati67/public\\u html/wp content/themes/mentis/inc/mega menu/split menu中的walk::walk($elements,$max\\u depth,$args)兼容。php第0行我不知道在这里该怎么办。我发现了一个具有类似内容的线程,但错误指向特定行(不是第0行),并且不