Individuell angepasste Widgets für das WordPress-Dashboard können die Art und Weise, wie Sie Ihre Website verwalten, völlig verändern. Wir haben gesehen, wie Benutzer sie nutzen können, um ihre Shortcuts hinzuzufügen und den Verwaltungsworkflow zu verbessern.
WordPress wird standardmäßig mit einfachen Dashboard-Widgets ausgeliefert, aber Sie können darüber hinausgehen. Mit individuellen Widgets können Sie das Admin-Dashboard genau an Ihre Bedürfnisse anpassen. Das bedeutet weniger Zeit für die Suche nach Einstellungen und mehr Zeit für das Wesentliche.
In dieser Anleitung zeigen wir Ihnen, wie Sie individuelle Dashboard-Widgets für WordPress erstellen können. Wir werden zwei Methoden verwenden: individuellen Code und ein Plugin.
Am Ende verfügen Sie über ein personalisiertes Dashboard, das Ihrem Arbeitsablauf entspricht und die Verwaltung Ihrer Website erleichtert.
Was sind WordPress Admin Dashboard Widgets?
Widgets für das Admin-Dashboard sind kleine Boxen, die auf der Ansicht des Dashboards erscheinen, wenn Sie sich bei Ihrer WordPress-Website anmelden. Diese Widgets zeigen wichtige Informationen an, bieten schnelle Links oder geben Ihnen sogar Updates zu Ihrer Website.
Standardmäßig enthält WordPress grundlegende Widgets wie „Auf einen Blick“, „Aktivität“,„Website-Zustand“ und „Schneller Entwurf“. Sie können jedoch individuelle Widgets hinzufügen, um Inhalte anzuzeigen, die für Ihre Bedürfnisse relevanter sind.
Wichtig: Jeder Benutzer Ihrer Website kann auswählen, welche Widgets im Verwaltungsbereich angezeigt werden sollen. Sie können Widgets nach ihren Vorlieben anzeigen/ausblenden und neu anordnen.
Vorteile der Verwendung von Dashboard Widgets:
- Sie ermöglichen es Ihnen, wichtige Daten gleich beim Anmelden zu sehen.
- Sie können schnell auf wichtige Funktionen zugreifen, ohne Menüs durchsuchen zu müssen.
- Mit individuellen Widgets können Sie Ihren Arbeitsablauf optimieren, indem Sie die am häufigsten genutzten Werkzeuge direkt zur Hand haben.
Wo Dashboard Widgets erscheinen:
Dashboard-Widgets erscheinen auf der Hauptansicht Ihres WordPress-Verwaltungsbereichs. Sie können sie per Drag-and-drop anordnen oder entfernen, indem Sie auf den Tab„Ansicht-Optionen“ oben auf dem Dashboard klicken.
Erstellen individueller WordPress Admin Widgets
Es gibt viele Gründe, warum Sie individuelle Widgets für das WordPress-Dashboard erstellen möchten. Mit individuellen Widgets können Sie das Dashboard an Ihre Bedürfnisse anpassen. Ganz gleich, ob Sie ein Entwickler sind, der mehrere Websites von Kunden verwaltet, oder ein Website-Besitzer, der schnell auf wichtige Daten zugreifen möchte – individuelle Widgets können Ihren Workflow verbessern.
Benutzer-Fall-Szenarien
- Personalisierung: Sie können individuelle Widgets hinzufügen, um die Statistiken der Website zu überwachen, eine Willkommensnachricht anzuzeigen oder Links zu häufig verwendeten Seiten der Verwaltung hinzuzufügen.
- Verwendung durch Entwickler: Entwickler erstellen häufig individuelle Widgets für ihre Kunden, um den Einstieg zu vereinfachen oder um einen schnellen Zugriff auf wichtige Aufgaben wie Updates und Backups zu ermöglichen.
Wie wir individuelle Admin-Widgets in WordPress verwenden
Like all website owners, we use a set of essential WordPress plugins on all our websites. Viele dieser Plugins verfügen über Admin-Widgets für den schnellen Zugriff.
Wir lieben zum Beispiel das Übersichtswidget von All in One SEO. Es bietet einen schnellen Überblick über den TruSEO-Score unserer Inhalte mit Links zu weiteren Verbesserungen.
Ein weiteres gutes Beispiel ist das MonsterInsights-Widget. Wir verwenden es, um einen schnellen Überblick über den Traffic und die Leistung unserer Website zu erhalten.
Uns gefällt, dass es in hohem Maße anpassbar ist und dass wir auswählen können, welche Daten im Widget angezeigt werden sollen.
Da jeder Benutzer die Widgets des Dashboards selbst einrichten kann, ordnen unsere Benutzer die für sie relevanten Widgets oft neu an und blenden sie ein oder aus.
So erstellen Sie individuelle WordPress Admin Widgets
Es gibt zwei Hauptmethoden, um individuelle Widgets für das WordPress-Dashboard zu erstellen. Sie können die unten stehenden Links verwenden, um zu der gewünschten Methode zu gelangen:
Methode 1: Dashboard-Widgets mit individuellem Code erstellen (besser anpassbar)
Für diese Methode müssen Sie individuellen Code zu Ihrer Website von WordPress hinzufügen, um ein Dashboard-Widget zu erstellen. Dies erfordert ein grundlegendes Verständnis der WordPress-Programmierung. Wenn Sie also keinen Code schreiben möchten, können Sie zur nächsten Methode übergehen.
Wir zeigen diese Methode zuerst, weil sie flexibler ist und Ihnen Raum lässt, jeden beliebigen Code hinzuzufügen, den Sie in Ihrem individuellen Widget ausführen möchten.
Wir zeigen Ihnen den Code, den Sie benötigen, und dann können Sie ihn individuell anpassen, um Ihren Code mit PHP, HTML oder JS hinzuzufügen.
Wenn es darum geht, individuellen Code zu Ihrer WordPress Website hinzuzufügen, denken viele Benutzer an die Datei functions.php des Themes. Diese Methode funktioniert zwar, aber wir glauben, dass es einen besseren und sichereren Weg gibt, individuelle Codeschnipsel zu handhaben – mit WPCode.
Die Bearbeitung der Datei functions.phpfilekann manchmal zum Absturz Ihrer Website führen, wenn ein Fehler im Code vorliegt. Außerdem verlieren Sie Ihren individuellen Code, wenn Sie das Theme wechseln oder aktualisieren, ohne Ihre Änderungen zu sichern.
Mit WPCode hingegen können Sie individuellen Code hinzufügen, ohne dass Ihre Website abstürzt. Außerdem lassen sich Code-Snippets einfach verwalten und je nach Bedarf ein- und ausschalten.
Hinweis: Es gibt auch eine kostenlose Version namens WPCode Lite, die Sie für dieses Lernprogramm verwenden können. Wir empfehlen jedoch ein Upgrade auf einen kostenpflichtigen Plan, um mehr Funktionen freizuschalten.
Zunächst müssen Sie das WPCode Plugin installieren und aktivieren. Weitere Einzelheiten finden Sie in unserem Artikel zur Installation eines WordPress Plugins.
Nach der Aktivierung müssen Sie die Seite Code-Snippets “ +Snippet hinzufügen“ aufrufen und „Individuellen Code hinzufügen (neues Snippet)“ wählen, um ein neues Snippet zu erstellen.
In der nächsten Ansicht müssen Sie einen Namen für Ihren individuellen Code eingeben und „PHP Snippet“ als „Code-Typ“ auswählen.
Fügen Sie anschließend den folgenden Code in die Box Codevorschau ein:
//hooks up your code to dashboard setup
add_action('wp_dashboard_setup', 'my_custom_dashboard_widgets');
function my_custom_dashboard_widgets() {
global $wp_meta_boxes;
// Register your custom WordPress admin dashboard widget
wp_add_dashboard_widget('custom_help_widget', 'Theme Support', 'custom_dashboard_help');
}
function custom_dashboard_help() {
// Replace this with any code you want to show in your custom admin widget
echo '<p>Welcome to Custom Blog Theme! Need help? Contact the developer <a href="mailto:yourusername@gmail.com">here</a>. For WordPress Tutorials visit: <a href="https://www.wpbeginner.com" target="_blank">WPBeginner</a></p>';
}
So sollte es in Ihrer WPCode-Oberfläche aussehen:
Hier ist eine kleine Erklärung des Codes:
Die Funktion my_custom_dashboard_widgets() registriert das individuelle Widget mit der Funktion wpb_add_dashboard_widget(). Sie nimmt drei Argumente entgegen. Das erste ist die ID des individuellen Widgets, das zweite ist der Titel des Widgets, und das dritte Argument ist die Callback-Funktion.
Die Funktion custom_dashboard_help() ist unsere Callback-Funktion, in die wir den HTML-Code eingefügt haben, den wir anzeigen möchten, wenn das Widget angezeigt wird.
Wir haben unsere eigene_custom_dashboard_widgetsfunctionmit dem wp_dashboard_setuphookmittels add_action verknüpft. Dieser Hook richtet die Seite des Dashboards für die Anzeige ein.
Nach dem Hinzufügen des individuellen Codes müssen Sie zum Abschnitt „Einfügung“ blättern und in der Dropdown-Liste „Position“ die Option „Nur Admin“ auswählen.
Klicken Sie abschließend auf den Button „Snippet speichern“ und schalten Sie die Option für den Status auf „Aktiv“ um.
Das war’s schon. Sie können nun die Seite Dashboard besuchen, um Ihr individuelles WordPress-Admin-Dashboard-Widget in Aktion zu sehen.
Methode 2: Individuelles Dashboard-Widget mit Plugin erstellen (Einfacher)
Diese Methode ist einfacher, aber wir haben sie als zweite Methode gewählt, weil sie etwas weniger flexibel ist als das Hinzufügen von individuellem Code.
Für diese Methode werden wir das Ultimate Dashboard Plugin verwenden. Es ist eines der besten Plugins für das WordPress-Dashboard und hilft Ihnen, individuelle Admin-Widgets zu erstellen.
Weitere Einzelheiten finden Sie in unserer vollständigen Rezension von Ultimate Dashboard.
Zunächst müssen Sie das Ultimate Dashboard Plugin installieren und aktivieren. Weitere Einzelheiten finden Sie in unserem Artikel zur Installation eines WordPress Plugins.
Nach der Aktivierung müssen Sie den Ultimate Dash besuchen …“ Neue Seite hinzufügen. Zunächst müssen Sie einen Titel für Ihr Widget angeben und dann einen Widget-Typ auswählen.
Es gibt drei Arten von Widgets, die Sie erstellen können:
- Icon Widget – Zeigen Sie ein großes Icon an und verweisen Sie es auf eine beliebige Seite auf Ihrer Website.
- Text Widget – Es verwendet einen visuellen Editor, in den Sie jeden beliebigen Text mit einigen grundlegenden Optionen zur Formatierung einfügen können.
- HTML Widget – Fügen Sie HTML-Code zu Ihrem individuellen Widget hinzu.
Schauen wir uns jeden einzelnen von ihnen an.
1. Individuelles Icon-Widget erstellen
Wählen Sie „Icon Widget“ als „Widget-Typ“ und wählen Sie dann das Symbol, das Sie anzeigen möchten. Standardmäßig steht eine begrenzte Anzahl von Symbolen zur Auswahl.
Unten können Sie unter „Tool-Tipp“ einen Text hinzufügen, der den Benutzern erklärt, was passiert, wenn sie auf das Symbol klicken. Zum Beispiel: „Führt Sie zur WordPress-Einstellungsseite“.
Fügen Sie anschließend den Link hinzu, den Sie an die Benutzer senden möchten, wenn sie auf das Symbol klicken.
Klicken Sie abschließend auf „Veröffentlichen“, um Ihre Änderungen zu speichern und das Dashboard zu besuchen, um das Widget in Aktion zu sehen.
So würde es aussehen.
2. Erstellen Sie ein individuelles Text-Widget
Wenn Sie noch nicht dort sind, gehen Sie zur Seite Ultimate Dash…“. Neue Seite hinzufügen. Wählen Sie „Text-Widget“ als Widget-Typ.
Das Plugin zeigt Ihnen einen visuellen Texteditor (wie der alte klassische Editor), in den Sie jeden beliebigen Text mit einfacher HTML-Formatierung einfügen können, den Sie anzeigen möchten.
Wenn Sie fertig sind, klicken Sie auf „Veröffentlichen“, um Ihre Änderungen zu speichern.
Sie können nun Ihr Admin-Dashboard besuchen, um dieses individuelle Admin-Widget in Aktion zu sehen.
3. Erstellen Sie ein individuelles HTML-Widget
Wenn Sie noch nicht dort sind, müssen Sie zur Seite „Ultimate Dash…“ gehen . Neue Seite hinzufügen. Wählen Sie „HTML-Widget“ als Widget-Typ.
Das Plugin zeigt Ihnen einen HTML-Editor, in dem Sie beliebigen HTML-Code mit Inline-CSS einfügen können.
Wenn Sie fertig sind, klicken Sie auf „Veröffentlichen“, um Ihre Änderungen zu speichern.
Sie können nun Ihr Admin-Dashboard besuchen, um dieses individuelle Admin-Widget in Aktion zu sehen.
Mit Ultimate Dashboard können Sie so viele individuelle Widgets erstellen, wie Sie möchten, und verschiedene Widget-Typen miteinander kombinieren, um ein hilfreiches Admin-Dashboard zu erstellen.
Ihr WordPress-Dashboard auf die nächste Stufe bringen
Im WordPress-Verwaltungsbereich verbringen die meisten Website-Besitzer viel Zeit mit dem Schreiben von Inhalten, der Erstellung von Seiten, der Verwaltung von Bestellungen und vielem mehr.
Hier finden Sie einige zusätzliche Ressourcen zur Optimierung des WordPress-Dashboards:
- WordPress Admin-Dashboard individuell anpassen
- Wie Sie Ihr WordPress-Dashboard mit einem White Label versehen
- Automatisierte Arbeitsabläufe in WordPress erstellen
- Plugins und Tipps zur Verbesserung des WordPress-Administrationsbereichs
Wir hoffen, dass dieser Artikel Ihnen geholfen hat, individuelle Dashboard-Widgets im WordPress-Adminbereich hinzuzufügen. Vielleicht interessiert Sie auch unser WordPress-Sicherheitsleitfaden oder dieses Tutorial zum Ausblenden unnötiger Menüpunkte aus dem Admin-Bereich.
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.
Brandon
Very useful. Thank you.
WPBeginner Support
Glad it was useful!
Admin
Jef Vermeire
Can you add multiple widget of the same type on the wordpress dashboard. For example: can I add the custom ‚custom_help_widget‘ twice on my dashboard?
WPBeginner Support
You could if you wanted to, you would want to add an additional line of the wp_add_dashboard_widget if you wanted it twice
Admin
Xavier Barbot
Very useful, thank you, I’ve tried all the plugins but none achieved adding a simple widget for my clients, very slick and easy to replicate by cresting a custom plugin, I give you 5 stars!
WPBeginner Support
Glad our recommendation was helpful
Admin
Syed Ali Ahmed
Thanks for sharing this, This is too awesome I love it.
WPBeginner Support
Glad you found our guide helpful
Admin
Mike
Is it possible to style the widget with custom attributes via HTML or CSS?
WPBeginner Support
You could but that is a bit beyond what we cover in our articles.
Admin
daan van middendorp
How can I use this for with a custom role ?
WPBeginner Support
If your custom role can see dashboard widgets, it should be able to see the custom widget.
Admin
haqem
how to put this custom widget at „Add New Post“ area for writing
Ron Sierra
This was asked once but I could not find the reply or answer. How do I create multiple dashboard widgets?
Bjornen
How do I add wp_mail function to this widget?
Meaning; how do I provide the customer with a contact form in that widget?
Vishah
How can I add a button ?
Wade
Used your code and got the white screen of death. WP 4.7.2
Any ideas?
WPBeginner Support
Hey Wade,
You can remove the code using FTP. Also please see our guide on how to fix white screen of death in WordPress
Admin
gobinda das
can i change the heading Flowtown theme to something else
Javier
Hi, I’m trying to create custom widgets on a per user basis. Each user needs to have a widget with different text in it.
Is there any way to achieve this?
David Guerreiro
That is very easy ! With PHP get the current user on the function that you are using for displaying the metabox content and change the HTML depending of the user retreived. Have a look on this :
Lại Đình Cường
Hello Syed Balkhi, how can I add new admin widget with order?
shakun
How to add multiple widget on dashboard
Nishant
i tried to insert a do_shortcode() with shortcode for a contact form to give user a quick access to report any bug of provide feedback but it doesn’t work … any idea how to get CF 7 working with this ?
Thanks
Dustin
This would be great to know. I am also trying to use a shortcode in a dashboard widget.
Mike
This isn’t working for me in 3.5. Are there any updates to get this working? Thanks!
smayzes
Is it possible to do this using OOP?
e.g.:
inside a class:
wp_add_dashboard_widget(‚custom_help_widget‘, ‚Help and Support‘, array($this, ‚customDashboardHelp‘));
function customDashboardHelp() {
echo ‚<p>Welcome to your custom CMS!‘;
}
Nick Powers
I know your message is quite old, but for the sake of others who come here and have the same question. Yes, it does work with OOP, just as you have indicated.
luxsub
Is it possible to put a widget with adsense in your dashboard for a multi user site?
y3kgeek
Great idea. What if I want to create a custom dashboard widget that only people with a certain user role, say Contributing Writer, can see?
Editorial Staff
You can do this by using the conditional statement if user_can or even user roles.
Admin
DramaKing
I know it’s been three years, but if others happen to come around here looking for an answer (like me), this is how I did it. I don’t know a lot about coding so it’s probably not clean, but this is how I managed to get it to work:
add_action(‚wp_dashboard_setup‘, ‚dashboard_widget_mail‘);
function dashboard_widget_mail() {
global $wp_meta_boxes;
if ( current_user_can( ‚delete_users‘ ) ) {
wp_add_dashboard_widget(‚custom_mail_widget‘, ‚Widgetname to show up on dashboard‘, ‚custom_dashboard_mail‘);
} return true;
}
function custom_dashboard_mail() {
echo ‚Your custom text here.‘;
}
—
You can replace ‚delete_users‘ for any capability you like of course.
Martin
Thx for this! It works great.
Just a quick question:
If I want to add 2 or more custom widgets in the functions.php, do I have to change the „action“ and „function“ name?
Editorial Staff
Yes you would have to add two separate functions and actions…
Admin
ACS04
Sounds good, but should be better to create a simple plugin to do so, in such a way, this widget will be independant from the themes… Don’t you think ?
Editorial Staff
Well you can, but in our case it contains support information that we want our clients to know. This is mostly for custom theme designs, so it is only good to have when our theme is activated.
Admin
Frankie Jarrett
Thanks a lot for the easy example. I was able to get something up and running in just a few seconds
Stéphane
Wow! Never heard about that trick before… Very nice, thanks!
Daniel
Worked like a charm. Using this as a workaround for one of my membership site that locked all dashboard menus; this will point members to the appropriate edit posts links again.
richard
when making two widgets how do you make them side by side instead of one on top one on bottom?
Editorial Staff
Hey Richard, You can make your widget be displayed at the very top using the code in WordPress Codex Dashboard API. We don’t know how to set them side by side without manually going in and saving it for the client. Perhaps sending an email to Jake and asking him would be a good idea.
Although remember, the settings you set in functions.php does not override the normal settings if the user has previously changed the settings. This only works if the user never organized his/her dashboard before.
Admin
Ash Blue
Use display block on the outer most element and float left, make sure to set a width, but that may break it. This is very similar to a gallery layout. This is not suggested and not necessarily how WordPress designed widgets to be used (use at your own risk).
david
wpmu. I have found /wp-includes/functions.php but where should I insert the code? Thanks for your help
Editorial Staff
You actually include this in your themes functions.php file not the core file.
Admin
cho
what do u mean themes function.php?
i cannot find such a file
Editorial Staff
There is a functions.php file located in your theme’s folder.
Ash Blue
Interesting, I did all of that with the line below. Is one better, or are these both just as good?
if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'name'=>'Contact',
));
}
Editorial Staff
Your code is for registering Sidebar Widgets. The code we are sharing in this article is to add custom dashboard widget. When one log in to their wp-admin, they see post stats, and other information. This box will be added there.
Two completely different topics.
Admin
Vivek @ InfoEduTech
thanks for the tutorial.
please don’t take it wrong whenever you are going to post any article post it with the appropriate screen shot so that it will be easy for the newbie.
Jim
This is awesome thank you for sharing.