[英]Custom Wordpress Nav with wp_nav_menu function
I am struggling to get the wp_nav_menu
function working with my custom html.我正在努力让
wp_nav_menu
function 与我的自定义 html 一起使用。 I have tried looping over the items but had no success hence why I went back to the native function.我尝试循环遍历这些项目但没有成功,因此我回到原生 function。
I have attached the order of the menu items in wordpress and the HTML I am trying to loop over with the values I am tying to insert in them.我已经附上了 wordpress 和 HTML 中菜单项的顺序,我正在尝试使用我要插入其中的值进行循环。 The duplicate pages are just so other menu sections have pages.
重复页面与其他菜单部分的页面相同。
Menu Order in WP WP中的菜单顺序
What We Do(parent)我们做什么(父母)
Resources资源
About关于
Case Studies实例探究
HTML for looping over HTML 用于循环
<!-- Should loop per parent -->
<div class="header-dropdown w-dropdown>
<div class="header-dropdown-toggle w-dropdown-toggle">
<div class="dropdown-text">{parent.title}</div>
</div>
<nav class="mega-menu-container w-dropdown-list">
<div class="w-layout-grid mega-menu-grid v3">
<!-- Should loop per child of the parent -->
<div class="mega-menu-column-1">
<h4 class="mega-menu-title">{parent.children.title}</h4>
<!-- Should loop per child of child -->
<div class="mega-menu-links">
<a href="{parent.children.children.url}" class="mega-menu-link">{parent.children.children.title}</a>
</div>
</div>
</div>
</nav>
</div>
Any help is greatly appreciated!任何帮助是极大的赞赏!
You can use a custom walker function您可以使用自定义步行器 function
wp_nav_menu( array(
'menu' => 'any menu',
'walker' => new WPDocs_Walker_Nav_Menu()));
'menu' Desired menu. 'menu' 所需的菜单。 Accepts a menu ID, slug, name, or object.
接受菜单 ID、slug、名称或 object。
/**
* 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 );
}
}
also, you can check this 'WP Bootstrap Navwalker'另外,您可以查看此“WP Bootstrap Navwalker”
https://github.com/wp-bootstrap/wp-bootstrap-navwalker https://github.com/wp-bootstrap/wp-bootstrap-navwalker
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.