Accentsconagua
Share
Het onderhouden van CSS is moeilijk, vooral in grotere projecten die met een team werken. Naamgevingsconventies kunnen uw CSS helpen leesbaarder en gemakkelijker te onderhouden te zijn. In deze snelle tip zullen we kijken naar hoe de BEM (Block Element Modifier) naamgevingsmethode in WordPress gebruikt kan worden.
Contentbeheersystemen zoals standaardklassen voor WordPress-uitvoer in de front-endmarkering. In WordPress zijn er veel filters om deze uitgeschreven klassen aan te passen.
Als je direct in code wilt duiken, is hier een voorbeeldthema van mij; filters zijn te vinden in het bestand inc / functions-filters.php.
BEM staat voor Block Element Modifier.
"BEM is een methodologie die u helpt bij het maken van herbruikbare componenten en het delen van codes in de front-end ontwikkeling."
Ik gebruik navigatie-opmaak als voorbeeld:
.menu ....menu items … .menu onderdeel … .menu__anchor ....menu - primaire ....menu__anchor - knop ...Volledige navigatie-opmaak ziet er als volgt uit:
Naamgevingsconventies zoals BEM houden je SASS en CSS plat met een lage specificiteit (wat altijd leuk is!).
In SASS zou je ons voorbeeld als volgt willen stylen:
.menu ... & __ items ... & __ item ... & __ anchor ... & __ anchor - button ...
De gecompileerde CSS ziet er als volgt uit:
.menu ... menu__items ... menu__item ... menu__anchor ... menu__anchor - knop ...
Maar hoe kunnen we de navigatieklassen wijzigen die in WordPress worden gebruikt??
De ingebouwde functie van WordPress gebruiken wp_nav_menu (), je kunt klassen dicteren en
Merk op menu_class parameter voor het toevoegen van aangepaste klassen aan de en elementen:
In dit voorbeeld resetten we alle standaardklassen van de menu-items element en voeg onze eigen aangepaste klassen toe. Laten we onze voorbeeldklasse toevoegen met de naam menu onderdeel door dit filter in onze functions.php in te voegen:
functie bemit_nav_menu_css_class ($ classes, $ item, $ args, $ depth) // Reset alle standaardklassen en begin met het toevoegen van aangepaste klassen aan array. $ _classes = ['menu__item']; // Aangepaste klassen retourneren. return $ _classes; add_filter ('nav_menu_css_class', 'bemit_nav_menu_css_class', 10, 4); Is het je opgevallen dat er vier parameters zijn? Laten we er een toevoegen menu__item - primaire modifier-klasse, waarbij primair de themapositie is. Hiervoor kunnen we gebruiken $ args parameter voor het toevoegen van een themalocatie. Nu ziet onze filter er zo uit:
functie bemit_nav_menu_css_class ($ classes, $ item, $ args, $ depth) // Reset alle standaardklassen en begin met het toevoegen van aangepaste klassen aan array. $ _classes = ['menu__item']; // Krijg themalocatie, fallback voor 'standaard'. $ theme_location = $ args-> theme_location? $ args-> theme_location: 'standaard'; // Thema-lesklasse toevoegen. $ _classes [] = 'menu__item--'. $ Theme_location; // Aangepaste klassen retourneren. return $ _classes; add_filter ('nav_menu_css_class', 'bemit_nav_menu_css_class', 10, 4); Volledige codevoorbeelden zijn te vinden in mijn voorbeeldthema in het bestand inc / functions-filters.php.
Laten we onze voorbeeldklasse toevoegen menu__anchor naar elk menu-item element.
functie bemit_nav_menu_link_attributes ($ atts, $ item, $ args, $ depth) // Beginnen met het toevoegen van aangepaste klassen. $ atts ['class'] = 'menu__anchor'; return $ atts; add_filter ('nav_menu_link_attributes', 'bemit_nav_menu_link_attributes', 10, 4); Soms voegen we aangepaste klassen toe aan de menu-items element uit de gebruikersinterface van de menubalk.
Om CSS plat te houden, voegen we een toe menu__anchor - knop klasse voor de element waar de knop klasse is aanwezig:
functie bemit_nav_menu_link_attributes ($ atts, $ item, $ args, $ depth) // Beginnen met het toevoegen van aangepaste klassen. $ atts ['class'] = 'menu__anchor'; // Voeg 'menu__anchor - button' toe als er 'button' class in '
Nu kunnen we ons direct richten op één niveau CSS-gebruik .menu__anchor - knop .... In mijn demo zie je een menu-item dat is vormgegeven als een knop, gericht zonder te hoeven duiken in de wirwar van specificiteit van een konijn.
Als je gebruikt wp_list_pages () voor het ophalen van onderliggende pagina's zijn vergelijkbare filters beschikbaar:
In de demo is er een functie bemit_sub_pages_navigation () die subpagina's in de zijbalk weergeeft. Bekijk het eindresultaat van de demosite.
U ziet dus dat u geen Custom Walker nodig hebt voor navigatie als u kleinere wijzigingen aanbrengt. Er zijn veel filters in de buurt.
Met dat gezegd, is niet alle opmaak eenvoudig aan te passen. Bijvoorbeeld pagineringfuncties zoals the_posts_pagination () biedt op dit moment geen goede filters. Maar dat is een heel ander tutorial-onderwerp.
Ik hoop dat je deze snelle tip over navigatiefilters nuttig vindt!
