Accentsconagua
Share
La maintenance de CSS est difficile, en particulier dans les grands projets travaillant en équipe. Les conventions de dénomination peuvent aider votre CSS à être plus lisible et plus facile à maintenir. Dans cette astuce, nous verrons comment utiliser la méthode de dénomination BEM (Block Element Modifier) dans WordPress..
Les systèmes de gestion de contenu tels que WordPress affichent les classes par défaut dans le balisage frontal. Dans WordPress, il existe de nombreux filtres pour modifier ces classes en sortie.
Si vous voulez plonger directement dans le code, voici un exemple de thème; les filtres peuvent être trouvés dans le fichier inc / functions-filters.php.
BEM signifie Block Element Modifier.
"BEM est une méthodologie qui vous aide à créer des composants réutilisables et à partager le code dans le développement frontal."
Je vais utiliser le balisage de navigation comme exemple:
.menu ….menu__items ….élément du menu … .menu__anchor ….menu - primaire ….menu__anchor - bouton …Le balisage de navigation complet pourrait ressembler à ceci:
Les conventions de nommage telles que BEM maintiennent votre SASS et CSS à plat avec une faible spécificité (ce qui est toujours agréable!).
Dans SASS, vous appelez notre exemple comme ceci:
.menu … & __ items … & __ item … & __ anchor … & __ anchor - button …
Le CSS compilé ressemblerait à ceci:
.menu … menu__items … menu__item … menu__ancor … menu__anchor - bouton …
Mais comment pourrions-nous changer les classes de navigation utilisées dans WordPress?
Utilisation de la fonction intégrée de WordPress wp_nav_menu (), vous pouvez dicter des cours pour et
Noter la menu_class paramètre pour l'ajout de classes personnalisées à la et éléments:
Dans cet exemple, nous réinitialisons toutes les classes par défaut à partir de l'élément de menu élément et ajouter nos propres classes personnalisées. Ajoutons notre exemple de classe appelée élément du menu en insérant ce filtre dans notre functions.php:
function bemit_nav_menu_css_class ($ classes, $ item, $ args, $ profondeur) // Réinitialise toutes les classes par défaut et commence à ajouter des classes personnalisées à array. $ _classes = ['menu__item']; // Retourne les classes personnalisées. return $ _classes; add_filter ('nav_menu_css_class', 'bemit_nav_menu_css_class', 10, 4); Avez-vous remarqué qu'il y a quatre paramètres? Ajoutons un menu__item - primaire classe de modificateur, où primaire est l'emplacement du thème. Pour cela, nous pouvons utiliser $ args paramètre pour l'ajout d'un emplacement de thème. Maintenant, notre filtre ressemble à ceci:
function bemit_nav_menu_css_class ($ classes, $ item, $ args, $ profondeur) // Réinitialise toutes les classes par défaut et commence à ajouter des classes personnalisées à array. $ _classes = ['menu__item']; // Obtenir l'emplacement du thème, repli sur 'default'. $ theme_location = $ args-> theme_location? $ args-> emplacement_thème: 'default'; // Ajoute une classe d'emplacement de thème. $ _classes [] = 'menu__item--'. $ theme_location; // Retourne les classes personnalisées. return $ _classes; add_filter ('nav_menu_css_class', 'bemit_nav_menu_css_class', 10, 4); Des exemples de code complets peuvent être trouvés dans mon exemple de thème dans le fichier inc / functions-filters.php.
Ajoutons notre exemple de classe menu__anchor à chaque élément de menu élément.
function bemit_nav_menu_link_attributes ($ atts, $ item, $ args, $ depth) // Commencez à ajouter des classes personnalisées. $ atts ['class'] = 'menu__anchor'; renvoyer $ atts; add_filter ('nav_menu_link_attributes', 'bemit_nav_menu_link_attributes', 10, 4); Parfois, nous ajoutons des classes personnalisées aux éléments de menu élément de l'interface utilisateur du générateur de menus.
Pour garder le CSS à plat, ajoutons un menu__anchor - bouton classe à la élément où le bouton la classe est présente:
function bemit_nav_menu_link_attributes ($ atts, $ item, $ args, $ depth) // Commencez à ajouter des classes personnalisées. $ atts ['class'] = 'menu__anchor'; // Ajoute 'menu__anchor - button' quand il y a 'button' classe dans '
Maintenant, nous pouvons cibler directement un niveau de CSS en utilisant .menu__anchor - bouton …. Dans ma démo, vous verrez un élément de menu stylé comme un bouton, ciblé sans avoir à plonger dans le dédale de lapin d'un lapin..
Si vous utilisez wp_list_pages () pour récupérer des pages enfants, des filtres similaires sont disponibles:
La démo contient une fonction bemit_sub_pages_navigation () qui répertorie les sous-pages dans la barre latérale. Découvrez le résultat final sur le site de démonstration.
Vous voyez donc que vous n’avez peut-être pas besoin d’un Walker personnalisé pour la navigation si vous effectuez de plus petites modifications. Il y a beaucoup de filtres autour.
Cela dit, tout le balisage n'est pas facile à modifier. Par exemple, les fonctions de pagination telles que the_posts_pagination () ne fournit pas de bons filtres pour le moment. Mais c'est un tout autre sujet de tutoriel.
J'espère que vous trouverez utile cette astuce sur les filtres de navigation!
