BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Wordpress » Как вставить иконки в меню и рубрики WordPress без плагина

Как вставить иконки в меню и рубрики WordPress без плагина

2014-07-16 / Вр:17:11 / просмотров: 14874

Совсем недавно я верстал сайт на тематику «продажа и покупка недвижимости». Сверстанный шаблон я натянул на движок  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 способ. Откройте ваш сайт. Правой кнопкой мыши кликните по сайту и в выпадающем меню выберите «Посмотреть код страницы»:

Как найти в меню и в рубриках класс menu-item-?

Откроется новая вкладка с вводом данной страницы.  Нажмите на клавиши клавиатуры «CTR+F». Откроется форма поиска, в которую нужно вписать слово из меню, у меня на примере это «БИЗНЕС/КОМПАНИИ». Там вы и найдете уникальный класс menu-item-. У меня он menu-item-157:

Как вставить иконки в меню и рубрики WordPress без плагина

Увеличить?

2 способ. Этим способом я пользуюсь чаще, так как он быстрее и удобнее, что и вам рекомендую.
Откройте ваш сайт. Наведите курсор мышки на ссылку в меню или рубрике и нажмите правую кнопку мыши. В выпадающем меню выберите «Просмотр кода элемента»:

Как найти в меню и в рубриках класс menu-item-?

Внизу откроется код элемента:

Как вставить иконки в меню и рубрики WordPress без плагина

Что нужно прописать в CSS, чтобы появилась иконка в меню или в рубрике?

Припустим, у вас в меню на сайте есть ссылка «ЮРИДИЧЕСКИЕ УСЛУГИ» и вы хотите вставить иконку для этой ссылки. Вы узнаёте класс для ссылки «ЮРИДИЧЕСКИЕ УСЛУГИ», для примера, пусть она будет такой, как у меня: menu-item-174.
Потом откройте CSS шаблона (темы) и пропишите вот такой код:

li#menu-item-174
{
background: url(images/ uryslygi.png)no-repeat left;
padding-left: 25px;
}

Результат:

Как вставить иконки в меню и рубрики WordPress без плагина

Аналогично делаем такой же процесс и с другими менюшными ссылками.
У меня все! Надеюсь, статью выложил понятно! Будут вопросы, пишите в комментариях!

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

