Меню Joomla 3, как создать и разместить на сайте
Продолжаем знакомиться с администрированием Joomla 3. В этой статье подробно познакомимся с возможностью системного меню Joomla. Пожалуй, нет необходимости говорить, что такое меню сайта. Достаточно, сказать, что на сайте Joomla меню можно разместить вертикально в правом и/или разместить горизонтально в районе шапки сайта.
Из общей информации про меню Joomla, стоит упомянуть, что материалы категории, которая не прикреплены к какому-либо меню сайта, не будут на сайте видны.
Меню и пункты меню Joomla 3
Меню сайта Joomla создаются администратор сайта или пользователями сайта с установленными разрешающими правами на управление меню сайта. Права на управление меню выставляются на вкладке Компоненты→Менеджер меню→Права.
Само меню Joomla это не информативная, а системная единица сайта. Создается меню для последующего создания информативных пунктов меню.
Примечание: На сайте Joomla можно создавать любое количество меню и любое количество пунктов меню с любой глубиной вложенности. Вложенность меню это дерево по типу: пункты меню-подпункты пунктов меню-подпункты подпунктов пунктов меню и т.д.
Как создать меню сайта Joomla
Для создания меню сайта открываем вкладку: Меню→Менеджер меню→Создать меню из горизонтального бара или Структура→ Менеджер меню→Создать меню вертикального меню административной части сайта.
sozdat menu joomla3 1
Меню даем имя, обязательно вписываем системное имя меню (тип меню). Типом меню может быть любое латинское слово, понятно указывающее назначение меню. Например, mainmenu, homemenu, topmenu, footermenu.
sozdat menu joomla3 2
Как создать пункты (подпункты меню)
Создание пунктов меню, производится на вкладке: Меню→Название меню→Создать пункт меню.
sozdat punkt menu 1
Типы пунктов меню
Как я уже упоминал, пункты меню Joomla 3 это информативные единицы сайта. При помощи пунктов меню можно открывать на сайте страницы с различной информацией. Эта информация может быть различной и в зависимости от типа информации, создаются различные типы меню. Посмотрим на типы пункта меню:
sozdat punkt menu vybor tipa blog
Тип пункта меню
- 1. Контакты (4 типа);
- 2. Ленты новостей (3 типа);
- 3. Материалы (7 типов), а именно
- Архивные материалы;
- Избранные материалы;
- Материал;
- Блог категории;
- Создать материал;
- Список всех категорий сайта;
- Список материал одной категории.
- 4.Менеджер настроек;
- 5.Менеджер пользователей (7 типов);
- 6.Метки (3 типа);
- 7.Обертка(Wrapper);
- 8.Поиск;
- 9.Системные (4 типа);
- 10.Умный поиск.
Как видите, типов пунктов меню много и при их помощи можно организовать очень неплохую навигацию по сайту.
Хватит теории, перейдем к практике и создадим меню с двумя, тремя пунктами меню.
Пример создания меню сайта Joomla
Создадим меню под названием «Меню1». Системное имя будет «menu-1».
Идем на вкладку: Меню→Создать меню.
Создаем меню на сайте Joomla 3 — sozdat menu joomla3 1
На странице создания меню указываем его имя «Меню1» и системное имя «menu-1».
создание меню Joomla 3 — parametry menu
Жмем кнопку «Создать».
Все! Меню создано.
menu sozdano
Что значит системное имя меню
Покажу, для чего нужно системное имя меню. Идем в phpmyadmin управляющий базой данных сайта.
menu v phpmyadmin
- Ищем таблицу: префикс_menu_types.
- Открываем ее (клик по названию), что соответствует SQL запросу:
- SELECT * FROM `префикс_menu_types`
- И видим системное имя созданных меню (тип меню).
Меню Joomla в phpmyadmin — sistemnoe imja menu v baze dannykh
Вывод: системное имя меню нужно для создания уникальных значений в полях таблицы menu_types базы данных Joomla.
Итак, мы создали меню Joomla, пора создавать пункты меню.
Создаем пункты меню Joomla
На вкладке Меню→Пункты меню→Создать меню, создаем пункт меню.
Даем пункту меню имя.
Создание пункта меню Joomla3 — sozdat punkt menu 1
sozdat punkt menu vybor tipa
Выбираем тип пункта меню. Пусть это будет тип меню: Блог категории.
Выбор типа меню Joomla3 — sozdat punkt menu vybor tipa blog
Выбираем категорию (1).
Указываем целевое окно: Новое окно с элементами навигации.
Справа указываем название нашего меню и родительский элемент данного пункта меню (2,3).
выбор категории пункта меню Joomla 3 — nastroyka punka menu 1
На других вкладках выставляем другие настройки пункта меню:
Настройки меню Joomla 3 — nastroyka punka menu 2
Параметры категории (2) – шаблон страницы категория.
Параметры макета Блога (3) – шаблон блога. Можно указать количество колонок.
Отображение (4) – шаблон показа отдельного материала;
Настройки интеграции (5)– включаем создание RSS лент для этого пункта меню.
Параметры ссылки (6). Здесь можно выключить показ этого пункта меню на сайте.
Параметры страницы (7). Здесь можно задать альтернативный заголовок, который буде виден в браузере. Также можно включить «Заголовок страницы». Он будет виден в начале всех страниц этого пункта меню в тегах , что соответствует всем страницам категории блога.
Параметры страницы в настройках меню — nastroyka punka menu 3
Метаданные (8). Нужно заполнить метаданные для этого блога, а именно descriptionи keywords. Descriptionдолжен быть уникальным и длинной не более 165 знаков. Keywords не обязателен.
После проверки всех настроек пункта меню, жмем «Создать» или «Создать закрыть».
Всё! Пункт меню создан. Осталось разместить меню на сайте.
Как разместить меню на сайте Joomla
Разместим два меню на сайте. Горизонтальное выпадающее и вертикальное с показом всего дерева меню.
Как разместить выпадающее горизонтальное меню Joomla
Выпадающее горизонтальное меню Joomla размещаем в специальном модуле шаблона, под названием «menu». В шаблоне могут быть созданы дополнительные поля для размещения меню, например footermenu, topmenu.
Для создания модуля меню идем на вкладку: Менеджер модулей→Создать меню. Выбираем тип модуля «Меню».
размещаем меню Joomla на сайте — menu na sajt
Выбор типа модуля меню Joomla — menu na sajt 2
Настройки модуля меню
Настройки модуля меню Joomla — modul menu nastroyka
На вкладке «Привязка к пунктам меню» указываем на каких страницах сайте показывать этот модуль с меню.
Привязка к пунктам меню — menu na sajt 4
На вкладке «Дополнительные параметры» смотрим последнюю строку: Стиль меню.
Стиль меню в настройках — menu na sajt 5
Обычно в шаблоне в пункте меню для меню, предусмотрен горизонтальный тип меню, поэтому ставим в стиль модуля «Унаследовано».
Если в шаблоне не предусмотрено горизонтальное меню, то ставим в стиль модуля horz(горизонтальное).
Как разместить вертикальное меню Joomla
Вертикальное меню создаем аналогичным образом, но позицию указываем в правом или левом сайдбаре сайта, а в стиле модуля указываем «Унаследовано» или любой стиль отличный от horz.
После работ смотрим результат:
Меню создано и размещено на сайте — menu sozdano i razmeshheno joomla3
Другие настройки сайта Joomla 3
- Joomla! 3.6 пришла и доступна
- Автоматическое обновление Joomla 2.5 до 3.3.6
- Блокировки в Joomla 3
- Вместо сайта белый экран Joomla, поиск причин и исправление
- Генеральная очистка Joomla сайта
Как создать пункт меню, ведущий на какой-либо материал
Эта страница — перевод страницы Adding a menu item which points to an Article. Перевод выполнен на 99%.
Таким образом помечены устаревшие переводы.
Другие языки:
Нижеследующий урок покажет Вам как в главном меню создать пункт меню, ведущий на материал с названием «Поддержка и документация». На основе этой информации, в любом своем меню Вы сможете создать пункт меню, ведущий на предварительно созданный Вами материал.
Если Вы сейчас еще не вошли в свою административную панель, то Вам нужно это выполнить. Если Вы уже в административной панели, то пропустите этот шаг.
1. Откройте в своем браузере новое окошко или новую вкладку и введите в его адресное поле ссылку URL. Например, если Вы установили свою Joomla на удаленном хостинге: http://www.название_вашего_вебсайта.com/administrator , или, если Вы установили систему Joomla! на своем личном компьютере: http://localhost/название_папки_с_установленной_joomla/administrator . Затем войдите в систему с правами либо администратора, либо супер администратора.
2. В панели управления выберите на планке меню Меню. В выпадающем списке выберите меню, с которым Вы желаете работать. Возможно, Вашим меню будет главное меню, которое имеется в Вашем распоряжении по умолчанию, или какое-либо другое. В ответ [на Ваш выбор меню] откроется административная страница менеджера пунктов меню. Вы также можете выбрать в колонке слева Менеджер меню и затем выбрать меню из показанного списка.
3. На планке инструментов, в левом верхнем углу, щелкните по кнопке Создать (это зеленая кнопка со знаком плюса на ней). Вам откроется административная страница Менеджер меню: Создание пункта меню.
4. На странице пункта меню щелкните на кнопку Выбрать параметра Тип пункта меню.
5. В показанном Вам списке выберите Материалы.
6. В открывшемся внизу списке выберите Материал.
7. Вернувшись на страницу редактирования пункта меню, щелкните на кнопку Выбрать параметра Выбор материала *.
8. [В ответ на этот щелчок] выскочит список Ваших материалов. Выберите [нужный] материал и щелкните на его заголовок. Если на Вашем сайте существует много материалов, то Вы можете отфильтровать поиск нужного материала, воспользовавшись находящимся наверху списка материалов поисковым полем Фильтр.
Мы очень близко к цели. Спокойно!
Вкладки
На этой новой странице заполните поля как показано ниже. Заметьте, что ярлыки обязательных к заполнению полей отмечены звездочкой (*)
Вкладка подробных данных
Данные пункта меню
- Заголовок меню *
Это текст, который будет показан для этого нового пункта меню. Для этого нашего примера возьмем заголовок Пример. Примечание: Заголовок меню — это поле, обязательное для заполнения. - Алиас
Это поле обычно оставляют пустым и Joomla! заполняет его за Вас автоматически. При включенном параметре SEF (ЧПУ), содержимое поля Алиас формирует URL ссылки Ваших веб-страниц. - Меню *
Этот параметр должен быть уже настроен на Ваше главное меню (или меню, которое Вы выбрали перед этим [в менеджере меню]). Здесь у Вас есть возможность переместить этот пункт меню в какое-либо другое меню по Вашему желанию. Это поле может пригодиться позже, если Вы пожелаете переместить этот пункт меню в другое меню. Примечание: поле «Меню» является обязательным полем. - Родительский элемент
Здесь Вы можете указать где разместить этот новый пункт меню. Вы можете разместить его в корневом (самом верхнем) пункте меню или — как дочерний пунктменю какого-либо другого, уже существующего пункта меню. Для этого нашего примера мы выберем Корневой пункт меню. - Состояние
Если Вы желаете показать [этот] Ваш новый пункт меню на своем вебсайте, то настройте этот [параметр] на Опубликовано. Если Вы желаете скрыть это меню от [посетителей своего] вебсайта, то просто установите этот [параметр] на «Не опубликовано. Это не значит, что он будет удален, — он просто станет невидим Вашим посетителям. Если Вы желаете удалить этот пункт меню, то просто выберите В корзине. При этом данный пункт меню не будет удален, — он [просто] будет помещен в мусорную корзину, где Вы сможете его [полностью] удалить [из системы]. - Порядок
Щелкните по расположенной наверху страницы кнопке «Сохранить» и Вы сможете увидеть выпадающий список «Порядок». Новый пункт меню по умолчанию займет последнее место в этом списке, но Вы сможете это изменить, выбрав в этом списке либо [опцию] «- Первый -«, либо какой-либо другой пункт меню, соответственно изменив позицию [этого нового меню]. - Главная страница
Вы можете выбрать эту опцию, если Вы желаете, чтобы этот пункт меню был главной страницей Вашего вебсайта. - Доступ
Эта опция назначит кто будет видеть этот новый пункт меню:- Public — доступ для всех посетителей сайта.
- Registered — доступ только для зарегистрированных пользователей.
- Special — пользователи, назначенные любой группе, за исключением группы «Registered».
Вкладка ‘Параметры материала’
Теперь, давайте щелкнем на расположенную наверху страницы вкладку Параметры категории. Здесь расположены другие опции, которые Вы можете выбрать для показа своих пунктов меню. Если Вы захотите исследовать все свои опции, то Вы сможете найти хорошо написанные подсказки, которые будут Вам показаны, когда Вы будете наводить указатель своей мышки на ярлыки [параметров].
Заметьте, что эти параметры включают опцию «По умолчанию». Если выбрать ее, то будут использованы настройки из менеджера материалов.
Параметры материала
- Заголовок — (По умолчанию/Скрыть/Показать). [Эти опции определяют] показывать ли заголовок материала.
- Заголовок как ссылка — (По умолчанию/Да/Нет). Если заголовок материала настроен на показ, то [эта опция определяет] показывать ли его как ссылку на данный материал.
- Вводный текст — (По умолчанию/Скрыть/Показать). Если [для данного параметра выбрана опция] «Показать», то при навигации вглубь материала будет показан его вступительный текст. Если выбрать «Скрыть», то будет показана только та часть материала, которая находится после кнопки «Подробнее».
- Позиция информации о материале — (По умолчанию/Сверху/Снизу/Разделить). Позиция информации о данном материале. Размещает блок с информацией о материале сверху или снизу [текста материала] или разделяет [этот блок] на два отдельных блока: один — наверху и другой — внизу.
- Категория — (По умолчанию/Скрыть/Показать). [Этот параметр определяет] показывать ли категорию, [которой принадлежит данный] материал.
- Категория как ссылка — (По умолчанию/Да/Нет). Если показ категории включен, то [этот параметр определяет] показывать ли категорию в виде веб ссылки на страницу макета категории (списка или блога).
- Заголовок родительской категории — (По умолчанию/Показать/Скрыть) Показывать ли родительскую категорию данного материала.
- Заголовок родительской категории как ссылка — (По умолчанию/Да/Нет). Если [включен] показ родительской категории данного материала, то [этот параметр определяет] показывать ли эту родительскую категорию как веб ссылку на макет этой категории (список или блог).
- Автор — (По умолчанию/Показать/Скрыть) Показывать ли автора данного материала.
- Автор, как ссылка — (По умолчанию/Да/Нет). Если включен показ автора материала, то [эта настройка определяет], показывать ли имя автора как веб ссылку на его контакт. Учтите, что [для работы этого параметра] для данного автора в менеджере контактов должен быть создан контакт.
- Дата создания — (По умолчанию/Скрыть/Показать). Показывать или нет дату создания материала.
- Дата изменения — (По умолчанию/Скрыть/Показать). Показывать ли дату [последнего внесенного] изменения в материал.
- Дата публикации — (По умолчанию/Скрыть/Показать). Показывать или нет дату начала публикации материала.
- Навигация — (По умолчанию/Показать/Скрыть). Показывать ли при открытии материала навигационные ссылки (Вперед или Назад).
- Рейтинг — (По умолчанию/Вперед/Назад). Показывать ли иконку, [щелчком по которой читатель сможет выразить свой уровень оценки] данного материала.
- Показывать иконки — (По умолчанию/Показать/Скрыть). При выборе опции «Показать», веб ссылки «Печать» [для распечатки материала на Вашем принтере] и «E-mail» [для отправки ссылки на данный материал другу по эл.почте] будут показаны в виде иконок.
- Иконка печати — (По умолчанию/Показать/Скрыть). Показывать или скрывать иконку на печатание материала.
- Иконка электронной почты — (По умолчанию/Показать/Скрыть). Показывать или скрывать иконку на [отправку ссылки на материал другу] по электронной почте.
- Кол-во просмотров — (По умолчанию/Показать/Скрыть). Показывать или скрывать число просмотров материала пользователями.
- Показывать метки — (По умолчанию/Показывать/Скрывать). Показывать или скрывать в материалах метки.
- Показывать ссылки неавторизованным — (По умолчанию/Да/Нет). При выборе опции «Да», посетители сайта будут видеть вступительную часть материала, предназначенного только для зарегистрированных на нем пользователей. Щелкнув на кнопку «Подробнее», чтобы просмотреть материал полностью, посетитель материала будет должен войти в систему сайта со своими учетными данными.
- Позиция ссылок — (По умолчанию/Сверху/Снизу). Если [выбрана опция] «Сверху», то ссылки «Подробнее» будут показаны над [вступительным текстом] материала. В противном случае, они будут показаны под ним.
Вкладка «Параметры ссылки»
Щелкните на вкладку с ярлыком Параметры ссылки. Этот раздел [настроек] позволит Вам индивидуально настроить как содержащая материал веб страница будет выглядеть. Если Вы решите изучить [имеющиеся в Вашем распоряжении здесь] опции, то Вам помогут выскакивающие при наведении указателя мыши на ярлыки [опций] подсказки. Вкладка опций
Параметры ссылки
- Заголовок как ссылка — необязательное произвольное описание для гиперссылки заголовка пункта меню.
- CSS класс ссылки — необязательный произвольный стиль CSS, который будет применен к гиперссылке пункта меню.
- Изображение ссылки — необязательное изображение, которое будет использовано для гиперссылки пункта меню. Это связанное с конкретным пунктом меню изображение должно быть сохранено в папке /images/. Вы можете загрузить по FTP свое собственное изображение с помощь медиа менеджера.
- Создать заголовок — (Да/Нет). Если было добавлено изображение, то [при включении этой опции] рядом с изображением будет показан заголовок меню. Настройка по умолчанию — «Да».
Параметры страницы
Щелкните по вкладке «Параметры страницы». Вы найдете в ней полезные подсказки. Просто начните наводить указатель мышки на ярлыки параметров, и подсказки будут Вам показаны. Параметры страницы
Параметры страницы
- Заголовок страницы в браузере — если это поле оставить пустым, то Joomla создаст заголовок вебстраницы для браузера автоматически. Указанный в этом поле заголовок можно использовать вместо заголовка, который взят с заголовка материала. Не забывайте, что заголовки вебстраниц — это один из самых важных моментов оптимизации вебсайта под поисковые двигатели (SEO). Используйте заголовки мудро.
- Показывать заголовок страницы — Показывать ли (Использовать глобальное/Да/Нет) заголовок страницы, настроенный в предыдущем параметре.
- Заголовок страницы — необязательный альтернативный текст для заголовка страницы.
- CSS-класс страницы — Этот [параметр] позволяет Вам сгенерировать уникальный CSS класс для данной страницы. Он полезен когда Вы желаете изменить облик данной страницы чтобы выделить ее среди остнальных страница сайта. Если Вы не заинтересованы в этом, то оставьте это поле пустым.
Вкладка Метаданные
Щелкните по вкладке Метаданные. Именно здесь Вы сможете индивидуально подстроить свои мета теги для [их] оптимизации в поисковых системах. Вы найдете полезные советы [в этой вкладке], которые будут появляться при наведении указателя мыши на ярлыки [параметров].
- Мета-тег Description — необязательный текст, который будет использоваться как описание данной страницы в ее HTML коде. Этот текст будет главным образом показан [на страницах] результатов поиска [на вебсайтах] поисковых двигателей.
- Мета-тег Keywords — необязательный список отделенных друг от друга ключевых слов и/или фраз, которые будут использоваться в исходном коде HTML.
- Мета-тег Robots — (По умолчанию, Index/Follow, No index/follow, Index/No follow, No index/no follow). Инструкции для роботов [поисковых двигателей].
- Поддержка SSL
Этот параметр предназначен для настройки сертификата безопасности SSL:- Вкл — как безопасную страницу
- Выкл — как обычную страницу
- Игнорировать — показывать как остальные страницы, безопасные или нет.
Вкладка Привязка модулей
Щелкните на вкладку с яклыком Привязка модулей. В этом разделе Вы можете подстроить [показ] модулей. Для подробной информации по имеющимся в разделе модулей опциям, пожалуйста посетите [страницу] по этой ссылке. Расширения Менеджер модулей Меню Вкладка Привязка модулей
Как только Вы закончили, щелкните по расположенной в левом верхнем углу кнопке Сохранить. Ваши изменения будут сохранены. Ваш новый пункт меню будет сохранен и размещен как последний элемент (или дочерний элемент, в случае с дочерними пунктами меню) в меню. После того как Вы изначально сохранили свои изменения, Вы сможете изменить в каком порядке этот пункт меню будет расположен в данном меню. Кнопки Сохранить и Закрыть описаны под изображением.
- Сохранить — Сохраняет данный пункт меню и оставляет данный экран открытым.
- Сохранить и закрыть — Сохраняет данный пункт меню и закрывает данный экран.
- Сохранить и создать — Сохраняет данный пункт меню и оставляет данный экран открытым и готовым для создания следующего пункта меню..
- Закрыть — закрывает текущий экран и возвращает [пользователя] к предыдущему экрану без сохранения внесенных правок.
Теперь пройдите на лицевую часть своего веб-сайта и обновите страницу. Вы должны увидеть свой новый пункт меню.
Пожалуйста, заметьте, что [при определенной настройке ACL] для того, чтобы увидеть этот новый пункт меню, Вам будет нужно войти на сайт [со своим логином и паролем] зарегистрированного пользователя или администратора. Это зависит от того, как Вы настроили ACL (смотрите об этом выше). При щелчке по этому новому пункту меню будет показан [назначенный ему] материал.
Создание меню
Меню — это отдельный блок, который имеет пункты меню. Функция меню — создание списка ссылок на различные материалы или разделы сайта. И формирование параметров вывода этих материалов. Т.е. куда выполнен переход и как будет выглядеть данная статья, категория или раздел.
Категорию можно вывести разными способами: в виде блога, в виде таблицы.
Блог категории: статьи с расширением расположены на странице одна за другой в виде столбца или нескольких столбцов и внизу страницы могут быть расположены ссылки на другие статьи этой категории.
Таблица категории представляет собой страницу, на которой в виде ссылок отображены заголовки статей данной категории.
После создания структуры содержимого необходимо создать меню для пользователей сайта.
Меню – это набор кнопок, которые приведут пользователя на конкретные объекты: статьи, список категорий и т.п. Вывести информацию на сайт можно как в виде блога, так и в виде статичной страницы.
Открыв окно «Менеджер меню» (с помощью кнопки «Меню» на панели управления) можно увидеть страницу с уже созданными типами меню.
Для создания нового меню нужно нажать на кнопку «Создать».
На открывшейся странице «Детали меню» необходимо заполнить поля:
Системное имя (латинским шрифтом), заголовок – имя пункта меню при выводе на сайт, описание меню и заголовок модуля – который будет использоваться при выборе способа вывода меню на сайт.
После этого нажать на кнопку «Сохранить».
Для создания пунктов меню необходимо в «Менеджере меню» нажать на кнопку «Пункты меню» в одноименном столбце.
На странице «Пункты меню» нажать на кнопку «Создать»
и перейти на страницу «Пункт меню».
На ней представлено четыре вида пунктов:
внутренняя ссылка, внешняя ссылка, разделитель и псевдоним.
С помощью внутренней ссылки можно вывести информацию на сайт следующим образом:
Раздел – в виде блога или в виде таблицы ссылок (при этом будут отображаться все статьи раздела).
Категория – в виде блога или в виде таблицы ссылок (при этом будут отображаться все статьи категории).
Материал – в виде статичной страницы с материалом. (Другие статьи на странице не отображаются.). Или шаблон отправки материала (только авторизованным пользователям с правами не ниже автора), в котором с помощью текстового редактора можно написать статью на сайте.
Шаблон блога на главной – позволяет выводить материал на главной странице только в форме блога. (Выводятся все материалы, у которых отмечен пункт «отображать на главной»).
Из архива – в виде блога с фильтром, который позволяет задавать параметры отбора материала. Для создания блога категории необходимо нажать на ссылку «Блог категории».
На открывшейся странице заполнить поля:
-Заголовок — текст который будет отображаться в меню
-Псевдоним — текст, который станет основой url для этого пункта
-Показать в — привязать пункт к определенному меню
-Родительский элемент — указать родительский элемент пункта
-Опубликовано — опубликован пункт или нет
-Доступ — указать доступ к пункту
-Открывать в — в каком окне будет открываться пункт меню
Во вкладке «Параметры — Основные»:
— Категория — указать категорию, к которой принадлежит пункт меню
— Описание — скрыть или показать описание
— Картинка — описания скрыть или показать картинку описания
— Во всю ширину — указать количество новостей, отображаемых во всю ширину области контента
— Вступление — указать количество новостей, у которых показывается только вступительный текст
-Колонки — указать, во сколько колонок будут выстроены материалы
— Ссылки — указать количество материалов, которые будут отражены в виде ссылок внизу страницы
Далее нажать «Сохранить».
Примечание: Клавиша «Сменить тип» позволяет сменить тип пункта меню.
You have no rights to post comments
Добавление иконок пунктам меню Joomla. Простой и хороший способы.
Одним из способов увеличения привлекательности сайта является добавление к пунктам меню иконок. Иконки – это маленькие картинки, которые ассоциируются с содержимым пункта меню. Польза от них заключается в том, что они привлекают внимание пользователей и делают их более лояльными по отношению к сайту. В этой статье я расскажу про два способа добавления иконок к пунктам меню: быстрый, легкий, но плохой, а также сложный, долгий, но хороший. Примером будет добавление иконок к категориям на wedal.ru.
Добавление иконок пунктам меню Joomla. Шаг 1. Выбор размера иконок.
Иконка – это маленькая картинка. Прежде всего, давайте разберемся, какие требования предъявляются к иконкам. Я бы выделил:
- Иконка должна подходить по размерам к тексту.
- Иконка должна иметь прозрачный фон или фон, аналогичный тому, на котором расположено меню.
- Иконка должна иметь небольшой размер файла (не быть «тяжелой»).
Самый распространенный размер иконки в Интернете 16х16 пикселей, поскольку именно такого размера должны быть фавиконы сайтов (маленькая картинка, располагающаяся перед адресной строкой в браузере).
Вот пример такой иконки:
Для сайта wedal.ru я выберу именно этот размер.
Добавление иконок пунктам меню Joomla. Шаг 2. Поиск подходящих иконок.
Если несколько способов поиска и подбора иконок. Первый – поиск картинок Google.
Как ни странно, работает этот поиск до сих пор очень коряво. Иногда не работает вовсе. На дворе XXI век, а Яндекс и Google так и не научились искать изображения по точному размеру.
Для того чтобы в поиске отображались только иконки нужного размера, задаем настройки:
Не спешите, гуглоненавистники, ругать эту ПС. Яндекс вообще не ищет по точному размеру 🙂 .
Второй способ – поиск сайтов с наборами иконок или поиск прямо наборов. Иконки делятся на бесплатные и коммерческие. Выбор бесплатных иконок достаточно богат.
Если иконок нужно подобрать много, то легко запутаться. Обязательно ведите список сопоставления пунктов меню и иконок.
Добавление иконок пунктам меню Joomla. Шаг 3. Привязка иконок. Простой способ.
После того, как иконки подобраны, можно начинать привязывать их к пунктам меню на сайте. Я расскажу про два способа. Первым будет привязка через настройку пункта меню, опция «Изображение ссылки»:
Здесь мы просто выбираем изображение для пункта меню и все. Это очень просто, быстро и удобно. Но это далеко не лучший вариант и вот почему. Каждая иконка – это картинка, которая отображается на сайте. Браузер пользователя, когда тот заходит на сайт, загружает все изображения последовательно. Отправляет запрос, получает ответ, загружает изображение. И так до тех пор, пока не загрузит все картинки. Каждый раз такая операция занимает доли секунды, но когда картинок много, все это выливается уже в дополнительные секунды загрузки страниц. Яркий пример того, как не надо делать – сайт joomla-master.org. Разработчик, по всей видимости, добавлял картинки для пунктов меню именно таким способом. Посмотрим, во что это вылилось:
Открытие главной страницы сайта просто насилует браузер и компьютер пользователя.
Добавление иконок пунктам меню Joomla. Шаг 3. Привязка иконок. Хороший способ.
Хороший способ заключается в использовании CSS-спрайтов. Их суть в том, что все иконки размещаются на одной картинке, а обращение к ним происходит с помощью CSS. Благодаря такому подходу браузер пользователя загружает только одну картинку и соответственно время загрузки страницы уменьшается. Плохая новость – добавление иконок пунктам меню с помощью CSS-спрайта – задача гораздо более сложная, чем способ, описанный выше. Хорошая новость – в настоящее время существуют сервисы, значительно упрощающие создание спрайтов.
Давайте разберемся, как создать спрайт.
- Задаем всем иконкам названия в соответствии с ID пунктов меню, к которым они будут применяться. В менеджере меню в самой правой колонке можно увидеть ID пунктов меню. Иконки должны быть названы «item-ID», например, «item-7»
- Добавляем все иконки, которые должны быть в спрайте в один zip-архив.
- Загружаем архив на сайте http://ru.spritegen.website-performance.org/ и выставляем настройки, например, как показано ниже:
В результате получаем CSS-код для каждой иконки меню и примерно вот такой спрайт: 
- Загружаем полученный спрайт к себе на сайт и добавляем полученный код в CSS-файл шаблона.
Все готово. Бывает, что необходимо еще немного отредактировать отображение картинок спрайта. С этим легко справиться, используя Firebug. Что получилось, можете посмотреть на этом сайте слева.
Главным недостатком спрайтов является сложность обновления оных. Так, например, если у вас появится даже один новый пункт меню, которому нужно добавить иконку, спрайт придется создавать заново.
Хоть я и назвал способы создания иконок для пунктов меню Joomla простым и хорошим, нельзя однозначно сказать, какой из них лучше. У каждого способа есть свои достоинства и недостатки. Если иконок немного или они часто меняются, то лучше использовать первый способ. Если же иконок много, и они остаются постоянными, как и пункты меню, к которым они привязаны, то однозначно, нужно использовать спрайты.
UPD.: Помимо простого и хорошего способа, существует также еще и отличный. О нем написана отдельная статья: Добавление иконочных шрифтов на сайт Joomla.