Wordpress初学者-自定义标题javascript和导航菜单集成

Question

问题

1. 我希望将以下自定义标题集成到Wordpress网站，并在以下方面面临一些挑战：(1(将javascript平滑地集成到标题/函数php中；(2(将网站中的菜单自动填充到自定义标题的结构中。我们的网站使用IWEB商业主题。根据我在网上看到的建议，我希望在子主题中包含js和css文件，然后使用php函数来调用它们

我尝试了

2. 我通过(1(使用一个插件将javascript放入头部，以及(2(将javascript和css直接粘贴到头部php中，成功地使javascript发挥了作用。这些不是最流畅的集成方式，我更喜欢调用脚本并从主题文件夹中填充

为此，我在函数php中放入了以下队列。与源代码一样，我在php头和正文中分别放置了css链接和javascript脚本。这似乎不起作用，并且调用了javascript或css。

我面临的第二个挑战是如何将我们现有的菜单和导航与这个自定义标题集成。我需要在导航js中创建一个新的导航函数吗？这个nav元素应该放在html源代码的哪里？导航元素需要与主题代码中的元素不同吗？

感谢任何帮助和建议，使这一运行顺利！

<----theme header code---->
<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>
<----custom header code---->
<div class="main">
<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 &amp; Games</h4>
<ul>
<li><a href="#">Catch the Bullet</a </li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
</div>
<----theme nav javascript---->
/**
* 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);
<----end theme nav javascript---->

function hrzdropdown_scripts (){
//css
wp_enqueue_style( 'hzcomp', get_theme_file_uri( '/inc/css/hzdropcomponent.css' ));
wp_enqueue_style( 'hzdef', get_theme_file_uri( '/inc/css/hzdropdefault.css' ));
//JQuery
wp_enqueue_script('jquery');
wp_enqueue_script('cbpmenu', get_theme_file_uri() . '/js/cbpHorizontalMenu.js', array('jquery'), false, false);
wp_enqueue_script('cbpmenumin', get_theme_file_uri() . '/js/cbpHorizontalMenu.min.js', array('jquery'), false, false);
wp_enqueue_script('modernizr', get_theme_file_uri() . '/js/modernizr.custom.js', array('jquery'), false, false);
}
add_action( 'wp_enqueue_scripts', 'hrzdropdown_scripts' );```

[1]: https://tympanus.net/codrops/2013/03/05/horizontal-drop-down-menu/
[2]: https://github.com/codrops/Blueprint-HorizontalDropDownMenu
[3]: https://wordpress.org/themes/iweb-business/

Answer 1

你好，只有这么多信息很难知道问题出在哪里，但这里有一些方法可以找到：

首先添加JS和CSS文件：我建议您使用get_stylesheet_directory_uri((而不是get_theme_file_uri((，因为它将始终使用您当前活动的主题，如下所示：

function hrzdropdown_scripts (){
//css
wp_enqueue_style( 'hzcomp', get_stylesheet_directory_uri() .  '/inc/css/hzdropcomponent.css' );
wp_enqueue_style( 'hzdef', get_stylesheet_directory_uri( ) . '/inc/css/hzdropdefault.css');
//JQuery
wp_enqueue_script('jquery');
wp_enqueue_script('cbpmenu', get_stylesheet_directory_uri() . '/js/cbpHorizontalMenu.js', array('jquery'), false, false);
wp_enqueue_script('cbpmenumin', get_stylesheet_directory_uri() . '/js/cbpHorizontalMenu.min.js', array('jquery'), false, false);
wp_enqueue_script('modernizr', get_theme_file_uri() . '/js/modernizr.custom.js', array('jquery'), false, false);
}
add_action( 'wp_enqueue_scripts', 'hrzdropdown_scripts' );

之后打开你的前端，检查你的控制台是否有404错误(很可能是目录错误、拼写错误、活动主题错误等(。

如果你的文件存在并且拼写正确，这个代码应该能正常工作。

关于菜单的问题也相当模糊，但您可以使用wp_nav_menu((函数来实现您想要的内容，该函数将呈现您已经配置的菜单。

希望这能有所帮助。