Как поместить код jQuery во внешний файл в тему WordPress?

Question

Я относительно новичок в Javascript/jQuery, поэтому, пожалуйста, несите меня.

Я разрабатываю пользовательскую тему WordPress, и я использую jQuery, чтобы внести некоторые изменения в основное меню навигации, которое создается в моем файле заголовка (header.php). Я добавляю такой код внутри заголовка:

<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, а затем добавить его в главный тег?

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

Или мне нужно сделать что-то более сложное? Мне нужно вызвать jQuery из нового внешнего файла или header.php?

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 

в вашем шаблон папки.