Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Hinzufügen von benutzerdefinierten Verknüpfungen zu Ihrer WordPress-Symbolleiste

Hinweis der Redaktion: Wir erhalten eine Provision für Partnerlinks auf WPBeginner. Die Provisionen haben keinen Einfluss auf die Meinung oder Bewertung unserer Redakteure. Erfahre mehr über Redaktioneller Prozess.

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.

How to Add Custom Shortcut Links to WordPress Admin Toolbar

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:

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.

Visit Custom Admin Interface » Admin Toolbar to Configure the Plugin

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.

A New Item Is Added to the Top of the List

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.

Add a Title to the New Custom Menu Item

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.

Add a Link to the New Custom Menu Item

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.

Drag and Drop the New Item to the Desired Location

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.

Implement the Menu Item for Everyone

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“.

Implement the New Menu Item for Everyone Except Subscribers and Contributors

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.

Implement the New Menu Item Just for Yourself

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.

Preview of Custom Shortcut Link Added By Plugin

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.

Preview of a Single Custom Shortcut Link Added With Code

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.

Click 'Add New Snippet' in WPCode

Navigieren Sie dann zur Option „Benutzerdefinierten Code hinzufügen (neues Snippet)“ und klicken Sie auf die Schaltfläche „Snippet verwenden“ darunter.

Add custom code in WPCode with new snippet

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.

Paste code snippet into WPCode plugin

Danach schalten Sie den Schalter von „Inaktiv“ auf „Aktiv“ um und klicken auf die Schaltfläche „Snippet speichern“.

Activate and save code snippet WPCode

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.

Preview of a Group of Custom Shortcut Links Added With Code

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.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

Das ultimative WordPress Toolkit

Erhalte KOSTENLOSEN Zugang zu unserem Toolkit - eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Reader Interactions

21 KommentareEine Antwort hinterlassen

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Rick Rottman says

    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.

  3. Edward Bonthrone says

    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 says

      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

    • WPBeginner Support says

      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

  4. Mohammad Kashif says

    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

  5. Small Details says

    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 );
    }

  6. Yassin says

    Great tip
    How can we make these custom links open in new tab ?
    I try to add ‚target‘ => ‚_blank‘ but didn’t work

  7. Gary Cook says

    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.

  8. Rosendo Cuyasen says

    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.

Eine Antwort hinterlassen

Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.