Accentsconagua
Share
Menținerea CSS este dificilă, mai ales în proiectele mai mari care lucrează cu o echipă. Convențiile de nomenclator vă pot ajuta CSS să fie mai ușor de citit și mai ușor de întreținut. În acest sfat rapid vom analiza cum să folosim metodologia de numire BEM (Block Element Modifier) în WordPress.
Sistemele de gestionare a conținutului cum ar fi clasele implicite de ieșire WordPress în marcarea front-end. În WordPress există o mulțime de filtre pentru a modifica aceste clase de ieșire.
Dacă doriți să vă aruncați direct în cod, aici este o temă de exemplu a mea; filtrele pot fi găsite în fișierul inc / functions-filters.php.
BEM reprezintă elementul modificator de bloc.
"BEM este o metodologie care vă ajută să creați componente reutilizabile și partajarea codurilor în dezvoltarea front-end".
Voi folosi marcajul de navigare ca exemplu:
.meniul … .menu__items ....articol din meniu … .menu__anchor ....meniu - primar ....menu__anchor - buton ...Marcajul de navigare complet ar putea arăta astfel:
Naming convenții precum BEM păstrează dvs. SASS și CSS plat cu specificitate scăzută (care este întotdeauna frumos!).
În SASS, ne-ați face exemplul astfel:
.meniul ... & __ elemente ... & __ element ... & __ anchor ... & __ ancora - buton ...
CSS-ul compilat ar arăta astfel:
.meniul ... menu__items ... menu__item ... menu__anchor ... meniu_anchor - buton ...
Dar cum putem modifica clasele de navigație utilizate în WordPress?
Folosind funcția built-in a WordPress wp_nav_menu (), poți dicta cursuri pentru și
Rețineți menu_class parametru pentru adăugarea de clase personalizate la și elemente:
În acest exemplu, resetați toate clasele implicite din elementele de meniu element și adăugați propriile clase personalizate. Să adăugăm clasa noastră de exemplu numită articol din meniu prin introducerea acestui filtru în funcțiile noastre.php:
funcția bemit_nav_menu_css_class ($ classes, $ item, $ args, $ depth) // Resetați toate clasele implicite și începeți să adăugați clase personalizate la array. $ _classes = ['menu__item']; // Intoarce clasele personalizate. returnează $ _classes; add_filter ('nav_menu_css_class', 'bemit_nav_menu_css_class', 10, 4); Ai observat că există patru parametri? Să adăugăm a menu__item - primar clasa de modificatori, unde principala este tema. Pentru aceasta putem folosi $ args parametru pentru adăugarea unei locații tematice. Filtrul nostru arată astfel:
funcția bemit_nav_menu_css_class ($ classes, $ item, $ args, $ depth) // Resetați toate clasele implicite și începeți să adăugați clase personalizate la array. $ _classes = ['menu__item']; // Obțineți locația tematică, rezerva pentru "implicit". $ theme_location = $ args-> theme_location? $ args-> theme_location: "implicit"; // Adăugați clasa de locație a temei. $ _classes [] = 'menu__item--'. $ Theme_location; // Intoarce clasele personalizate. returnează $ _classes; add_filter ('nav_menu_css_class', 'bemit_nav_menu_css_class', 10, 4); Exemplele de coduri complete pot fi găsite în tema exemplului meu în fișierul inc / functions-filters.php.
Să adăugăm clasa noastră de exemplu menu__anchor la fiecare element de meniu element.
functie bemit_nav_menu_link_attributes ($ atts, $ item, $ args, $ depth) // Incepe sa adaugi clase personalizate. $ atts ['clasă'] = 'meniu__anchor'; returnați $ atts; add_filter ('nav_menu_link_attributes', 'bemit_nav_menu_link_attributes', 10, 4); Uneori adăugăm clase personalizate la elementele de meniu element din interfața de configurare a meniurilor.
Pentru a păstra CSS plat, să adăugăm o menu__anchor - buton clasa la element în cazul în care buton clasa este prezentă:
functie bemit_nav_menu_link_attributes ($ atts, $ item, $ args, $ depth) // Incepe sa adaugi clase personalizate. $ atts ['clasă'] = 'meniu__anchor'; // Adăugați 'menu__anchor - buton' atunci când există o clasă 'button' în '
Acum putem direcționa direct un nivel de utilizare a CSS .menu__anchor - buton .... În demo-ul meu veți vedea un element de meniu, denumit "buton", vizat fără a fi nevoie să vă aruncați într-o râvnă de specificitate a iepurelui.
Dacă utilizați wp_list_pages () pentru preluarea paginilor copil, sunt disponibile filtre similare:
În demo există o funcție bemit_sub_pages_navigation () care afișează subpagini în bara laterală. Verificați rezultatul final de pe site-ul demonstrativ.
Deci, vedeți, este posibil să nu aveți nevoie de un Walker personalizat pentru navigare dacă faceți modificări mai mici. Există o mulțime de filtre în jur.
Cu aceasta a spus, nu toate markup este ușor de modificat. De exemplu, funcțiile de paginare cum ar fi the_posts_pagination () nu oferă filtre bune în acest moment. Dar asta este un alt subiect tutorial.
Sper că veți găsi un sfat rapid despre filtrele de navigare utile!
