Готовим WordPress и jQuery к работе

Мы получили достаточно информации для того, чтобы начать свою работу с jQuery. Большинство примеров, представленных далее, будут базироваться на версии WordPress 3.0 и теме «Twenty Ten» (которая, к слову говоря, используется и в моем блоге). Twenty Ten является полностью HTML5 валидной, чистой темой. Все скрипты, приведенные в данном разделе, были изначально записаны и протестированы на версиях WordPress 2.8.6 и 2.9.2, и затем уже портированы в WordPress 3.0.

Регистрация библиотеки jQuery

Поскольку версия библиотеки jQuery, которая поставляется вместе с WordPress 3.0, является актуальной на момент написания статьи (1.4.2), я перейду в папку wp-content/themes/twentyten, открою файл header.php и использую функцию wp_enqueue_script для вызова jQuery, как показано на примере:

//placed right above the wp_head function
wp_enqueue_script( 'jquery' );
wp_head();

Регистрация произвольного сценария

Теперь мы должны подключить к нашей теме файл скрипта, который будет содержать в себе написанные нами jQuery сценарии. Для большего удобства можно создать отдельную папку js в каталоге с темой. В этой папке будут храниться наши Javascript файлы. Создадим в ней отдельный файл и назовем его custom-jquery.js.

Вы можете использовать wp_enqueue_script для подключения любых созданных скриптов. Вызов функции для подключения дополнительных скриптов должен находиться между инициализацией библиотеки jQuery и вызовом wp_head():

...
wp_enqueue_script( 'jquery' );
wp_enqueue_script('custom-jquery', get_bloginfo('stylesheet_
directory') . '/js/custom-jquery.js', array('jquery'), '20100510' );
wp_head();

В функции wp_enqueue_script, отвечающей за вызов произвольных скриптов, я первоначально зарегистрировал название своего скрипта (custom-jquery). В качестве второго параметра функции задан путь к сценарию, описанный с помощью тега шаблона get_bloginfo. Третий параметр указывает на тот факт, что скрипт зависит от jQuery. Наконец, четвертый параметр отвечает за номер версии. В качестве последнего параметра я обычно задаю текущую дату. Когда я выполняю обновление своего скрипта, я изменяю установленную в функции дату, в результате чего тема «генерирует» код, подобный следующему:

<script type='text/javascript' src='https://localhost/wp-content/
themes/twentyten/js/custom-jquery.js?ver=20100510'></script>

Если я когда-либо обновлю свой скрипт, браузер загрузит его новую версию вместо устаревшей, хранящейся в кэше.

Добавление файла custom-jquery

Наконец, давайте откроем файл custom-jquery.js и при помощи изученной техники установим ожидание загрузки DOM:

jQuery(function(){ /*<- shortcut for document ready*/
/*any code we write will go here*/
});//end docReady

Заготовку мы сделали. В дальнейших разделах мы изучим разнообразные секреты jQuery, которые позволят нам выполнять разнообразные действия со страницей. Вы можете экспериментировать с кодом, размещая его в файле custom-jquery.js.