Как выделить выбранный в данный момент элемент / раздел в Wordpress с помощью CSS (может быть, PHP тоже)?

Question

Я бы хотел, чтобы отображаемая в данный момент страница или Недавнее сообщение было выделено с помощью CSS.

Примерно так:

СТР:

... Главная

... О <- текущая страница </p>

... Контакт

ПОСЛЕДНИЕ ПОСТЫ:

... post1 <- текущее сообщение, которое видит пользователь. </p>

... post2

... пост 3

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

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

Есть предложения?

Answer 1

Если вы используете wp_list_pages(), вы можете использовать классы current_page_item, current_page_ancestor и current_page_parent для целевых активных узлов.

В противном случае речь идет о небольшом ручном труде - вы можете отобразить текущий фрагмент тега body в виде класса или идентификатора или напечатать «активный» класс на элементе навигации, если это текущая страница;

function active_class($page)
{
    if (is_page($page))
        echo ' class="active"';
}

И положить в игру;

<ul>
    <li<?php active_class('about'); ?>><a href="/about/">About</a></li>
    <li<?php active_class('contact'); ?>><a href="/contact/">Contact</a></li>
</ul>

Answer 2

Для полноты обсуждения важно отметить, что начиная с Wordpress 3.0, выделение текущей страницы возможно с помощью CSS. Нет необходимости в JavaScript. Текущий пункт меню имеет класс current-menu-item ( здесь - полное руководство.

Важно отметить, что если пункт меню имеет подменю, а текущая страница находится в подменю, класс будет добавлен как к текущему пункту меню, так и к текущему элементу подменю в этом меню.

Итак, вот что я реализовал на своем сайте:

.menu > ul > li.current-menu-item {text-shadow: 2px 2px grey;}
.menu ul.sub-menu > li {text-shadow: none;} 
.menu ul.sub-menu > li.current-menu-item {text-shadow: 2px 2px grey;}

Возьми это за отправную точку и наслаждайся!