Hinzufügen oder Ändern von WordPress-Verwaltungssymbolen (2 einfache Methoden)

Die Personalisierung Ihres WordPress-Dashboards kann die Erfahrung des Benutzers verbessern. Eine einfache Möglichkeit, dies zu tun, ist das Hinzufügen oder Ändern von Verwaltungssymbolen.

Individuell angepasste Symbole können Ihren Arbeitsablauf verbessern und neuen Benutzern die Navigation im Verwaltungsbereich Ihrer Website erleichtern. Außerdem ist ein personalisiertes Dashboard angenehmer zu benutzen.

In diesem Artikel zeigen wir Ihnen, wie Sie WordPress-Admin-Symbole hinzufügen oder ändern können. Wir werden Sie Schritt für Schritt durch den Prozess führen. Am Ende wird Ihr WordPress-Dashboard frisch und einzigartig aussehen.

Was sind Verwaltungssymbole in WordPress?

Verwaltungssymbole sind die kleinen Bilder, die Sie in der Navigation des WordPress-Verwaltungsbereichs sehen. Sie erscheinen neben den einzelnen Menüpunkten.

Diese Bilder verwenden Dashicons, eine Icon-Schrift für WordPress. Sie wurde erstmals 2013 eingeführt und hat sich seither nicht verändert.

Vielleicht möchten Sie Ihrem WordPress-Verwaltungsbereich ein kleines Makeover verpassen, indem Sie diese Symbole ändern. Sie können die vorhandenen Icons mit etwas austauschen, das Ihnen besser gefällt, oder sie sogar durch Ihre eigenen individuellen Icons ersetzen.

Wenn Sie eine Website für Kunden erstellen, die mit WordPress nicht vertraut sind, können Sie ihnen mit individuell angepassten Symbolen die Navigation im Admin-Dashboard erleichtern.

Sehen wir uns nun an, wie Sie die Verwaltungssymbole ganz einfach ändern können. Wir zeigen Ihnen zwei Möglichkeiten, und Sie können diejenige wählen, die für Sie am besten geeignet ist:

Methode 1: Ändern der Admin-Symbole in der WordPress-Verwaltung mithilfe eines Plugins

Für diese Methode werden wir das Admin Menu Editor Plugin verwenden. Wie der Name schon sagt, ermöglicht es Ihnen, WordPress Admin-Menüs individuell anzupassen.

Zunächst müssen Sie das Plugin Admin Menu Editor installieren und aktivieren. Weitere Einzelheiten finden Sie in unserer Anleitung zur Installation eines WordPress Plugins.

Nachdem Sie das Plugin aktiviert haben, gehen Sie auf die Seite Einstellungen “ Menü Editor. Hier sehen Sie Ihr WordPress-Admin-Menü in einer übersichtlichen Benutzeroberfläche (UI), die Sie individuell anpassen können.

Die Benutzeroberfläche verfügt über eine Werkzeugleiste am oberen Rand, über die Sie Menüpunkte hinzufügen oder löschen, Trennlinien hinzufügen, Elemente kopieren und einfügen können und vieles mehr.

Darunter können Sie auf einen Menüpunkt klicken, um ihn zu erweitern und seine Einstellungen anzuzeigen. Hier haben wir den Menüpunkt Beiträge erweitert.

Wenn Sie einen Menüpunkt erweitern, sehen Sie weitere Optionen. Wenn es sich um ein übergeordnetes Menü handelt, sehen Sie auch alle untergeordneten Menüpunkte in der rechten Spalte.

Um ein Menüsymbol hinzuzufügen, zu ersetzen oder zu löschen, klicken Sie auf den Link „Erweiterte Optionen anzeigen“ am unteren Rand.

Klicken Sie nun auf den Button neben dem Feld „Icon URL“.

Daraufhin wird ein Popup-Fenster angezeigt, in dem Sie alle verfügbaren Dashicons sehen können. Alternativ können Sie auch auf den Button „Mediathek“ klicken, um Ihr eigenes Bildsymbol hochzuladen.

Wenn Sie Ihr eigenes Bildsymbol hochladen möchten, empfehlen wir Ihnen, ein 32×32-Bild zu verwenden, vorzugsweise im transparenten PNG-Format.

Nachdem Sie Ihr Symbol ausgewählt haben, klicken Sie auf den Button „Änderungen speichern“, um Ihre Einstellungen zu speichern.

Sie sehen nun Ihr individuelles Menüsymbol im Adminmenü.

