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>

按钮颜色更改以显示访问者在当前页面上

2 个答案: