Möchten Sie die WordPress-Admin-Symbolleiste anpassen?
Die Verwaltungsleiste enthält praktische Links zu einigen der am häufigsten verwendeten Verwaltungsseiten. Sie können jedoch auch Ihre eigenen Verknüpfungen zu den Seiten hinzufügen, die Sie bei der Arbeit an Ihrer Website am häufigsten verwenden.
In diesem Artikel zeigen wir Ihnen, wie Sie der WordPress-Admin-Symbolleiste benutzerdefinierte Verknüpfungen hinzufügen können.
Warum benutzerdefinierte Verknüpfungen zur WordPress Admin Toolbar hinzufügen?
Wenn Sie bei Ihrer WordPress-Website angemeldet sind, sehen Sie eine Symbolleiste am oberen Rand des Bildschirms. Dies ist die WordPress-Admin-Symbolleiste oder Admin-Leiste.
Es gibt einige Möglichkeiten, die Kontrolle über die WordPress-Administrationsleiste zu übernehmen, wie z. B. das Ausschalten der Leiste bei der Anzeige Ihrer Website und das Deaktivieren der Leiste für alle Benutzer außer Administratoren.
Standardmäßig zeigt die Symbolleiste eine Reihe von Links zu bestimmten Verwaltungsbildschirmen an, die sich in der Admin-Seitenleiste befinden. Mit diesen Links können Sie allgemeine Verwaltungsaufgaben schnell ausführen.
Aber jeder hat seine eigene Liste von Lieblingslinks, die er häufig besucht, wenn er Beiträge schreibt oder an seiner Website arbeitet. Das können Seiten in Ihrem Verwaltungsbereich oder Links zu externen Ressourcen, Diensten oder Websites sein.
Sie können diese in die WordPress-Symbolleiste als benutzerdefinierte Verknüpfungen einfügen. Auf diese Weise können Sie und Ihre Nutzer von Ihrer Website oder Ihrem Verwaltungsbereich aus leicht auf sie zugreifen. Dies ist besonders nützlich, wenn Sie eine viel genutzte Website mit mehreren Autoren betreiben.
Schauen wir uns also an, wie man der WordPress-Admin-Symbolleiste benutzerdefinierte Verknüpfungen hinzufügt. Wir werden drei Methoden behandeln:
Hinzufügen benutzerdefinierter Verknüpfungen zur Symbolleiste mit einem Plugin
Als Erstes müssen Sie das WP Custom Admin Interface-Plugin installieren und aktivieren. Weitere Einzelheiten finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.
Nach der Aktivierung müssen Sie die Seite Custom Admin Interface “ Admin Toolbar besuchen, um das Plugin zu konfigurieren. Auf dieser Seite wird alles angezeigt, was in der Symbolleiste erscheint, und Sie können neue Elemente hinzufügen.
Um einen benutzerdefinierten Shortcut-Link zur Admin-Symbolleiste hinzuzufügen, müssen Sie auf die Schaltfläche „+ Menüpunkt hinzufügen“ oben auf dem Bildschirm klicken.
Ein neues Element wird am Anfang der Liste hinzugefügt und enthält zwei Felder.
Eine ist für den Titel des Artikels und die andere für den Link.
Um einen Titel hinzuzufügen, müssen Sie auf das Notizbuchobjekt klicken, um das Titelfeld in den Bearbeitungsmodus zu versetzen. Sie können dann den Titel eingeben und anschließend auf das Häkchen klicken, um ihn zu speichern.
Für dieses Lernprogramm geben wir „Widgets“ ein.
Um einen Link hinzuzufügen, müssen Sie auf das Link-Symbol klicken und dann den Link eingeben. Wenn Sie fertig sind, können Sie auf das Häkchensymbol klicken, um den Link zu speichern.
Für dieses Lernprogramm fügen wir den Link zur Widgets-Seite ein. Er sollte wie http://example.com/wp-admin/widgets.php
aussehen .
Vergessen Sie nicht, „example.com“ durch Ihren eigenen Domänennamen zu ersetzen.
Stellen Sie sicher, dass Sie „example.com“ in Ihren eigenen Domänennamen ändern und vergessen Sie nicht, auf das Häkchen zu klicken, um den Link zu speichern.
Da sich das neue Element am Anfang der Liste befindet, wird es auf der linken Seite der Verwaltungssymbolleiste hinzugefügt. Um es weiter nach rechts zu verschieben, müssen Sie das Element per Drag & Drop weiter nach unten in der Liste verschieben.
Möchten Sie mehr als einen benutzerdefinierten Shortcut-Link hinzufügen? Wenn ja, wiederholen Sie einfach die gleichen Schritte, um ein weiteres Element zu erstellen.
Wenn Sie beim Anpassen der Admin-Leiste einen Fehler machen, können Sie oben auf die Schaltfläche „Standard-WordPress-Symbolleiste wiederherstellen“ klicken, um alle Ihre Anpassungen zu entfernen, oder auf die Schaltfläche „Zur letzten Speicherung zurückkehren“, um alle Änderungen seit der letzten Speicherung zu entfernen.
Schließlich müssen Sie bis zum Ende der Seite blättern. Hier können Sie festlegen, welche Benutzerrollen den neuen Artikel sehen können, und dann Ihre Einstellungen speichern.
Wenn Sie möchten, dass alle angemeldeten Benutzer Ihren neuen Link sehen können, müssen Sie im Dropdown-Menü „Alle“ auswählen, damit die Einstellung „Für alle außer“ lautet. Wenn Sie keine Ausnahmen hinzufügen, können alle Benutzer den Artikel sehen.
Wenn Sie jedoch nicht möchten, dass Benutzer mit der Benutzerrolle „Abonnenten“ oder „Mitwirkende“ den Artikel sehen, müssen Sie diese Rollen als Ausnahmen auswählen.
Klicken Sie zunächst auf den Link „+ Ausnahmefall hinzufügen“. Daraufhin wird ein Dropdown-Menü angezeigt, in dem Sie „Role: Abonnent“ auswählen können. Klicken Sie dann auf das +-Symbol und fügen Sie „Role: Mitwirkender“.
Ein anderes Beispiel ist, wenn Sie möchten, dass der Link nur für Sie selbst oder für einen einzelnen Benutzer sichtbar ist.
Wählen Sie in diesem Fall die Optionen aus den Dropdown-Menüs aus, so dass die Einstellung „Implementiere dies für Niemanden außer Benutzer: Name der Person“ lautet.
Sie sind fast fertig. Wenn Sie den benutzerdefinierten Link bei der Anzeige Ihrer Website nicht sehen möchten, müssen Sie auch das Kontrollkästchen „Benutzerdefinierte Symbolleiste im Frontend deaktivieren“ anklicken.
Wenn Sie die Konfiguration der Verwaltungsleiste abgeschlossen haben, vergessen Sie nicht, auf die Schaltfläche „Alle Einstellungen speichern“ zu klicken.
Sobald Sie die Seite aktualisieren oder auf eine andere Seite in der Admin-Seitenleiste klicken, können Sie Ihren benutzerdefinierten Shortcode-Link sehen.
Hinzufügen eines einzelnen benutzerdefinierten Shortcut-Links zur Symbolleiste mit Code
Hier ist eine weitere Möglichkeit, der WordPress-Symbolleiste einen benutzerdefinierten Shortcut-Link hinzuzufügen. Diese Methode ist für diejenigen, die mit dem Kopieren von Codeschnipseln in WordPress vertraut sind.
Kopieren Sie den folgenden Code und fügen Sie ihn in die Datei functions.php Ihres Themes, in ein Site-spezifisches Plugin oder in ein Code-Snippets-Plugin ein.
// add a link to the WP Toolbar
function custom_toolbar_link($wp_admin_bar) {
$args = array(
'id' => 'wpbeginner',
'title' => 'Search WPBeginner',
'href' => 'https://www.google.com:443/cse/publicurl?cx=014650714884974928014:oga60h37xim',
'meta' => array(
'class' => 'wpbeginner',
'title' => 'Search WPBeginner Tutorials'
)
);
$wp_admin_bar->add_node($args);
}
add_action('admin_bar_menu', 'custom_toolbar_link', 999);
Dieser Beispielcode fügt einen Link zu einer benutzerdefinierten Google-Suchmaschine hinzu, die nach WordPress-Tutorials auf WPBeginner suchen wird. Er verwendet die Funktion add_node
mit den im Array beschriebenen Argumenten.
Sie müssen die Elemente id, title, href und meta durch Werte für Ihren eigenen benutzerdefinierten Link ersetzen.
Wir empfehlen, diesen Code in WordPress mit WPCode hinzuzufügen. Es ist das beste Plugin für Codeschnipsel, mit dem Sie ganz einfach benutzerdefinierten Code hinzufügen können, ohne die Datei functions.php Ihres Themes zu bearbeiten. Sie müssen sich also keine Sorgen machen, dass Ihre Website beschädigt wird.
Um loszulegen, müssen Sie das kostenlose WPCode-Plugin installieren und aktivieren. Detaillierte Anweisungen finden Sie in dieser Anleitung zur Installation eines WordPress-Plugins.
Sobald das Plugin aktiviert ist, wird ein neuer Menüpunkt mit der Bezeichnung „Code Snippets“ zu Ihrem WordPress-Dashboard hinzugefügt. Wenn Sie darauf klicken, wird Ihnen eine Liste aller benutzerdefinierten Code-Snippets angezeigt, die Sie auf Ihrer Website gespeichert haben. Da Sie das Plugin gerade erst installiert haben, ist die Liste noch leer.
Klicken Sie hier auf die Schaltfläche „Neu hinzufügen“, um Ihr erstes Codefragment hinzuzufügen.
Navigieren Sie dann zur Option „Benutzerdefinierten Code hinzufügen (neues Snippet)“ und klicken Sie auf die Schaltfläche „Snippet verwenden“ darunter.
Auf der Seite „Benutzerdefiniertes Snippet erstellen“ können Sie zunächst einen Titel für Ihr Snippet eingeben. Dies kann ein beliebiger Titel sein, damit Sie sich daran erinnern, wofür das Snippet gedacht ist.
Fügen Sie dann einfach den obigen Code in das Feld „Codevorschau“ ein und wählen Sie im Dropdown-Menü „PHP Snippet“ als Codetyp aus.
Danach schalten Sie den Schalter von „Inaktiv“ auf „Aktiv“ um und klicken auf die Schaltfläche „Snippet speichern“.
Hinzufügen einer Gruppe von benutzerdefinierten Verknüpfungen zur Symbolleiste mit Code
Die letzte Methode hat Ihnen gezeigt, wie Sie der Symbolleiste mithilfe von Code eine benutzerdefinierte Verknüpfung hinzufügen können. Was aber, wenn Sie ein benutzerdefiniertes Menü mit einer Handvoll eigener Verknüpfungen erstellen möchten?
Zu diesem Zweck können Sie mehrere Verknüpfungen unter einem übergeordneten Element gruppieren. Die untergeordneten Verknüpfungen unter der übergeordneten Verknüpfung werden angezeigt, wenn ein Benutzer mit der Maus über die übergeordnete Verknüpfung fährt.
Hier ist ein Beispiel dafür, wie Sie eine Gruppe benutzerdefinierter Links in der WordPress-Symbolleiste hinzufügen können. Wie bei der vorherigen Methode sollten Sie diesen Codeschnipsel kopieren und in die functions.php-Datei Ihres Themes, in ein Site-spezifisches Plugin oder in ein Code-Snippets-Plugin wie WPCode einfügen.
/*
* add a group of links under a parent link
*/
// Add a parent shortcut link
function custom_toolbar_link($wp_admin_bar) {
$args = array(
'id' => 'wpbeginner',
'title' => 'WPBeginner',
'href' => 'https://www.wpbeginner.com',
'meta' => array(
'class' => 'wpbeginner',
'title' => 'Visit WPBeginner'
)
);
$wp_admin_bar->add_node($args);
// Add the first child link
$args = array(
'id' => 'wpbeginner-guides',
'title' => 'WPBeginner Guides',
'href' => 'https://www.wpbeginner.com/category/beginners-guide/',
'parent' => 'wpbeginner',
'meta' => array(
'class' => 'wpbeginner-guides',
'title' => 'Visit WordPress Beginner Guides'
)
);
$wp_admin_bar->add_node($args);
// Add another child link
$args = array(
'id' => 'wpbeginner-tutorials',
'title' => 'WPBeginner Tutorials',
'href' => 'https://www.wpbeginner.com/category/wp-tutorials/',
'parent' => 'wpbeginner',
'meta' => array(
'class' => 'wpbeginner-tutorials',
'title' => 'Visit WPBeginner Tutorials'
)
);
$wp_admin_bar->add_node($args);
// Add a child link to the child link
$args = array(
'id' => 'wpbeginner-themes',
'title' => 'WPBeginner Themes',
'href' => 'https://www.wpbeginner.com/category/wp-themes/',
'parent' => 'wpbeginner-tutorials',
'meta' => array(
'class' => 'wpbeginner-themes',
'title' => 'Visit WordPress Themes Tutorials on WPBeginner'
)
);
$wp_admin_bar->add_node($args);
}
add_action('admin_bar_menu', 'custom_toolbar_link', 999);
In diesem Beispielcode haben wir zunächst einen benutzerdefinierten Verknüpfungslink hinzugefügt. Dann fügten wir einen zweiten benutzerdefinierten Link hinzu und machten ihn zu einem untergeordneten Link des ersten Links. Wir haben die übergeordnete Link-ID hinzugefügt, indem wir das Argument "parent" => "wpbeginner"
hinzugefügt haben.
Wir haben dies wiederholt, um einen weiteren Link unter demselben übergeordneten Link hinzuzufügen. Wir haben auch einen untergeordneten Link als übergeordneten Link verwendet, um Ihnen zu zeigen, wie Sie Unterpunkte zu einem Unterpunkt in Ihrem benutzerdefinierten Linkmenü hinzufügen können.
Wir hoffen, dass dieses Tutorial Ihnen geholfen hat zu lernen, wie man benutzerdefinierte Verknüpfungen zur WordPress-Admin-Symbolleiste hinzufügt. Vielleicht möchten Sie auch erfahren, wie Sie automatisierte Workflows in WordPress erstellen können, oder unsere Liste der besten SEO-Plugins und -Tools für das Wachstum Ihrer Website lesen.
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.
Rick Rottman
Thanks for posting this!
I’ve always wanted a direct link in the admin bar to my Simple CSS screen. Thanks to this tutorial, I have one.
WPBeginner Support
Glad to hear our guide was helpful!
Admin
Edward Bonthrone
Hi all..
This is all working great for PC view – but the custom toolbar item icons/menus disappear when viewing on mobile with responsive theme.
I have seen this question asked many times but no examples of code I can insert as a test that works on both PC and mobile view?
Anyone give me a menu snippet that will stay visible on mobile phone?
Thanks
WPBeginner Support
Your CSS would be hiding it for your mobile view, if you would like this to appear on mobile you would need to add the following CSS for our examples.
#wpadminbar li#wp-admin-bar-wpbeginner {
display: block;
}
For your own shortcut links, you would change the -wpbeginner to the ID of your widget, as an example: -yourid
Admin
dan
Why this code is not work for mobile view?
WPBeginner Support
You may want to try disabling your other plugins to ensure there isn’t a plugin that is overriding the default bar on mobile.
Admin
Tayyab Roy
Thanks.
WPBeginner Support
You’re welcome
Admin
Mohammad Kashif
Hi
How can i add tool bar user menu in theme navigation?
And why i don’t receive email notification when i got reply? While i select (Replies to my comments).
Thanks
WPBeginner Support
Hi Kashif,
We are not sure which toolbar user menu you want to add. Please see our guide on how to add navigation menus in WordPress may be that would help.
Admin
Court
This works great, my question is, how do you add a second parent menu item to this code?
Small Details
I don’t know if this is recommended but I was looking for a ’new window‘ solution (see Yassin’s comment). It didn’t work by itself but works fine when combined with ‚meta‘:
add_action( ‚admin_bar_menu‘, ‚toolbar_link_to_mypage‘, 999 );
function toolbar_link_to_mypage( $wp_admin_bar ) {
$args = array(
‚id‘ => ‚my_page‘,
‚title‘ => ‚PRODUCT MANAGEMENT‘,
‚href‘ => ‚http://www.mexample.com‘,
‚meta‘ => array( ‚class‘ => ‚my-toolbar-page‘, ‚target‘ => ‚_blank‘ )
);
$wp_admin_bar->add_node( $args );
}
Mel
Thanks!! This helped me out a ton!
Frederic
Thanks! Very useful!
Yassin
Great tip
How can we make these custom links open in new tab ?
I try to add ‚target‘ => ‚_blank‘ but didn’t work
Henry E.
To add a ‘target’ => ‘_blank’ you have to add it to the ‚meta‘ => array()
Gary Cook
This is awesome. Thanks. Although, I have added several custom menus and I want to center them all in a group using CSS, if possible? Please.
Marc
Is it possible to add a icon?
Rosendo Cuyasen
Cool! I think this is a cool feature for Wordpress if you’re going to use this toolbar above your web pages. Thanks for sharing.
adolf witzeling
I was looking for something like this. Thanks for sharing this awesome tip.