Изменение цвета кнопки для отображения посетителя на текущей странице

Question

Я пытаюсь изменить цвет фона кнопки боковой панели, чтобы посетитель знал, на какой странице он находится в данный момент.Я пытался найти в Интернете похожие ответы и применить их к своему коду, но пока не смог заставить его работать.Я использую WordPress, CSS и PHP / HTML, если это поможет.Ниже приведен код одной из кнопок:

.button-goldGrey {
  color: #231f20;
  border: 1px solid #231f20;
}

.button-goldGrey:hover {
  background-color: #ccb086;
}

<a class="button-side button-goldGrey" href="Page1">LINK 1</a>
<a class="button-side button-goldGrey" href="Page1">LINK 1</a>
<a class="button-side button-goldGrey" href="Page1">LINK 1</a>

И я соединю этот JSFiddle, если вы предпочитаете: https://jsfiddle.net/zerojjc/huxznj7m/2/

Answer 1

Как я уже упоминал в своем комментарии к вашему вопросу, только CSS не может этого сделать.Для этого вам понадобится PHP.

Предполагая, что вы можете использовать PHP и редактировать файлы своей темы, WordPress имеет функцию is_page () , которую вы можете использовать для добавленияновый класс CSS для ваших кнопок.

Например:

CSS:

.button-goldGrey {
  color: #231f20;
  border: 1px solid #231f20;
}

.button-goldGrey:hover,
.button-goldGrey.current {
  background-color: #ccb086;
}

PHP:

<a class="button-side button-goldGrey<?php echo (is_page('pwa-wealth-management')) ? ' current' : ''; ?>" href="Page1">PWA Wealth Management</a>
<a class="button-side button-goldGrey<?php echo (is_page('wilder-co')) ? ' current' : ''; ?>" href="Page1">Wilder & Company CPA's</a>
<a class="button-side button-goldGrey<?php echo (is_page('the-nichols-law-group')) ? ' current' : ''; ?>" href="Page1">The Nichols Law Group</a>

Answer 2

Вы можете получить имя текущей страницы, используя $_SERVER['PHP_SELF'], затем вы можете просто добавить подходящие классы в каждый элемент <li>, а затем выделить соответствующую ссылку с помощью некоторого CSS, как показано ниже:

Код CSS:

.button-goldGrey {
  color: #231f20;
  border: 1px solid #231f20;
}

.button-goldGrey:hover {
  background-color: #ccb086;
}
.active {
    color: red;
}

PHP + HTML код:

<?php
     $activePage = $_SERVER['PHP_SELF'];
?>
  <ul>
   <li class="<?php ($activePage == 'Page1') ? 'active':''; ?>"><a class="button-side button-goldGrey" href="Page1">LINK 1</a></li>
   <li class="<?php ($activePage == 'Page2') ? 'active':''; ?>"><a class="button-side button-goldGrey" href="Page2">LINK 1</a></li>
   <li class="<?php ($activePage == 'Page3') ? 'active':''; ?>"><a class="button-side button-goldGrey" href="Page3">LINK 1</a></li>
  </ul>