Как создать иконки для рубрик в сайдбаре?
Сегодня мой пост посвящен тому, как можно создать иконки для ссылок категорий (рубрик) в сайдбаре.
Для тех, кто не знает о чем идет речь, скажу, что по умолчанию многие шаблоны 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
Автор: Игорь
Чистый звук в мире инфобизнеса
Мне понравилось, забавно выглядит 🙂 Спасибо, Игорь, возьму на заметку для своего нового блога.
Отлично! А ты, Сергей, время не теряешь. Над новым блогом работаешь уже. 🙂
Как раз ломала голову над этим вопросом...Спасибо, сразу начну эксперимент...
И еще вопрос, правда ,не в тему...Что такое «зеркало»
Зеркало — это резервная, дополнительная ссылка для скачивания материалов, файлов... На случай, если первая окажется нерабочей, «возможно живой» останется другая.
чем тормозить блог плагином, лучше вручную создать блок и в нём на hmtl прописать все ссылки на рубрики с изображениями)
Давайте, Даниил, вообще откажемся от плагинов и будем все ручками прописывать, зачем блог тормозить? 🙂
На самом деле вопрос иконок лучше всего решать на этапе создания дизайна. В этом случае все это помещается в css и вообще никаких проблем с загруженностью блога плагинами и т.п.
Согласен. Хороший совет для тех, кто знает, как это делать. Но мне кажется, что этот плагин легкий в своей работе. Чем он нагружает блог? Дополнительным файлом css и только.
В первую очередь дополнительными обращениями к базе, а это уже не зергут. Хотя, для тех кто уже выбрал и доработал тему, возможно, это самое быстрое решение задачи.
Игорь,спасибо.Все как всегда доступно и понятно.Обязательно установлю у себя (как только руки дойдут).
Cпасибо,попробую применить у себя.
Ответ для fenris:
Не все разбираются на таком уровне, как Вы, а следуя советам автора блога запросто можно усовершенствовать под свой вкус шаблонную тему(хотя и до этого уровня надо дорасти, конечно)
Лично я очень признательна Игорю за то, что делится такими «фишками» на всем понятном языке.Думаю, что от этого он только выигрывает...
Здорово, очень полезная информация
Спасибо, будем применять. Кстати, верхняя картинка в посте «битая»
Битая в каком смысле?
Теперь сайты создают не только профи,но и чайники.Сама к ним отношусь.И для нас такая информация-очень полезна,за что Игорю спасибо огромное.В HTML,конечно,всем когда-то приходится залезать.Но лично я это делаю с большой осторожностью.
А чтобы не тормозил — есть другие замечательные плагины 🙂
Согласна с Татьяной!Для меня очень интересная вещь на сайте — давно думала,как сделать!У меня сайт туристический,наверное в инете найду фотки флагов стран и сделаю из них иконки,а пока попробовала установить 2 иконки из своих фотографий.Все получилось,спасибо!
Отлично!
Еще раз спасибо!Нашла флаги стран — установила!Я счастлива — мечты сбываются!
Супер!