как вставить скрипт в joomla
Правильная вставка JAVA SCRIPT и HTML кода в Joomla
Продолжаем наполнять наш сайт материалами, сегодня будем создавать статью под названием Контакты.
Итак, создаем материал под названием Контакты (contact). Копируем текст материала, кроме карты, форматируем и сохраняем статью:
В 5 уроке мы говорили, что модуль отвечает за то, в каком месте сайта или страницы будет отображаться информация. Значит для его использования нам необходимо модуль создать и указать, где его отображать.
и нажимаем на кнопку Новый:
Ставим галочку у Special HTML и нажимаем кнопку Следующая:
На странице настройки модуля указываем следующие параметры:
Чтобы получить код карты, мы идем на http://maps.google.com/. В строке поиска набираем название фирмы. Появляется карта с местоположением нашей фирмы, нажимаем на кнопку Ссылка и видим HTML-код для добавления на сайт:
Копируем этот код, вставляем его в параметры нашего модуля и сохраняем:
Таким образом, мы создали модуль с кодом карты (map1), а в статье указали, где этот модуль надо отобразить (loadposition). Сохраняем нашу статью. В следующем уроке мы создадим меню и увидим, как выглядят страницы нашего сайта, а пока подведем итог этого урока:
Чтобы вставлять в Joomla html/JavaScript-код, необходимо:
Правильное подключение стилей и 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, т.к. скрипты тормозят загрузку страницы. Я подключаю их в конце документа до закрывающего тега «
Как в Joomla вставить скрипт
Имеющиеся редакторы в CMS Joomla не позволяют вставлять в контент дополнительные JS (JavaScript), CSS, PHP и HTML коды. А так как имеется многочисленное количество элементов расширений, составленных на скриптах и кодах, то потребность к их размещению на сайте велика. Такой недостаток работы движка и проблему: как в Joomla вставить скрипт может устранить
плагин Sourcerer для Joomla! 2.5.
Скачать бесплатно плагин Sourcerer
Плагин для Joomla! 2.5 Sourcerer позволит вам легко и быстро вставить любой код, а это PhP код, CSS, HTML, JavaScript, непосредственно в выбранное место. То есть вставить в любое место на сайте, а именно: контент, модуль, категорию, компонент.
Данный плагин предоставит большие возможности для улучшения дизайна страниц и всего сайта.
Предлагаемая версия плагина для скачивания – бесплатная. Язык интерфейса – русский. Плагин имеет минимальные возможности, но этого вполне достаточно для проведения работ. Этот вариант наиболее подходящий для начинающих веб-мастеров, по сравнению с профессиональной, расширенной и платной версией PRO.
Далее переходим в Менеджер Плагинов, находим установленный плагин System – Sourcerer и активируем его.
Следующей ступенью будет этап работы: как в Joomla вставить скрипт. Но и здесь все довольно просто осуществляется. Открываем любой материал и видим внизу под текстом новую кнопку «Вставить код<>«. Это и есть та самая волшебная кнопочка, с помощью которой можно осуществлять операции с кодами.
Вот и все, нажимайте, вставляйте и радуйтесь!
А если вам понравилась статья, то для тренировки (процесс нажатия кнопки), можете попробовать нажать на любую из социальных кнопок. И потом можно описать это удовольствие в комментарии.
Как правильно подключать JavaScript и CSS в Joomla 4
Оглавление
Joomla 4 значительно улучшила свою кодовую базу, выкинув Mootools и по умолчанию отказавшись от jQuery. Вы можете подключать сторонние стили, скрипты и JavaScript библиотеки по своему усмотрению, и это одновременно как плюс, так и минус Joomla 4. Плюс в том, что вы получаете возможность выбора и гибкость в управлении этими ресурсами. Минус же заключается в том, что требуется знать, как правильно подключать стиль или скрипт в Joomla. Как раз о правильном подключении JavaScript и CSS мы расскажем ниже.
Определение скриптов JS и стилей CSS в Joomla
Наличие joomla.asset.json рекомендуется для вашего расширения или шаблона, но не обязательно для работы WebAsset.
Не рекомендуется добавлять инлайны (куски кода как CSS, так и JS) в json-файл, для этого лучше использовать отдельный файл.
Стадия ресурса (ассета)
У каждого ресурса есть две стадии: зарегистрированный (registered) и используемый (used).
Ресурс не может быть использован, если ранее он не был зарегистрирован, это вызовет исключение неизвестного ресурса ( UnknownAssetException ).
Регистрация в Joomla JavaScript и CSS
Все известные JavaScript и CSS ассеты в Joomla загружаются и затем сохраняются в реестр ресурсов WebAssetRegistry (для включения/выключения элемента вы должны использовать WebAssetManager ).
Joomla будет искать определение ассетов автоматически во время выполнения в следующем порядке:
И загрузит их в реестр известных JavaScript и CSS файлов.
Каждое следующее определение будет переопределять элементы ресурсов из предыдущего определения, по имени (name) элемента.
В Joomla вы можете зарегистрировать свои собственные определения ресурсов (ассетов) через WebAssetRegistry :
Чтобы добавить пользовательский элемент во время выполнения:
Или более просто, используя WebAssetManager :
Новый элемент foobar будет добавлен в реестр известных ресурсов, но не будет подключен к документу, пока ваш код (макет, шаблон и т.д.) не запросит его.
Чтобы проверить существование ассета в реестре, используйте метод assetExists :
Включение ресурса (ассета с JS и/или CSS)
Если есть какие-либо зависимости от отключаемого ресурса, то независимо ни от чего этот ресурс будет снова автоматически включен.
Чтобы проверить, включен ли ассет, и узнать его состояние:
Переопределение подключаемых стилей CSS и JS скриптов в Joomla
Чтобы переопределить URI, мы определяем элемент ресурса с именем foobar в нашем joomla.asset.json :
Или зарегистрируйте новый элемент ресурса через WebAssetManager :
Работа с CSS в Joomla 4
В Joomla WebAssetManager позволяет управлять файлами стилей (CSS). Такой элемент обозначается как «style». Пример json определения элемента CSS в joomla.asset.json :
Методы для работы со стилями CSS
В Joomla WebAssetManager предлагает следующие методы работы с файлами стилей CSS:
Добавление инлайн-стиля
Дополнительно к файлам стилей CSS, WebAssetManager позволяет добавлять инлайн-стили (inline style), и поддерживать их отношение к файлу ресурса. Инлайн-стили могут быть размещены непосредственно перед зависимостью, после зависимости, или как обычно после всех стилей CSS.
Инлайн-ресурс может иметь имя, как и другие ресурсы (но не обязательно). Имя может быть использовано для получения элемента ресурса из реестра или как зависимость от другого встроенного ресурса. Если имя не указано, то будет использовано сгенерированное имя, основанное на хэше содержимого.
В примере выше «foobar» должен существовать в реестре ресурсов, иначе вы получите исключение неполной зависимости.
Пример выше выведет:
Если инлайн-ресур CSS имеет несколько зависимостей, то для позиционирования будет использоваться последняя. Пример:
Именованные инлайн-ресурсы CSS могут быть зависимы от другого инлайна, однако не рекомендуется использовать такие конструкции в качестве зависимости от неинлайн-ресурса. Это будет работать, но такое поведение может измениться в будущем. Вместо этого лучше использовать «позицию».
Работа с JavaScript в Joomla 4
В Joomla WebAssetManager позволяет управлять файлами скриптов (JavaScript). Такой элемент обозначается как «script». Пример json определения элемента в joomla.asset.json :
Пример json-определения скрипта модуля ES6 с откатом к legacy:
Методы для работы со скриптами JS
В Joomla WebAssetManager предлагает следующие методы работы с файлами JS скриптов:
Добавление инлайн-скрипта JS
Дополнительно к файлам скриптов JS, WebAssetManager позволяет добавлять инлайн-скрипты (inline script), и поддерживать их отношение к файлу ресурса. Инлайн-скрипты JS могут быть размещены непосредственно перед зависимостью, после зависимости, или как обычно после всех JS скриптов.
Инлайн-ресурс JS может иметь имя, как и другие ресурсы (но не обязательно). Имя может быть использовано для получения элемента ресурса из реестра или как зависимость от другого встроенного ресурса. Если имя не указано, то будет использовано сгенерированное имя, основанное на хэше содержимого.
В примере выше «foobar» должен существовать в реестре ресурсов, иначе вы получите исключение неполной зависимости.
Пример выше выведет:
Если инлайн-скрипт JS имеет несколько зависимостей, то для позиционирования будет использоваться последняя. Пример:
Именованные JS инлайны могут быть зависимы от другого JS инлайнов, однако не рекомендуется использовать инлайн в качестве зависимости от неинлайн-ресурса. Это будет работать, но такое поведение может измениться в будущем. Вместо этого лучше использовать «позицию».
Работа с веб-компонентами
Пример json определения некоторых веб-компонентов в joomla.asset.json (как модуль ES6):
В качестве альтернативы вы можете зарегистрировать их в PHP (как модуль ES6):
Предпочтительно для имени использовать префикс «webcomponent», чтобы его можно было легко обнаружить и отличить от обычных скриптов в макете.
Работа с пресетами
Пример json определения элемента в joomla.asset.json :
Методы для работы с пресетами
В Joomla WebAssetManager предлагает следующие методы работы с пресетами:
Пользовательский класс WebAssetItem
Пользовательский класс может позволить вам выполнять дополнительные действия, например, включать файл ассета в зависимости от активного языка:
Кроме того, реализация Joomla\CMS\WebAsset\WebAssetAttachBehaviorInterface позволяет вам добавить опции сценария (которые могут зависеть от окружения), когда ваш ресурс включен и подключен к документу:
Определение пользовательского класса WebAssetItem в joomla.asset.json
Как в Joomla вставить скрипт
Поделюсь с вами наработками того, как в Joomla вставить скрипт. Лично я использую три способа в зависимости от потребностей.
Дело в том, что если вставлять скрипты через редактор (будь то вставка скрипта в самом материале или в HTML-модуле), то редактор «режет» код скрипта. Т.е. после сохранения вы можете или вообще не увидеть вставленного кода, или увидеть его обрезанную версию, которая не будет работать.
Вставка скрипта через модуль вставки произвольно кода. Плюс этого метода состоит в том, что код будет работать на всех страницах, где отображается созданный модуль. Рекомендую использовать модуль Flexi Custom Code, который работает со всеми версиями Joomla без нареканий. Найти его можете в JED (extensions.joomla.org) через поиск по названию. Далее переходите на сайт разработчика и качайте свежую версию модуля бесплатно. Настройки модуля до безумия простые. Укажите название модуля, показывать ли его заголовок, установите позицию отображения, укажите, на каких страницах модуль показывать. В окошке для вставки кода укажите код скрипта. Не забудьте проверить, чтобы модуль был опубликован и сохраните изменения.
Вставляем скрипт только на определенной странице непосредственно в материал Joomla. Рекомендую для этого использовать плагин Sourcerer. Аналогично, ищем его через JED и качаем с сайта разработчика. После установки проверяем, чтобы плагин был опубликован. В нижней части редактора материалов появится дополнительная кнопка для вставки кода в статью. При нажатии этой кнопки откроется окошко с образцом вставляемого кода. В этом образце вам нужно будет заменить тестовый код на свой. После подтверждения вставки кода и сохранения материала необходимый код будет вставлен в материал. Таким образом в конкретной статье можно вставлять скрипты для обратного отсчета времени, коды сторонних сервисов для использования на вашем сайте. Так вы даже можете вставлять в нужное место статьи код контекстной рекламы.
Некоторые скрипты в Joomla добавляются не путем указания самого кода, а путем подключения файла скрипта, который может храниться как на вашем сервере, так и может быть загружен из любого другого места (например, с google.com). Обычно такие файлы скриптов подключаются в секции HEAD кода страницы сайта. Чтобы сделать такое подключение своего скрипта, вам нужно зайти в «Менеджер шаблонов», открыть на редактирование главную страницу нужного шаблона и прописать подключение нужного скрипта. Этот способ наиболее сложен для новичков и требует некоторых навыков, т.к. иногда подключенные скрипты сайта могут конфликтовать между собой и работать неправильно. В этом случае приходится либо как-то исправлять конфликт, либо искать аналоги используемых расширений, скрипты которых не конфликтуют.