Как создать свой сайт → Уроки Joomla → Урок 15. Делаем меню каталога товаров
Joomla - Урок 15. Делаем меню каталога товаров
В уроке 10 мы с вами делали главное меню сайта и запомнили:Чтобы создать в Joomla меню, необходимо:
- Создать само меню и его пункты в Меню - Меню.
- Создать и настроить модуль для работы меню в Расширения - Модули.
- Тип меню - leftmenu.
- Заголовок - Каталог товаров.
- Описание - Меню каталога товаров.
- Заголовок модуля - Левое меню.
Нажимаем на кнопку Сохранить. Теперь идем в Расширения - Модули, видим, что наше меню появилось:
Заходим в него, чтобы проверить настройки (двойным щелчком мыши по названию):
У нас должны быть следующие настройки:
- Заголовок - Каталог товаров.
- Отображать заголовок - ДА.
- Включен - Да (иначе мы не увидим нашего меню).
- Положение - left (слева).
- В параметрах модуля (справа окна) в поле Стиль меню - Список (т.е. вертикальное меню).
Теперь нам надо создать наш первый пункт меню - Брянск, но давайте посмотрим на меню сайта-образца. В нем присутствуют слова ОБОИ и чуть ниже - ПЛИТКА, ПЛИНТУС, они как бы разделяют меню на две части. В Joomla такие вставки так и называются Разделители. И сейчас нам надо создать первый разделитель - ОБОИ. Для этого идем в Меню - Меню, щелкаем по пиктограмме Пункт меню:
Нажимаем на кнопку Создать, выбираем тип пункта меню - Разделитель (щелкаем по нему):
Даем ему заголовок - ОБОИ:
Сохраняем, идем на наш сайт и видим, что разделитель появился:
Теперь создаем пункт меню - Брянск. Здесь возможны несколько вариантов и на некоторые мы сейчас посмотрим. Нажимаем на кнопку Создать в менеджере пунктов меню, но теперь выбираем тип пункта меню - Статьи (щелкаем по нему), а в нем - Статьи раздела в виде блога:
В открывшемся окне нам надо указать:
- Заголовок - Брянск.
- Псевдоним - brynsk.
- Отображать в меню - Каталог товаров.
- Опубликовано - Да.
- В основных параметрах (справа окна) в поле Раздел - Брянск, в поле Столбцы - 1.
- В параметрах компонента (чуть ниже) в поле Показывать заголовок статьи - Да, в поле Заголовок в виде ссылки - Да.
Как видите, при щелчке по этому пункту меню открылась страница, где отображаются все статьи раздела Брянск. А если щелкнуть по названию статьи, то мы попадем на страницу самой статьи (а если пощелкать по изображениям наших фотогалерей, то они будут увеличиваться в размерах). Такой вид пункта меню часто используется в блогах, отсюда и его название.
Можете поэкспериментировать с настройками этого пункта меню, например, в основных параметрах (справа окна) в поле Столбцы поставить цифру 2. Тогда статьи будут располагаться не одна под другой, а в двух соседних колонках. И вообще, не бойтесь задавать различные варианты настроек и смотреть, как это меняет ваш сайт. Ведь обо всем очень трудно рассказать, да и получается на практике нагляднее.
Теперь давайте попробуем сделать страницу раздела, похожей на сайт-образец. Для этого прежде всего изменим тип пункта меню. Идем в Меню - Меню, щелкаем по пиктограмме Пункт меню, а затем по нашему пункту Брянск. В открывшемся окне щелкаем по кнопке Изменить тип:
Давайте выберем тип - Категории раздела в виде списка, а в основных параметрах (справа окна) в поле Описание - Показать, в поле Список категорий - Показать, в поле Статей категории - Скрыть. Остальные настройки можно оставить, сохраняем и смотрим на результат:
Нужные нам ссылки появились, но картинок и текста нет. Чтобы они появились надо изменить описание самого раздела, а то в пункте меню мы указали, что надо показывать описание раздела, а самого описания в разделе у нас нет.
Поэтому идем в Статьи - Разделы, щелкаем по нашему разделу Брянск и в поле Описание вносим наш текст и вставляем картинки (так же, как мы это делали, создавая обычные статьи). Картинки, как вы помните надо предварительно положить в папку stories (подробно об этом мы говорили в уроке 7).
Сохраняем, идем на наш сайт, обновляем страницу и видим результат:
Получилось очень похоже на сайт-образец. Если теперь щелкнуть по ссылкам (например, гофрированные), то мы попадем на страницу категории:
Здесь отображаются все статьи данной категории, у нас она одна, если мы щелкнем по ее названию, то попадем, на страницу с фотогалереей.
Если же мы хотим, чтобы у нас было точно также, как на сайте-образце, т.е. по щелчку по пункту меню Брянск, открывалась страница с ссылками, ведущими на фотогалереи, то можно не задавать описание раздела, а создать в разделе еще одну категорию, например - общее (all), создать статью в этой категории с контентом, который мы выше помещали в описание раздела и ссылками на страницы категорий, изменить тип пункта меню на Статья - Одна статья, а в настройках пункта меню выбрать созданную статью (так мы делали в уроке 10, когда создавали Главное меню сайта).
Вы теперь умеете создавать разные типы пунктов меню. Вам осталось самостоятельно реализовать остальные пункты меню каталога товаров. Напомню лишь, в каком порядке мы это делали:
- Сначала мы создали разделы и категории каталога товаров (урок 11).
- Затем для каждой категории мы создали фотогалерею (урок 13).
- Затем для каждой категории мы создали страницу и вставили в нее код фотогалереи (урок 14).
- Затем мы создали пункт меню в меню каталога товаров одним из трех способов (этот урок).
На этом мы собственно и закончим наполнять наш сайт материалами. Нам осталось лишь подкорректировать шаблон нашего сайта, чтобы его дизайн стал похож на оригинал. Этим мы и займемся на следующем уроке.
Предыдущий урок Вернуться в раздел Следующий урок
Если этот сайт оказался вам полезен, пожалуйста, посмотрите другие наши статьи и разделы.
Код кнопки: |
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.
|