Accentsconagua
Share
Att upprätthålla CSS är svårt, särskilt i större projekt som arbetar med ett lag. Namngivningskonventioner kan hjälpa din CSS att vara mer läsbar och lättare att underhålla. I denna snabba tips ser vi på hur man använder namnet för BEM (Block Element Modifier) i WordPress.
Content Management-system som WordPress-utgångsstandardklasser i front-end-markup. I WordPress finns det många filter för att ändra dessa utmatade klasser.
Om du vill dyka direkt i koden, här är ett exempel på mig; filter finns i inc / functions-filters.php-filen.
BEM står för Block Element Modifier.
"BEM är en metod som hjälper dig att skapa återanvändbara komponenter och koddelning i front-end-utveckling."
Jag använder navigationsmarkering som ett exempel:
.meny ....menyval … .menu__item ....menu__anchor ....meny - primär ....menu__anchor - knapp ...Full navigationsmarkering kan se ut så här:
Namngivningskonventioner som BEM håller din SASS och CSS platt med låg specificitet (vilket är alltid trevligt!).
I SASS skulle du utforma vårt exempel så här:
.meny ... & __ objekt ... & __ objekt ... & __ ankare ... & __ ankare - knapp ...
Den sammanställda CSS skulle se ut så här:
.meny ... menu__items ... menu__item ... menu__anchor ... menu__anchor - knapp ...
Men hur kan vi ändra navigerings klasserna som används i WordPress?
Använda WordPress 'inbyggd funktion wp_nav_menu (), du kan diktera klasser för och
Notera menu_class parameter för att lägga till anpassade klasser till och element:
I det här exemplet återställer vi alla standardklasser från menyalternativets element och lägg till våra egna anpassade klasser. Låt oss lägga till vår exempelklass som heter menu__item genom att infoga detta filter i våra funktioner.php:
funktionen bemit_nav_menu_css_class ($ klasser, $ item, $ args, $ djup) // Återställ alla standardklasser och börja lägga till egna klasser till array. $ _classes = ['menu__item']; // Återgå anpassade klasser. returnera $ _classes; add_filter ('nav_menu_css_class', 'bemit_nav_menu_css_class', 10, 4); Märkte du att det finns fyra parametrar? Låt oss lägga till en menu__item - primär modifierare klass, där primärt är temat plats. För detta kan vi använda $ args parameter för att lägga till ett tematälle. Nu ser vårt filter ut så här:
funktionen bemit_nav_menu_css_class ($ klasser, $ item, $ args, $ djup) // Återställ alla standardklasser och börja lägga till egna klasser till array. $ _classes = ['menu__item']; // Hämta temat plats, fallback för "default". $ theme_location = $ args-> theme_location? $ args-> theme_location: 'default'; // Lägg till temaklassklass. $ _classes [] = 'menu__item--'. $ Theme_location; // Återgå anpassade klasser. returnera $ _classes; add_filter ('nav_menu_css_class', 'bemit_nav_menu_css_class', 10, 4); Fullständiga kodexempel finns i mitt exempeltema i inc / functions-filters.php-filen.
Låt oss lägga till vår exempelklass menu__anchor till varje menyalternativ element.
funktionen bemit_nav_menu_link_attributes ($ atts, $ item, $ args, $ depth) // Börja lägga till egna klasser. $ atts ['class'] = 'menu__anchor'; returnera $ atts; add_filter ('nav_menu_link_attributes', 'bemit_nav_menu_link_attributes', 10, 4); Ibland lägger vi till anpassade klasser till menyalternativets element från menybyggare-gränssnittet.
För att hålla CSS platt, låt oss lägga till en menu__anchor - knapp klass till element där knapp klassen är närvarande:
funktionen bemit_nav_menu_link_attributes ($ atts, $ item, $ args, $ depth) // Börja lägga till egna klasser. $ atts ['class'] = 'menu__anchor'; // Add 'menu__anchor - button' när det finns "knappen" i "
Nu kan vi direkt rikta in en nivå av CSS med .menu__anchor - knapp .... I min demo ser du ett menyalternativ som är utformat som en knapp, riktad utan att behöva dyka in i en kanins warren av specificitet.
Om du använder wp_list_pages () för att hämta barnsidor finns det liknande filter:
I demo finns en bemit_sub_pages_navigation () -funktion som listar undersidor i sidofältet. Kolla in slutresultatet från demosidan.
Så du ser, du kanske inte behöver en anpassad Walker för navigering om du gör mindre förändringar. Det finns gott om filter runt.
Med det sagt är inte alla markeringar lätt att ändra. Till exempel pagineringsfunktioner som the_posts_pagination () tillhandahåller inte bra filter för tillfället. Men det är en helt annan handledning ämne.
Jag hoppas att du hittar detta snabba tips om navigationsfiltren som är användbara!
