Как подключить jquery в wordpress
Перейти к содержимому

Как подключить jquery в wordpress

  • автор:

Как подключить jquery в wordpress?

Чтобы подключить jQuery в WordPress, можно воспользоваться одним из следующих методов:

  1. Использование встроенной версии jQuery:

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

scss
function my_scripts() < wp_enqueue_script('jquery'); > add_action('wp_enqueue_scripts', 'my_scripts');

Это добавит версию jQuery, которая уже встроена в WordPress, на все ваши страницы.

  1. Подключение jQuery с помощью CDN:

Вы можете использовать CDN-хостинг для подключения jQuery. Для этого вам нужно добавить следующий код в функцию functions.php вашей темы:

javascript
function my_scripts( ) < wp_deregister_script('jquery'); wp_register_script('jquery', 'https://code.jquery.com/jquery-3.6.0.min.js', false, '3.6.0', true); wp_enqueue_script('jquery'); > add_action('wp_enqueue_scripts', 'my_scripts');

Этот код удалит встроенную версию jQuery и заменит ее на версию, загружаемую с CDN-хостинга.

  1. Подключение jQuery с помощью плагина:

Если вам не хочется изменять файлы темы, вы можете воспользоваться плагином для подключения jQuery. Некоторые популярные плагины для этой задачи включают в себя jQuery Updater и WP jQuery Plus.

Для использования плагина вам нужно его установить и активировать, после чего jQuery будет автоматически загружаться на ваш сайт.

Подключение «всегда свежей» версии JQuery в WordPress

А вообще, про подключение CSS и JS в WordPress на моём сайте есть отдельный видеоурок.

Наверное вы знаете, что на некоторых сайтах можно встретить JQuery версии 1.4.2, на некоторых 1.4.4, а иногда даже 1.6.4 (это самая последняя версия на момент написания поста).

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

Как же сделать так, чтобы на сайте автоматически подключалась всегда только самая новая версия?

Проще простого, самая последняя версия JQuery всегда находится по адресу:

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

Если валидация будет ругаться на эту строчку кода, знайте, она написана в HTML5 🙂

А вот пример подключения JQuery к WordPress. Учтите, это будет работать только в том случае, если в вашей теме присутствуют wp_head() и wp_footer().

