Как связать внешние файлы jQuery / Javascript с WordPress

15

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

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

/* Always have wp_head() just before the closing </head>
 * tag of your theme, or you will break many plugins, which
 * generally use this hook to add elements to <head>, such 
 * as styles, scripts, and meta tags
 */

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

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

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

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

Благодарность!

themes customization theme-development jquery wp-head Бен Эверард
источник
Это должно быть переименовано в что-то вроде «Как связать внешние файлы jQuery / Javascript с WordPress».
MikeSchinkel
Я согласен, я не был уверен, как это назвать, потому что я не был слишком знаком с проблемой, которая у меня была :-)
Бен Эверард,

Ответы:

9

Исходя из формулировки вашего вопроса, вы должны добавить сценарии, написав <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');

Смотрите страницу кодекса для получения дополнительной информации.

Анника Бэкстрем
источник
Вы правы, считая, что я добавляю сценарии с использованием <script>тега, это альтернатива, которую я искал, большое спасибо! :-)
Бен Эверард
3
Если вы хотите добавить свой сценарий только во внешний интерфейс, подключите 'template_redirect'вместо 'init'.
Джон П Блох
Хорошие вещи, я обновлю свой ответ. Я почти предложил обернуть enqueue в is_admin().
Анника Бэкстрем
Я обычно ставлю в очередь сценарии в файле шаблона выше get_header(), делая это functions.php, я ставлю его в очередь на каждой странице, которая может не потребоваться. Если у меня есть глобальный, я ставлю его в очередь, header.phpпрежде чем wp_head()вызывается. Таким образом, очереди будут там, где вы ожидаете их увидеть<head>
Джо Хойл
Иногда лучше добавить скрипты внизу страницы. Это последний параметр codex.wordpress.org/Function_Reference/wp_enqueue_script (5th, $ in_footer), установите его в значение true. Маленькая информация для тех, кто нуждается в большем контроле.
Хакре
7

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

function my_init() {
    if (!is_admin()) {
        // comment out the next two lines to load the local copy of 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');

Вы также можете проверить плагин Использовать библиотеки Google .

Трэвис Норткатт
источник
1
На самом деле это лучший ответ, поскольку он показывает, как поставить в очередь версию jQuery для Google CDN. Тем не менее, как Джон предложил в другом месте, если вы хотите, чтобы это на переднем конце, template_redirectвместо этого зацепите init.
EAMann
Хороший вопрос о том, где он загружается. Хотя на самом деле в админке также используется jQuery, верно? В любом случае, спасибо за показ, как это контролировать.
Трэвис Норткатт
Да, я только что нашел 5 советов для поста jquery / wp, спасибо за ваш ответ :-)
Бен Эверард
5 советов по использованию jQuery с WordPress - ссылка больше не работает.
Хакре
ПРИМЕЧАНИЕ: пример включает в себя «старую» версию jQuery, текущая версия WP (3.0.1) работает под управлением jQuery 1.4.2 ...
t31os
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; // fallback, just in case 
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
источник