Как создать свой сайт → Уроки Joomla → Урок 9. Наполняем сайт материалами (учимся вставлять html/javascript-код)
Joomla - Урок 9. Учимся вставлять html/javascript-код
Продолжаем наполнять наш сайт материалами, сегодня будем создавать статью под названием Контакты. Посмотрите на нее на сайте-образце. Из нового здесь присутствует карта Google.Итак, создаем материал под названием Контакты (contact). Копируем текст материала, кроме карты, форматируем и сохраняем статью:

Теперь нам надо вставить Google maps. Существую различные способы вставки стороннего html/javascript-кода на сайты, сделанные на Joomla. Я предлагаю один из самых простых, с использованием расширения Joomla - модуля mod_specialhtml_J15.
Итак, скачайте модуль к себе на компьютер. Теперь идем в Расширения - Установка и удаление. Нажимаем на кнопку Обзор, выбираем модуль mod_specialhtml_J15.zip и нажимаем на кнопку Закачать файл (подробно об установке расширений мы говорили в 5 уроке).
В 5 уроке мы говорили, что модуль отвечает за то, в каком месте сайта или страницы будет отображаться информация. Значит для его использования нам необходимо модуль создать и указать, где его отображать.
Для этого мы идем в Расширения - Модули:

и нажимаем на кнопку Новый:

Ставим галочку у Special HTML и нажимаем кнопку Следующая:

На странице настройки модуля указываем следующие параметры:
- Название, например - Карта Google.
- Отобразить заголовок - Нет.
- Включен - Да.
- Положение - map1. Эту позицию надо набрать вручную. Joomla предлагает в списке те позиции, которые у нее есть в шаблоне, но мы будем вставлять этот модуль в статью, и поэтому положение для него мы определяем сами. (Подробнее об этом мы будем говорить в следующем уроке).
- В параметрах модуля, на вкладке HTML/JavaScript нам надо указать код нашей карты.

Чтобы получить код карты, мы идем на http://maps.google.com/. В строке поиска набираем название фирмы сайта-образца - Русобои СПб. Появляется карта с местоположением нашей фирмы, нажимаем на кнопку Ссылка и видим HTML-код для добавления на сайт:

Копируем этот код, вставляем его в параметры нашего модуля и сохраняем:

Теперь идем в Статьи - Статьи, выбираем нашу статью Контакты и открываем ее для редактирования. Встаем курсором мыши в то место, где должна быть наша карта и пишем следующую команду:
{loadposition map1}
:
Таким образом, мы создали модуль с кодом карты (map1), а в статье указали, где этот модуль надо отобразить (loadposition). Сохраняем нашу статью. В следующем уроке мы создадим меню и увидим, как выглядят страницы нашего сайта, а пока подведем итог этого урока:
Чтобы вставлять в Joomla html/JavaScript-код, необходимо:
- Создать модуль (в Расширения - Модули), выбрать тип (Special HTML), дать модулю название, задать имя его положения и вставить сам код.
- На странице встать курсором в место, куда будет вставлен модуль и написать команду {loadposition имя_положения_модуля}.
Предыдущий урок Вернуться в раздел Следующий урок
Если этот сайт оказался вам полезен, пожалуйста, посмотрите другие наши статьи и разделы.
![]() |
Код кнопки: |
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.
|