Accentsconagua
Share
Mantener CSS es difícil, especialmente en proyectos más grandes que trabajan con un equipo. Las convenciones de nomenclatura pueden ayudar a que su CSS sea más legible y más fácil de mantener. En esta sugerencia rápida veremos cómo usar la metodología de nomenclatura BEM (modificador de elemento de bloque) en WordPress.
Los sistemas de administración de contenido como las clases predeterminadas de salida de WordPress en el marcado de aplicaciones para usuario. En WordPress hay muchos filtros para modificar estas clases generadas..
Si desea sumergirse directamente en el código, aquí hay un ejemplo de mi tema; Los filtros se pueden encontrar en el archivo inc / functions-filters.php.
BEM significa modificador de elemento de bloque.
"BEM es una metodología que lo ayuda a crear componentes reutilizables y el uso compartido de código en el desarrollo frontal".
Usaré el marcado de navegación como ejemplo:
.menú ….elementos de menú … .opción del menú … .menu__anchor ….menú - primario ….menu__anchor - botón …El marcado de navegación completo podría verse así:
Las convenciones de nomenclatura como BEM mantienen su SASS y CSS planos con baja especificidad (¡lo que siempre es bueno!).
En SASS tu estilo nuestro ejemplo como este:
.menú … y __ elementos … y __ elemento … y __ ancla … y __ ancla - botón …
El CSS compilado se vería así:
.menu ... menu__items ... menu__item ... menu__anchor ... menu__anchor - button ...
Pero, ¿cómo podríamos cambiar las clases de navegación utilizadas en WordPress??
Usando la función incorporada de WordPress wp_nav_menu (), puedes dictar clases para y
Nota la menu_class parámetro para agregar clases personalizadas a la y elementos:
En este ejemplo, restablecemos todas las clases predeterminadas desde los elementos del menú Elemento y añadir nuestras propias clases personalizadas. Añadamos nuestra clase de ejemplo llamada opción del menú insertando este filtro en nuestras funciones.php:
function bemit_nav_menu_css_class ($ classes, $ item, $ args, $ depth) // Restablecer todas las clases predeterminadas y comenzar a agregar clases personalizadas a la matriz. $ _classes = ['menu__item']; // Devolver clases personalizadas. devuelve $ _clases; add_filter ('nav_menu_css_class', 'bemit_nav_menu_css_class', 10, 4); ¿Notaste que hay cuatro parámetros? Vamos a añadir un menu__item - primario clase modificadora, donde primaria es la ubicación del tema. Para esto podemos usar $ args Parámetro para agregar una ubicación de tema. Ahora nuestro filtro se ve así:
function bemit_nav_menu_css_class ($ classes, $ item, $ args, $ depth) // Restablecer todas las clases predeterminadas y comenzar a agregar clases personalizadas a la matriz. $ _classes = ['menu__item']; // Obtener la ubicación del tema, alternativa para 'predeterminado'. $ theme_location = $ args-> theme_location? $ args-> theme_location: 'default'; // Añadir clase de ubicación de tema. $ _classes [] = 'menu__item--'. $ theme_location; // Devolver clases personalizadas. devuelve $ _clases; add_filter ('nav_menu_css_class', 'bemit_nav_menu_css_class', 10, 4); Se pueden encontrar ejemplos de código completo en el tema de mi ejemplo en el archivo inc / functions-filters.php.
Añadamos nuestra clase de ejemplo. menu__anchor a cada elemento del menú elemento.
function bemit_nav_menu_link_attributes ($ atts, $ item, $ args, $ depth) // Comience a agregar clases personalizadas. $ atts ['class'] = 'menu__anchor'; devuelve $ atts; add_filter ('nav_menu_link_attributes', 'bemit_nav_menu_link_attributes', 10, 4); A veces agregamos clases personalizadas a los elementos del menú elemento de la interfaz de usuario del constructor de menú.
Para mantener el CSS plano, agreguemos un menu__anchor - botón clase a la elemento donde el botón la clase esta presente
function bemit_nav_menu_link_attributes ($ atts, $ item, $ args, $ depth) // Comience a agregar clases personalizadas. $ atts ['class'] = 'menu__anchor'; // Añadir 'menu__anchor - button' cuando hay 'button' class in '
Ahora podemos dirigirnos directamente a un nivel de CSS usando .menu__anchor - botón …. En mi demo verás un elemento del menú con el estilo de un botón, dirigido sin tener que sumergirse en la madriguera de especificidad de un conejo.
Si estas usando wp_list_pages () Para obtener páginas secundarias, hay filtros similares disponibles:
En la demostración hay una función bemit_sub_pages_navigation () que lista las subpáginas en la barra lateral. Echa un vistazo al resultado final del sitio de demostración.
Como puede ver, es posible que no necesite un andador personalizado para la navegación si está haciendo cambios más pequeños. Hay un montón de filtros alrededor.
Dicho esto, no todas las marcas son fáciles de modificar. Por ejemplo, funciones de paginación como the_posts_pagination () No proporciona buenos filtros en este momento. Pero ese es otro tema tutorial.
Espero que encuentre útil este consejo rápido sobre filtros de navegación.!
