[Онлайн обучение] Создаём интернет-магазин с нуля для slon21veka! Этап 7: Горизонтальное меню, категории и материалы.

Ссылки на предыдущие уроки:

• Создаём интернет-магазин с нуля для slon21veka! Пошаговый курс. Начало
• Этап 1: Устанавливаем Denwer
• Этап 2: Установка Joomla
• Этап 3: Знакомство с Панелью администратора и русификация
• Этап 4: установка шаблона сайта
• Этап 5: Настройка шаблона сайта. Позиции модулей
• Этап 6: Создание простого HTML-модуля и собственного меню.

Продолжаем создавать меню для нашего сайта!
На прошлом уроке мы остановились на создании материала. Давайте посмотрим на примере как создаются статьи (материалы) для сайта и как они привязываются к определённым пунктам меню.

Категории.

Прежде всего нужно отметить, что любой материал должен принадлежать какой-либо категории. Это сделано для удобства сортировки материалов по определённым темам или группам. Кроме того, категорию тоже можно привязать к какому-либо пункту меню - и тогда на странице будут отображаться ссылки на материалы выбранной категории.

Но об этом мы ещё поговорим позже, а пока давайте создадим собственную категорию. Переходим:
Материалы - Менеджер категорий - Создать категорию

Назовём нашу категорию "Материалы для главного меню" и добавим описание для себя, чтобы точно не забыть зачем эта категория создавалась.

Поле Алиас не обязательно для заполнения и служит для создания понятной ссылки на категорию.

Обязательно проверяем чтобы Состояние было Опубликовано и сохраняем!

Материалы.

Теперь создадим первый материал для этой категории.
Переходим: Материалы - Менеджер материалов - Создать материал

Создавать материалы достаточно просто. В нашем распоряжении неплохой визуальный редактор, а, для продвинутых пользователей, есть возможность редактирования html кода.

Не забудьте заполнить заголовок и выбрать категорию справа от редактора материала.

Таким же образом создадим материал для главной страницы сайта:

Привязка к меню

Теперь пришло время создать пункты меню с привязкой к созданным материалам. Переходим: Меню - MyMainMenu - Создать пункт меню
В качестве типа пункта меню выбираем "Материал"

О создании пункта меню мы уже говорили немного на предыдущем уроке. Здесь всё достаточно просто, главное выбрать нужный материал.

Обратите внимание на поле "Порядок" справа. После сохранения, с помощью этого поля можно выбрать порядок данного пункта меню относительно других пунктов.
Аналогично делаем пункт меню для главной страницы.

На прошлом уроке мы уже создали модуль для нашего меню и отобразили его на сайте в позиции slider. Значит сейчас после сохранения изменений мы можем сразу посмотреть что у нас получилось.

Горизонтальное меню

А получилось не совсем так как хотелось бы: пункты меню расположены вертикально, друг под другом. Но нам хотелось бы видить их горизонтально. Что для этого нужно?

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

Итак, я скачал модуль ARI Ext Menu по ссылке, расположенной здесь. На этой же странице есть неплохое описание свойств данного модуля.

Напомню, что установка модуля производится здесь: Расширения - Менеджер расширений - Установка, вкладка "Загрузить файл пакета".
После установки находим данный модуль здесь: Расширения - Модули. И начинаем настраивать его свойства:

Установим Menu Direction = Horisontal и позицию = slider. А ниже мы можем настроить цвет текста и фона пунктов меню, как в обычном, так и в нажатом состоянии. Здесь есть ещё несколько полезных свойств, изучите их самостоятельно.

И, ещё однин момент: не забудьте сделать неактивными все меню в позиции slider, которые мы создавали на предыдущих уроках!

Вот что получилось у меня в итоге:

Как видите, на странице, помимо основного текста отображается ещё куча бесполезной информации, такой как: категория, дата публикации, автор материала, количество просмотров, а также иконки печати и письма. Давайте её скроем!

Для этого переходим: Система - Общие настройки - Материалы и выбираем какую информацию нужно отображать, а какую - нет.

На этом, пожалуй, закончим сегодняшний урок. Как вы заметили, я поменял картинку в шапке сайта, но это ещё не окончательный вариант.

А на следующем уроке, мы сделаем небольшое отступление, и рассмотрим очень важную тему: создание бэкапа сайта и восстановление из него.
Спасибо за внимание и поддержку!
Автор поста @manavendra
Все скриншоты сделаны в процессе подготовки материалов занятия