Как добавить первый и последний класс CSS в пункты меню WordPress

 
 

Вам нужно добавить пользовательский стиль в первый и последний пункты меню навигации WordPress?

Вы можете просто добавить пользовательский класс CSS в первые и последние пункты меню, но если меню будет изменено, то эти пункты больше не будут первыми и последними.

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

Почему Первый и Последний навигационные элементы оформлены по-разному?

В прошлом проекте пользовательского дизайна нам нужно было добавить некоторые пользовательские стили в пункты меню навигации веб-сайта WordPress. Этот дизайн, в частности, требовал другого стиля для первого пункта меню и последнего пункта меню.

Теперь мы могли легко редактировать меню и добавлять пользовательский класс CSS в первый и последний пункт меню. Но поскольку мы доставляли проект клиенту, наше решение должно было работать, даже если они изменили порядок меню.

Поэтому мы решили вместо этого использовать фильтры.

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

  • Способ 1. Добавление первого и последнего классов с помощью фильтра
  • Способ 2. Стилизация первого и последнего элементов с помощью селекторов CSS

Способ 1. Добавление первого и последнего классов с помощью фильтра

Первый способ по-разному оформить первый и последний пункты меню навигации-это добавить фильтр в свою тему.

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

Все, что вам нужно сделать, это открыть раздел вашей темы. functions.php файл, затем вставьте следующий фрагмент кода:

1

2

3

4

5

6

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 в таблицу стилей style.css нашей темы, чтобы просто выделить первый и последний пункты меню жирным шрифтом:

1

2

3

.first a {font-weight: bold;}

 

.last a {font-weight: bold;}

Здесь вы можете увидеть скриншоты до и после того, как мы добавили код на наш демо-сайт.

Способ 2. Стилизация первого и последнего элементов с помощью селекторов CSS

Второй способ изменить стиль первого и последнего пунктов меню - использовать селекторы CSS. Этот метод проще, но он может не работать с некоторыми более старыми браузерами, такими как Internet Explorer.

Чтобы следовать этому методу, вам нужно будет добавить код в таблицу стилей вашей темы или в раздел "Дополнительный CSS" в настройщике тем WordPress.

Если вы не делали этого раньше, ознакомьтесь с нашим руководством о том, как легко добавить пользовательский CSS на свой сайт WordPress.

Вы должны начать с редактирования файла style.css вашей темы или перейти к разделу » Настройка внешнего вида "и нажать " Дополнительный CSS".

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

1

2

ul#yourmenuid > li:first-child { }

ul#yourmenuid > li:last-child { }

Обратите внимание, что вам нужно будет заменить " yourmenuid’ фактическим идентификатором меню навигации. Селекторы "первый дочерний" и "последний дочерний" выбирают элемент, если он является первым и последним дочерним элементом своего родителя, который является меню навигации.

Например, мы использовали этот код для выделения жирным шрифтом первого и последнего пунктов меню навигации на нашем демонстрационном сайте:

1

2

3

4

5

6

ul#primary-menu-list > li:first-child a {

    font-weight: bold;

}

ul#primary-menu-list > li:last-child a {

    font-weight: bold;

}

Мы надеемся, что этот урок помог вам научиться добавлять .first и .последний класс для навигационных меню WordPress.

Все новости


Создание сайта-визитки

Создание корпоративного сайта

Создание интернет-магазина

Создание Landing page

Изготовление сайтов в Москве

Изготовление сайтов в Краснодаре

Разработка сайтов в Санкт-Петербурге

Разработка сайтов в Ростове-на-Дону

IT-компания DonbassWeb предлагает свои услуги не только для Донецка (ДНР) и Луганска (ЛНР), но и для многих городов России: в Москве, Санкт-Петербурге, Новосибирске, Екатеринбурге, Нижнем Новгороде, Казани, Самаре, Челябинске, Омске, Ростове, Уфе, Красноярске, Перми, Волгограде, Воронеже, Саратове, Краснодаре, Тольятти, Тюмени, Ижевске, Барнауле, Ульяновске, Иркутске, Владивостоке, Ярославле, Хабаровске, Махачкале, Оренбурге, Томске, Новокузнецке, Кемерово, Астрахани, Рязани, Набережных Челнах, Пензе, Липецке, Туле, Кирове, Чебоксарах, Калининграде, Брянске, Иваново, Магнитогорске, Твери, Курске, Нижнем Тагиле, Ставрополе, Архангельске, Улан-Удэ, Белгороде, Владимире, Кургане, Сочи, Калуге, Орле, Мурманске, Смоленске, Владикавказе, Волжском, Череповце, Чите, Саранске, Сургуте, Вологде, Тамбове, Костроме, Комсомольске-на-Амуре, Нальчике, Таганроге, Стерлитамаке, Петрозаводске, Братске, Дзержинске, Йошкар-Оле, Шахтах, Орске, Ангарске, Нижневартовске, Якутске, Новороссийске. Кроме того, мы работаем не только в Украине, России, Белоруссии, Казахстане, Болгарии, Румынии, Сербии, Польше, Германии, Италии, Франции, Испании, Португалии, Англии, Шотландии, Уэльсе, Ирландии, США, Австралии, но и по всему миру!

Донецк, ДНР, Луганск, ЛНР

ABC-анализAppStoreCall-центрExperience marketingFMCGGoogleInside salesOpenCartPOS материалPPC-специалистSales promotionSEO-услугиSMMUp-saleWordPressАктивные продажиАкцияАнализ клиентовАнализ конкурентовАнализ продажАнтимерчандайзингАссортиментная политикаБелгородБизнес идеи (стартапы)БрендБукингВендорВирусная рекламаВирусный маркетингВладивостокВнутренние продажиВнутренний маркетингВолгоградВоронежДебиторкаДебиторская задолженностьДезинтермедитацияДивизионная система управленияДизайнДирект-маркетингДисконтДистрибьюторДистрибьюцияЕкатеринбургИжевскКазаньКалининградКопирайтингКраснодарМаркетингМаркетинговая информацияМаркетинговые исследованияМаркетинговый каналМаркетинг услугМаркетологМедиаМенеджментМерчандайзерМерчандайзингМоскваНижний НовгородНишевой маркетингНовосибирскНумерическая дистрибьюцияОмскОтдел маркетингаПартизанский маркетингПравило ПаретоПрогнозирование продажПродвижение сайтов в ДонецкеПромоПромоушнПрямой маркетингРабота для маркетологаРабота для студентаРаспродажаРегиональные продажиРекламаРеклама на асфальтеРемаркетингРетро-бонусРибейтРитейлРостов-на-ДонуСамараСанкт-ПетербургСаратовСейлз промоушнСинергияСколковоСоздание сайтов в ДонецкеСоциальные сетиСочиСтимулирование сбытаТелемаркетингТорговый представительТрейд маркетингТрейд промоушнТюменьХабаровскЦелевая аудиторияЧелябинскЮжно-СахалинскЯндекс