18 сентября 2014 
Добрый день!
В предыдущей статье я сообщил вам о создании на блоге страницы “Поддержать блог”. После добавления этой страницы в меню появился еще один стандартный пункт такой же как “О сайте”, “Карта сайта” и т.п. Мне захотелось выделить его каким-то другим цветом, чтобы он отличался от других и немного привлекал на себя внимание. =)
В этой статье я расскажу вам как можно изменить цвет, да и стиль в целом, для отдельно взятого пункта меню. Аналогичное можно сделать и с отдельно взятой рубрикой, если у вас возникнет необходимость каким-то образом выделить название конкретной категории.
В 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 добавляем необходимые нам свойства. Вот что добавил я.
|
1 2 3 4 5 6 7 8 9 10 11 |
#pagemenu li.page-item-996 a { color: gold; } #pagemenu li.page-item-996:hover a { color: #0099cc; } #pagemenu li.page-item-996.current_page_item a { color: #0099cc; } |
Первая конструкция определяет цвет текста ссылки пункта меню страницы 996 как золотой.
#pagemenu – указывает, что все следующее далее будет касаться только блока с id=pagemenu.
li.page-item-996 – сужает действие заданного свойства (цвета) до конкретного элемента списка.
a – указывает, что это относится только к ссылке, расположенной в данном элементе списка.
Т.е. если вам нужно изменить только цвет, то достаточно добавить:
|
1 2 3 4 5 |
#pagemenu li.page-item-996 a { color: gold; } |
Цвет, естественно, зададите какой нужно вам.
Вторая конструкция, которую я добавил – задает цвет текста при наведении курсора мыши (hover).
Третья конструкция – определяет цвет текста, когда пункт активен (выбран). К активному пункту добавляется класс current_page_item.
Вот и все. Сохраняйте внесенные изменения и проверяйте на сайте все ли получилось так как вы хотели.
У меня получилось вот так:
В данном примере я изменил только цвет текста ссылки, но вы можете задать и другой цвет фона для конкретного пункта меню и делать, при необходимости, другие изменения стилей.
Аналогичные изменения, как вы поняли, можно делать и для рубрик, только в этом случае работать с классом cat-item-xxx.
Если что не понятно – спрашивайте.
До новых публикаций!
Опубликовано в рубрике 
Андрей: 
Алексей, добрый день. Очень интересен Ваш блог во всем – рассматриваются разнообразные вопросы. А Вы случайно не можете проконсультировать по вопросу установки нового домена на старый сайт? Ну то есть сам сайт и его наполнение уже есть, хочу изменить доменное имя.
Добрый день, Николай.
1. У нового домена должны быть прописаны ns-ы сервера на котором Ваш сайт.
2. У хостера все файлы, относящиеся к сайту, скорей всего, нужно положить в папку с именем нового домена (посмотрите по аналогии как было сделано со старым доменом)
3. Во всех файлах, где фигурирует доменное имя, нужно заменить старый домен на новый.
4. Желательно прописать редирект со старого домена на новый. Чтобы не потерять показатели сайта и посетителей, которые будут стучаться по старому адресу.
Еще должно пройти некоторое время для делегирования домена. Если купили его недавно, то сайт несколько дней может быть не доступен по новому имени.
Вообщем, как-то так. Хотя, честно говоря, самому не приходилось изменять доменное имя.
Долго искал решение и, наконец, нашел. Спасибо)
Спасибо за познавательную статью
Интересная тема, попробую применить на своем сайте
у меня не получается .. беру
вставляю в самый конец стайл и цвет не меняется .. помогите пожалуйста
1. Кэш браузера обновляли после внесения изменений? (Ctrl+F5)
2. ID блока меню равен pagemenu?
Вы в меню выводите категорию?
Можно с вами связаться в скайп?
Пишите, как в сети буду – отвечу.
сайт filmozean.com в категориях есть два перехода вордпрес английский и немецкий … их хочу изменить цвета … помогите пожалуйста
Можно, например, вот так:
спасибо большое … как я могу вас отблагодарить ??
Пожалуйста.
На ваше усмотрение. Есть страница “Поддержать блог”.
День добрый. Мне нужно отключить следующий стиль: width: 100px;
Как это можно сделать?
Алексей, статья интересная и делаю всё как написано – не работает. Уже интуитивно меняю всё как у меня на сайте – всё равно не работает… Сейчас я все изменения убрал. Если у вас будет свободная минутка – мог бы вам дать доступ на тестовый свой сайт – что бы вы лично посмотрели, сайт делал не я, я его только дорабатываю, и понимаю что мой случай индивидуальный и может я что то где то не так дописал, но думаю будет повод написать очередной блог для таких как я)))
Помогите! Не работает, проверил уже раз 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 – здесь должно быть то, как у тебя прописано меню в стилях
и айди элемента меню не забудь поменять
Спасибо, помогло разобраться
Для тех у кого не получается, как это было у меня, досмотрел, что вместо #pagemenu необходимо писать #nav, т.к. в моём случае нет pagemenu, а стоит раздел с таким вот именем nav. И получается вот так:
Удачи!
Помогите мне мне очень нужна помощь пжалуйста. у меня не получается изменить цвет страниц в меню. чтобы я не пробовала. помогите очень нужно чтобы на моем сайте было акции одного цвета интернет другого помогите.если нужен код темы скину или что еще помогите. пожалуйста
Выделил в меню пункт “контакты”. Спасибо. Но в нижнем меню (в футере) пункт не выделилсяю. Почему? Нижнее меню полностью копирует верхнее.
То что искал, спасибо большое,
День добрый! перепробовал все варианты ( ваши и в комментах) ничего не выходит! сможете помочь(платно)
Добрый день!
Например, вот такая конструкция, изменит на вашем сайте цвет пункта меню “Контакты” на красный
Алексей спс за быстрый ответ! а конструкцию эту в сss вставлять?
Да, конечно, в файл стилей.
Дико извиняюсь но мне надо изменить цвет пункта в сайтбаре слева..например стоимость чистых зон” Будет работать? там не понятно какой id отвечает за сайтбар))
вставил конструкцию ,все равно не работает(((
Здравствуйте! Подскажите пожалуйста, есть список категорий на сайте, к ним приписываю стили, к каждой категории. Выглядит в 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 а потом описать единый стиль для них.
Алексей, огромное спасибо за оперативный ответ! Буду пытаться.
Спасибо большое, ДОБРЫЙ человек!
Такой вопрос, кроме изменения стиля отдельного пункта меню, как изменить шрифт отдельного пункта меню ?
Спасибо, очень помогло. Только надо было ещё указать, pagemenu – это id меню, который тоже надо взять из консоли. Спасибо!