RSS Tvitter facebook gplus vk Youtube
Skip to content

 

Как изменить цвет меню в открытой вкладке на сайте Вордпресс

 Дорогие друзья, с вами на связи Ольга Абрамова. Недавно, в статье Меняем дизайн сайта сами, как изменить шаблон темы, я писала, что пыталась изменить цвет вкладок меню, когда они активные, т.е. когда страницы открытые. По идее, цвет должен был меняться с синего на оранжевый. Но это получалось только при наведении курсора.

Мои попытки применить некоторые яваскрипты не увенчались успехом, так как входили в конфликт с невалидным кодом самого сайта. А также не получалось прописать в стилях условие для положения active. Хотя казалось, чего проще, прописать в style.css: #menu ul li a:active и указать цвет заднего фона и ссылки. Ан нет, не работает. То же самое для hover работает, а для active нет.

Ну на нет и суда нет. Значит, должно быть другое решение. Надо просто лучше подумать 😉

А вообще, зачем это надо, чтобы активная вкладка была другого цвета?

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

Написав пост, я в нём обратилась к читателям откликнуться, кто в теме. Сработало 🙂 Отозвался постоянный читатель блога Михаил, который подсказал, как решить этот вопрос.  Миша, большое спасибо. Нужно было в style.css прописать стиль для действующей страницы:

#hmenu ul li.current_page_item a {
  background-color: #ffffff;
  color: #000000;
}

Но эта подсказка решила только часть проблемы.

Главная же страница так и оставалась неизменной. Что делать? На время я оставила этот вопрос, но все же мне хотелось его добить. Добила 😀

Обратилась к своей знакомой, Нине Жупериной, которая всегда готова прийти на помощь. Она мне посоветовала посмотреть видеокурс, который, как она думала, у меня есть. У меня его не оказалось и она мне любезно предоставила свой компьютер и видео для просмотра через программу Teamwiewer. Удобная программа для удаленной работы с компьютером.

К сожалению звук мне не удалось услышать, поэтому посмотрев видео, я, в свою очередь, предоставила Нине доступ к моему компьютеру. Надо сказать, что такой обоюдный доступ не позволяет просматривать браузеры друг у друга.  Открываются многочисленные окна, одно меньше другого. Зрелище, надо сказать, завораживающее 🙂 Это как виртуальный коридор, когда зеркала наводят друг на друга. Прикольно, но без толку.

Она мне прописала код в нужном месте. Но... У меня уже было около 2 часов ночи. Нет, чтобы в люльку пойти, я программированием занимаюсь. Вдруг завтра будет поздно? Написали мы код, я проверяю, а он не работает. И так и всяк мы над ним изгалялись, не работает. Тогда со мной распрощались и отправили спать 🙂

Но я пошла в Гугл, скопировала написанный код и целиком вставила его в поисковую строку. Получила несколько вариантов, применив которые, всё сработало.

Люди, не работайте по ночам. Голова не варит так поздно 😀 Оказалось, что я редактировала файл header.php на тестовом блоге, а проверяла на рабочем.

И у Нины, хоть не совсем ночь, но тоже было поздно. Она написала правильный код, но не дописала закрывающий тег, и код, естественно, не сработал 🙂 Мы с ней в этом разобрались и все получилось.

В конце концов, я нашла решение для своей ситуации, попутно получив подтверждение прописным истинам: утро вечера мудренее, расстояние дружбе не помеха. И  Teamwiewer взаимно не работает в браузерах.

Вот какие коды можно применить для подсветки главной:

<li<?php if (is_home()) : echo ' class="current_page_item"'; endif; ?>> (ставить перед ссылкой на главную страницу)
и
<li <?php if(is_home()) { echo ' class="current-cat" '; } ?>><a href="<?php bloginfo('url'); ?>">Главная</a></li> (заменить полностью строку для главной страницы)

Я применила первый вариант. Михаил, пробуйте, у Вас тоже получится. В принципе, получится у всех, у кого сайт на Вордпресс.

Всем красивых активных менюшек!

И для расслабления (а может, наоборот?) что-то типа самоучителя для одних, и совета, как не попасть впросак для других, видео, как с помощью нехитрых трюков стать звездой, с которой все хотят, как минимум, сфоткаться. Стильный внешний вид, внушительная охрана, фотографы-папарацци. Звезда (pop, rap, fashion, дальше придумайте сами) да и только 🙂

Фотки сделали более 300 человек! Видео на английском, но интуитивно понятное.

Related Posts Plugin for WordPress, Blogger...
Присоединяйтесь ко мне в социальных сетях:

Присоединяйтесь ко мне в ТвиттереПрисоединяйтесь ко мне в Моём Мире
Если информация была для Вас полезна, пжл, проголосуйте за неё с помощью кнопочек

11 комментариев

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

  2. Всё, рассмотрел, всё правильно.

  3. Работа по ночам, особенно, если сам жаворонок, выбивает из колеи напрочь. Не зря говорят, что утро вечера мудренее. То, что кажется неразрешимой головоломкой ночью, с легкостью складывается в нужную картинку утром. Но азарт — вещь упрямая!
    Вы проделали огромную работу, Оля: добились своего и сделали шаг вперед в развитии профессионализма.
    Беру на заметку эту статью. Спасибо, за подробное описание.

    • Ольга Абрамова:

      Елена, пожалуйста, тем более у Вас такой же шаблон, как и у меня. И спасибо за поддержку 🙂

  4. Оля, спасибо за упоминание в своей статье! Все кажется очень просто, когда уже разобрались. Но тогда, ночью, я встала в тупик: вроде, все правильно, но почему-то не работает :).
    Ты — молодец (кажется, я это тебе уже где-то писала:)), доводишь работу до результата. Я тоже такая же упертая! 🙂
    Смайликов в комментариях не хватает!

    • Ольга Абрамова:

      Нина, пожалуйста. Ты же мне часто помогаешь. А смайликов, мне кажется, достаточно, выбирай любой:

      🙂

      😉

      😀

      😎

      😛
      Надеюсь, такие не пригодятся:

      🙁

      😐

      😮

      😡
      Они при написании не видны, Работают только при просмотре.

  5. Оля, очень красивый сайт теперь у Вас. Если можно, поделитесь, как Вы в поставили картинки с соц. сетями в заголовок сайта? И,еще,без обид, уже давно не употребляется старинная форма от слова идти: пишется прийти, а не придти.Это так, чтоб уж совсем перфект был. Спасибо за инфо.

    • Ольга Абрамова:

      Лидия, большое спасибо. И ошибку исправила. Лень было в словарь заглянуть 🙂
      Код кнопок заключается в тэг div, присваивается ему имя, и он вставляется в нужное место в файле header. Затем в стилях прописываются отступы слева и сверху и позиционирование.

    • Эта форма давно не употребляется, но она правильна и здесь ошибки никакой нет. Это извечный спор среди знатоков великого и могучего идёт постоянно. Так что кому как нравится тот так и пишет.

    • Ольга Абрамова:

      Михаил, я поискала, как же все-таки правильно: прийти или придти. Действительно, придти давно устарело, но его никто не отменял 🙂 Так что все правы.