javascript - 如何将 jQuery 代码放入 WordPress 主题的外部文件中？

Question

我对 Javascript/jQuery 比较陌生，所以请多多包涵。

我正在设计一个自定义的 WordPress 主题，我一直在使用 jQuery 对头文件 (header.php) 中生成的主导航菜单进行一些更改。我一直在 head 标签中添加这样的代码:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
  <script>
    $(document).ready(function(){
      $('nav').mouseover(function() {
        // my mousecode here...
      }); // end mouseover
    }); // end ready
  </script>

我的问题真的很简单。我的脚本太长了，我想将它们移动到它们自己的文件(可能是 nav-mouse-events.js)并从 header.php 中调用它们。我该怎么做呢？将第二个脚本标签之间的代码放入名为 nav-mouse-events.js 的文件中，然后将其添加到 head 标签中是不是很简单？

<script src="nav-mouse-events.js"></script>

或者我需要做一些更复杂的事情吗？我需要从新的外部文件或 header.php 调用 jQuery 吗？

Answer 1

您可以将脚本放在 .js 文件中，并在 functions.php 中使用 wp_enqueue_script 以正确的方式包含它们。

来自wordpress site :

<?php
function my_scripts_method() {
    wp_enqueue_script(
        'custom-script',
        get_template_directory_uri() . '/js/custom_script.js',
        array( 'jquery' )
    );
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
?>