X
  • Дизайн та розробка сайту
  • Дизайн і створення сайтів. Розробка тем для WordPress. Створення Landing Page.
  • office@gnatkovsky.com.ua
  • @vgnat
  • Написати мені
Замовити послугу

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

Приклад
  • 2024-03-28
  • 5852 переглядів

  • Дизайн та розробка сайту

Доброго времени суток 🙂
В сегодняшней статье, речь пойдет о подключение jQuery библиотеки к WordPress. Данную статью надо было написать уже давно, но как-то не доходили руки. На днях столкнулся с одной ситуацией. Проверял сайт на одном из сервисов, который определяет скорость загрузки страницы - tools.pingdom.com. Мне нравится, отличный сервис.Все понятно и разложено по полочкам. Но вот в очередной раз проверив, обнаружил что у меня дважды подключена библиотека jQuery.
Одна библиотека встроена в саму WordPress по умолчанию, а вторую подключил я. Сделал я это, потому что мне в тот момент нужна была именно определенная версия библиотеки. Конфликта не было и все работало, но вот анализатор показал, что все-таки подгрузка библиотеки по умолчанию всеравно наблюдается. Почему не было конфликта? Возможно по этому:

1. Подключаем встроенную в WordPress библиотеку jQuery

Как написано в справочниках в шапке любой темы присутствует код и все мы его встречали:

jquery
<?php wp_head(); ?>

Он генерирует дополнительные строки в шапке Вашего сайта и одной с них и является подключение jQuery. Но, оказывается не всегда так. Иногда нужно дописать еще одну строчку, а именно:

wp_enqueue_script('jquery');

И сделать это перед wp_head(); Обязательно!!!

В итоге должно получиться так:

<?php wp_enqueue_script('jquery');
      wp_head(); ?>

У меня не было первой строки только wp_head();, возможно поэтому конфликта и не было, но подгружало по умолчанию.
Что же делать, если надо подключить свою библиотеку, а не встроенную?

2. Подключаем свою библиотеку jQuery

Для чего нужно подключать именно свою библиотеку, а не использовать ту что по умолчанию:

  • У вас есть скрипт, который Вам нужен и без него никак, а для его работы нужна определенная версия библиотеки
  • Подключая библиотеку со стороннего сервиса, вы хоть и немного но уменьшаете нагрузку на свой сайт

Пока в WordPress не встраивалась библиотека, подключить можно было, просто вставив в шапку или подвал следующий код.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

У меня до последнего времени таки и работало, потому как благодаря причине из первой части, все было ок. Но все же как сделать, что-бы не было конфликтов?
Для начала убрать строку

wp_enqueue_script('jquery');

Если она есть у Вас в шапке.
После открыть файл functions.php и прописать в него следующую функцию:

function my_jquery_scripts() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js');
    wp_enqueue_script( 'jquery' );
}    
add_action( 'wp_enqueue_scripts', 'my_jquery_scripts' );

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

http://code.jquery.com/jquery-latest.min.js

или

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

У многих после этого все будет ок и все начнет работать, но у некоторых, все же могут возникнуть проблемы, и почему-то скрипты не будут работать.Так было и у меня. Тогда я сделал следующие два шага.

Сначала я удалил из выше представленной функции третью и четвертую строку с ссылкой на библиотеку и ее включением и у меня получился такой вот код:

function my_jquery_scripts() {
    wp_deregister_script( 'jquery' );
}    
add_action( 'wp_enqueue_scripts', 'my_jquery_scripts' );

После я добавил по старинке в шапку или подвал ссылку такого вида

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

или можете подключить последнюю версию

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

После этого все заработало как часы, а анализатор загрузки страницы перестал показывать две подгрузки библиотеки.

Вот такими способами можно решить Вашу проблему и настроить корректную работу Вашего сайта. Может показаться сложным, но на самом деле все намного проще чем кажется. Пробуйте, пробуйте и еще раз пробуйте!

На этом все, спасибо за внимание 🙂

Якщо Вам була корисна моя праця, можете фінансово підтримати сайт або відключити блокувальник реклами, що займе 2 хвилини :)

Хочу підтримати фінансово Хочу відключити блокувальник

Оцініть статтю
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 5, в среднем: 5 из 5
Читайте також