() translation by (you can also view the original English article)
Mantenimiento de la CSS es difícil, especialmente en proyectos más grandes trabajando con un equipo. Convenciones de nombres pueden ayudar a tu CSS sea más legible y más fácil de mantener. En este rápido tip veremos cómo utilizar el BEM (Bloque Elemento Modificador) denominación metodología en WordPress.
Sistemas de gestión de contenidos como WordPress salida por defecto las clases en el marcado front-end. En WordPress hay un montón de filtros para modificar estas clases outputted.
Si usted quiere sumergirse directamente en el código, aquí es un tema de ejemplo de mina; filtros se pueden encontrar en archivo inc/funciones-filters.php.
¿Qué es BEM?
BEM significa Bloque Elemento Modificador.
"BEM es una metodología que le ayuda a crear componentes reutilizables y código compartido en desarrollo front-end".
Usaré el marcado de navegación como ejemplo:
- Bloque es una entidad independiente que es significativa por sí mismo.
.menu {...}- Elemento es parte de un bloque y semánticamente está ligada a su bloque.
.menu__items {...}.menu__item {...}.menu__anchor {...}- Modifier cambia el aspecto de bloque o elemento o comportamiento.
.menu--primary { ... }.menu__anchor--button { ... }
Marcado de navegación completa podría tener este aspecto:
1 |
<nav class="menu menu--primary"> |
2 |
<ul class="menu__items menu__items--primary"> |
3 |
<li class="menu__item"><a class="menu__anchor">Link text</a></li> |
4 |
<li class="menu__item"><a class="menu__anchor">Link text</a></li> |
5 |
<li class="menu__item"><a class="menu__anchor">Link text</a></li> |
6 |
<li class="menu__item"><a class="menu__anchor menu__anchor--button">Link text</a></li> |
7 |
</ul>
|
8 |
</nav>
|
Convenciones de nomenclatura como BEM mantienen la SASS y CSS con baja especificidad (que es siempre agradable!).
SASS era estilo nuestro ejemplo como este:
1 |
.menu { |
2 |
...
|
3 |
|
4 |
&__items { |
5 |
...
|
6 |
}
|
7 |
|
8 |
&__item { |
9 |
...
|
10 |
}
|
11 |
|
12 |
&__anchor { |
13 |
...
|
14 |
}
|
15 |
|
16 |
&__anchor--button { |
17 |
...
|
18 |
}
|
19 |
}
|
El compilado CSS sería este:
1 |
.menu { |
2 |
...
|
3 |
}
|
4 |
|
5 |
menu__items { |
6 |
…
|
7 |
}
|
8 |
|
9 |
menu__item { |
10 |
…
|
11 |
}
|
12 |
|
13 |
menu__anchor { |
14 |
…
|
15 |
}
|
16 |
|
17 |
menu__anchor--button { |
18 |
…
|
19 |
}
|
Pero, ¿cómo podríamos cambiar las clases de navegación utilizadas en WordPress?
Uso de Filtros de WordPress para Cambiar Clases de Navegación
Usando WordPress función integrada wp_nav_menu(), puede dictar clases para <nav> y elementos <ul>. Por ejemplo:
1 |
<nav class="menu menu--primary"> |
2 |
|
3 |
<?php
|
4 |
wp_nav_menu( array( |
5 |
'theme_location' => 'primary', |
6 |
'container' => '', |
7 |
'menu_class' => 'menu__items menu__items--primary', |
8 |
) ); |
9 |
?>
|
10 |
|
11 |
</nav>
|
Nota el parámetro menu_class para añadir clases personalizadas al elemento <ul>. WordPress también tiene filtros útiles para <li> y <a> elementos:
- nav_menu_css_class para aplicar las clases para el elemento de menú
<li>elemento. - nav_menu_link_attributes para aplicar atributos para el elemento de menú
<a>elemento.
Utilizando nav_menu_css_class Filtro
En este ejemplo restablece todas las clases por defecto desde el menú <li> elemento y agregar nuestras propias clases personalizadas. Vamos a agregar nuestra clase de ejemplo llamado menu__item insertando este filtro en nuestro functions.php:
1 |
function bemit_nav_menu_css_class( $classes, $item, $args, $depth ) { |
2 |
|
3 |
// Reset all default classes and start adding custom classes to array.
|
4 |
$_classes = [ 'menu__item' ]; |
5 |
|
6 |
// Return custom classes.
|
7 |
return $_classes; |
8 |
|
9 |
}
|
10 |
|
11 |
add_filter( 'nav_menu_css_class', 'bemit_nav_menu_css_class', 10, 4 ); |
¿Notó que hay cuatro parámetros? Vamos a agregar que un menu__item--primary modificador primario, donde principal es la ubicación del tema. Para esto podemos utilizar parámetro $args para agregar una ubicación del tema. Ahora, nuestro filtro se ve así:
1 |
function bemit_nav_menu_css_class( $classes, $item, $args, $depth ) { |
2 |
|
3 |
// Reset all default classes and start adding custom classes to array.
|
4 |
$_classes = [ 'menu__item' ]; |
5 |
|
6 |
// Get theme location, fallback for `default`.
|
7 |
$theme_location = $args->theme_location ? $args->theme_location : 'default'; |
8 |
|
9 |
// Add theme location class.
|
10 |
$_classes[] = 'menu__item--' . $theme_location; |
11 |
|
12 |
// Return custom classes.
|
13 |
return $_classes; |
14 |
|
15 |
}
|
16 |
|
17 |
add_filter( 'nav_menu_css_class', 'bemit_nav_menu_css_class', 10, 4 ); |
Ejemplos de código completo pueden encontrarse en mi tema de ejemplo de archivo de inc/funtions/inc-filters.php.
Usando el filtro de nav_menu_link_attributes
Vamos a agregar nuestro menu__anchor de clase de ejemplo para cada elemento de menú <a> elemento.
1 |
function bemit_nav_menu_link_attributes( $atts, $item, $args, $depth ) { |
2 |
|
3 |
// Start adding custom classes.
|
4 |
$atts['class'] = 'menu__anchor'; |
5 |
|
6 |
return $atts; |
7 |
}
|
8 |
|
9 |
add_filter( 'nav_menu_link_attributes', 'bemit_nav_menu_link_attributes', 10, 4 ); |
Añadiendo Clases Via Menu Builder
A veces añadimos clases personalizadas para el elemento de menú <li> elemento desde el generador de menú interfaz de usuario.
Para mantener CSS plano, vamos a añadir un menu__anchor--button de clase para el <a> elemento donde está presente la clase button:
1 |
function bemit_nav_menu_link_attributes( $atts, $item, $args, $depth ) { |
2 |
|
3 |
// Start adding custom classes.
|
4 |
$atts['class'] = 'menu__anchor'; |
5 |
|
6 |
// Add `menu__anchor--button` when there is `button` class in `<li>` element.
|
7 |
if ( in_array( 'button', $item->classes, true ) ) { |
8 |
|
9 |
$atts['class'] .= ' menu__anchor--button'; |
10 |
|
11 |
}
|
12 |
|
13 |
return $atts; |
14 |
|
15 |
}
|
16 |
|
17 |
add_filter( 'nav_menu_link_attributes', 'bemit_nav_menu_link_attributes', 10, 4 ); |
Ahora nos podemos apuntar directamente un nivel de CSS con .menu__anchor--button{ ... }. En mi demo verás un menú de estilo similar a un botón, dirigido sin tener que sumergirse en el laberinto del conejo de especificidad.
Sub Navegación de Páginas
Si está utilizando wp_list_pages() para obtener páginas de niño, se dispone de filtros similares:
En la demo hay una función bemit_sub_pages_navigation() que lista sub páginas en la barra lateral. Revisa el resultado final desde el sitio de demostración.
Conclusión
Tal ves, que no necesites un Walker Personalizado para la navegación si usted está haciendo pequeños cambios. Hay un montón de filtros alrededor.
Con esto dicho, no todo el marcado es fácil de modificar. Por ejemplo la paginación funciona como the_posts_pagination() no proporcionan filtros de buena en estos momentos. Pero eso es otro tema tutorial.
Espero que útil este Consejo rápido sobre filtros de navegación!
