Accentsconagua
Share
Opprettholde CSS er vanskelig, spesielt i større prosjekter som arbeider med et lag. Navngivningskonvensjoner kan hjelpe CSS til å være mer lesbare og enklere å vedlikeholde. I dette raske tipset ser vi på hvordan du bruker BEM (Block Element Modifier) navngivningsmetodikk i WordPress.
Innholdsstyringssystemer som WordPress-utgangsklasser i front-end-markeringen. I WordPress er det mange filtre for å endre disse utgitte klassene.
Hvis du vil dykke direkte inn i koden, er dette et eksempel på meg; filtre finnes i inc / functions-filters.php-filen.
BEM står for Block Element Modifier.
"BEM er en metode som hjelper deg med å lage gjenbrukbare komponenter og kodedeling i frontend-utvikling."
Jeg bruker navigasjonsmarkering som et eksempel:
.Meny … .menu__items ....menu__item ....menu__anchor ....meny - primær ....menu__anchor - knapp ...Full navigasjonsmarkering kan se slik ut:
Navngivningskonvensjoner som BEM behold din SASS og CSS flat med lav spesifisitet (som alltid er fint!).
I SASS ville du style vårt eksempel som dette:
.meny ... & __ elementer ... & __ element ... & __ anker ... og __ anker - knapp ...
Den sammensatte CSS vil se slik ut:
.meny ... menu__items ... menu__item ... menu__anchor ... menu__anchor - knapp ...
Men hvordan kan vi endre navigasjonsklassene som brukes i WordPress?
Bruke WordPress 'innebygde funksjon wp_nav_menu (), du kan diktere klasser for og
Legg merke til menu_class parameter for å legge til egendefinerte klasser i og elementer:
I dette eksemplet tilbakestilles alle standardklasser fra menyelementets element og legg til våre egne tilpassede klasser. La oss legge til vår eksempelklasse som heter menu__item ved å sette dette filteret inn i våre funksjoner.php:
funksjonen bemit_nav_menu_css_class ($ klasser, $ element, $ args, $ dybde) // Tilbakestill alle standardklasser og begynn å legge til egendefinerte klasser i array. $ _classes = ['menu__item']; // Retur tilpassede klasser. returnere $ _classes; add_filter ('nav_menu_css_class', 'bemit_nav_menu_css_class', 10, 4); Visste du at det er fire parametre? La oss legge til en menu__item - primær modifikasjonsklasse, hvor primær er temaplassering. For dette kan vi bruke $ args parameter for å legge til et tema sted. Nå ser vårt filter slik ut:
funksjonen bemit_nav_menu_css_class ($ klasser, $ element, $ args, $ dybde) // Tilbakestill alle standardklasser og begynn å legge til egendefinerte klasser i array. $ _classes = ['menu__item']; // Få temaplassering, tilbakebetaling for 'standard'. $ theme_location = $ args-> theme_location? $ args-> theme_location: 'default'; // Legg til tema plasseringsklasse. $ _classes [] = 'menu__item--'. $ Theme_location; // Retur tilpassede klasser. returnere $ _classes; add_filter ('nav_menu_css_class', 'bemit_nav_menu_css_class', 10, 4); Full kodeeksempler finnes i mitt eksempel tema i inc / functions-filters.php-filen.
La oss legge til vår eksempelklasse menu__anchor til hvert menyelement element.
funksjonen bemit_nav_menu_link_attributes ($ atts, $ item, $ args, $ depth) // Start å legge til egendefinerte klasser. $ atts ['class'] = 'menu__anchor'; returner $ atts; add_filter ('nav_menu_link_attributes', 'bemit_nav_menu_link_attributes', 10, 4); Noen ganger legger vi til egendefinerte klasser i menyelementets element fra menybyggerens brukergrensesnitt.
For å holde CSS flat, la oss legge til en menu__anchor - knappen klasse til element hvor knapp klassen er til stede:
funksjonen bemit_nav_menu_link_attributes ($ atts, $ item, $ args, $ depth) // Start å legge til egendefinerte klasser. $ atts ['class'] = 'menu__anchor'; // Legg til 'menu__anchor - button' når det er 'knapp' klasse i '
Nå kan vi direkte målrette mot ett nivå av CSS ved hjelp av .menu__anchor - knapp .... I min demo ser du ett menyelement som er utformet som en knapp, målrettet uten å måtte dykke inn i en kanins krig av spesifisitet.
Hvis du bruker wp_list_pages () for å hente barnesider, finnes det lignende filtre:
I demoen er det en bemit_sub_pages_navigation () -funksjon som viser undersider i sidefeltet. Sjekk ut sluttresultatet fra demoområdet.
Så du ser, du trenger kanskje ikke en tilpasset Walker for navigasjon hvis du gjør mindre endringer. Det er mange filtre rundt.
Med det sagt, ikke alle oppslag er lett å endre. For eksempel fungerer paginering som the_posts_pagination () gir ikke gode filtre for øyeblikket. Men det er et helt annet opplæringsemne.
Jeg håper du finner dette raske tipset om navigasjonsfiltre som er nyttige!