add_action( 'init', 'true_jquery_register' ); function true_jquery_register() { if ( !is_admin() ) { wp_deregister_script( 'jquery' ); wp_register_script( 'jquery', ( 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' ), false, null, true ); wp_enqueue_script( 'jquery' ); } }

Вставьте этот код в файл functions.php. Он находится в папке с вашей текущей темой.

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.

Использование «$» вместо «jQuery» в шаблонах WordPress

В WordPress по умолчанию подключается библиотека jQuery. Поэтому не обязательно подключать дополнительные библиотеки jQuery, достаточно в файле functions.php подключить уже имеющуюся:

wp_enqueue_script("jQuery");

а подключать скрипты, для использования которых нужна библиотека jQuery можно таким образом через файл functions.php:

wp_enqueue_script('my-custom-script', get_template_directory_uri() .'/js/my-custom-script.js', array('jquery'), null, true);

Загвоздка в том, что эта копия jQuery находится а режиме совместимости по умолчанию. Это означает, что типичный псевдоним $ для jQuery не работает, поэтому он не конфликтует с другими библиотеками JavaScript, которые также используют знак доллара, например MooTools или Prototype.

Многие авторы плагинов и разработчики тем знают об этом, и они используют jQuery вместо $ .

/* Normal jQuery you see everywhere */ $("#some-element").yaddaYaddaYadda(); /* "Safe" jQuery you see in WordPress */ jQuery("#some-element").yaddaYaddaYadda();

Но постоянное использование jQuery усложняет чтение и увеличивает код. Поэтому, если скрипты подключаются в футере, то свой код, использующий библиотеку jQuery можно завернуть в анонимную функцию, в которую вы передаете jQuery для сопоставления $ .

(function($) < // $ Works! You can test it with next line if you like // console.log($); >)( jQuery );

Если необходимо загрузить скрипты в хедере, тогда необходимо использовать функцию document ready , тогда вы сможете использовать $ внутри нее.

jQuery(document).ready(function( $ ) < // $ Works! You can test it with next line if you like // console.log($); >);

Чтобы быть супербезопасным, вы можете поместить jQuery в режим «no conflict» и использовать другой ярлык для jQuery . В этом случае $j вместо стандартного $ . Например, стандартный $ может конфликтовать с Prototype. Вот пример безопасного использования jQuery JavaScript:

var $j = jQuery.noConflict(); $j(function()< $j("#sidebar li a").hover(function()< $j(this).stop().animate(< paddingLeft: "20px&" >, 400); >, function() < $j(this).stop().animate(< paddingLeft: 0 >, 400); >); >);

Создаем дочернюю тему. первым делом создается папка с таким же именем как у родителя с…

Быстрая заметка о проблеме, которая иногда встречается с форматами HubSpot, неправильно отображающимися на сайтах. Это…

Для мультиязычности сайтов на CMS WordPress я рекомендую использовать плагин Polylang — наиболее удобный, гибкий…

Для длинных записей, которые могут логично разбиваться на несколько блоков, например с нумерацией, или списком…

Как правильно подключить jQuery и другие скрипты к Вордпресс

Разгребая чужой код, иногда нарываешься на такие «интересные» решения, что буквально впадаешь в ступор. Недавно на одном сайте видел, как jQuery подключался несколько раз на странице. Думаю, нужно рассказать, как это правильно делается в Вордпресс.

У разработчика не было злого умысла, он пошел на это скорее всего по своей неопытности — используемая им карусель jQuery Roundabout 2.4.2 очень старая, и со свежей версией jQuery некорректно работала анимация. Точнее, не работала совсем. К сожалению, он не нашел ничего лучшего, как перед загрузкой карусели прямо в коде загрузить старую версию jQuery 1.7.1. Про консоль браузера, в которую посыпалась куча ошибок, этот горе-разработчик видимо не слышал. Многие ошибки были критические и положили часть функционала сайта. Именно по этой причине, сайт попал ко мне в работу.

Как подключить jQuery к Вордпресс

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

Если в HTML-коде сайта нет упоминаний о jQuery, значит инициируем его подключение в файле functions.php активной темы. jQuery в Вордпресс подключается проще всего, т.к. он зарегистрирован по умолчанию, его можно загрузить сразу по имени-ярлыку ‘jquery’.

wp_enqueue_script('jquery');


Как подключить к Вордпресс другой jQuery


Рассмотрим другую ситуацию, когда jQuery уже подключен в теме или плагине, а нужна его другая версия или необходимо загрузить jQuery из другого источника, например, с CDN.








Сначала нужно дерегистрировать ранее загруженный jQuery.


wp_deregister_script('jquery');


А затем зарегистрировать новый. Например, так:








wp_register_script('jquery', '//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js', false, null); wp_enqueue_script('jquery');


Напомню, функция wp_register_script() имеет несколько параметров: wp_register_script($handle, $src, $deps, $ver, $in_footer);


    

  • $handle — ярлык, уникальное имя скрипта;
    • 

  • $src — путь к скрипту;
    • 

  • $deps — массив скриптов от которых зависит загружаемый скрипт;
    • 

  • $ver — версия;
    • 

  • $in_footer — загрузка скрипта в футере.
    • 



Как подключить к Вордпресс другие скрипты


С другими скриптами тоже ничего сложного нет. Допустим, у нас есть некий скрипт script.js, который лежит в директории /js/ активной темы. Он подключается аналогично в functions.php, указываем путь и придумываем уникальный ярлык ‘myscript’, например.


wp_enqueue_script('myscript', get_template_directory_uri() . '/js/script.js');


В заключение


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


И возвращаясь к jQuery Roundabout. Чтобы карусель работала со свежими версиями jQuery, в коде Roundabout нужно найти такую строку:


newBearing = methods.normalize.apply(null, [newBearing]);


и заменить её на такой код:


if (true)


Подписывайтесь на мой канал @DanilinBiz. 
Делюсь опытом и полезными материалами по разработке на фрилансе.


Автор Иван Данилин


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





Похожие публикации:
    

  1. Как посмотреть купленные приложения в google play
    2. 

  2. Как разбить вазу берси скайрим
    3. 

  3. Как стирать черное и цветное ardo a400
    4. 

  4. Почему не устанавливаются расширения в google chrome
    5.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *