Назначаем иконки для рубрик и меню

Здравствуйте, друзья!

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

Материал будет по большей части для WordPress, но всю информацию вы сможете применить и на другом движке. Как всегда, мы рассмотрим пример таких иконок, что они дают и нужно ли вообще. Ну и конечно же различные варианты их установки.

Пример иконок в рубриках

Яркий пример вы можете видеть на моем сайте в боковой колонке в списке всех рубрик.

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

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

Их можно устанавливать, как с плагином, так и без. В данном случае имеется смысл добавить их без плагина, так как осуществляется это с помощью CSS стилей. Если же необходима частая смена изображений, то проще использовать плагин.

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

  • Iconfinder - англоязычный сервис;
  • Iconsearch - русскоязычный, но выбор иконок меньше, чем в предыдущем.
к содержанию ↑

Иконки для рубрик без плагина

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

Каждая ссылка в меню категорий имеет свой общий класс с идентификатором, который дается ей после ее же создания.

  • Зеленая рамка - общий класс для ссылок в виджете категорий;
  • Красная рамка - индивидуальный класс с числовым значением для конкретной ссылки.

Так как рубрики у нас выводятся списком ul li в боковой колонке, то стоит к данным элементах дописать класс с числовым значением и задать им картинку определенного размера. Например, в моем случае это выглядит следующим образом:

Это 3 стиля к разным рубрикам. Как видим, то в каждом стиле сначала идет класс для тегов списка в боковой колонке (.top_comm_wid > ul li).

  • .top_comm_wid - класс, с помощью которого прописаны стили для виджета в боковой колонке;
  • ul li - тег списка (ненумерованного).

Далее идет класс с индивидуальным классом, в каждом из которых имеется свое числовое значение (например, .cat-item-16).

Таким образом, мы должны выяснить общий класс для списка ссылок в рубриках и создать новые стили для каждой, дописав индивидуальный класс с конкретным идентификатором каждой категории. Далее дописать путь к картинке, используя свойство "background". Все достаточно просто.

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

  • Google chrome - просмотр кода элемента;
  • Mozilla Firefox - исследовать элемент;
  • Opera - проинспектировать элемент.

Просто кликните правой кнопкой мыши на необходимую ссылку и выберете данную функцию в своем браузере. Инструмент исследования элемента даст вам панель с исходным кодом, где сразу выделит нужную строку, в которой и сможете узнать класс стилей, который в дальнейшем прописываем в файле стилей. В моем случае это класс "cat-item-ID рубрики" (см. скриншот выше).

И так к каждой рубрике. Затем вы к стилям списка в боковой колонке добавляете данный класс оформления и получаете на выходе что-то наподобие моих стилей выше. В принципе, если шаблон у вас обычный, не созданный на заказ, то индивидуальный класс будет такой же. Отличаться будет только класс для боковой колонки, который прописан в самом начале.

Также нужно загрузить изображения иконок для каждой рубрики в папку images внутри шаблона оформления. Теперь стоит вывести картинки для отображения. В моем случае это выглядит так.

Сначала идет общий класс списка ul li в боковой колонке (.top_comm_wid > ul li), затем индивидуальный класс с идентификатором рубрики (.cat-item-16). Внутри стилей прописываем путь к изображению. В моих стилях путь к картинке прописан с учетом того, что внутри шаблона имеется папка images, в которую я все и загружал. Если папка у вас называется по другому, то придется изменить путь к ней.

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

Таким же образом можно добавить картинки и к пунктам меню, которые также имеют свои идентификаторы.

Принцип аналогичен:

  1. Узнаем общий класс для списка в меню;
  2. Узнаем индивидуальный класс с ID каждому пункту;
  3. Задаем стили для рубрики со свойством background, где указываем путь к иконочному файлу.

Чем мне данный способ не нравится, так это тем, что иконки не кликабельны. Это связано с самой версткой большинства шаблонов, где кликабельна только ссылка на рубрику. Остальная же область, где находится ссылка - не кликабельна.

Ваш шаблон может быть как раз таким, что вся область ссылки на рубрику будет кликабельна. Тогда и иконка будет кликабельна. В моем случае это не так.

В плагине же совсем другая ситуация. Собственно, к нему и переходим.

к содержанию ↑

Плагин Category & Page Icons

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

Скачиваем плагин с официальной страницы.

Устанавливаете его, активируете и сразу переходим к настройкам.

Тут нужно выбрать размер иконок до которого они будут сжиматься, если вдруг вы загрузите сильно большие изображения. По умолчанию стоит сжатие до размера 28х28 пикселей. Можете изменить это значение, если вам нужен меньший размер.

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

Также можно выбрать путь к папке, в которую будут сохраняться все иконки. Если вам нужен будет доступ к ним  на хостинге, то можете изменить путь. Я же не вижу в этом надобности, поэтому ничего не менял.

Далее мы начинаем загружать сами иконки через пункт "Icons".

Жмете на кнопку "Выберите файлы" и вбираете все нужные иконки. Далее они быстро загрузятся и появятся в списке ниже, как у меня на скриншоте. Они будут доступны в оригинальном размере, а также в уменьшенном, если уменьшение было произведено.

Как видим, имеется выбор, как оригинального размера, так и уменьшенного. Параметр уменьшения мы ставили в настройках ранее.

Далее можем к каждому пункту меню или каждой ссылке в рубриках выбрать одну из загруженных иконок. Для этого переходим в соответствующий пункт по ссылке на этой же странице.

  1. Назначить иконки для пунктов меню;
  2. Назначить иконки для категорий.

Для примера покажу на категориях. Переходим по данной ссылке и напротив каждой увидим выпадающий список со всеми иконками.

Выбор можно сделать, как иконки оригинального размера, так и уменьшенного. Естественно, если все ваши конки вы загружали в разных размерах, то выбирайте уменьшенный вариант, чтобы в конечном итоге они имели одинаковый размер.

Я изначально подготовил все иконки с одинаковым размером, поэтому выбрал оригинальные.

После выбора обязательно сохраните настройки, нажав на кнопку "Сохранить изменения" в самом низу страницы их выбора.

Теперь у каждой рубрики будет своя иконка. Плюс ко всему она будет кликабельна, что добавляет удобности к пользованию меню категорий вашим посетителям.

Управление плагином Category & Page Icons не вызывает никаких сложностей и я бы с радостью его оставил у себя на сайте, так как все делается в 2 клика. Но пришлось сделать все руками, так как при активном плагине не работает кнопка наверх. Какой-то конфликт скриптов.

На этом все, ребята. Надеюсь, что вы со всем справились и мои материалы помогли вам. Если что, обращайтесь в комментариях. Чем смогу, помогу.

Кстати, а какой способ вы выбрали? Напишите, пожалуйста, в комментах ниже.

Спасибо все за внимание. Жду вас в других материалах. До встречи.

С уважением, Константин Хмелев!

