Как подключить библиотеку jquery в joomla

Правильное подключение стилей и JS плагинов в Joomla

Всем привет! В прошлой статье я рассказывал о jQuery плагине модальных окон для сайта Magnific Popup. В статье я затронул подключение плагина к сайту, но в данной статье хочу показать, как правильно подключать стили, jQuery плагины и скрипты на Joomla (в том числе и инициализация плагинов). В комментариях к статье как-то интересовались этим вопросом и конкретно интересовала Joomla. Ну что ж, думаю этот вопрос многих заинтересует. В качестве примера подключения плагина возьму опять таки Magnific Popup. Все остальные плагины подключаются примерно также.

Подключение стилей

Давайте сначала подключим файл стилей, т.к. сначала всегда подключаются стили, а потом уже скрипты на JS. Обычно файл стилей обзывают — style.css. Он может быть общим, также могут быть и дополнительные — меню (menu.css), адаптивная сетка (gride.css), типографика (typography.css) и т.д.

Итак, для подключения стилей открываем главный файл вашего шаблона — index.php. Расположен он по адресу — «/templates/папка вашего шаблона/index.php«. Открываем данный файл любым текстовым редактором, а еще лучше редактором кода — Sublime, Notepad++ и др. и в начале документа выше кода «defined(‘_JEXEC’) or die;» вставляем следующий код:

Также желательно все пути до стилей и скриптов указывать в абсолютном виде, т.е. с доменом сайта. Для этого мы создаем переменную «$baseUrl» и заносим в нее значение «JUri::base()«. Можно конечно сразу в путь дописать «JUri::base()«, не создавая переменную. Но так лучше делать, если вы используете «JUri::base()» только один раз, а если хотя бы 2 раза и более, то лучше уже через переменную. Таким образом, код будет быстрее интерпретироваться сервером и потреблять меньше памяти. На глаз вы можете это и не заметить, но тем не менее нужно делать именно так.

В результате в исходном коде страницы в секции « » у нас появится строка подключения файла стилей.

Если вы хотите подключить несколько файлов стилей, то просто копируете подключение выше и меняете имя файла.

Можно также подключить еще один файл стилей в самом файле style.css, используя импорт — @import url(‘путь до файла’). Открываете подключенный файл стилей, в моем случае это файл style.css, и в самом начале вставляете следующий код — @import url(‘gride.css’); У меня файл gride.css лежит в той же папке, что и файл style.css. Если у вас они лежат в разных папках, то указывайте правильный путь.

Все, с подключением стилей разобрались. Теперь давайте перейдем к скриптам.

Подключение скриптов

Скрипты подключаются примерно также, как и стили. Ниже строки подключения стилей выводим следующий код:

В результате в исходном коде страницы в секции « » получим строку подключения скрипта Magnific Popup:

Вообще, я в последнее время не подключаю скрипты в head, т.к. скрипты тормозят загрузку страницы. Я подключаю их в конце документа до закрывающего тега «

Читайте также:  Как подключить мультиварку в машине

Источник

jQuery Joomla 3 – особенности, установка и решение конфликтов

Время на чтение: 7 минут

На какой платформе вы бы не работали, у вас на сайте будет использован какой-либо скрипт. В том числе это касается и движка Joomla. Без скрипта сайт был бы скучным, не функциональным и ничем бы не привлекал внимание. Потому вы должны уметь работать с различными составляющими скрипта, а в особенности с фреймворком JavaScript – библиотеками jQuery. В данной статье мы рассмотрим, зачем вообще нужно загружать библиотеки jQuery, как установить их на сайт Joomla и как сделать noconflict – чтобы исчезли конфликтные ситуации с другими скриптами на странице. Кроме того, рассмотрим возможности расширения jQuery Easy для упрощенной работы с библиотеками.

Зачем на сайт Joomla устанавливать библиотеки jQuery

С “голым” JavaScript, который доступен на сайте Joomla по умолчанию, так сказать в родной комплектации движка, работать очень сложно. Нужно быть заядлым любителем жесткого кода, чтобы бы быстро решать различные задачи на сайте. И все равно вы хоть что-нибудь, да упустите во время работы. С библиотеками jQuery работать куда проще.

В первую очередь стоит отметить, что эти библиотеки позволяют создавать кроссбраузерный код. А это означает, что не нужно мучиться с JavaScript, пописывая для каждого браузера отдельный участок скрипта.

Написание скрипта с jQuery становится легкой отдушиной в жизни вебмастера – это уже не основная сложность в его жизни. Ведь на JavaScript приходится писать много, в частности, для визуальных эффектов. А библиотеки скриптов решают эту задачу единичными строками. При этом часто используются основные функции get() и post().

Многие жалуются, что после написания определенного сценария действий на JavaScript и внесения кода на сайт Joomla, работа площадки заметно замедляется. И это действительно так: чем больше кода на странице, тем меньше скорость ее загрузки. Но это будет звучать как заблуждение, если вы решитесь установить jQuery – данный фрейморвк считается самым быстрым среди всех остальных платформ для скриптов.


Еще многим нравится, что jQuery – это всем доступный фреймворк, который используют лидирующие в Рунете поисковики: Яндекс и Гугл. Установка не будет сложной. В этом вы убедитесь по ходу данной статьи. А еще вы убедитесь в том, что возможности библиотек практически не ограничены. А все потому, что существует тысяча плагинов, которые вы можете скачать и установить на сайт, таким образом дополнив функции jQuery. Что бы вы не хотели добавить к себе на страницу веб-ресурса, знайте, что jQuery это уже умеет, просто нужно найти подходящий плагин для реализации вашей задумки.

