So fügen Sie Menüelementen mit erweiterten benutzerdefinierten Feldern Fontawesome-Symbole hinzu

Dieser Beitrag zeigt Ihnen, wie Sie Advanced Custom Fields (ACF) verwenden können, um das Hinzufügen von Symbolen zu Ihrem Menü zu ermöglichen. In diesem Beispiel fügen wir ein Fontawesome- Symbol hinzu, aber Sie können den Code an Ihre Bedürfnisse anpassen. Sie könnten stattdessen eine Dateiauswahl für SVG-Dateien oder etwas anderes hinzufügen.

Diese Anleitung funktioniert mit der kostenlosen Version von Advanced Custom Fields, aber stellen Sie sicher, dass Sie Version 5.6 oder neuer haben.

Hinzufügen der ACF-Gruppe und des Felds

Der erste Schritt ist das Hinzufügen des Feldes selbst zu Menüpunkten. Diese Anleitung fügt eine Texteingabe hinzu, um den Klassennamen für das Fontawesome-Symbol einzugeben, aber wenn Sie eine andere Lösung wünschen (z. B. Dateiauswahl für SVG-Datei), ändern Sie die Feldeingaben.

Stellen Sie sicher, dass der Speicherort Ihrer erweiterten benutzerdefinierten Feldgruppe auf „Menüelement” eingestellt ist. Sie können ihn auf „Alle” festlegen oder nach Menüspeicherorten oder nach bestimmten Menüs angeben.

Wenn Sie Ihre Felder hinzufügen und nach Code gruppieren, setzen Sie den Standortparameter auf „ nav_menu_item“. Weitere Informationen finden Sie in meiner vollständigen Referenz zum Hinzufügen von ACF-Feldern per Code.

Für das Feld selbst fügen wir eine einfache Texteingabe mit dem Namen „ fontawesome_icon” hinzu.

Oder fügen Sie das Feld per Code wie folgt hinzu:

Um es benutzerfreundlicher zu gestalten, ist es eine gute Idee, eine Beschreibung mit einem Link zur Übersicht der verfügbaren Fontawesome-Symbole hinzuzufügen. Ich füge den Link hinzu, um nur kostenlose Symbole anzuzeigen, keine der Pro-Symbole, da dies die Bibliothek ist, die ich in meinem Thema habe.

Nachdem Sie das Feld in Admin oder in Code gespeichert haben, sollten Sie jetzt das zusätzliche Feld erhalten, wenn Sie einen Menüpunkt erweitern:

Eine Anmerkung zu den Fontawesome-Klassen

In „älteren Zeiten”, vor Fontawesome 5, konnte das Bereitstellen einer Fontawesome-Klasse für den Benutzer etwas vereinfacht werden. Für den Warenkorb könnten Sie einfach „shopping-cart” schreiben und in unserem Code könnten wir die Klasse „ fa fa-” und dann die angegebene Klasse (resultierend in „ fa fa-shopping-cart“) hinzufügen. Aber seit Fontawesome 5 ist der Unterricht etwas komplizierter geworden.

Die „globale” Klasse „ fa” wurde durch Kategorien ersetzt, die für den Symboltyp spezifisch sind. Beispielsweise gehören soziale Medien oder Logos zur Kategorie „Marken” und erfordern die Klasse „ fab“, solide Symbole erfordern die Klasse „ fas“, während normale Symbole „ far” erfordern und so weiter. Aus diesem Grund müssen wir den Benutzer des Themas jetzt auffordern, beide Fontawesome-Klassen einzugeben. Es sollte einfach sein, die richtige Klasse zu finden, da dies in jedem Symbol auf der Website von Fontawesome deutlich angezeigt wird:

Als Beispiel müssen Sie „ fas fa-shopping-cart” in unser benutzerdefiniertes Feld bei einem Menüpunkt für das Warenkorb-Symbol eingeben.

Anzeige des Symbols im Menü

Der nächste und letzte Schritt ist das Rendern des Symbols im Menü, wenn es gesetzt ist. Dazu verwenden wir den Filter von WordPress [wp_nav_menu_objects](https://developer.wordpress.org/reference/hooks/wp_nav_menu_objects/). Dieser Filter wird auf jedes Menü in allen gerenderten Menüs unmittelbar vor der HTML-Generierung angewendet, sodass wir die Textausgabe, Klassen und mehr ändern können.

Wie Sie das Symbol ausgeben möchten, ist wiederum Ihnen überlassen. Möchten Sie den Linktext durch das Symbol ersetzen oder das Symbol entweder vor oder nach dem Textlink anzeigen? Wir folgen dem Brauch von Fontawesome, indem wir ein <i>Tag mit der bereitgestellten Klasse ausgeben.

Die Art und Weise, wie wir die Menüelemente ändern, besteht darin, die Menüelemente mit Pass-by-Reference zu durchlaufen (Hinzufügen eines &vor der Variablen). Das bedeutet, dass jede Änderung, die wir am Element vornehmen, auf das übergeordnete Elementobjekt angewendet wird.

Für jedes Element verwenden wir die get_field()Funktion des erweiterten benutzerdefinierten Felds, um den Wert unseres Felds „ fontawesome_icon” zu erhalten. Wenn es eingestellt ist, können wir loslegen. Das obige Codebeispiel fügt das Symbol vor dem Text hinzu. Wenn Sie das Symbol nach dem Text hinzufügen möchten, ersetzen Sie die Zeile #6durch:

Oder wenn Sie den Text durch ein Symbol ersetzen möchten, das überhaupt keinen Text anzeigt, ersetzen Sie die Zeile #6durch:

Ich habe ein titleAttribut hinzugefügt, damit es für den Frontend-Benutzer etwas informativer ist. Da der Text entfernt wird, kann es für den Endbenutzer manchmal verwirrend sein, wozu der Menüpunkt dient. Aber das titleAttribut stellt sicher, dass der Benutzer einen Tooltip mit dem Text des Menüpunkts erhält, wenn er mit der Maus über das Symbol fährt. Dies ist natürlich völlig optional.

Wenn Sie ein Feld eines anderen Typs verwenden, zB einen Filepicker für SVG-Dateien, müssen Sie die Ausgabe entsprechend anpassen.

Und das ist es! Sie sollten jetzt überall dort, wo das Menü gerendert wird, ein Fontawesome-Symbol erhalten. Aber Sie müssen wahrscheinlich etwas Styling hinzufügen. Fügen Sie zum Beispiel etwas Platz zwischen dem Symbol und dem Text hinzu.

Hinzufügen von Klassen für einfacheres Styling

Sie können dem Tag benutzerdefinierte Klassen <i>hinzufügen oder bei Bedarf mehr HTML hinzufügen.

Wenn Sie dem Wrapping-Menüelement (dem liElement) eine Klasse hinzufügen müssen, haben Sie vollen Zugriff auf die Menüelementklassen, die im obigen Filter angewendet werden. Fügen Sie eine benutzerdefinierte Menüelementklasse für Symbolmenüelemente wie folgt hinzu:

Das Menü sollte wie folgt ausgegeben werden: