就在几天前，我得到了一个很棒的脚本，它基本上允许我的静态站点的菜单项根据菜单中有多少列表项来收缩和扩展。现在我已经开始工作，将网站转换为Wordpress安装，我有问题，让它工作，因为我不熟悉Javascript。
它不会运行脚本，只运行基本的Wordpress PHP。
:$(document).ready(function() {
li_count = $('#main-navigation li').length;
div_size = $('#main-navigation').width();
new_li_font_size = (div_size/10)/li_count+'px';
new_li_width = 100/li_count+'%';
$('#main-navigation li').css('font-size', new_li_font_size);
$('#main-navigation li').css('width', new_li_width);
console.debug(new_li_size);
});
这是我的以前的导航:
<nav id="main-navigation">
<ul>
<li><a href="index.html">Hjem</a></li>
<li><a href="butikker-single.html">Butikker</a></li>
<li><a href="kampanjer.html">Kampanjer</a></li>
<li><a href="#">Åpningstider</a></li>
<li><a href="#">Om torvgårdens ting og tang</a></li>
</ul>
</nav><!-- END #main-navigation -->
这是我的当前导航:
<nav id="main-navigation" role="navigation">
<ul>
<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
</ul>
</nav><!-- END #main-navigation -->
我一直在看这个脚本，我认为它可能与php中没有更多的li-tags这一事实有关，但我可能是错的，考虑到我没有jQuery的经验。有人能帮我吗?:)
为了以防万一，下面是我放在脑子里的jQuery实现:
<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/menu.js"></script>
要在WordPress中添加脚本，您可以在functions.php文件中使用wp_enqueue_script
function load_menu_js() {
wp_enqueue_script(
'menu_js',
get_template_directory_uri() . '/js/menu.js',
array('jquery')
);
}
add_action('wp_enqueue_scripts', 'load_menu_js');
以上代码将在页面的标题部分添加script，您不需要使用<script>手动添加menu.js标记，这是推荐的方法。
还应该使用
(function ($) {
$(document).ready(function() {
// code goes here
});
})(jQuery);
删除用于加载menu.js文件的wp_head()之后的脚本标记，并更改以下代码
<nav id="main-navigation" role="navigation">
<ul>
<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
</ul>
</nav>
to (wp_nav_menu()生成一个充满li标签的ul)
<nav id="main-navigation" role="navigation">
<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
</nav>
还要记住nav是一个html5标签，在旧的浏览器中不支持，你可以使用<div id="main-navigation"></div>代替。