mojwp.ru
Назад

Как присвоить рубрике иконку. Category and Page Icons

Опубликовано: 15.11.2011
16
1851

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

В реализации задуманного поможет плагин Category and Page Icons, который распространяется бесплатно и легко в настройках.

Category and Page Icons позволяет установить свои иконки для рубрик, что отображаются в Вашем сайбдаре (боковой панели сайта) при помощи виджета. Аналогично и со страницами (не путать со статьями), которые Вы создаете через админку своего блога. Смотрите скриншот:

плагин иконок Category and Page Icons

На скриншоте представлены три рубрики и напротив каждой стоит своя иконка. Именно это и делает рассматриваемый плагин.

Какого то специального вмешательства в код сайта, чтобы подключить плагин, ненужно. Он автоматически начинает работать, если в коде сайта используются функции wp_list_pages и wp_list_categories.

Качаем плагин в конце статьи с официального источника и устанавливаем. Для тех, кто не знает как можно установить плагин (замечу: 2 способа установки), читаем статью "Инструкция по установке плагина WordPress".

Все, установили и активировали. Теперь в консоли админки сайта появился новый блок, под названием Icons. В этом блоке 2 подраздела:

  • Icons - в этом разделе мы: закачиваем иконки; назначаем иконки для конкретных рубрик и страниц; удаляем иконки.
  • Settings (Настройки) - здесь: назначаем папку, в которой будут лежать иконки; устанавливаем ширину и высоту иконок.

Начнем (Settings) с настроек именно этого пункта (так надо:)))

Клик для увеличения
Клик для увеличения

В настройках по порядку идет:

  • Место расположение папки с иконками на Вашем хотстинге. По умолчанию это wp-content/uploads/icons. Если у Вас есть острая необходимость, то можете изменить этот путь, предварительно создав папку и выставив права на нее 777.
  • Ширина и высота - тут все понятно: задаем размеры Вашей иконки. Отметив галочку - Вы обрежете картинку большего размера, с сохранением пропорций.
  • Delete icons data - при удалении данного плагина Вы можете удалить и настройки иконок для рубрик и страниц, но сами иконки останутся физически у Вас на хостинге.
  • Copyright notice - когда галочка будет стоять на этом пункте - у Вас в подвале (футере) сайта будет стоять сквозной линк на разработчиков плагина. Решайте сами.

Теперь очередь закачать иконки (пункт Icons) и начать их размещать.

  • Add / Delete icons - нам сразу предлагают закачать иконки на хостинг. Это можно сделать из админки (Choose Icons to upload - Выбрать файл), либо через ftp (вот почему я начал с настроек плагина, где указана папка, куда будем помещать картинки). В этом же пункте мы можем удалить ненужные.
  • Пункты меню Assign icons to Pages и Assign icons to Categories - выбрать иконку для страниц и рубрик, соответственно. Здесь все очень просто: напротив каждой рубрики (страницы) поле выбора иконки из списка тех, что Вы закачали. Все что остается - это указать иконку и нажать Сохранить.

настрока Category and Page Icons плагин иконок wordpress

Все, можете смотреть на результат.

Когда я установил данный плагин для тестов, то была некоторая проблема с отступами в сайдбаре (margin и padding). Решается это все вмешательством в файл стилей плагина под названием client.css и лежащего в папке css с плагином.

[downpg wp="2.7+" vp="0.8" href="http://wordpress.org/extend/plugins/category-page-icons/"]Скачать Category and Page Icons[/downpg]

