В этой статье я расскажу про два способа добавления иконок к пунктам меню Joomla.
Добавление иконок пунктам меню Joomla. Простой и хороший способы.

Одним из способов увеличения привлекательности сайта является добавление к пунктам меню иконок. Иконки – это маленькие картинки, которые ассоциируются с содержимым пункта меню. Польза от них заключается в том, что они привлекают внимание пользователей и делают их более лояльными по отношению к сайту. В этой статье я расскажу про два способа добавления иконок к пунктам меню: быстрый, легкий, но плохой, а также сложный, долгий, но хороший. Примером будет добавление иконок к категориям на wedal.ru.

Добавление иконок пунктам меню Joomla. Шаг 1. Выбор размера иконок.

Иконка – это маленькая картинка. Прежде всего, давайте разберемся, какие требования предъявляются к иконкам. Я бы выделил:

  1. Иконка должна подходить по размерам к тексту.
  2. Иконка должна иметь прозрачный фон или фон, аналогичный тому, на котором расположено меню.
  3. Иконка должна иметь небольшой размер файла (не быть «тяжелой»).

Самый распространенный размер иконки в Интернете 16х16 пикселей, поскольку именно такого размера должны быть фавиконы сайтов (маленькая картинка, располагающаяся перед адресной строкой в браузере).

Вот пример такой иконки: 1

Для сайта wedal.ru я выберу именно этот размер.

Добавление иконок пунктам меню Joomla. Шаг 2. Поиск подходящих иконок.

Если несколько способов поиска и подбора иконок. Первый – поиск картинок Google.

Как ни странно, работает этот поиск до сих пор очень коряво. Иногда не работает вовсе. На дворе XXI век, а Яндекс и Google так и не научились искать изображения по точному размеру.

Для того чтобы в поиске отображались только иконки нужного размера, задаем настройки:

Joomla icons

Не спешите, гуглоненавистники, ругать эту ПС. Яндекс вообще не ищет по точному размеру :-) .

Второй способ – поиск сайтов с наборами иконок или поиск прямо наборов. Иконки делятся на бесплатные и коммерческие. Выбор бесплатных иконок достаточно богат.

Если иконок нужно подобрать много, то легко запутаться. Обязательно ведите список сопоставления пунктов меню и иконок.

Добавление иконок пунктам меню Joomla. Шаг 3. Привязка иконок. Простой способ.

После того, как иконки подобраны, можно начинать привязывать их к пунктам меню на сайте. Я расскажу про два способа. Первым будет привязка через настройку пункта меню, опция «Изображение ссылки»:

Joomla icons

Здесь мы просто выбираем изображение для пункта меню и все. Это очень просто, быстро и удобно. Но это далеко не лучший вариант и вот почему. Каждая иконка – это картинка, которая отображается на сайте. Браузер пользователя, когда тот заходит на сайт, загружает все изображения последовательно. Отправляет запрос, получает ответ, загружает изображение. И так до тех пор, пока не загрузит все картинки. Каждый раз такая операция занимает доли секунды, но когда картинок много, все это выливается уже в дополнительные секунды загрузки страниц. Яркий пример того, как не надо делать – сайт joomla-master.org. Разработчик, по всей видимости, добавлял картинки для пунктов меню именно таким способом. Посмотрим, во что это вылилось:

Joomla icons

Открытие главной страницы сайта просто насилует браузер и компьютер пользователя.

Добавление иконок пунктам меню Joomla. Шаг 3. Привязка иконок. Хороший способ.

Хороший способ заключается в использовании CSS-спрайтов.  Их суть в том, что все иконки размещаются на одной картинке, а обращение к ним происходит с помощью CSS. Благодаря такому подходу браузер пользователя загружает только одну картинку и соответственно время загрузки страницы уменьшается. Плохая новость –  добавление иконок пунктам меню с помощью CSS-спрайта – задача гораздо более сложная, чем способ, описанный выше. Хорошая новость – в настоящее время существуют сервисы, значительно упрощающие создание спрайтов.

