Лучшие способы сделать картинки рубрик в wordpress

Дата: / Автор поста:


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

Разберем с помощью кода.

Определяем стиль.

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

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

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

  1. Выбираем любой пункт, у себя я выбрал «Безопасность блога».
  2. Нажимаем на «Просмотр кода элемента», чтобы открылось окно снизу.
  3. Это сам html код этого раздела.
  4. А вот тут и есть сам стиль вывода, у меня он «vidget-categori ul li», я пока удалил из него все параметры, чтобы вам было понятнее.

Скачиваем материалы для работы.

А теперь дело осталось за малым, надо лишь сделать картинки рубрик, чтобы они отображались. Я надеюсь вы уже скачали необходимые изображения, если нет то советую вам сайт iconfinder.com, он на английском языке, но на нем самая большая база, так же есть iconsearch.ru,  на русском, но арсенал меньше. Советую брать не больше 32 на 32 пикселя, это все таки иконки, а так можно и меньше.

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

Название папки и имена файлов пишите на английском, а то могут возникнуть проблемы с кодировкой страниц.

Вот смотрите как сделал я на снимке.

  1. Каталог «Public-html», это корневая папка любого сайта на вордпрессе.
  2. А вот та папка которую я создал, и закачал в нее все изображения.

С этим тоже разобрались, идем дальше.

Настраиваем отображение в style.css.

А теперь завершающий момент, надо вставить в файл style.css, несколько строчек. Сейчас дам код, а ниже к нему описание.

.класс вывода пунктов категорий.cat-item-id рубрики{list-style-image:url("путь до файла на вашем хостинге");}

В начале вписываем тот класс, мы его находили, далее вместо «id рубрики» прописываем цифру, которую определяли. И наконец надо прописать путь до самой картинки, вот как это выглядит у меня.

.vidget-categori ul li.cat-item-6{list-style-image:url("http://wpsovet.ru/rubrik/bezop.png");}

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

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

Плагин иконок.

Называется он Category and Page icons, ставиться стандартно, можно даже через поиск плагинов в самом wordpress, это умею все. Как его поставите, то у вас в административной панели появится новый раздел "Icons", для начала нажмите на него и выберите «settings», то есть настройки, далее смотрим скриншот.

  1. Собственно сама строчка.
  2. Выбираем то место где будут храниться все загруженные картинки рубрик, я оставлял все по умолчанию.
  3. Тут можете выбрать размер, по умолчанию стоит 16 на 16 пикселей, вы же можете поставить свои Но учтите если иконка будет больше или меньше указанного вами параметра, то она будет показана в масштабе.

Далее переходим к основным настройкам, будем учиться загружать. Переходим в закладку «icons» и выбираем «Add / Delete icons».

  1. Куда заходить.
  2. Выбираем ссылку.
  3. Кликнем кнопку «Выберите файлы». У вас откроется окно, в котором и выберите нужное для загрузки.
  4. Если все хорошо, то всё будет отображаться здесь.

Присоединяем картинки к нужным рубрикам еще проще, надо лишь перейти в раздел «Assign icons to Categories», и сопоставить два столбца друг с другом, если что не понятно смотрите ниже.

  1. Куда надо нажимать.
  2. В этом выпадающем списке будут находиться все файлы, просто выбирайте нужную вам.
  3. Как только будет выбрана, то она сразу появится здесь.
  4. А тут название категории, к которой будет прикреплен файл.

Не забываем все настройки сохранять.

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

P.S. Кстати, вы уже нарядили новогоднюю елку? И помогла ли вам статья?

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(2 голоса, в среднем: 5 из 5)

С уважением к читателям Лифанов Валентин.

Нажмите на кнопку социальных сетей, вам не сложно, а мне приятно.

Комментарии к этой супер статье.

  • Дмитрий

    Полезная информация. Надо бы попробовать сделать. Инструкция простая любой сможет разобраться.

    • Валентин Лифанов

      Легче легкого.

  • Вероника

    Я никогда не разбиралась в этих кодировках и не понимала как вообще это все работает,но здесь очень понятно все описано и разобранном по пунктам, что даже я поняла! Обязательно воспользуюсь данной информацией!

  • Таня

    Отличный способ добавить странице собственного дизайна и стиля. Полезная информация.

  • Игорь

    Я так понял, при помощи WordPress мы сами делаем картинку? Не просто берем оригинал и сжимаем, а полностью делаем сами?

    • Лифанов Валентин

      Именно

  • Настя

    Всё так подробно расписано, что даже трудно где-то потерять и запутаться. Всё понятно и ясно.

  • Наталья Краснова

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

    • Лифанов Валентин

      Да перестаньте, делов на две секунды.

  • Natascka

    Есть необходимость назначения иконки для страниц. Грубо говоря я меняю в коде «категори» на «пост» и так же добавляю картинки к id? Кто нибудь пробовал ручным способом их устанавливать? Поделитесь опытом

    • Лифанов Валентин

      Все именно так, только стили вывода у всех разные, надо определиться с вывод, потом с id, а все остальные так же задаем, применяем маркеры для списков.

  • Александр

    Статья правильная про вывод иконок к рубрикам, но я бы немного поправил. НЕ «.стиль вывода пунктов категорий.cat-item-id рубрики», а нужно понять где вы хотите вывести иконки рубрик, если в сайтбаре, то нужно знать какой класс отвечает за вывод этих рубрик, а если поставить в меню вывода рубрик, то знать какой класс меню выводит эти рубрики. Темы у всех разные и подход индивидуален, но тема поста отличная

    • Лифанов Валентин

      Привет, я так и написал, что надо для начала определить сам класс вывода, перепутал слова класс и стил сейчас исправлю.

      • Александр

        Все нормально в статье, просто немножко своего мнения добавил))) Все таки комменты и созданы для того чтобы посетители выражали свое мнение. Статья хорошая и познавательная.

        • Лифанов Валентин

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

  • Александр

    Вот и ты заходи ко мне. Тоже буду рад твоему комментарию)))

    • Лифанов Валентин

      Уже зашел и оставил.

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

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

*

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Лифанов Валентин. ©2014 Все права защищены. Полное или частичное копирование запрещено.