Methode 2: Manuelles Ändern der Admin-Menü-Symbole mit einem Code-Snippet

Diese nächste Methode erfordert, dass Sie individuellen Code hinzufügen, um die Symbole zu ändern.

Wenn Sie es noch nicht getan haben, empfehlen wir Ihnen, einen kurzen Blick auf unsere Anleitung zum Hinzufügen von individuellem Code in WordPress zu werfen.

Der einfachste und sicherste Weg, individuellen Code in WordPress einzufügen, ist die Verwendung von WPCode. Es ist das beste WordPress Code Snippets Plugin. Es ermöglicht Ihnen, individuellen Code, CSS und HTML sicher zu Ihrer WordPress Website hinzuzufügen, ohne versehentlich etwas kaputt zu machen.

Hinweis: Das Plugin gibt es auch in einer kostenlosen Version namens WPCode Lite, mit der die Arbeit erledigt werden kann. Die Pro-Version bietet Ihnen jedoch zusätzliche Funktionen, die hilfreich sein können.

Beispiel 1. Ersetzen eines Symbols durch die Standard-Dashicons

In diesem Beispiel werden wir die Standard Dashicons verwenden, um ein Symbol aus dem bestehenden Symbolsatz zu ersetzen.

Es ist wichtig zu beachten, dass WordPress bereits Dashicons lädt, die für eine hohe Leistung optimiert sind. Ihre Verwendung hat also keinen Einfluss auf die Ladegeschwindigkeit der Seite.

Bevor Sie den Code ausführen, müssen Sie sich jedoch Folgendes notieren:

1. Die URL für den Menüpunkt, den Sie ändern möchten
2. Der Name des Symbols, das Sie verwenden möchten

Zunächst müssen Sie die URL der Seite finden, deren Menüpunkt Sie individuell anpassen möchten. Nehmen wir zum Beispiel an, Sie möchten das Symbol für das Menü „Beiträge“ ändern.

Fahren Sie mit der Maus über das Menü Beiträge, und Sie sehen die URL, auf die es verlinkt, in der Statusleiste Ihres Browsers am unteren Rand der Seite. Sie brauchen nur den letzten Teil der URL, der in diesem Fall edit.php lautet.

Rufen Sie dann die Dashicons-Website auf und klicken Sie auf das gewünschte Symbol.

Wenn Sie auf ein beliebiges Symbol klicken, werden sein Name und seine Titelform oben angezeigt. An dieser Stelle müssen Sie die Titelform kopieren, da Sie sie im nächsten Schritt benötigen.

Gehen Sie danach auf die Seite Code Snippets “ + Snippet hinzufügen und fahren Sie bei Mauszeigerkontakt mit der Maus über die Box „Fügen Sie Ihren individuellen Code (neues Snippet)“.

Klicken Sie dann einfach auf den Button „+ Individuelles Snippet hinzufügen“, der erscheint.

Geben Sie in der nächsten Ansicht einen Titel für Ihr Snippet ein und wählen Sie unter der Option Codetyp die Option PHP-Snippet.

Danach können Sie den folgenden Code kopieren und in die Box des Editors einfügen:

function change_post_menu_icon() {
    global $menu;
    
    // Loop through the menu items
    foreach ($menu as $key => $menu_item) {
        // Find the "Posts" menu item (default URL is 'edit.php')
        if (isset($menu_item[2]) && $menu_item[2] == 'edit.php') {
            // Change the icon to a different Dashicon class
            $menu[$key][6] = 'dashicons-format-aside'; // Change this to your preferred Dashicon slug
        }
    }
}
add_action('admin_menu', 'change_post_menu_icon');

Vergessen Sie nicht, die Kurzmitteilung "dashicons-format-aside" in die Titelform zu ändern, die Sie zuvor kopiert haben.

Ihr Code wird im Editor wie folgt angezeigt:

Als nächstes müssen Sie WordPress mitteilen, wo dieser Code ausgeführt werden soll.

Die Symbole des Verwaltungsmenüs erscheinen im WordPress-Verwaltungsbereich. Scrollen Sie auf derselben Seite zum Abschnitt „Einfügen“ und wählen Sie unter der Option „Position“ die Option „Nur Admin“.

Schalten Sie Ihr Snippet schließlich auf Aktiv und klicken Sie auf den Button „Snippet speichern“, um Ihre Änderungen zu speichern.

WordPress verwendet nun das Symbol, das Sie für die Seite Beiträge ausgewählt haben.

