Accentsconagua
Share
Die Pflege von CSS ist schwierig, insbesondere in größeren Projekten, die mit einem Team arbeiten. Namenskonventionen können dazu beitragen, dass Ihr CSS lesbarer und leichter zu verwalten ist. In diesem kurzen Tipp wird beschrieben, wie Sie die Benennungsmethodik BEM (Block Element Modifier) in WordPress verwenden.
Content-Management-Systeme wie WordPress geben Standardklassen im Front-End-Markup aus. In WordPress gibt es viele Filter, um diese ausgegebenen Klassen zu ändern.
Wenn Sie direkt in Code eintauchen möchten, finden Sie hier ein Beispielthema von mir. Filter finden Sie in der Datei inc / functions-filters.php.
BEM steht für Block Element Modifier.
"BEM ist eine Methode, mit der Sie wiederverwendbare Komponenten und Code-Sharing in der Front-End-Entwicklung erstellen können."
Ich verwende das Navigations-Markup als Beispiel:
.Speisekarte … .menu__items ….menu__item ….menu__anchor ….Menü - primär ….menu__anchor - button …Vollständige Navigationsmarkierung könnte folgendermaßen aussehen:
Namenskonventionen wie BEM halten Ihre SASS und CSS mit geringer Spezifität flach (was immer schön ist!).
In SASS würden Sie unser Beispiel so gestalten:
.menu … & __ items … & __ item … & __ Anker … & __ Anker - Button …
Das kompilierte CSS würde so aussehen:
.menu … menu__items … menu__item … menu__anchor … menu__anchor - button …
Aber wie können wir die in WordPress verwendeten Navigationsklassen ändern??
Verwenden der eingebauten Funktion von WordPress wp_nav_menu (), Sie können Klassen für diktieren und
Beachten Sie das menu_class Parameter zum Hinzufügen benutzerdefinierter Klassen zum und Elemente:
In diesem Beispiel setzen wir alle Standardklassen aus dem Menüelement zurück Element und fügen Sie unsere eigenen benutzerdefinierten Klassen hinzu. Fügen wir unsere Beispielklasse hinzu menu__item indem Sie diesen Filter in unsere functions.php einfügen:
Funktion bemit_nav_menu_css_class ($ classes, $ item, $ args, $ depth) // Setzen Sie alle Standardklassen zurück und fügen Sie dem Array benutzerdefinierte Klassen hinzu. $ _classes = ['menu__item']; // Benutzerdefinierte Klassen zurückgeben. $ _classes zurückgeben; add_filter ('nav_menu_css_class', 'bemit_nav_menu_css_class', 10, 4); Haben Sie bemerkt, dass es vier Parameter gibt? Fügen wir ein menu__item - primär Modifiziererklasse, wobei primär der Themenstandort ist. Dafür können wir verwenden $ args Parameter zum Hinzufügen eines Themenorts. Nun sieht unser Filter so aus:
Funktion bemit_nav_menu_css_class ($ classes, $ item, $ args, $ depth) // Setzen Sie alle Standardklassen zurück und fügen Sie dem Array benutzerdefinierte Klassen hinzu. $ _classes = ['menu__item']; // Themenspeicherort abrufen, Fallback für 'default'. $ theme_location = $ args-> theme_location? $ args-> theme_location: 'default'; // Füge eine Motiv-Standortklasse hinzu. $ _classes [] = 'menu__item--'. $ theme_location; // Benutzerdefinierte Klassen zurückgeben. $ _classes zurückgeben; add_filter ('nav_menu_css_class', 'bemit_nav_menu_css_class', 10, 4); Vollständige Codebeispiele finden Sie in meinem Beispielthema in der Datei inc / functions-filters.php.
Fügen wir unsere Beispielklasse hinzu menu__anchor zu jedem Menüpunkt Element.
Funktion bemit_nav_menu_link_attributes ($ atts, $ item, $ args, $ depth) // Beginnen Sie mit dem Hinzufügen benutzerdefinierter Klassen. $ atts ['class'] = 'menu__anchor'; $ atts zurückgeben; add_filter ('nav_menu_link_attributes', 'bemit_nav_menu_link_attributes', 10, 4); Manchmal fügen wir dem Menüelement benutzerdefinierte Klassen hinzu Element aus der Menü-Builder-Benutzeroberfläche.
Fügen Sie a ein, um CSS flach zu halten menu__anchor - Taste Klasse zum Element, wo die Taste Klasse ist anwesend:
Funktion bemit_nav_menu_link_attributes ($ atts, $ item, $ args, $ depth) // Beginnen Sie mit dem Hinzufügen benutzerdefinierter Klassen. $ atts ['class'] = 'menu__anchor'; // füge 'menu__anchor - button' hinzu, wenn 'button' class in 'ist
Jetzt können wir eine Ebene von CSS direkt verwenden .menu__anchor - button …. In meiner Demo sehen Sie einen Menüpunkt im Stil eines Buttons, der gezielt anvisiert wird, ohne in das Kaninchen der Spezifika eintauchen zu müssen.
Wenn du verwendest wp_list_pages () Für das Abrufen von untergeordneten Seiten stehen ähnliche Filter zur Verfügung:
In der Demo gibt es eine Funktion bemit_sub_pages_navigation (), die Unterseiten in der Seitenleiste aufführt. Überprüfen Sie das Endergebnis auf der Demo-Site.
Sie sehen also, dass Sie für die Navigation möglicherweise keinen Custom Walker benötigen, wenn Sie kleinere Änderungen vornehmen. Es gibt viele Filter in der Umgebung.
Damit ist nicht alles Markup leicht zu modifizieren. Zum Beispiel Paginierungsfunktionen wie the_posts_pagination () bietet im Moment keine guten Filter. Aber das ist ein ganz anderes Tutorial-Thema.
Ich hoffe, Sie finden diesen kurzen Tipp über Navigationsfilter hilfreich!
