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文件中，并使用wp_enqueue_script中的functions.php以正确的方式包含它们。

来自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' );
?>

Answer 2

添加以下行：

<script src="<?php echo get_bloginfo('template_url ');?>/nav-mouse-events.js"></script>

并使用代码保存nav-mouse-events.js文件：

$(document).ready(function(){
      $('nav').mouseover(function() {
        // my mousecode here...
      }); // end mouseover
    }); // end ready

模板文件夹中的

。

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

2 个答案: