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

Добрый день!

В предыдущей статье я сообщил вам о создании на блоге страницы “Поддержать блог”. После добавления этой страницы в меню появился еще один стандартный пункт такой же как “О сайте”, “Карта сайта” и т.п. Мне захотелось выделить его каким-то другим цветом, чтобы он отличался от других и немного привлекал на себя внимание. =)

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

В WordPress при выводе списка страниц к каждому элементу этого списка добавляются классы page_item и page-item-xxx, где xxx – это номер страницы.

Аналогично и для рубрик: cat-item и cat-item-xxx, где xxx – это номер рубрики.

Например, в мое блоге для пункта “Поддержать блог” был добавлен класс page-item-996.

Узнать какой класс добавлен в вашем случае тому или иному пункту можно просто посмотрев код элемента нужного пункта.

 

определение класса конкретного пункта меню

 

Теперь, если вы будете изменять CSS свойства для класса page_item, то эти изменения затронут все пункты меню, а если вам нужно изменить стиль конкретного пункта, то прописывайте соответствующие свойства для класса page-item-xxx.

В моём случае мне нужно прописать свойства для класса page-item-996.

Открываем файл style.css. Это можно сделать, например, через админку Внешний вид – Редактор – Таблица стилей (style.css). Либо подключиться к серверу через WinSCP и открыть файл /wp-content/themes/название_шаблона/style.css

В конец файла style.css добавляем необходимые нам свойства. Вот что добавил я.

Первая конструкция определяет цвет текста ссылки пункта меню страницы 996 как золотой.

#pagemenu – указывает, что все следующее далее будет касаться только блока с id=pagemenu.

li.page-item-996 – сужает действие заданного свойства (цвета) до конкретного элемента списка.

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

Т.е. если вам нужно изменить только цвет, то достаточно добавить:

Цвет, естественно, зададите какой нужно вам.

Вторая конструкция, которую я добавил – задает цвет текста при наведении курсора мыши (hover).

Третья конструкция – определяет цвет текста, когда пункт активен (выбран). К активному пункту добавляется класс current_page_item.

Вот и все. Сохраняйте внесенные изменения и проверяйте на сайте все ли получилось так как вы хотели.

У меня получилось вот так:

 

цвет неактивного пункта меню после внесенных изменений

цвет активного пункта меню после внесенных изменений

 

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

Аналогичные изменения, как вы поняли, можно делать и для рубрик, только в этом случае работать с классом cat-item-xxx.

Если что не понятно – спрашивайте.

До новых публикаций!

Понравилась статья? Не забудьте поделиться с друзьями и коллегами:

Вы можете пропустить чтение записи и оставить комментарий. Размещение ссылок запрещено.

32 комментария к записи “Как изменить стиль отдельного пункта меню или отдельной рубрики”

  1. Николай

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

    • Алексей Ершов

      Добрый день, Николай.
      1. У нового домена должны быть прописаны ns-ы сервера на котором Ваш сайт.
      2. У хостера все файлы, относящиеся к сайту, скорей всего, нужно положить в папку с именем нового домена (посмотрите по аналогии как было сделано со старым доменом)
      3. Во всех файлах, где фигурирует доменное имя, нужно заменить старый домен на новый.
      4. Желательно прописать редирект со старого домена на новый. Чтобы не потерять показатели сайта и посетителей, которые будут стучаться по старому адресу.
      Еще должно пройти некоторое время для делегирования домена. Если купили его недавно, то сайт несколько дней может быть не доступен по новому имени.
      Вообщем, как-то так. Хотя, честно говоря, самому не приходилось изменять доменное имя.

  2. Михаил

    Долго искал решение и, наконец, нашел. Спасибо)

  3. Виктор

    Спасибо за познавательную статью

  4. Виктор

    Интересная тема, попробую применить на своем сайте

  5. Andrii

    у меня не получается .. беру

    вставляю в самый конец стайл и цвет не меняется .. помогите пожалуйста

    • Алексей Ершов

      1. Кэш браузера обновляли после внесения изменений? (Ctrl+F5)
      2. ID блока меню равен pagemenu?

      Вы в меню выводите категорию?

  6. Andrii

    Можно с вами связаться в скайп?

    • Алексей Ершов

      Пишите, как в сети буду – отвечу.

  7. Andrii

    сайт filmozean.com в категориях есть два перехода вордпрес английский и немецкий … их хочу изменить цвета … помогите пожалуйста

    • Алексей Ершов

      Можно, например, вот так:

  8. Andrii

    спасибо большое … как я могу вас отблагодарить ??

    • Алексей Ершов

      Пожалуйста.
      На ваше усмотрение. Есть страница “Поддержать блог”.

  9. Кирилл

    День добрый. Мне нужно отключить следующий стиль: width: 100px;
    Как это можно сделать?

  10. Антон

    Алексей, статья интересная и делаю всё как написано – не работает. Уже интуитивно меняю всё как у меня на сайте – всё равно не работает… Сейчас я все изменения убрал. Если у вас будет свободная минутка – мог бы вам дать доступ на тестовый свой сайт – что бы вы лично посмотрели, сайт делал не я, я его только дорабатываю, и понимаю что мой случай индивидуальный и может я что то где то не так дописал, но думаю будет повод написать очередной блог для таких как я)))

  11. Данил

    Помогите! Не работает, проверил уже раз 10, не как.

    • Сергей

      если хочешь поменять один элемент в меню, попробуй это.

      #menu-menyu-blok-2 li.menu-item-88 a {
      color: gold;
      }
      #menu-menyu-blok-2 li.menu-item-88:hover a {
      color: #9B9B99;
      }

      menu-menyu-blok-2 – здесь должно быть то, как у тебя прописано меню в стилях
      и айди элемента меню не забудь поменять

  12. Сергей

    Спасибо, помогло разобраться :)

  13. Макс

    Для тех у кого не получается, как это было у меня, досмотрел, что вместо #pagemenu необходимо писать #nav, т.к. в моём случае нет pagemenu, а стоит раздел с таким вот именем nav. И получается вот так:

    Удачи!

  14. Марина

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

  15. Сергей

    Выделил в меню пункт “контакты”. Спасибо. Но в нижнем меню (в футере) пункт не выделилсяю. Почему? Нижнее меню полностью копирует верхнее.

  16. Sergey

    То что искал, спасибо большое,

  17. Андрей

    День добрый! перепробовал все варианты ( ваши и в комментах) ничего не выходит! сможете помочь(платно)

    • Алексей Ершов

      Добрый день!
      Например, вот такая конструкция, изменит на вашем сайте цвет пункта меню “Контакты” на красный

      • Андрей

        Алексей спс за быстрый ответ! а конструкцию эту в сss вставлять?

        • Алексей Ершов

          Да, конечно, в файл стилей.

  18. Андрей

    Дико извиняюсь но мне надо изменить цвет пункта в сайтбаре слева..например стоимость чистых зон” Будет работать? там не понятно какой id отвечает за сайтбар))

  19. Андрей

    вставил конструкцию ,все равно не работает(((

  20. Дмитрий

    Здравствуйте! Подскажите пожалуйста, есть список категорий на сайте, к ним приписываю стили, к каждой категории. Выглядит в css это так:

    Можно ли задать такой стиль сразу к нескольким элементам?:
    li.cat-item-144, li.cat-item-145, li.cat-item-146 и т.д. Их достаточно много, и если к каждой отдельно задавать, то css файл получается громоздким.
    Заранее спасибо!

    • Алексей Ершов

      Здравствуйте! Да, можно перечислить элементы через запятую: li.cat-item-144, li.cat-item-145, li.cat-item-146 а потом описать единый стиль для них.

  21. Дмитрий

    Алексей, огромное спасибо за оперативный ответ! Буду пытаться.

  22. Валерий

    Спасибо большое, ДОБРЫЙ человек!

Оставить комментарий

Для размещения кода в комментарии используйте теги <pre> </pre>, например:


Подписаться, не комментируя