Давайте разберемся, как создать спрайт.  

  1. Задаем всем иконкам названия в соответствии с ID пунктов меню, к которым они будут применяться. В менеджере меню в самой правой колонке можно увидеть ID пунктов меню. Иконки должны быть названы «item-ID», например, «item-7»
  2. Добавляем все иконки, которые должны быть в спрайте в один zip-архив.
  3. Загружаем архив на сайте http://ru.spritegen.website-performance.org/ и выставляем настройки, например, как показано ниже:

    Joomla icons

     В результате получаем CSS-код для каждой иконки меню и примерно вот такой спрайт:

    Joomla icons

  4.  Загружаем полученный спрайт к себе на сайт и добавляем полученный код в CSS-файл шаблона.

Все готово. Бывает, что необходимо еще немного отредактировать отображение картинок спрайта. С этим легко справиться, используя Firebug. Что получилось, можете посмотреть на этом сайте слева.

Главным недостатком спрайтов является сложность обновления оных. Так, например, если у вас появится даже один новый пункт меню, которому нужно добавить иконку, спрайт придется создавать заново.

Хоть я и назвал способы создания иконок для пунктов меню Joomla простым  и хорошим, нельзя однозначно сказать, какой из них лучше. У каждого способа есть свои достоинства и недостатки. Если иконок немного или они часто меняются, то лучше использовать первый способ. Если же иконок много, и они остаются постоянными, как и пункты меню, к которым они привязаны, то однозначно, нужно использовать спрайты.

UPD.: Помимо простого и хорошего способа, существует также еще и отличный. О нем написана отдельная статья: Добавление иконочных шрифтов на сайт Joomla.

Понравилась статья? Сохраните себе на стену:

Ваша оценка материала очень важна для нас. Просим вас оценить статью или оставить отзыв в комментариях.

Комментарии  

0 # Подробнее о вставке спрайтаangor 19.01.2013 00:30
Здравствуйте.Не могли бы вы поподробней описать процесс вставки полученного с сервиса CSS кода. У меня энное кол-во CSSок и мне, начинающему, трудно пока с этим разобраться. В какой из них и в какое место :)
Ответить | Ответить с цитатой | Цитировать
0 # RE: Подробнее о вставке спрайтаWedal 20.01.2013 05:30
angor, посмотрите исходный код главной страницы вашего сайта в браузере. Там увидите, какие css-файлы подключены. Вставлять можно в любой из них.
Ответить | Ответить с цитатой | Цитировать
-1 # Меня терзают смутные сомненьяЮрий 14.12.2012 09:29
Здравсвтуйте!
Про технологию спрайтов слышал и раньше, но попробовал только сейчас.
Как и писал автор, пришлось повозиться с сss, в итоге все получилось, но есть одно НО...
После перезагрузки компа,виндовс перестал запускаться,а BIOS стал просить пароль,который я туда никогда не вводил.
Т.к. в железе я не очень понимаю, комп. отнес в мастерскую для обнуления настроек биоса.
На мой вопрос "что за глюк?" мне оветили "скорее вего - это вирус". В тот день кроме спрайтов я ничего не качал.
Не секрет что в PNG (а именно в PNG я делал спрайты) можно засунуть червя.
Не хочу никого голословно обвинять,но считаю свои подозрения обоснованными.
Хотелось бы услышать мнение автора статьи,а также других коллег.
Ответить | Ответить с цитатой | Цитировать
+2 # RE: Меня терзают смутные сомненьяWedal 15.12.2012 05:01
Юрий, вирус можно подцепить просто посетив страницу какого-то сайта. Пользуйтесь антивирусами и не посещайте сомнительные ресурсы.
Ответить | Ответить с цитатой | Цитировать
+1 # RE: Добавление иконок пунктам меню Joomla. Простой и хороший способы.slovoblud 04.12.2012 19:01
Спасибо за способ со спрайтами. А вообще если честно то когда я сам только начинал, то для меня добавления иконки к пункту меню в joomla было просто огромной трудностью. :lol: Если не секрет каким сервисом делали скриншот с запросами изображений из сервере?
Ответить | Ответить с цитатой | Цитировать
0 # RE: Добавление иконок пунктам меню Joomla. Простой и хороший способы.Wedal 05.12.2012 02:24
slovoblud,
Цитата:
Если не секрет каким сервисом делали скриншот с запросами изображений из сервере?
Делал через Firebug. Скриншот с прокруткой через FSCapture.
Ответить | Ответить с цитатой | Цитировать

Добавить комментарий

Для отправки комментария введите код с картинки:
Защитный код
Обновить

Вверх