Автор:
Виталий
Поделиться
Похожие записи
Черкани пару строк
  • Пётр Усков
    Опубликовано: 08.03.2012 Ответить на сообщение

    Для какой версии WordPress это написано? Для WordPress 3.3.1. это неправильно.

    • mojWP
      Опубликовано: 08.03.2012 Ответить на сообщение

      Не в сборке WP дело, а в шаблоне. Попробуйте на другом шаблоне и увидите разницу.
      Если посмотрите на статью, то в самом конце написано, что у меня так же возникли проблемы с отображением плагина. Однако, в данном случае все решилось просто. Какая проблема возникла в Вашем случае - мне неизвестно.
      Могу Вас разочаровать - нет подобных универсальных плагинов, которые будут одинаково работать на всех сайтах. Именно поэтому нужно знать азы HTML, PHP и CSS, либо просить знакомых.

  • Павел
    Опубликовано: 14.06.2012 Ответить на сообщение

    Если подойти основательно, то получается довольно красиво. Если хотите увидеть как это будет выглядеть, посмотрите например в блогонике (blogonika.ru). Но только если на этом заморочится, поскольку нужно будет рисовать много картинок и желательно немного схожих. Тогда это будет красиво и эстетично смотреться.

  • Александр MaDDogg
    Опубликовано: 02.07.2012 Ответить на сообщение

    Эх, помню времена когда я на движках Slaed сайты монтировал. Помню как создавал блок "Меню" и вручную прописывал картинку через image тег и потом ссылку на рубрику ))
    Как же WordPress упрощает некоторые вещи.

    Может кто подскажет. Имеется шаблон оформления, рубрики находятся под шапкой сайта. Где можно редактировать код этого меню?

    • Виталий
      Опубликовано: 02.07.2012 Ответить на сообщение

      style.css
      163 строка
      #navcontainer

      • Александр MaDDogg
        Опубликовано: 02.07.2012 Ответить на сообщение

        Благодарю за помощь.
        Нужно будет придумать эдакое такое что нибудь =)
        Правда придёться повозиться со всем, но думаю оно того стоит.

  • Pavel
    Опубликовано: 30.07.2012 Ответить на сообщение

    Здорово, конечно, но где сами иконки то взять? Я так понимаю, что в плагин включены какие-то стандартные. Много их?

    • Виталий
      Опубликовано: 31.07.2012 Ответить на сообщение

      качаем плагин по ссылке и смотрим, много ли.
      проще сделать это, чем ждать моего ответа

  • Вадим
    Опубликовано: 07.11.2012 Ответить на сообщение

    Спасибо за статью!Очень интересный плагин.

  • Serg
    Опубликовано: 24.12.2012 Ответить на сообщение

    Доброго времени суток! Вопрос такого рода- плагин хорош но он отображается в консоли у всех пользователей. Как можно решить данный вопрос?. Спасибо!

    • Виталий
      Опубликовано: 24.12.2012 Ответить на сообщение

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

  • Fedor
    Опубликовано: 31.12.2012 Ответить на сообщение

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

    Появился вопрос - у меня при наведении на виджет с рубриками - они (ссылки) подчеркиваются, как наверное у многих. Теперь при добавлении иконок стало некрасиво, т.к. само название рубрики сдвинулось право, а под иконкой подчеркивание осталось! В примере Павла с блогоника.ру у сайта такая же проблема. В CSS плагина изменить это нельзя.
    Получается, что чтобы нормально без подчеркиванием под иконкой отображалось придется править css шаблона убирая для виджета с рубриками подчеркивание?
    Или можно как-то по-другому это решить? Заранее спасибо за помощь 🙁

    • Руслан
      Опубликовано: 13.06.2013 Ответить на сообщение

      Нет без вмешательства в CSS шаблона вы ничего не сможете зделать.

  • Eksdzhi
    Опубликовано: 04.10.2016 Ответить на сообщение

    Виталий, а как вставить иконки без плагина? Можете отдельный гайд написать на эту тему?

    • Виталий
      Опубликовано: 04.10.2016 Ответить на сообщение

      Знать CSS и прописать каждому li в нужно виджете иконку.

  • Сергей
    Опубликовано: 10.03.2019 Ответить на сообщение

    Плагин не доступен для скачивания

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.