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 человек! Видео на английском, но интуитивно понятное.

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

  1. Михаил:

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

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

      Михаил, пожалуйста 🙂

  2. Михаил:

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

  3. Елена:

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

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

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

  4. Нина Жуперина:

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

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

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

      🙂

      😉

      😀

      😎

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

      🙁

      😐

      😮

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

  5. Лидия:

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

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

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

    • Михаил:

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

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

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