Совсем недавно я верстал сайт на тематику «продажа и покупка недвижимости». Сверстанный шаблон я натянул на движок WordPress. Но тут я столкнулся с неизвестной проблемой: как вставить иконки в меню на WordPress? С плагином это сделать можно легко и быстро, но зачем, если это можно сделать еще легче с помощью CSS. Согласитесь, зачем вам лишняя нагрузка на сайт, если можно обойтись без плагина. В общем, ковырялся я в исходном коде и нашел, что каждая ссылка в меню или в рубриках подписывается уникальным классом для оформления в CSS стилях, например, menu-item-174.
То есть, для всех ссылок в меню или в рубриках будет присвоен класс menu-item- , но с уникальной цифрой, например вот так:
<li id="menu-item-171" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-171"><a href="адрес страницы">ЗЕМЛЯ/НЕДВИЖИМОСТЬ</a></li>
<li id="menu-item-174" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-174"><a href=" адрес страницы ">ЮРИДИЧЕСКИЕ УСЛУГИ</a></li>
<li id="menu-item-173" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-173"><a href=" адрес страницы ">КОНСАЛТИНГ</a></li>
Замете, что у всех этих ссылок присутствует класс menu-item- и лишь только меняется уникальный номер (цифра).
Итак, если я хочу вставить иконку для ссылки «ЗЕМЛЯ/НЕДВИЖИМОСТЬ», буду использовать в CSS класс menu-item-171, к ссылке «ЮРИДИЧЕСКИЕ УСЛУГИ» - menu-item-174. Ну, все, я думаю, разжевал уже вам так, что наверно немного и запутал. Давайте ближе к делу и посмотрим, как я это делал на примере.
Как найти в меню и в рубриках класс menu-item-?
Чтобы узнать, к какому классу относится ссылка меню или ссылка рубрики, можно использовать два способа:
1 способ. Откройте ваш сайт. Правой кнопкой мыши кликните по сайту и в выпадающем меню выберите «Посмотреть код страницы»:
Откроется новая вкладка с вводом данной страницы. Нажмите на клавиши клавиатуры «CTR+F». Откроется форма поиска, в которую нужно вписать слово из меню, у меня на примере это «БИЗНЕС/КОМПАНИИ». Там вы и найдете уникальный класс menu-item-. У меня он menu-item-157:
Увеличить?
2 способ. Этим способом я пользуюсь чаще, так как он быстрее и удобнее, что и вам рекомендую.
Откройте ваш сайт. Наведите курсор мышки на ссылку в меню или рубрике и нажмите правую кнопку мыши. В выпадающем меню выберите «Просмотр кода элемента»:
Внизу откроется код элемента:
Что нужно прописать в CSS, чтобы появилась иконка в меню или в рубрике?
Припустим, у вас в меню на сайте есть ссылка «ЮРИДИЧЕСКИЕ УСЛУГИ» и вы хотите вставить иконку для этой ссылки. Вы узнаёте класс для ссылки «ЮРИДИЧЕСКИЕ УСЛУГИ», для примера, пусть она будет такой, как у меня: menu-item-174.
Потом откройте CSS шаблона (темы) и пропишите вот такой код:
li#menu-item-174
{
background: url(images/ uryslygi.png)no-repeat left;
padding-left: 25px;
}
Результат:
Аналогично делаем такой же процесс и с другими менюшными ссылками.
У меня все! Надеюсь, статью выложил понятно! Будут вопросы, пишите в комментариях!
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Как установить минимальную сумму для заказа – WooCommerce?
URL ссылка миниатюры для картинки – WordPress
Как добавить визуальный редактор для «Цитат (Отрывок)» – WordPress ?
Как добавить «Цитату (Отрывок)» для страниц?Похожие статьи
Меняется шапка сайта от времени года
Как красиво оформить Вход в админку WordPress?
Как для пользователя вывести последние просмотренные записи на WordPress
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330348 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274701 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222535 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187747 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186564
22 Ответов на комментарий - Как вставить иконки в меню и рубрики WordPress без плагина
Добавить комментарий
Метки: wordpress, без плагинов
Спасибо, пост взял на заметку, как раз то что мне надо
Доброй ночи.
Я новичок, хотела по вашему уроку вставить иконки в вертикольное меню сайта,но столкнулась с тем ,что у меня menu-item по 5 пунктам меню одинаковый. Помогите пожалуйста разобраться.
Заранее спасибо.
Здравствуйте, Екатерина! Там действительно из 13 пунктов, 5 с одинаковым menu-item.
Хорошо, будем разбираться! Как вы вывели боковое меню?
Сайт до меня делал другой человек,я как раз пытаюсь разобраться , пункты меню идут как страницы.
Меню в WP не создано не верхнее ,не нижнее. Нашла документ style2
Помогите пожалуйста разобраться
Екатерина, это нужно брать у Вас доступ к админке и смотреть. Так решить что-то сложно.
Екатерина, попробуйте выставит иконки через плагин, например “category page icons”
Степан, почему вы решили что таким методом будут выводиться иконки и какой вообще background? Не в меню не в рубриках таким способом выводиться они не будут. Лично проверял на четырех разных шаблонах вордпресс и только потом до меня дошло как надо сделать правильно. Для начала надо понять где их вывести. Вот пример вывода в сайтбаре:
У меня рубрику ВрдПресс выводит вот такой класс
Теперь, рубрики в сайтбаре у меня выводит вот этот класс:
.sidebar li
Вот теперь выводим иконку для рубрики вот так:
.sidebar li.cat-item-2 { list-style-image: url("images/каптинка.png"); }Обязательно должен присутствовать класс cat-item-ваш id рубрики. И никаких background. Не верите можете проверить сами, разница большая
У некоторых сайдбар может выводиться не классом а id, тогда код будет вот такой:
#sidebar li.cat-item-2 { list-style-image: url("images/картинка.png"); }Все. Теперь только сделать отступы если нужно.
Вот теперь этот код будет работать.
В статье у меня было написано – “…для всех ссылок в меню или в рубриках будет присвоен класс menu-item- , но с уникальной цифрой, например вот так:
Вы все тоже написали, только другими словами.
Если вы в админе добавили меню через (“админ-панель” => “Внешний вид” => “меню”), то класс будет menu-item-хххххх
Если вы в админе добавили категорию через виджеты (“админ-панель” => “Внешний вид” => “виджеты”), то класс будет cat-item-хххххх
На всех моих макетах все работает. Можете проверить на моем блоге.
Почему я поставил background, да потому что list-style-image почему-то не заработал.
Я говорю про то что если просто прописать cat-item-хххххх и задать к нему картинку, то не будет ничего работать. Вот сами прикиньте, что cat-item есть в меню и есть в сайдбаре, так вот, для какого cat-item вы будете делать иконки? Для этого надо и прописать перед cat-item .sidebar li. или меню где будут стоять иконки. А разница между background и list-style-image в том, что background задает фот списка, а list-style-image задает фон маркера списка. Вот и все.
Вы не правы, Александр. Сейчас объясню почему. Не у всех шаблонов есть класс “sidebar” и ваш стиль работать вообще не будет. Как на мой взгляд достаточно прописать вот это:
li#menu-item-xxx{стиль;}xxx – айди стр.
Если ошибаюсь, поправьте. Но повторюсь, что на всех моих макетах работает именно такой способ. Насчет “list-style-image”, я с вами согласен, но когда что-то не работает, то приходиться выкручиваться. У меня лично на одном сайте “list-style-image” для категорий не прошел (ставил даже приоритет), вот и пришлось использовать background.
Хорошо, я спорить не буду. Действительно шаблоны есть разные. И если нет элемента “sidebar”, то наверно будет работать по вашему. А на счет как лучше привязать иконку, то конечно бывает что без танца с бубнами не обойтись.
Вот я попробовал ваш код и не сработал, пришлось доставать бубны, и после некоторого времени все получилось.
Танец с бубнами над кодом это вещь сильная, без него порой не обойтись
Но все же думаю что код который я привел в комментах может помочь тем у кого не сработает ваш код. Не так ли? Считаю что ничего плохого я не написал.
у меня танец с бубном частенько бывает с php. Порой приходиться танцевать перед кодом целый день. Вы, Александр с php дружите?
Ваши комментарии, Александр, я отношу к категориям “Полезные комментарии”.
Спасибо за такие комментарии, так как в ваших комментариях и я могу что-то полезно почерпнуть. Я люблю узнать что-то новое, интересное.
Еще раз спасибо!
С PHP я на уровне пользователя, не больше. В основном знания приходят ко мне после практики. То есть я захотел что-то сделать, ищу инфу, далее если нужно переделываю под себя. Вот отсюда и некоторые знания о PHP, CSS и так далее
Получилось с первого раза поставить, но есть одна загвоздка:иконка размещается примерно посредине строки меню а не ровно со строкой
Подскажи, мил человек, как можно выровнять 
P.S. Вот как здесь в комментах смайлики, но только еще чуть выше. Вообщем некрасиво смотрится…
Дайте ссылку на сайт и установите в меню иконки. Мне нужно посмотреть.
не совсем вас понял.
Такой вариант как в посте у Степана не всем катит
В коде
li#menu-item-174 { background: url(images/ uryslygi.png)no-repeat left; padding-left: 25px; }Если разобраться то получается мы задаем фон списка, а нужно задать фон маркерованного списка и тогда код будет
выглядеть вот так
li#menu-item-174 { list-style-image: url(images/ uryslygi.png)no-repeat left; padding-left: 25px; }Можно еще попробовать вместо padding-left: 25px поставить margin-left: 35px
Таким образом класс привязывается ко всему блоку дочерних страниц, а родительская так и остаётся без оформления
а в родительской что, нет своих css классов?
Смотрите в исходный код и добавляете оформление.