Вам нужно добавить пользовательский стиль в первый и последний пункты меню навигации WordPress?
Вы можете просто добавить пользовательский класс CSS в первые и последние пункты меню, но если меню будет изменено, то эти пункты больше не будут первыми и последними.
В этой статье мы покажем вам, как добавить .во-первых, и .последний класс, который будет стилизовать первый и последний пункты меню, даже если пункты меню переупорядочены.
Почему Первый и Последний навигационные элементы оформлены по-разному?
В прошлом проекте пользовательского дизайна нам нужно было добавить некоторые пользовательские стили в пункты меню навигации веб-сайта WordPress. Этот дизайн, в частности, требовал другого стиля для первого пункта меню и последнего пункта меню.
Теперь мы могли легко редактировать меню и добавлять пользовательский класс CSS в первый и последний пункт меню. Но поскольку мы доставляли проект клиенту, наше решение должно было работать, даже если они изменили порядок меню.
Поэтому мы решили вместо этого использовать фильтры.
В этом уроке мы покажем вам два способа оформления первого и последнего пунктов навигационного меню. Вы можете выбрать предпочтительный метод из списка ниже:
- Способ 1. Добавление первого и последнего классов с помощью фильтра
- Способ 2. Стилизация первого и последнего элементов с помощью селекторов CSS
Способ 1. Добавление первого и последнего классов с помощью фильтра
Первый способ по-разному оформить первый и последний пункты меню навигации-это добавить фильтр в свою тему.
Вам нужно будет добавить код в свою тему functions.php файл. Если вы не делали этого раньше, ознакомьтесь с нашим руководством о том, как копировать и вставлять код в WordPress.
Все, что вам нужно сделать, это открыть раздел вашей темы. functions.php файл, затем вставьте следующий фрагмент кода:
1 2 3 4 5 6 |
|
Это создает .во-первых и .последние классы CSS для вашего первого и последнего пунктов навигационного меню соответственно. Вы можете использовать эти классы для оформления элементов меню.
Чтобы подробно узнать, как это сделать, обратитесь к нашему руководству по стилю меню навигации WordPress.
В этом уроке мы добавим следующее базовое форматирование CSS в таблицу стилей style.css нашей темы, чтобы просто выделить первый и последний пункты меню жирным шрифтом:
1 2 3 |
|
Здесь вы можете увидеть скриншоты до и после того, как мы добавили код на наш демо-сайт.
Способ 2. Стилизация первого и последнего элементов с помощью селекторов CSS
Второй способ изменить стиль первого и последнего пунктов меню - использовать селекторы CSS. Этот метод проще, но он может не работать с некоторыми более старыми браузерами, такими как Internet Explorer.
Чтобы следовать этому методу, вам нужно будет добавить код в таблицу стилей вашей темы или в раздел "Дополнительный CSS" в настройщике тем WordPress.
Если вы не делали этого раньше, ознакомьтесь с нашим руководством о том, как легко добавить пользовательский CSS на свой сайт WordPress.
Вы должны начать с редактирования файла style.css вашей темы или перейти к разделу » Настройка внешнего вида "и нажать " Дополнительный CSS".
После этого вам нужно вставить следующий фрагмент кода, а затем сохранить или опубликовать свои изменения.
1 2 |
|
Обратите внимание, что вам нужно будет заменить " yourmenuid’ фактическим идентификатором меню навигации. Селекторы "первый дочерний" и "последний дочерний" выбирают элемент, если он является первым и последним дочерним элементом своего родителя, который является меню навигации.
Например, мы использовали этот код для выделения жирным шрифтом первого и последнего пунктов меню навигации на нашем демонстрационном сайте:
1 2 3 4 5 6 |
|
Мы надеемся, что этот урок помог вам научиться добавлять .first и .последний класс для навигационных меню WordPress.