22 Ответов на комментарий - Как вставить иконки в меню и рубрики WordPress без плагина

  1. Игорь

    Спасибо, пост взял на заметку, как раз то что мне надо

  2. Екатерина

    Доброй ночи.
    Я новичок, хотела по вашему уроку вставить иконки в вертикольное меню сайта,но столкнулась с тем ,что у меня menu-item по 5 пунктам меню одинаковый. Помогите пожалуйста разобраться.
    Заранее спасибо.

  3. Степан => автор блога Степан => автор блога

    Здравствуйте, Екатерина! Там действительно из 13 пунктов, 5 с одинаковым menu-item.
    Хорошо, будем разбираться! Как вы вывели боковое меню?

  4. Екатерина

    Сайт до меня делал другой человек,я как раз пытаюсь разобраться , пункты меню идут как страницы. :|
    Меню в WP не создано не верхнее ,не нижнее. Нашла документ style2
    Помогите пожалуйста разобраться :oops:

  5. Степан => автор блога Степан => автор блога

    Екатерина, это нужно брать у Вас доступ к админке и смотреть. Так решить что-то сложно.

  6. Степан => автор блога Степан => автор блога

    Екатерина, попробуйте выставит иконки через плагин, например “category page icons”

  7. Степан, почему вы решили что таким методом будут выводиться иконки и какой вообще background? Не в меню не в рубриках таким способом выводиться они не будут. Лично проверял на четырех разных шаблонах вордпресс и только потом до меня дошло как надо сделать правильно. Для начала надо понять где их вывести. Вот пример вывода в сайтбаре:

    У меня рубрику ВрдПресс выводит вот такой класс

    <li class="cat-item cat-item-2">

    Теперь, рубрики в сайтбаре у меня выводит вот этот класс:
    .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");
    }

    Все. Теперь только сделать отступы если нужно.
    Вот теперь этот код будет работать.

  8. Степан => автор блога Степан => автор блога

    В статье у меня было написано – “…для всех ссылок в меню или в рубриках будет присвоен класс 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>"

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

    Если вы в админе добавили меню через (“админ-панель” => “Внешний вид” => “меню”), то класс будет menu-item-хххххх
    Если вы в админе добавили категорию через виджеты (“админ-панель” => “Внешний вид” => “виджеты”), то класс будет cat-item-хххххх

    На всех моих макетах все работает. Можете проверить на моем блоге.
    Почему я поставил background, да потому что list-style-image почему-то не заработал.

  9. Я говорю про то что если просто прописать cat-item-хххххх и задать к нему картинку, то не будет ничего работать. Вот сами прикиньте, что cat-item есть в меню и есть в сайдбаре, так вот, для какого cat-item вы будете делать иконки? Для этого надо и прописать перед cat-item .sidebar li. или меню где будут стоять иконки. А разница между background и list-style-image в том, что background задает фот списка, а list-style-image задает фон маркера списка. Вот и все.

  10. Степан => автор блога Степан => автор блога

    Вы не правы, Александр. Сейчас объясню почему. Не у всех шаблонов есть класс “sidebar” и ваш стиль работать вообще не будет. Как на мой взгляд достаточно прописать вот это:

    li#menu-item-xxx{стиль;}

    xxx – айди стр.

    Если ошибаюсь, поправьте. Но повторюсь, что на всех моих макетах работает именно такой способ. Насчет “list-style-image”, я с вами согласен, но когда что-то не работает, то приходиться выкручиваться. У меня лично на одном сайте “list-style-image” для категорий не прошел (ставил даже приоритет), вот и пришлось использовать background.

  11. Хорошо, я спорить не буду. Действительно шаблоны есть разные. И если нет элемента “sidebar”, то наверно будет работать по вашему. А на счет как лучше привязать иконку, то конечно бывает что без танца с бубнами не обойтись. :!:
    Вот я попробовал ваш код и не сработал, пришлось доставать бубны, и после некоторого времени все получилось.
    Танец с бубнами над кодом это вещь сильная, без него порой не обойтись :roll:

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

  13. Степан => автор блога Степан => автор блога

    у меня танец с бубном частенько бывает с php. Порой приходиться танцевать перед кодом целый день. Вы, Александр с php дружите?

  14. Степан => автор блога Степан => автор блога

    Ваши комментарии, Александр, я отношу к категориям “Полезные комментарии”.
    Спасибо за такие комментарии, так как в ваших комментариях и я могу что-то полезно почерпнуть. Я люблю узнать что-то новое, интересное.
    Еще раз спасибо! :arrow:

  15. С PHP я на уровне пользователя, не больше. В основном знания приходят ко мне после практики. То есть я захотел что-то сделать, ищу инфу, далее если нужно переделываю под себя. Вот отсюда и некоторые знания о PHP, CSS и так далее

  16. СтасОК

    Получилось с первого раза поставить, но есть одна загвоздка:иконка размещается примерно посредине строки меню а не ровно со строкой :cry: Подскажи, мил человек, как можно выровнять :|

  17. СтасОК

    P.S. Вот как здесь в комментах смайлики, но только еще чуть выше. Вообщем некрасиво смотрится…

  18. Степан => автор блога Степан => автор блога

    Дайте ссылку на сайт и установите в меню иконки. Мне нужно посмотреть.

  19. Степан => автор блога Степан => автор блога

    не совсем вас понял.

  20. Такой вариант как в посте у Степана не всем катит
    В коде

    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

  21. Александр

    Таким образом класс привязывается ко всему блоку дочерних страниц, а родительская так и остаётся без оформления

  22. Степан => автор блога Степан => автор блога

    а в родительской что, нет своих css классов?
    Смотрите в исходный код и добавляете оформление.

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

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

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 802
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4573