Wordpress响应式菜单的Javascript

Javascript for Responsive Menu in Wordpress

本文关键字：Javascript 菜单 响应 Wordpress      更新时间：2023-09-26

对不起，如果这是一个基本的问题，但我有麻烦弄清楚如何在我的网站上使用Javascript/jQuery脚本。(如果这是有充分记录的，我只是不知道正确的术语，请分享一下要寻找什么-我还没有运气与我所知道的在线。)

我已经设计了一个静态页面的网站，只是没有博客。因此，我在其中一个页面上安装了Wordpress，并研究了如何使用header.php和footer.php文件为我现有网站的菜单添加HTML/CSS设计。但是，我的jQuery脚本应该在调整页面大小以更改菜单设计时加载，但它不起作用。

我将<script type="text/javascript" src="jquery.min.js"></script>代码粘贴到文件的<head>部分，将body标签调整为<body onresize="myFunction()" <?php body_class(); ?>>，并将"myFunction"脚本添加到footer.php文件中，在</body>标签上方。在function myFunction() {上面，我也有window.onload=myFunction();，它也不起作用-所以无论页面加载到什么大小，或者它改变到什么大小，菜单都没有响应。

当我尝试在functions.php文件中添加队列代码块时，它完全破坏了页面，给出了500个错误。

任何建议将非常感激!

检查指定给jQuery库的路径是否正确。在您的脚本标记src="jquery.min.js是一个相对路径。这意味着根据src路径，文件jquery.min.js与html/php/模板位于同一目录中。

我建议使用CDN。你不会有一个相对路径，需要加载你的jquery文件，如果其他页面/站点加载了相同的文件，你将受益于浏览器缓存。

3 x 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

2 x 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

当你向WordPress添加脚本和样式表等资源时，你应该使用wp_enqueue_script()和wp_enqueue_style()函数对它们进行排队。

这样做可以确保你的脚本/样式只包含一次，允许你声明依赖关系，并且(在脚本的情况下)允许你在需要/希望的情况下将其添加到页脚。

关于这些功能的更多信息，请参见《食品法典》-

  • wp_enqueue_script()
  • wp_enqueue_style()

结合这些函数，您应该使用wp_enqueue_scripts操作，确保您的脚本样式在正确的时间进入队列。

因此，例如，您应该在functions.php文件中放置类似于此的内容。因为jQuery已经存在于WP中，你甚至不需要指定一个位置，你只需要告诉WP你想让它排队- 
add_action( 'wp_enqueue_scripts', 'my_enqueue_jquery' );
function my_enqueue_jquery(){
    wp_enqueue_script( 'jquery' );
}
相关文章：