Как вставить скрипт в джумла
Как вставить скрипт в Joomla
Дата публикации: 2016-06-20
От автора: приветствую Вас уважаемые читатели. Современные веб-сайты, активно используют JavaScript для реализации дополнительного функционала, непосредственно на стороне клиента. К примеру, слайдеры и галереи изображений, валидация информации и т.д. Поэтому в данном уроке мы поговорим о том, как вставить скрипт в Joomla используя различные способы.
Как Вы знаете за формирование дизайна пользовательской части сайта, отвечает шаблон. Соответственно именно в шаблоне осуществляется подключение основных библиотек, фреймворков, скриптов и стилей. Но шаблон формирует основную структуру сайта, а за отображение информации компонентов или модулей, отвечают их встроенные макеты, которые при необходимости могут переопределяться в шаблоне. Таким образом, необходимые, для конкретных расширений скрипты, могут подключаться непосредственно в макетах.
Из выше сказанного следует, что скрипты для joomla могут быть подключены в определенном файле шаблона, или макета конкретного расширения. И наиболее удобное место – это, конечно же, главный файл шаблона index.php, так как расширения доступны не на всех страницах сайта.
Поэтому, давайте рассмотрим, первый способ подключения скриптов в Joomla, который предусматривает ручное добавление определенного кода. Итак, открываем исходные файлы CMS Joomla и переходим в каталог templates.
Хотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Правильная вставка 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
Современные веб-сайты, активно используют JavaScript для реализации дополнительного функционала, непосредственно на стороне клиента. К примеру, слайдеры и галереи изображений, валидация информации и т.д. Поэтому в данном уроке мы поговорим о том, как вставить скрипт в Joomla используя различные способы.
Как Вы знаете за формирование дизайна пользовательской части сайта, отвечает шаблон. Соответственно именно в шаблоне осуществляется подключение основных библиотек, фреймворков, скриптов и стилей. Но шаблон формирует основную структуру сайта, а за отображение информации компонентов или модулей, отвечают их встроенные макеты, которые при необходимости могут переопределяться в шаблоне. Таким образом, необходимые, для конкретных расширений скрипты, могут подключаться непосредственно в макетах.
Из выше сказанного следует, что скрипты для joomla могут быть подключены в определенном файле шаблона, или макета конкретного расширения. И наиболее удобное место – это, конечно же, главный файл шаблона index.php, так как расширения доступны не на всех страницах сайта.
Поэтому, давайте рассмотрим, первый способ подключения скриптов в Joomla, который предусматривает ручное добавление определенного кода. Итак, открываем исходные файлы CMS Joomla и переходим в каталог templates.
В данной папке мы видим список каталогов с установленными шаблонами. Далее переходим в папку активного шаблона и открываем файл index.php в текстовом редакторе.
Соответственно между тегами head как правило подключаются необходимые элементы (скрипты, стили и т.д). А значит, мы можем вручную прописать подключение или же использовать специальный метод, о котором мы далее поговорим. Поэтому давайте подключим простейший скрипт, который описан в отдельном файле script.js. Вот его код:
Соответственно между вышеуказанными тегами, используя блок
Хотел бы заметить, что файл со скриптом, Вы можете располагать где угодно, главное правильно указать путь подключения. Но в файловой структуре определена папка media, которая как раз и предназначена для хранения скриптов, библиотек и стилей. А значит, интересующий файл, мы будем располагать в каталоге script (данный каталог конечно же необходимо создать) вышеуказанной директории.
Обратите внимание — выражение baseurl;?>, возвращает базовый путь к сайту, относительно которого Вы прописываете путь к скрипту. После этого можно проверять результаты нашей работы.
Как Вы видите, метод alert() успешно отрабатывает.
Так же подключить файл со скриптом, вы можете более удобным способом, используя специальный метод addScript(), глобального объекта Joomla JDocument. То есть, перед кодом HTML файла index.php, используя вышеуказанный метод, зарегистрируем скрипт для подключения:
Как Вы видите, скрипты подключаются довольно просто, но данный способ не совсем удобен, так как требует работы с файловой структурой.
Поэтому рассмотрим второй вариант ответа на вопрос, как вставить JavaScript в Joomla, который заключается в использовании дополнительного расширения под названием Flexi Custom Code.
После скачивания модуля, необходимо распаковать полученный архив и только потом приступать к установке расширения, используя “Менеджер расширений”.
Далее переходим в “Менеджер модулей” и открываем страницу настройки только что установленного модуля.
В текстовую область “Insert Code” добавляем необходимый JavaScript код, публикуем модуль в определенной позиции на интересующих страницах и сохраняем изменения.
Далее проверяем результаты нашей работы. Как Вы видите, данный способ более удобен, так как интересующий скрипт добавляется прямиком в панели администратора.
Как в Joomla вставить скрипт
Поделюсь с вами наработками того, как в Joomla вставить скрипт. Лично я использую три способа в зависимости от потребностей.
Дело в том, что если вставлять скрипты через редактор (будь то вставка скрипта в самом материале или в HTML-модуле), то редактор «режет» код скрипта. Т.е. после сохранения вы можете или вообще не увидеть вставленного кода, или увидеть его обрезанную версию, которая не будет работать.
Вставка скрипта через модуль вставки произвольно кода. Плюс этого метода состоит в том, что код будет работать на всех страницах, где отображается созданный модуль. Рекомендую использовать модуль Flexi Custom Code, который работает со всеми версиями Joomla без нареканий. Найти его можете в JED (extensions.joomla.org) через поиск по названию. Далее переходите на сайт разработчика и качайте свежую версию модуля бесплатно. Настройки модуля до безумия простые. Укажите название модуля, показывать ли его заголовок, установите позицию отображения, укажите, на каких страницах модуль показывать. В окошке для вставки кода укажите код скрипта. Не забудьте проверить, чтобы модуль был опубликован и сохраните изменения.
Вставляем скрипт только на определенной странице непосредственно в материал Joomla. Рекомендую для этого использовать плагин Sourcerer. Аналогично, ищем его через JED и качаем с сайта разработчика. После установки проверяем, чтобы плагин был опубликован. В нижней части редактора материалов появится дополнительная кнопка для вставки кода в статью. При нажатии этой кнопки откроется окошко с образцом вставляемого кода. В этом образце вам нужно будет заменить тестовый код на свой. После подтверждения вставки кода и сохранения материала необходимый код будет вставлен в материал. Таким образом в конкретной статье можно вставлять скрипты для обратного отсчета времени, коды сторонних сервисов для использования на вашем сайте. Так вы даже можете вставлять в нужное место статьи код контекстной рекламы.
Некоторые скрипты в Joomla добавляются не путем указания самого кода, а путем подключения файла скрипта, который может храниться как на вашем сервере, так и может быть загружен из любого другого места (например, с google.com). Обычно такие файлы скриптов подключаются в секции HEAD кода страницы сайта. Чтобы сделать такое подключение своего скрипта, вам нужно зайти в «Менеджер шаблонов», открыть на редактирование главную страницу нужного шаблона и прописать подключение нужного скрипта. Этот способ наиболее сложен для новичков и требует некоторых навыков, т.к. иногда подключенные скрипты сайта могут конфликтовать между собой и работать неправильно. В этом случае приходится либо как-то исправлять конфликт, либо искать аналоги используемых расширений, скрипты которых не конфликтуют.