Если вам нужно добавить пользовательский стиль к первому и последнему пунктам вашего навигационного меню WordPress?
Можно просто добавить пользовательский CSS-класс к первому и последнему пунктам меню, но если меню перестроить, то эти пункты перестанут быть первым и последним.
В этой статье мы покажем вам, как добавить фильтр .и .последний класс, который будет стилизовать первый и последний пункты меню, даже если пункты меню будут переупорядочены.
Зачем по-разному оформлять первый и последний пункты навигации?
В прошлом проекте по индивидуальному дизайну нам нужно было добавить некоторые пользовательские стили к пунктам навигационного меню сайта WordPress. Этот дизайн, в частности, требовал разного стиля для первого и последнего пунктов меню.
Теперь мы можем легко отредактировать меню и добавить пользовательский CSS класс к первому и последнему пункту меню. Но поскольку мы сдавали проект клиенту, наше решение должно было работать, даже если они изменят порядок меню.
Поэтому мы решили вместо этого использовать фильтры.
В этом руководстве мы покажем вам два способа стилизации первого и последнего пунктов вашего навигационного меню. Вы можете выбрать предпочтительный метод из списка ниже:
- Метод 1: Добавление первого и последнего класса с помощью фильтра
- Метод 2: Стилизация первого и последнего пунктов с помощью селекторов CSS
Способ 1: Добавление первого и последнего класса с помощью фильтра
Первый способ по-разному стилизовать первый и последний пункты навигационного меню — это добавить фильтр в вашу тему.
Вам нужно будет добавить код в функции вашей темы.php файл. Если вы не делали этого раньше, то посмотрите наше руководство о том, как копировать и вставлять код в WordPress.
Все, что вам нужно сделать, это открыть функции вашей темы.php файл, затем вставьте следующий фрагмент кода:
function wpb_first_and_last_menu_class($items) < $items[1]->classes[] = 'first'; $items[count($items)]->classes[] = 'last'; return $items; > add_filter('wp_nav_menu_objects', 'wpb_first_and_last_menu_class');
Это создает .первый и .последние классы CSS для первого и последнего пунктов навигационного меню соответственно. Вы можете использовать эти классы для стилизации пунктов меню.
Чтобы узнать, как это сделать в деталях, обратитесь к нашему руководству по стилизации навигационных меню WordPress.
В этом уроке мы добавим следующее базовое CSS-форматирование в стиль нашей темы.css-стилей, чтобы просто выделить жирным первый и последний пункты меню:
.first a .last a
Здесь вы можете увидеть скриншоты до и после добавления кода на наш демо-сайт.
Метод 2: Стилизация первого и последнего элементов с помощью селекторов CSS
Второй способ изменить стиль первого и последнего пунктов меню — использовать селекторы CSS. Этот метод проще, но он может не работать в некоторых старых браузерах, таких как Internet Explorer.
Чтобы выполнить этот метод, вам придется добавить код в таблицу стилей вашей темы или в раздел ‘Additional CSS’ в WordPress Theme Customizer.
Если вы не делали этого раньше, то посмотрите наше руководство о том, как легко добавить пользовательский CSS на ваш сайт WordPress.
Вы должны начать с редактирования стиля вашей темы.css файл, или перейдя по адресу Внешний вид » Настроить и нажмите на «Дополнительный CSS.
После этого вам нужно вставить следующий фрагмент кода, а затем сохранить или опубликовать изменения.
ul#yourmenuid > li:first-child < >ul#yourmenuid > li:last-child
Обратите внимание, что вам нужно будет заменить ‘yourmenuid’ на фактический ID навигационного меню. Селекторы ‘first-child’ и ‘last-child’ выбирают элемент, если он является первым и последним дочерним элементом своего родителя, которым является меню навигации.
Например, мы использовали этот код для выделения жирным шрифтом первого и последнего пунктов навигационного меню на нашем демонстрационном сайте:
ul#primary-menu-list > li:first-child a < font-weight: bold; >ul#primary-menu-list > li:last-child a
Мы надеемся, что это руководство помогло вам узнать, как добавить функцию .первый и .класс last в навигационные меню WordPress.
Источник: www.wpbeginner.com