Как добавить первый и последний класс 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.

3D-печать5GABC-анализAndroidAppleAppStoreAsusCall-центрChatGPTCRMDellDNSDrupalExcelFacebookFMCGGoogleHuaweiInstagramiPhoneLinkedInLinuxMagentoMicrosoftNvidiaOpenCartPlayStationPOS материалPPC-специалистRuTubeSamsungSEO-услугиSMMSnapchatSonyStarlinkTikTokTwitterUbuntuUp-saleViasatVPNWhatsAppWindowsWordPressXiaomiYouTubeZoomАвдеевкаАктивные продажиАкцияАлександровск ЛНРАлмазнаяАлчевскАмвросиевкаАнализ конкурентовАнализ продажАнтимерчандайзингАнтрацитАртемовскАртемовск ЛНРАссортиментная политикаБелгородБелицкоеБелозерскоеБердянскБизнес-идеи (стартапы)БрендБрянкаБукингВахрушевоВендорВидеоВикипедияВирусная рекламаВирусный маркетингВладивостокВнутренние продажиВнутренний маркетингВолгоградВолновахаВоронежГорловкаГорнякГорскоеДебальцевоДебиторкаДебиторская задолженностьДезинтермедитацияДзержинскДивизионная система управленияДизайнДимитровДирект-маркетингДисконтДистрибьюторДистрибьюцияДобропольеДокучаевскДоменДружковкаЕкатеринбургЕнакиевоЖдановкаЗапорожьеЗимогорьеЗолотоеЗоринскЗугрэсИжевскИловайскИрминоКазаньКалининградКировскКировскоеКомсомольскоеКонстантиновкаКонтент-маркетингКонтент-планКопирайтингКраматорскКрасноармейскКрасногоровкаКраснодарКраснодонКраснопартизанскКрасный ЛиманКрасный ЛучКременнаяКураховоКурскЛисичанскЛуганскЛутугиноМакеевкаМариупольМаркетингМаркетинговая информацияМаркетинговые исследованияМаркетинговый каналМаркетинг услугМаркетологМарьинкаМедиаМелекиноМелитопольМенеджментМерчандайзерМерчандайзингМиусинскМолодогвардейскМоскваМоспиноНижний НовгородНиколаевНиколаевкаНишевой маркетингНовоазовскНовогродовкаНоводружескНовосибирскНумерическая дистрибьюцияОдессаОмскОтдел маркетингаПартизанский маркетингПервомайскПеревальскПетровскоеПлата за кликПоисковая оптимизацияПопаснаяПравило ПаретоПривольеПрогнозирование продажПродвижение сайтов в ДонецкеПроизводство видеоПромоПромоушнПрямой маркетингРабота для маркетологаРабота для студентаРазработка приложенийРаспродажаРегиональные продажиРекламаРеклама на асфальтеРемаркетингРетро-бонусРибейтРитейлРовенькиРодинскоеРостов-на-ДонуРубежноеСамараСанкт-ПетербургСаратовСватовоСвердловскСветлодарскСвятогорскСевастопольСеверодонецкСеверскСедовоСейлз промоушнСелидовоСимферопольСинергияСколковоСлавянскСнежноеСоздание сайтов в ДонецкеСоледарСоциальные сетиСочиСтаробельскСтаробешевоСтахановСтимулирование сбытаСуходольскСчастьеТелемаркетингТельмановоТираспольТорговый представительТорезТрейд маркетингТрейд промоушнТюменьУглегорскУгледарУкраинскХабаровскХарцызскХерсонХостингЦелевая аудиторияЦифровой маркетингЧасов ЯрЧелябинскШахтерскЮжно-СахалинскЮнокоммунаровскЯндексЯсиноватая