Іконки для рубрик та меню без плагіна та з Category - Page Icons
Матеріал буде здебільшого для WordPress, але всю інформацію ви зможете застосувати і на іншому движку. Як завжди, ми розглянемо приклад таких іконок, що вони дають і чи взагалі потрібно. Ну і звичайно різні варіанти їх установки.
Приклад іконок у рубриках
Яскравий приклад ви можете бачити на моєму сайті у бічній колонці у списку всіх рубрик.
Те саме стосується і головного меню. Якщо пункти в ньому виглядають дуже нудно і не мають жодного оформлення, то чому б не додати прості іконки до них.
Їх можна встановлювати як з плагіном, так і без. В даному випадку є сенс додати їх без плагіна, так як здійснюється за допомогою CSS стилів. Якщо ж необхідна часта зміна зображень, то простіше використовувати плагін.
Зображення ікон досить легко знайти в інтернеті. Наприклад, через картинний пошук Google, де викладають цілі збірки одного розміру та стилю. Також можна за необхідною назвою шукати у сервісах:
- Iconfinder - англомовний сервіс;
- Iconsearch – українськомовний, але вибір іконок менший, ніж у попередньому.
Іконки для рубрик без плагіна
Спосіб полягає у додаванні іконки за допомогою відповідних стилів до кожної рубрики, яка, у свою чергу, має певний ідентифікатор.
Так як рубрики у нас виводяться списком ul li в бічній колонці, то варто до цих елементів дописати клас із числовим значенням і задати їм картинку певного розміру. Наприклад, у моєму випадку це виглядає так:
Це 3 стилі до різних рубрик. Як бачимо, то в кожному стилі спочатку йде клас для тегів списку в бічній колонці (.top_comm_wid & ul; li).
- .top_comm_wid - клас, за допомогою якого прописані стилі для віджету в бічній колонці;
- ul li – тег списку (ненумерованого).
Далі йде клас з індивідуальним класом, у кожному з яких є числове значення (наприклад, .cat-item-16).
Просто клацніть правою кнопкою миші на необхідне посилання і оберіть цю функцію у своєму браузері. Інструмент дослідження елемента дасть вам панель з вихідним кодом, де одразу виділить потрібний рядок, в якому і зможете дізнатися клас стилів, який надалі прописуємо у файлі стилів. У моєму випадку це клас "cat-item-ID рубрики" (див. скріншот вище).
І так до кожної рубрики. Потім ви до стилів списку в бічній колонці додаєте цей клас оформлення і отримуєте на виході щось на зразок моїх стилів вище. В принципі, якщо шаблон у вас звичайний, не створений на замовлення, то індивідуальний клас буде таким самим. Відрізнятиметься лише клас для бічної колонки, який прописано на початку.
Також потрібно завантажити зображення іконок для кожної рубрики у папку images усередині шаблону оформлення. Тепер варто вивести зображення для відображення. У моєму випадку це виглядає так.