Как реализовать javascript в Wordpress

Question

У меня возникли проблемы с пониманием того, как разместить javascript в теме Wordpress.

1. Я знаю, что я должен сохранить этот JavaScript:

http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js

и поместить его в папку на сервере под «JS», но что мне делать с функциями JavaScript?

$(document).ready(function(){ 
       $('#contactButton').click(function(){ 
        $('#contactDropDown').show("fast"); 
        $('#contactDropDown').animate({height:'500px'}, 200); 
       }); 

       $('#closeBox').click(function(){ 
        $('#contactDropDown').hide("fast"); 
        $('#contactDropDown').animate({height:'0px'}, 200); 
       }); 
      }); 

Сохраните это как другой документ, но сохраните его в той же папке «js»?

2. Каков точный код, который мне нужно внести в функцию. Php темы?

я также создал скрипку для немного больше понимания: http://jsfiddle.net/ptemyw52/

(Код JavaScript для выпадающего контактного поля)

Answer 1

Wordpress Уже включило JQuery.

http://codex.wordpress.org/Function_Reference/wp_enqueue_script

Вы должны убедиться, что это где-то enqued. Если JQuery не работает либо в вашем functions.php или ваш head.php епдиеего это так:

wp_enqueue_script('jquery'); 

Wordpress нагрузки JQuery при работе без конфликтов режима так побрякушки ($) не будут работать, вы должны сначала введите jQuery. Вы действительно можете просто набрать его и передать его через ваш документ готов, например, так:

<script> 
jQuery(document).ready(function($){ 
    $('#contactButton').click(function(){ 
     $('#contactDropDown').show("fast"); 
     $('#contactDropDown').animate({height:'500px'}, 200); 
    }); 

    $('#closeBox').click(function(){ 
     $('#contactDropDown').hide("fast"); 
     $('#contactDropDown').animate({height:'0px'}, 200); 
    }); 
}); 
</script> 

Вы можете на самом деле просто добавить к вашей footer.php, если это единственный код, у вас есть .. Если вы в конечном итоге имея больше javascript, вы можете захотеть создать собственный файл и поставить в очередь.

Answer 2

in: wp-content/themes/your-template/js вы помещаете свой js-файл. Тогда в голове документа (это может быть заголовок, индекс и т.д.)

<script src="<?php echo get_template_directory_uri(); ?>/js/your.js"></script> 

Answer 3

Вы можете использовать функцию WordPress wp_enqueue_script сказать WordPress, что для загрузки.

Он имеет JQuery встроенную команду, так что вы можете просто сказать ему:

wp_enqueue_script('jquery'); 

, чтобы получить это. Для вашего собственного кода, поместите его в файл где-нибудь (например, JS/scripts.js), а затем сказать WordPress, чтобы загрузить его с:

wp_enqueue_script(
    'myscript', 
    get_stylesheet_directory_uri() . '/js/scripts.js', 
    array('jquery') 
); 

Последний аргумент array('jquery') сообщает WP, что ваши сценарии зависят от наличия JQuery.