Подключение сторонних скриптов в Elementor
Привет, уважаемые посетители нашего блога!
Последнее время очень часто приходится использовать JS-код на страницах Elementor для расширения возможностей последнего. Мы рассмотрим несколько способов добавления своего кода на страницу. Некоторые из них не совсем правильные, но рабочие.
Первый способ добавления своего кода на страницу Elementor.
Разберем этот способ на примере подключения js-библиотеки JQuery на страницу.
Изначально, весь JS-код я добавлял только этим способом. Он не очень правильный сточки зрения веб-разработки, но, тем не менее, свою функцию выполняет.
Итак, вверху страницы, в самом начале я размещал html-виджет, в котором размещал следующий код:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>Этот код подключает к странице JQuery. Если вы подключите скрипт таким образом, то при просмотре кода страницы вы увидите следующее:
Как видите, JQuery присутствует на странице, и теперь весь jquery-код будет работать.
Подключать скрипты и стили рекомендуется вначале страницы в пределах тегов <head>, а сам код, который работает с элементами страницы, внизу перед закрывающим тегом </body>, чтобы эти элементы успели загрузится и отобразиться.
Затем я добавлял другой html-виджет, обычно внизу страницы, куда вставлял свои скрипты. Все работало без проблем.
Второй способ добавления своего кода на страницу Elementor.
В данный момент Элементор обзавелся своим инструментом добавления своих скриптов на страницу. Для этого в консоли WordPress нужно зайти в раздел «Elementor -> Пользовательский код».
Кликнуть на кнопке «ДОБАВИТЬ НОВЫЙ» вверху:
Дать скрипту название (мы назовем его «Подключение JQuery»)
Затем в поле внизу вставить свой скрипт. Мы будем вставлять скрипт подключения jquery на страницу
И последнее, что нужно сделать, выше поля для вставки кода выбрать в выпадающем меню место вставки кода:
- <head>
- <body> — Начало
- </body> — Конец
Нам нужно подключить скрипт в самом верху страницы, поэтому мы выберем <head>.
Все, теперь сохраним изменения и посмотрим, как это будет выглядеть в коде.
Как видите, JQuery подключилась перед тегом <head>, что нам и было нужно.
На этом все, мы показали, как подключить JQuery в Elementor. Cтавим лайки, если статья помогла вам.
Если Вас интересует вставка своих css-стилей, то советуем перейти сюда.
0