40 лет Победы51937Украина, Днепропетровская обл., г. Днепродзержинск,+38 093 338 11 41
Комментариев: 20
  • Здравствуйте подскажите пжлст как отключить показ рубрик в верхней части блога ...

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

    ну или хотяб подскажите как вообще верхние вырубить.. заранее спасибо.

    • Создайте кастомное меню в админ-панели (внешний вид - меню) и добавьте туда только необходимые вам страницы и рубрики. Для скрытия записей из главной страницы, вы можете воспользоваться данной инструкцией. Там я описал, как вы, добавив запись, можете исключить ее из показа на главной. Тоже самое касается и исключения рубрик с главной страницы.

  • создал меню и туда добавил рубрики и указал Main Menu но всеравно рубрики вверху и справа ... только вверху меньше стало ... а если галочку на Top Menu то он ве вверху лепятся - как и было вобщем

    - там в шаблоне свое меню но там нет такого чтоб вырубить рубрики сверху .. ненашел

    вот тут тему создал но тож непомогли - https://talk.pr-cy.ru/topic/18148-isklyuchit-rubriki-s-verhnej-chasti/

    вот шаблон - http://smthemes.com/demo/myprogram/ может сориентируетесь нагляднее проще

    • Создание меню должно было помочь. Если не помогло, значит смотрите настройки самой темы. Возможно там есть управление меню. Если ничего не помогает, идите на фриланс. Сделают такие правки за копейки. Или возьмите коды меню из другой (нормальной) темы и замените меню в вашей теме.

  • да есть прогер мож поможет он пока в отпуске - я думаю функц пшп надо править... ладно спасибо за ответы классный блог у вас

  • Имхо, плагины использовать для назначения иконок слишком уж. Вордпресс и так уже комбайн, который в среднем содержит 15 плагинов для получения более-менее нормального функционала. А дизайн вы сами рисовали этот ? Он мне очень сильно знаком. Если не секрет, то как называется эта тема ? С themeforest ?

    • Даже с 3 плагинами при правильной оптимизации сайта, последний работает очень быстро. Абсолютно нет смысла бояться устанавливать подобные плагины. Нет, шаблон не с themeforest.

      • Я с WordPress работаю с версии "Mingus", она же легендарная 1.2. Поэтому мне не надо рассказывать про правильную оптимизацию и 3 плагина ))

        • Я хотел написать с 30ма плагинами) Опечатался, не нужно, так и не нужно, всем от этого легче будет)

  • Здравствуйте, пытаюсь пользоваться использую плагином, но при добавлении картинок выскакивает такой текст Direct access to this file do not allow! Подскажите, в чем может быть причина. Пробовала с самыми разными картинками.

    • Здравствуйте. У меня точно такая проблема возникла. Возможно плагин не работает с новыми версиями движка. Я проэкспериментирую и в ближайшее время постараюсь решить проблему, если она решаема.

      • Как успехи в решении проблемы?

    • Выход есть — залейте вручную картинки в папку /wp-content/uploads/icons/
      и уже потом они появятся в настройках плагина

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

  • У меня тоже самое, плагин наверное перестал работать( а жаль, я в код сайта боюсь лезть(

  • Здравствуйте. Как Вы вставляете круглые картинки рядом с заголовками статей? Этим-же плагином или другим? У меня рядом с каждым заголовком серый квадрат, как туда картинку вставить? Подскажите пожалуйста. Квадрат кликабельный, как у Вас.

    • Здравствуйте. Я еле понял, о чем вы) Это миниатюра. Т.к. она у вас не задана, то выводится пустой блок. В редакторе записи в правой колонке имеется блок "миниатюра записи" вместе с ссылкой "задать миниатюру". Нажмите на нее и выберите изображение для миниатюры каждой записи. Если блока миниатюр нет в правой колонке, тогда в самом верхнем правом углу внутри админ-панели нажмите на "настройки экрана" и поставьте галочку напротив "миниатюра записи" и блок появится.

  • Для тегов бы что-то подобное

  • Доброго времени суток, Константин!
    Отличная статья и дизайн сайта очень понравился.
    Вопрос по теме - данный плагин, судя по всему канул в лету.
    А посему вопрос, Вы используете какой-то аналогичный или на данный момент отдельным кодом?
    В основном интересуют пункты меню, как сделать так же как у Вас?
    Надеюсь, что Вы мне ответите.
    С ув. Евгений ;)

    • Здравствуйте. Да, плагином я не пользуюсь уже давно, он перестал работать. Иконки у меня добавлены с помощью jquery. Будет статья на блоге, там все достаточно просто. Также у меня там идут иконки не картинками, и кодами из font-awesome

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *