Accentsconagua
Share
Mantenere i CSS è difficile, specialmente nei progetti più grandi che lavorano con un team. Le convenzioni sui nomi possono aiutare i CSS a essere più leggibili e più facili da mantenere. In questo suggerimento rapido vedremo come utilizzare la metodologia di denominazione BEM (Block Element Modifier) in WordPress.
Sistemi di gestione dei contenuti come le classi predefinite di output di WordPress nel markup front-end. In WordPress ci sono molti filtri per modificare queste classi emesse.
Se vuoi immergerti direttamente nel codice, ecco un esempio del mio tema; i filtri possono essere trovati nel file inc / functions-filters.php.
BEM è l'acronimo di Block Element Modifier.
"BEM è una metodologia che ti aiuta a creare componenti riutilizzabili e la condivisione del codice nello sviluppo front-end."
Userò il markup di navigazione come esempio:
.menu ....voci del menu … .elemento del menu … .menu__anchor ....menu - primary ....menu__anchor - button ...Il markup di navigazione completo potrebbe essere simile a questo:
Le convenzioni di denominazione come BEM mantengono il vostro SASS e CSS piatto con bassa specificità (che è sempre bello!).
In SASS devi dare un esempio al nostro esempio:
.menu ... & __ articoli ... & __ articolo ... & __ ancora ... e __ ancora - pulsante ...
Il CSS compilato sarebbe simile a questo:
.menu ... menu__items ... menu__item ... menu__anchor ... menu__anchor - pulsante ...
Ma come potremmo cambiare le classi di navigazione utilizzate in WordPress?
Usando la funzione integrata di WordPress wp_nav_menu (), puoi dettare le classi per e
Notare la menu_class parametro per aggiungere classi personalizzate al e elementi:
In questo esempio, ripristiniamo tutte le classi predefinite dalle voci del menu elemento e aggiungere le nostre classi personalizzate. Aggiungiamo la nostra classe di esempio chiamata elemento del menu inserendo questo filtro nel nostro functions.php:
function bemit_nav_menu_css_class ($ classes, $ item, $ args, $ depth) // Ripristina tutte le classi predefinite e inizia ad aggiungere classi personalizzate all'array. $ _classes = ['menu__item']; // Restituisce classi personalizzate. restituire $ _classes; add_filter ('nav_menu_css_class', 'bemit_nav_menu_css_class', 10, 4); Hai notato che ci sono quattro parametri? Aggiungiamo a menu__item - primario classe modificatore, dove primaria è la posizione del tema. Per questo possiamo usare $ args parametro per aggiungere una posizione del tema. Ora il nostro filtro assomiglia a questo:
function bemit_nav_menu_css_class ($ classes, $ item, $ args, $ depth) // Ripristina tutte le classi predefinite e inizia ad aggiungere classi personalizzate all'array. $ _classes = ['menu__item']; // Trova la posizione del tema, fallback per 'default'. $ theme_location = $ args-> tema_location? $ args-> theme_location: 'default'; // Aggiungi la classe di localizzazione del tema. $ _classes [] = 'menu__item--'. $ Theme_location; // Restituisce classi personalizzate. restituire $ _classes; add_filter ('nav_menu_css_class', 'bemit_nav_menu_css_class', 10, 4); Esempi di codice completi possono essere trovati nel mio tema di esempio nel file inc / functions-filters.php.
Aggiungiamo la nostra classe di esempio menu__anchor a ciascuna voce di menu elemento.
function bemit_nav_menu_link_attributes ($ atts, $ item, $ args, $ depth) // Inizia ad aggiungere classi personalizzate. $ atts ['class'] = 'menu__anchor'; restituire $ atts; add_filter ('nav_menu_link_attributes', 'bemit_nav_menu_link_attributes', 10, 4); A volte aggiungiamo classi personalizzate alle voci del menu elemento dall'interfaccia utente del menu builder.
Per mantenere piatto CSS, aggiungiamo a menu__anchor - Pulsante classe al elemento in cui il pulsante la classe è presente:
function bemit_nav_menu_link_attributes ($ atts, $ item, $ args, $ depth) // Inizia ad aggiungere classi personalizzate. $ atts ['class'] = 'menu__anchor'; // Aggiungi 'menu__anchor - button' quando c'è 'button' class in '
Ora possiamo scegliere direttamente come target un livello di CSS .menu__anchor - button .... Nella mia demo vedrai una voce di menu simile a un pulsante, mirata senza doverti immergere nel labirinto di un coniglio di specificità.
Se stai usando wp_list_pages () per il recupero di pagine figlio, ci sono filtri simili disponibili:
Nella demo c'è una funzione bemit_sub_pages_navigation () che elenca le sotto pagine nella barra laterale. Controlla il risultato finale dal sito demo.
In questo modo, potresti non avere bisogno di un Walker personalizzato per la navigazione se stai apportando modifiche più piccole. Ci sono molti filtri in giro.
Detto questo, non tutti i markup sono facili da modificare. Ad esempio le funzioni di impaginazione come the_posts_pagination () non fornisce buoni filtri al momento. Ma questo è un altro argomento di tutorial.
Spero che questo suggerimento rapido sui filtri di navigazione sia utile!
