При разработке своего веб-сайта с использованием блочных тем WordPress вы, возможно, заметили, что основная навигация вашего сайта имеет ограниченные возможности оформления. Например, когда вы нажимаете ссылку на страницу в основной навигации, чтобы посетить страницу вашего веб-сайта, ссылка на активную страницу не меняет цвет внутри основной навигации. Другими словами, пользователю не сообщается, на какой странице он находится в данный момент.

Хороший пользовательский опыт говорит о том, что посетители сайта всегда должны иметь какое-то представление о том, где они находятся на вашем сайте — это помогает им не заблудиться.

В этом уроке я покажу вам, как быстро настроить навигацию по сайту в темах блоков WordPress для отображения пользовательского цвета для активной страницы. Для этой демонстрации я буду использовать тему Twenty Twenty Four.

Содержание

Шаг 1. Перейдите в редактор блоков.

Navigate to the WordPress Block Editor via Appearance>Editor

На панели управления WordPress перейдите в «Внешний вид»> «Редактор» (красная стрелка на фотографии выше). Вы попадете в редактор сайта.

Click on the Main Content Area to Access the WordPress Block Editor

Нажмите на область основного содержимого справа от меню. Вы попадете в редактор блоков.

Шаг 2. Добавьте собственный CSS

Click the Styles Icon in the Block Toolbar for WordPress Custom CSS Feature

Затем нажмите значок «Стили» в правом верхнем углу редактора блоков.

Click the 3 Dots Icon and Click Additional CSS in WordPress

Нажмите значок «Дополнительно» (значок из трех вертикальных точек), затем нажмите «Дополнительный CSS».

Add Custom CSS to WordPress to Change Active Menu Link Colors

Вставьте следующий код CSS в текстовое поле «Дополнительный CSS»:

.current-menu-item {
  color: #e23f1b;
}

Замените значение между символом «#» и знаком «;» символ с шестнадцатеричным кодом для любого цвета, который вы хотите использовать (вы можете получить значения шестнадцатеричного кода цвета в WordPress, отредактировав все, что имеет значение цвета, или используя такой инструмент цвета, как HueMint or Coolors).

Нажмите кнопку «Сохранить» в верхней части редактора блоков, затем еще раз нажмите «Сохранить».

Шаг 3. Просмотр страницы

Preview the WordPress Menu Link Customizations by Clicking View Page Icon

Сохранив изменения, теперь вы можете щелкнуть значок «Просмотр страницы», чтобы просмотреть свой сайт с новым цветом активной страницы в основной навигации.

УСТРАНЕНИЕ НЕПОЛАДОК

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

Неблокирующие темы или сторонние блочные темы

Чтобы решить первую проблему, вам придется использовать инструмент «Проверка» в вашем браузере и выяснить, какой класс используется для активных ссылок на страницы в вашей основной навигации (вы также можете попробовать поискать в Google «Какой класс использует тема ____ для активных ссылки на страницы в главной навигации»).

Чтобы решить последнюю проблему, просто измените свои пользовательские ссылки на ссылки на страницы в редакторе сайта. Чтобы сделать это в редакторе блоков, щелкните логотип в верхнем левом углу редактора (это будет логотип WordPress или логотип вашего сайта).

Затем нажмите «Навигация». Нажмите значок «Редактировать» рядом с названием главного меню вашего сайта.

Нажмите на меню навигации, чтобы отредактировать его. Затем нажмите «Перейти к родительскому навигационному блоку» на боковой панели «Настройки блока», если она не выбрана по умолчанию.

Под заголовком «Меню» на боковой панели «Настройки блока» вы увидите список всех ваших страниц, которые находятся в вашей основной навигации. Если в навигации у вас есть какие-либо страницы сайта, которые указаны в виде настраиваемой ссылки (например, нижняя запись на фотографии-примере), вам придется удалить запись и повторно добавить ее как страницу (если это возможно).

Для этого щелкните значок «Параметры» рядом с записью, затем нажмите «Удалить ____». Затем нажмите значок «+» внизу списка страниц.

Затем нажмите «Ссылка на страницу» и найдите страницу, которую хотите добавить. Добавив страницу, нажмите «Сохранить» и еще раз нажмите «Сохранить». Проблема должна быть решена.

Вот и все для этого урока! Если вам понравилось, вы можете проверить мой другой Учебные пособия по WordPress или записаться на мой Курс WordPress на Udemy!