Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. BEM

Consejo Rápido: Nombramiento BEM y Filtros de WordPress para la Navegación

by
Difficulty:IntermediateLength:ShortLanguages:

Spanish (Español) translation by Betty (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:

Convenciones de nomenclatura como BEM mantienen la SASS y CSS con baja especificidad (que es siempre agradable!).

SASS era estilo nuestro ejemplo como este:

El compilado CSS sería este:

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:

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:

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:

¿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í:

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.

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.

Adding button class for menu item

Para mantener CSS plano, vamos a añadir un menu__anchor--button de clase para el <a> elemento donde está presente la clase button:

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.

Navigation with call to action menu item

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!

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.