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

Опубликовано: 01.09.2018

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

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

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

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

Как вставить картинку в меню WordPress

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

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

Урок 22# Редактирование тем wordpress

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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