Как создать иконки для рубрик в сайдбаре?


Игорь | 2011-09-23 | 20 комментариев

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

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

Поэтому, когда на блоге 4-5 рубрик, ориентироваться в ссылках несложно. Но, когда их уже с десяток, быстро найти нужную, становится все трудней.

Как только я заметил, что сам затрачиваю время в поисках нужной ссылки, (а что говорить уже о посетителях!) я понял, что пробил час! Пришло время визуализировать меню с помощью иконок.

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

Итак, причины своего решения я описал, если у кого имеется подобная «проблема», данный пост покажет, как её устранить.

Как создать иконки для рубрик в сайдбаре?

Итак, давайте посмотрим, как выглядело меню совсем недавно:

Как создать иконки для рубрик в сайдбаре?

Сплошной текст.

И вот так оно выглядит сейчас:

Как создать иконки для рубрик в сайдбаре?

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

Скачать его можно по вот этой ссылке.

  • Скачиваете, распаковываете, и затем саму папку category-page-icons закачиваете на сервер в папку wp-content – plugins.
  • Теперь нам нужно активировать плагин. Заходим в админку, в пункт «Плагины», ищем плагин category-page-icons, активируем.
  • После этого, у нас появляется в садбаре админки пункт Icons.

Как создать иконки для рубрик в сайдбаре?

Здесь и находятся настройки нашего плагина. Их немного. В пункте Settings выставляем размеры будущих иконок. У меня это 15 на 15 рх. Также снимаем ненужные галочки.

Как создать иконки для рубрик в сайдбаре?

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

Как создать иконки для рубрик в сайдбаре?

Assign icons to Pages – здесь добавляются иконки для страниц.

Assign icons to Categories — здесь добавляются иконки для категорий.

Add / Delete icons – здесь добавляем, удаляем их.

Параметры – это тоже самое, что Settings

Итак, добавляем картинки. Мой вариант иконок я вам даю вот в этом архиве. Если какая-то иконка не понравится или не подойдет, поищите в Интернете, выбор огромный.



Qwertypay-Заработок в партнёрках!

Qwertypay – Агрегатор партнерских программ. Регистрируйся и зарабатывай!

specialist.qwertybiz.com

Итак, далее процесс стандартный. На странице Add / Delete icons – грузите поочередно, каждую иконку. На странице Assign icons to Categories выбираете их под каждую категорию. Этот момент описывать не буду, там все просто, выбираете картинку, сохраняете изменения. После этих манипуляций на странице, в сайдбаре, возле названий категорий должны появится иконки.

Читайте также:  Какие профессии будут востребованы в ближайшее время?

Если вам не понравятся ширина отступов, тогда придется поиграться ещё с файлом style.css , найдя соответствующий класс в шаблоне. Также за вывод иконок отвечает файл client.css в папке category-page-icons/css/client.css

Я немного у себя поправил, но, в общем все выглядит хорошо и без этого марафета.

Вот и все. У кого блок ссылок в меню категорий выглядит невзрачно – воспользуйтесь плагином category-page-icons и описанной выше инструкцией.

Хотите знать больше, подписывайтесь на обновления блога. В заключение видео, где можно найти иконки png

Автор: Игорь
Чистый звук в мире инфобизнеса

6 бесплатных промокурсов Евгения Попова



Комментарии (20)

  1. Сергей:

    Мне понравилось, забавно выглядит 🙂 Спасибо, Игорь, возьму на заметку для своего нового блога.

    Ответить
    • Игорь:

      Отлично! А ты, Сергей, время не теряешь. Над новым блогом работаешь уже. 🙂

      Ответить
  2. Мила:

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

    И еще вопрос, правда ,не в тему...Что такое «зеркало»

    Ответить
    • Игорь:

      Зеркало — это резервная, дополнительная ссылка для скачивания материалов, файлов... На случай, если первая окажется нерабочей, «возможно живой» останется другая.

      Ответить
  3. Даниил:

    чем тормозить блог плагином, лучше вручную создать блок и в нём на hmtl прописать все ссылки на рубрики с изображениями)

    Ответить
    • Игорь:

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

      Ответить
      • fenris:

        На самом деле вопрос иконок лучше всего решать на этапе создания дизайна. В этом случае все это помещается в css и вообще никаких проблем с загруженностью блога плагинами и т.п.

        Ответить
        • Игорь:

          Согласен. Хороший совет для тех, кто знает, как это делать. Но мне кажется, что этот плагин легкий в своей работе. Чем он нагружает блог? Дополнительным файлом css и только.

          Ответить
          • fenris:

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

            Ответить
  4. arkadjar:

    Игорь,спасибо.Все как всегда доступно и понятно.Обязательно установлю у себя (как только руки дойдут).

    Ответить
  5. Наталья:

    Cпасибо,попробую применить у себя.

    Ответить
  6. Mila:

    Ответ для fenris:

    Не все разбираются на таком уровне, как Вы, а следуя советам автора блога запросто можно усовершенствовать под свой вкус шаблонную тему(хотя и до этого уровня надо дорасти, конечно)

    Лично я очень признательна Игорю за то, что делится такими «фишками» на всем понятном языке.Думаю, что от этого он только выигрывает...

    Ответить
  7. Анна:

    Здорово, очень полезная информация

    Ответить
  8. Seogold:

    Спасибо, будем применять. Кстати, верхняя картинка в посте «битая»

    Ответить
  9. Горбунова Татьяна:

    Теперь сайты создают не только профи,но и чайники.Сама к ним отношусь.И для нас такая информация-очень полезна,за что Игорю спасибо огромное.В HTML,конечно,всем когда-то приходится залезать.Но лично я это делаю с большой осторожностью.

    А чтобы не тормозил — есть другие замечательные плагины 🙂

    Ответить
  10. Людмила:

    Согласна с Татьяной!Для меня очень интересная вещь на сайте — давно думала,как сделать!У меня сайт туристический,наверное в инете найду фотки флагов стран и сделаю из них иконки,а пока попробовала установить 2 иконки из своих фотографий.Все получилось,спасибо!

    Ответить
  11. Людмила:

    Еще раз спасибо!Нашла флаги стран — установила!Я счастлива — мечты сбываются!

    Ответить

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

Ваш адрес email не будет опубликован.