如何使用wp_NAV_MENU函数将html属性添加到“ul”html标记中?

时间:2017-04-21 作者:hmtkyn

我正在努力改进我的学习WordPress是一个非常新的主题。我的问题是,

With the function "wp_nav_menu" into the "ul" tag,

data-hover = "dropdown" data-animations = "zoomIn zoomIn zoomIn zoomIn"

I want to add html attributes, how can I do that ?,

我的目标是制作一个悬停下拉菜单。

我在下面添加了图片和源代码。

事先非常感谢您的帮助。

enter image description here

enter image description here

3 个回复
最合适的回答,由SO网友:MagniGeeks Technologies 整理而成

wp_nav_menu 所有文档都写在那里了。

您只需要在参数“container”中输入“ul”。

因此,修改后的函数调用将是,

wp_nav_menu( array(
    \'theme_location\' => \'main-menu\',
    \'container => \'ul\',
    \'container_id\' => \'\', // put id of ul if needed
    \'menu_class\' => \'\' // as needed
) );
对于需要使用Walker类的自定义属性,正如在函数中使用的那样,

wp_nav_menu( array(
    \'theme_location\' => \'main-menu\',
    \'container => \'ul\',
    \'container_id\' => \'\', // put id of ul if needed
    \'walker\' => new MainMenu_Walker()
) );
然后为您编写自定义walker类菜单,

/**
 * Custom walker class.
 */
class MainMenu_Walker 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 . \'" data-hover="dropdown" data-animations="zoomIn zoomIn zoomIn zoomIn">\' . "\\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 );
    }
}
我已将您的html属性添加到内部start_lvl 作用您可以调试此代码并根据需要进行修改。

我从WordPress Menu Custom Walker Class

SO网友:Stephan

你不需要助行器。您可以通过wp\\u nav\\u menu()传递“items\\u wrap”:

<?php wp_nav_menu( array(
    \'theme_location\'    => \'main-menu\',
    \'menu_id\'           => \'\',
    \'items_wrap\'        => \'<ul data-hover="dropdown" data-animations="zoomIn zoomIn zoomIn zoomIn" class="%2$s" id="%1$s">%3$s</ul>\',
    \'container\'         => \'\'
) ); ?>

SO网友:AddWeb Solution Pvt Ltd

您需要调用walker类来自定义菜单结构。例如:

wp_nav_menu( array(
   \'menu\'   => \'[menu name]\',
   \'walker\' => new WPDocs_Walker_Nav_Menu()
) );
在WPDocs\\u Walker\\u Nav\\u Menu类中,您需要扩展Walker\\u Nav\\u Menu类,以便可以超越默认函数的权限,如:

class WPDocs_Walker_Nav_Menu extends Walker_Nav_Menu {
// customise default function of Walker_Nav_Menu class.
}
以下教程可以帮助您自定义菜单结构:http://www.kriesi.at/archives/improve-your-wordpress-navigation-menu-output

希望这对你有帮助。

谢谢