Ну, и напоследок стоит заметить, что jQuery постоянно развивается. Это не заброшенный фреймворк, а активно растущая платформа. Существует ни одно сообщество, в том числе на русском языке, в котором вы смогли бы обсудить возникшие проблемы и вопросы по поводу пользования библиотеками. Кроме того, есть специальная документация на счет особенностей использования возможностей библиотек.

Как подключить jQuery на сайт Joomla

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

Читайте также:  Как подключить телефон в машине через блютуз киа спортейдж

Для начала вам необходимо скачать библиотеки jQuery. Сделать это можно на сайте официального разработчика. Как и многие гениальные вещи, эти библиотеки создали обычные веб-программисты, которым надоел громоздкий JavaScript. Они решили придумать облегченную версию кода, и таким образом создали jQ. Теперь эта библиотека быстро разошлась по миру и уже стала любимой для многих сайтостроителей.

Итак, заходите на официальный ресурс с библиотеками. Находите страницу загрузки и нажимаете кнопку Download. Вы должны сразу определиться, какую версию библиотек вы хотите установить к себе на ресурс. Существует сжатая и облегченные версии jQuery. Суть в том, что в сжатой версии будет сложнее разобраться новичку – там код написан без разбивки на строки и идет одним целом. Сжатая версия на официальном сайте будет называться compressed, а облегченная с пробелами, абзацами и т. д. – uncompressed. Учтите, что хоть облегченной версией пользоваться проще, если вы самостоятельно пишите и редактируете код, но сжатая не спроста предлагается вебмастерам. Она весит меньше из-за меньшего числа символов в файлах, потому загружается быстрее и не так тормозит работу сайта. А значит сжатая версия лучше повлияет на SEO сайта. Так что думайте, что для вас важнее: простота или скорость?


После того, как определитесь с типом библиотек, нажимайте на название версии и скачивайте архив на компьютер. Далее вам необходимо будет зайти на хостинг. Используйте для этого FTP-клиент, которым вы обычно пользуетесь. Зайдите на сервер и найдите ту директорию сайта, в которой хранится index.html. Именно туда вам необходимо будет переместить файл с библиотекой. Если вы загрузили сжатую версию, все содержимое ее будет весить около 100 килобайт. В то время, как развернутая версия библиотек отнимет целых 300 килобайт дискового пространства, то есть она в три раза больше, так что еще раз вас предупреждаем: хорошенько подумайте на счет загрузки именно сжатой версии.

Теперь перейдем к непосредственному подключению jQuery к сайту с движком Joomla. В целом, этот процесс аналогичен процессу подключения css к сайту. Вам нужно будет лишь прописать единичную строку. И выглядеть она будет следующим образом:

Источник

Как подключить jQuery

Первый вопрос, который возникает при начале работы с библиотекой jQuery — как её подключить? Странно, что я не написал об этом ранее и сейчас решил восполнить этот пробел.

В этой статье я расскажу как правильно добавить jQuery на обычном html-сайте и на популярных движках.

Подключение jQuery со страницы своего сайта

Самый распространенный способ подключения библиотеки. Для начала необходимо скачать свежую версию с сайта разработчика. На странице загрузки представлено несколько вариантов библиотеки, например сейчас предлагается скачать «Compressed, production jQuery 3.1.1» и «Uncompressed, development jQuery 3.1.1». Первый вариант — это сжатый вариант библиотеки, оттуда удалены все комментарии, в этом случае библиотека занимает намного меньше места, следовательно страница, на которую она будет подключена будет загружаться быстрее. Второй вариант — это, грубо говоря, исходный код библиотеки, он структурирован в удобном для чтения виде с комментариями, и предназначен в первую очередь для разработчиков. Поэтому рекомендую использоваться сжатую версию библиотеки.

Читайте также:  Как подключить микрофон к активным колонкам

После того, как библиотека загружена, необходимо разместить её на сервере, где находятся файлы сайта. Я обычно в корне сайта создаю папку «js» в которую копирую нужные библиотеки и там же размещаю файл со своими функциями.

Теперь можно переходить непосредственно к подключению jQuery. Структура веб-страницы, на которую Вы подключаете jQuery, может быть разной. Но в ней обязательно присутствуют теги HTML, HEAD и BODY. Так вот для подключения jQuery необходимо добавить тег SCRIPT со ссылкой на библиотеку внутрь тега HEAD.

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

Внимание! Желательно не менять название файла библиотеки jQuery (зачастую меняют на jquery.js), так как в дальнейшем сохранение официального названия файла поможет увидеть, какую версию библиотеки Вы используете (в моем примере используется версия 3.1.1).

Подключение jQuery на страницы своего сайта с внешних источников

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

Этот способ подключения называется «Подключение с CDN». Сеть доставки контента или как ее чаще называют CDN (Content Delivery Network) является сетью серверов по всему миру. Они помогают улучшить производительность вашего веб-сервера и уменьшают нагрузку на ваш трафик.

Наиболее популярные CDN для подключения jQuery:

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

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

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

Подключение jQuery в WordPress производится автоматически, поэтому нет никакой необходимости подключать библиотеки других версий вручную. Это происходит в шаблоне с помощью php кода:

В итоге внутри тега HEAD появится строка подключения jQuery.

На момент написания статьи с WordPress поставляется jQuery v1.12.4 Но, как видите, версия библиотеки очень сильно отличается от той, которую подключали в примерах выше. Подключить свежую версию библиотеки возможно, но есть шанс возникновения конфликта.

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

Тут сначала отключается стандартная библиотека, а потом через Google API подключаем версию 3.1.1

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

Подключение jQuery в Joomla 3

Подключение jQuery в Joomla 3, так же как и в WordPress производится автоматически, поэтому нет необходимости подключать библиотеку вручную, а нужно использовать специальную конструкцию вызова:

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

Источник

Поделиться с друзьями
Adblock
detector