如何解决协调 Wordpress 导航菜单与自定义菜单结构
我希望将自定义下拉菜单集成到 wordpress 网站中，但在将网站菜单自动填充到自定义菜单结构中时遇到了一些挑战。我们的网站使用 IWEB Business 主题。首先，我已经成功地将 HTML 和自定义 javascript/css 集成到 header.PHP 中。 The custom menu is here
我相信难点在于navigation.js，并且自定义标题为按钮和菜单指令使用了不同的元素。它还有一个添加的 h4 元素，它不在主题中，这可能是需要调用的第三个 TagName？我已经尝试反复更改 navigation.js，但没有任何运气。
我需要在 navigation.js 中创建一个新的导航功能吗？ wp_nav_menu 元素应该放在 header.PHP 中的哪个位置？
感谢任何帮助和建议让这个顺利运行！
<?PHP
/**
* The header for our theme
*
* This is the template that displays all of the <head> section and everything up until <div id="content">
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package iwebbusiness
*/
?>
<!doctype html>
<html <?phP Language_attributes(); ?>>
<head>
<Meta charset="<?PHP bloginfo( 'charset' ); ?>">
<Meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?PHP wp_head(); ?>
</head>
<body <?PHP body_class(); ?>>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#content"><?PHP esc_html_e( 'Skip to content','iweb-business' ); ?></a>
<header id="masthead" class="site-header">
<div class="fullwidth">
<div id="header-90">
<div class="site-branding">
<div class="logo-l">
<?PHP
the_custom_logo(); ?>
</div>
<div class="title-r">
<?PHP
if ( is_front_page() && is_home() ) :
?>
<h1 class="site-title"><a href="<?PHP echo esc_url( home_url( '/' ) ); ?>" rel="home"><?PHP bloginfo( 'name' ); ?></a></h1>
<?PHP
else :
?>
<h1 class="site-title"><a href="<?PHP echo esc_url( home_url( '/' ) ); ?>" rel="home"><?PHP bloginfo( 'name' ); ?></a></h1>
<?PHP
endif;
$iwebbusiness_description = get_bloginfo( 'description','display' );
if ( $iwebbusiness_description || is_customize_preview() ) :
?>
<p class="site-description"><?PHP echo $iwebbusiness_description; /* WPCS: xss ok. */ ?></p>
<?PHP endif; ?>
</div>
</div><!-- .site-branding -->
<div class="inavbar">
<?PHP if ( function_exists( 'max_mega_menu_is_enabled' ) && max_mega_menu_is_enabled( 'primary' ) ) : ?>
<?PHP wp_nav_menu( array(
'theme_location' => 'primary',) ); ?>
<?PHP else : ?>
<nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle"><i class="fa fa-bars" aria-hidden="true"></i></button>
<?PHP wp_nav_menu( array(
'theme_location' => 'primary','menu_class' => 'nav-menu',) ); ?>
</nav>
<?PHP endif; ?>
</div>
</div>
</div>
</header><!-- #masthead -->
<div id="content" class="site-content">
主题的导航脚本
/**
* File navigation.js.
*
* @package iwebbusiness
*/
( function() {
var nav = document.getElementById( 'site-navigation' ),button,menu;
if ( ! nav ) {
return;
}
button = nav.getElementsByTagName( 'button' )[0];
menu = nav.getElementsByTagName( 'ul' )[0];
if ( ! button ) {
return;
}
// Hide button if menu is missing or empty.
if ( ! menu || ! menu.childNodes.length ) {
button.style.display = 'none';
return;
}
button.onclick = function() {
if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
menu.className = 'nav-menu';
}
if ( -1 !== button.className.indexOf( 'toggled-on' ) ) {
button.className = button.className.replace( ' toggled-on','' );
menu.className = menu.className.replace( ' toggled-on','' );
} else {
button.className += ' toggled-on';
menu.className += ' toggled-on';
}
};
} )(jQuery);
<nav id="cbp-hrmenu" class="cbp-hrmenu">
<ul>
<li>
<a href="#">Products</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Learning & Games</h4>
<ul>
<li><a href="#">Catch the Bullet</a></li>
<li><a href="#">Snoopydoo</a></li>
<!-- ... -->
</ul>
</div>
<div>
<h4>Utilities</h4>
<ul>
<li><a href="#">Gadget Finder</a></li>
<li><a href="#">Green Tree Express</a></li>
<li><a href="#">Green Tree Pro</a></li>
<li><a href="#">Wobbler 3.0</a></li>
<li><a href="#">Coolkid</a></li>
</ul>
</div>
<div>
<!-- ... -->
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
<li><!-- ... --></li>
<li><!-- ... --></li>
<!-- ... -->
</ul>
</nav>
自定义菜单javascript，通过functions.PHP中的enqueue脚本集成
var cbpHorizontalMenu = (function() {
var $listItems = $( '#cbp-hrmenu > ul > li' ),$menuItems = $listItems.children( 'a' ),$body = $( 'body' ),current = -1;
function init() {
$menuItems.on( 'click',open );
$listItems.on( 'click',function( event ) { event.stopPropagation(); } );
}
function open( event ) {
if( current !== -1 ) {
$listItems.eq( current ).removeClass( 'cbp-hropen' );
}
var $item = $( event.currentTarget ).parent( 'li' ),idx = $item.index();
if( current === idx ) {
$item.removeClass( 'cbp-hropen' );
current = -1;
}
else {
$item.addClass( 'cbp-hropen' );
current = idx;
$body.off( 'click' ).on( 'click',close );
}
return false;
}
function close( event ) {
$listItems.eq( current ).removeClass( 'cbp-hropen' );
current = -1;
}
return { init : init };
})();
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
