Как правильно подключить внешние файлы jQuery/Javascript в WordPress

Question

Как правильно подключить внешние файлы jQuery/Javascript в WordPress

17 авг. 2010 г., 15:04:23

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

Голосов: 15

Я использую Starkers как основу для моей следующей темы WP и столкнулся с небольшой проблемой. Я включил свою версию jQuery в файл header.php, но при проверке сайта через Firebug заметил, что jquery загружается дважды. Покопавшись, я обнаружил, что файл включается не только мной, но и функцией wp_head().

Пытаясь исправить проблему, я заметил комментарий в файле header, который изначально был в теме Twenty Ten:

/* Всегда размещайте wp_head() непосредственно перед закрывающим тегом </head>
 * вашей темы, иначе вы сломаете работу многих плагинов, которые
 * обычно используют этот хук для добавления элементов в <head>, таких
 * как стили, скрипты и мета-теги
 */

Вот в чем моя проблема: я понимаю, что файл jQuery должен быть подключен до любых других файлов, которые хотят его использовать, и что wp_head() должен быть последним элементом в <head>. Теперь я в замешательстве: стоит ли поместить wp_head() в начало, чтобы встроенный в WP файл jQuery использовался для всех моих плагинов, хотя в комментарии говорится этого не делать.

Я пробовал закомментировать строку jQuery в функции wp_head(), но она необходима для админ-панели, поэтому пришлось вернуть её обратно.

Я также хотел бы использовать (или хотя бы поэкспериментировать) с версией jQuery из CDN Google, но не хочу включать её дважды!

Надеюсь, вы понимаете, что я пытаюсь объяснить. Буду признателен за любые предложения по решению этой проблемы. Также буду рад советам о том, как вы управляете своими JavaScript файлами в файле header.

Спасибо!

Ben Everard

1.28K

темы кастомизация разработка тем jquery wp head

Комментарии

Это следует переименовать во что-то вроде "Как подключить внешние файлы jQuery/Javascript в WordPress."

MikeSchinkel

17 авг. 2010 г. 23:26:47

Согласен, я не был уверен, как назвать статью, так как недостаточно хорошо разбирался в проблеме, с которой столкнулся :-)

Ben Everard

18 авг. 2010 г. 12:51:29

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

Комментарии

Вы правы, думая, что я добавляю скрипты с помощью тега <script>, это именно альтернатива, которую я искал, большое спасибо! :-)

Ben Everard

17 авг. 2010 г. 16:19:45

Если вы хотите добавить свой скрипт только на фронтенде, используйте хук 'template_redirect' вместо 'init'.

John P Bloch

17 авг. 2010 г. 17:08:29

Отлично, я обновлю свой ответ. Я почти предложил обернуть enqueue в is_admin().

User

17 авг. 2010 г. 17:35:33

Обычно я подключаю скрипты в файле шаблона перед get_header(), так как добавление их в functions.php приведет к загрузке на всех страницах, что может быть избыточным. Если же мне нужен глобальный скрипт, я подключаю его в header.php перед вызовом wp_head(). Таким образом, подключения оказываются там, где вы ожидаете их увидеть - в секции <head>.

Joe Hoyle

17 авг. 2010 г. 21:47:22

Иногда лучше добавлять скрипты в нижнюю часть страницы. Для этого используется последний параметр http://codex.wordpress.org/Function_Reference/wp_enqueue_script (5-й, $in_footer) - установите его в true. Небольшая подсказка для тех, кому нужен более тонкий контроль.

hakre

18 авг. 2010 г. 14:55:39

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

Я рекомендую ознакомиться с материалом 5 советов по использованию jQuery в WordPress. Среди прочего, там показан код, необходимый для загрузки jQuery из библиотеки Google:

function my_init() {
    if (!is_admin()) {
        // закомментируйте следующие две строки, чтобы загрузить локальную копию jQuery
        wp_deregister_script('jquery');
        wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2');
        wp_enqueue_script('jquery');
    }
}
add_action('init', 'my_init');

Также вы можете посмотреть плагин Use Google Libraries.

Travis Northcutt

3.4K

17 авг. 2010 г. 17:01:59

Комментарии

Это действительно более правильный ответ, поскольку он показывает, как подключить jQuery из Google CDN. Хотя, как уже упомянул Джон в другом месте, если вам нужно сделать это только для фронтенда, используйте хук template_redirect вместо init.

EAMann

17 авг. 2010 г. 17:34:49

Хорошее замечание о месте загрузки. Хотя, по сути, админка WordPress тоже использует jQuery, верно? В любом случае, спасибо за демонстрацию управления этим процессом.

Travis Northcutt

17 авг. 2010 г. 19:56:32

Да, я только что нашел пост "5 советов по jQuery/WP", спасибо за ваш ответ :-)

Ben Everard

17 авг. 2010 г. 20:34:21

5 советов по использованию jQuery с WordPress — ссылка больше не работает.

hakre

13 нояб. 2010 г. 00:52:31

ПРИМЕЧАНИЕ: В примере используется «старая» версия jQuery, текущая версия WP (3.0.1) работает с jQuery 1.4.2 ...

t31os

17 нояб. 2010 г. 17:06:04

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

Хотя @tnorthcutt прав, что нужно правильно убрать нативный jQuery из WP, если вы хотите загрузить свою версию, вы точно столкнётесь с проблемами, когда загружаете другую версию jQuery, отличную от той, что используется в ядре WP. И ядро, и плагины полагаются на его наличие. Поэтому если вы не будете обновлять jQuery в вашей теме каждый раз, когда обновляется WP, ваш сайт может перестать работать.

Следующий код гарантирует, что ваша тема всегда будет загружать правильную версию jQuery, сначала определяя, какая версия используется в WP, а затем загружая её из Google:

$wp_jquery_version = $GLOBALS['wp_scripts']->registered['jquery-core']->ver;
$jquery_version = ( $wp_jquery_version == '' ) ? '1.8.3' : $wp_jquery_version; // резервная версия на случай, если не удалось определить 
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/'. $jquery_version .'/jquery.min.js', $jquery_version, false );
wp_enqueue_script('jquery');

cjbj

15K

31 окт. 2016 г. 11:27:42

User 100 · Accepted Answer · 2010-08-17T15:53:01Z

Исходя из формулировки вашего вопроса, вы, вероятно, добавляете скрипты, прописывая теги <script> в шаблоне. Добавляйте свои скрипты через функцию wp_enqueue_script() в файле functions.php вашей темы, корректно указывая зависимости от jQuery, и функция wp_head() автоматически добавит скрипты за вас.

function my_scripts() {
    wp_enqueue_script( 'my-sweet-script', get_bloginfo('template_directory') . '/script.js', array('jquery') );
}
add_action('template_redirect', 'my_scripts');

Подробнее см. на странице кодекса.

User

100

17 авг. 2010 г. 15:53:01