Beispiel 2. Font Awesome-Symbol für ein Menüelement im WordPress-Administrationsbereich verwenden

Die Standard Dashicon Bibliothek hat eine begrenzte Anzahl von Icons. Die gute Nachricht ist, dass Sie eine Schrift- und Symbolbibliothek wie Font Awesome verwenden können, die einen viel größeren Satz von Symbolen enthält.

Dies bedeutet jedoch, dass Sie Font Awesome laden müssen, was Ihren WordPress-Administrationsbereich etwas verlangsamen kann (nur wenige Millisekunden).

Bevor Sie einen Code hinzufügen, müssen Sie zunächst das Symbol finden, das Sie verwenden möchten. Rufen Sie die Font Awesome-Website auf und wechseln Sie zur Free Library.

Sie werden alle kostenlos verfügbaren Symbole sehen.

Klicken Sie auf das Symbol, das Sie verwenden möchten, und es öffnet sich ein Popup-Fenster. Von hier aus müssen Sie den Unicode-Wert des Symbols kopieren.

Gehen Sie danach auf die Seite Code Snippets “ + Snippet hinzufügen in Ihrem WordPress-Dashboard.

Klicken Sie auf den Button „+ Individuelles Snippet hinzufügen“ in der Box „Individuellen Code hinzufügen (neues Snippet)“.

Geben Sie in der nächsten Ansicht einen Titel für Ihr Snippet ein und wählen Sie die Option PHP-Snippet als Codetyp.

Danach können Sie den folgenden Code kopieren und in die Box des Editors einfügen:

// Enqueue Font Awesome in the admin area
function enqueue_font_awesome() {
    wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');
}
add_action('admin_enqueue_scripts', 'enqueue_font_awesome');

// Add custom class to the Posts menu item
function add_custom_post_menu_class() {
    global $menu;

    foreach ($menu as $key => $menu_item) {
        if (isset($menu_item[2]) && $menu_item[2] == 'edit.php') {
            $menu[$key][4] .= ' custom-post-menu-class';
        }
    }
}
add_action('admin_menu', 'add_custom_post_menu_class');

// Add custom CSS to change the icon to a Font Awesome icon
function custom_admin_menu_icon() {
    echo '<style>
        .custom-post-menu-class .wp-menu-image:before {
            font-family: "Font Awesome 5 Free" !important;
            content: "\f015"; /* Unicode for the Font Awesome icon */
            font-weight: 900; /* Needed for solid icons */
        }
    </style>';
}
add_action('admin_head', 'custom_admin_menu_icon');

Vergessen Sie nicht, \f015 durch den Unicode-Wert zu ersetzen, den Sie zuvor kopiert haben.

Ihr Code wird im Editor wie folgt angezeigt:

Als nächstes müssen Sie WordPress mitteilen, wo dieser Code ausgeführt werden soll.

Admin-Menü-Symbole erscheinen im WordPress-Verwaltungsbereich. Blättern Sie also zum Abschnitt „Einfügen“ und wählen Sie als Option für die Position „Nur Admin“.

Zum Schluss schalten Sie Ihr Snippet auf „Aktiv“ und klicken auf den Button „Snippet speichern“, um Ihre Änderungen zu speichern.

WordPress verwendet nun das Symbol, das Sie für die Seite Beiträge ausgewählt haben.

Bonus: Icons für Individuelle Inhaltstypen in WordPress hinzufügen

Individuelle Inhaltstypen ermöglichen es Ihnen, einzigartige Inhalte für Ihre WordPress-Website zu erstellen. Dabei handelt es sich nicht um Standard-Beiträge oder -Seiten, sondern um etwas völlig Eigenes für Ihre Website.

Wenn Sie auf Ihrer WordPress-Website einen individuellen Inhaltstyp verwenden, möchten Sie vielleicht sein Symbol ändern, damit Sie ihn leicht erkennen können.

In diesem Fall sollten Sie sich unser ausführliches Tutorial zu diesem Thema ansehen, in dem mehrere Möglichkeiten zum Ändern oder Hinzufügen von Symbolen für Ihre individuellen Inhaltstypen aufgezeigt werden.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, Admin-Symbole in WordPress zu ändern oder hinzuzufügen. Vielleicht möchten Sie auch wissen , wie Sie das WordPress-Dashboard mit einem White-Label versehen können, oder sich diese Expertentipps zur individuellen Anpassung des WordPress-Administrationsbereichs für bessere Arbeitsabläufe anzeigen lassen.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.