Подключение jQuery в WordPress

Question

Подключение jQuery в WordPress

29 июл. 2012 г., 15:09:30

Просмотры: 36.5K

Голосов: 2

Создаю свою первую тему с нуля в WordPress 3.4.1. Я знаю, что WordPress уже содержит последнюю версию jQuery через Google. Я читал о проблемах, которые возникают, если скрипт не подключен правильно, поэтому хочу следовать рекомендованным способам кодирования насколько это возможно. Я хочу убедиться, что скрипт загружен, что, как я понимаю, выполняется с помощью следующего PHP-скрипта в файле functions.php (взято из WordPress Codex).

<?php
// Функция для подключения скриптов
function my_scripts_method() {
wp_enqueue_script( 'jquery' );
}

Я хочу создать пользовательское меню с использованием jQuery, так что достаточно ли просто разместить скрипт, который я хочу активировать, в header или PHP секции?

Также, если я хочу подключить другой скрипт, который не включен в WordPress изначально, достаточно ли просто добавить следующий PHP-код к вышеуказанному коду в файле functions.php?

wp_register_script( 'jqueryexample', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jqueryexample.min.js');

Я хорошо разбираюсь в HTML и CSS, но PHP и JavaScript для меня относительно новые технологии, буду благодарен за любую помощь.

Спасибо,

Ant

157

jquery wp enqueue script

Комментарии

возможный дубликат вопроса Где правильно регистрировать/подключать скрипты и стили

Chris_O

30 июл. 2012 г. 15:29:17

Все ответы на вопрос

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

wp_register_script( 'jqueryexample', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jqueryexample.min.js');

Это просто зарегистрирует новый скрипт с именем jqueryexample, и вы сможете загрузить этот скрипт при необходимости, используя функцию wp_enqueue_script.

Вот пример кода для загрузки уже зарегистрированного скрипта, например jQuery, и нового собственного скрипта, например jQuery Example:

<?php
function wpse_60056_load_scripts() {
    wp_enqueue_script( 'jquery' );
    wp_register_script( 'jqueryexample', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jqueryexample.min.js');
    wp_enqueue_script( 'jqueryexample' );

}    
add_action('wp_enqueue_scripts', 'wpse_60056_load_scripts');
?>

Однако вы можете использовать только функцию wp_enqueue_scripts для загрузки удаленного JavaScript, вот пример:

wp_enqueue_script('jqueryexample','http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jqueryexample.min.js');

Amit Kosti

3.61K

29 июл. 2012 г. 15:56:05

Комментарии

Амит, спасибо за это, раньше пропустил, очень признателен.

Ant

29 июл. 2012 г. 16:24:44

+1 Заметка: начиная с версии 3.3 можно использовать wp_enqueue_script внутри колбэков шорткодов/виджетов (или в теле страницы). Это значит, что вы можете зарегистрировать скрипт на хуке wp_enqueue_scripts, а затем загружать его только когда он действительно нужен.

Stephen Harris

29 июл. 2012 г. 16:57:46

Полезно знать, полагаю это всё сводится к оптимизации веб-страницы, спасибо Стивен.

Ant

29 июл. 2012 г. 17:19:07

Когда вы загружаете скрипт, как предлагает Stephen Harris, скрипты будут помещены в подвал (footer). Имейте это в виду, если ваш скрипт должен загружаться раньше других. Также, если вы действительно хотите принудительно загрузить скрипт в подвал, вы можете установить пятый аргумент функций 'wp_enqueue_scripts' или 'wp_register_script' в true (Codex: http://codex.wordpress.org/Function_Reference/wp_enqueue_script).

W van Dam

29 июл. 2012 г. 18:55:06

Комментарии

Ван Дам, большое спасибо за быстрый ответ и информацию, я обязательно применю это на практике. Пока только одна тема (не хочу бежать, когда еще даже не научился ползать), но интересно то, что вы говорите про плагин. Спасибо, Ант

Ant

29 июл. 2012 г. 15:56:46

Пожалуйста. Амит тоже добавил хорошее замечание. Любые скрипты, которые вы регистрируете, также нужно ставить в очередь. Еще один совет: если jQuery нужен только на определенных страницах, используйте условные теги, такие как is_home(), чтобы загружать скрипт только на этих страницах. Это сделает ваш сайт более эффективным. Возможно, это не актуально для вашего текущего случая, но может пригодиться позже. (Страница в Codex: http://codex.wordpress.org/Conditional_Tags)

W van Dam

29 июл. 2012 г. 16:02:17

Дам, это полезно, я учту это. Я хочу, чтобы скорость сайта оставалась высокой, так что ваши слова имеют смысл. Жаль только, что нельзя использовать некоторые CSS3-переходы, но IE меня подводит в этом, хотя их довольно легко кодировать.

Ant

29 июл. 2012 г. 17:24:55

Без проблем. P.S. Не могли бы вы проголосовать за или принять мой ответ? Я хотел бы добавить комментарий к тому, что сказал Стивен Харрис выше, но в данный момент мне не хватает 1 голоса, чтобы комментировать ответы других. Stack exchange отличный, но в некоторых аспектах раздражает.

W van Dam

29 июл. 2012 г. 17:44:42

Готово, без проблем. Думаю, система поощрений работает таким образом, что очки означают призы, по крайней мере, я получил здесь ответы и быстро.

Ant

29 июл. 2012 г. 18:24:03

Показать остальные 6 комментариев

W van Dam 196 · Accepted Answer · 2012-07-29T15:44:39Z

Вы на правильном пути, но не хватает одного элемента:

add_action('wp_enqueue_scripts', 'my_scripts_method');

add_action позволяет выполнять код в определенные моменты загрузки страницы или при конкретных событиях. Указанный выше хук говорит WordPress выполнить вашу функцию, когда он добавляет скрипты в элемент head HTML. Ваша функция, в свою очередь, указывает WordPress добавить скрипт jQuery.

То же самое относится и к регистрации нового скрипта, но с другим хуком:

add_action('wp_enqueue_scripts', 'my_register_script_method');

function my_register_script_method () {
    wp_register_script( 'jqueryexample', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jqueryexample.min.js');
}

Если вы переопределяете предварительно зарегистрированный скрипт, вам также следует сначала его отменить. Я использую следующий код для замены скрипта jQuery (примечание: см. второе редактирование в конце):

function my_register_script_method () {
    wp_deregister_script('jquery');
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jqueryexample.min.js');
}

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

Редактирование: Как отмечает Стивен Харрис ниже, начиная с WordPress 3.3, вы также можете использовать wp_enqueue_scripts после срабатывания wp_head, например, в шорткодах или виджетах. В этом случае JavaScript будет загружен в подвале (footer).

Редактирование 2: Для jQuery и других библиотек, размещенных на Google, рекомендуется использовать http://wordpress.org/extend/plugins/use-google-libraries/ Прочитайте комментарии для обоснования от Otto.