Integration in die Benutzeroberfläche von WordPress: Die Grundlagen

() translation by (you can also view the original English article)

Es ist seit langem allgemein anerkannt, dass einer der größten Vorteile von WordPress gegenüber seinen Konkurrenten die Admin-Benutzeroberfläche ist. Es ist insgesamt sehr einfach und intuitiv zu bedienen. Darüber hinaus wird es ständig verfeinert und verbessert, wobei der Medien-Upload-Bildschirm jetzt eines der vielen Dinge ist, die auf dem Prüfstand sind. Leider gibt es etwas, auf das das WordPress-UI-Team keine Kontrolle hat, was all ihre harte Arbeit konsequent zunichte macht: Plugins und Themes.

Die Benutzeroberfläche Ihres Plugins (ich werde in diesem Artikel den Begriff Plugin verwenden, aber das gleiche gilt für die Benutzeroberfläche Ihres Themes) ist einer der wichtigsten Aspekte Ihres Plugins. Es definiert, wie Menschen damit interagieren, wie einfach es zu bedienen ist und vielleicht sogar wie gerne sie es verwenden. Dies ist das ultimative Ziel Ihres Plugins: Ihrem Endbenutzer eine oder mehrere bestimmte Aufgaben zu erleichtern (tatsächlich ist dies das scheinbar vergessene Ziel von Computern selbst). Die Benutzeroberfläche sollte ansprechend sein, aber letztendlich sollte sie funktional sein. Wenn Sie sich für das Layout Ihres Plugins entscheiden, müssen Sie entscheiden, wie Sie Ihr Plugin benutzerfreundlich machen – besser noch, holen Sie sich Feedback – dies ist im Wesentlichen das, was WordPress tut.

Einführung

In den letzten Wochen und Monaten wurde viel darüber diskutiert, wie die Benutzerfreundlichkeit von WordPress verbessert werden könnte – von allgemeinen Verbesserungen der Benutzeroberfläche bis hin zur Barrierefreiheit (wenn Sie der Meinung sind, dass Barrierefreiheit weder für WordPress noch für Ihr Plugin ein Problem ist, würde ich empfehlen, dies zu überprüfen den ausgezeichneten Vortrag von Graham Armfield aus dem WordCamp Edinburgh). In jüngerer Zeit hat Tom McFarlin viele Diskussionen über die Integration in die Benutzeroberfläche von WordPress ausgelöst. Die Diskussion ging auf die Notwendigkeit einer UI-Richtlinie für Plugin-Autoren über, die ihnen dabei hilft, sicherzustellen, dass ihr Plugin nahtlos in WordPress integriert wird. Diese Richtlinie nimmt in Form der Richtlinien für die WordPress-Benutzeroberfläche.langsam Gestalt an.

In dieser Serie werden wir uns Schritte ansehen, die Sie unternehmen können, um Ihr Plugin in die Benutzeroberfläche von WordPress zu integrieren. In diesem Artikel konzentrieren wir uns auf einige grundlegende Richtlinien sowie auf einige der Ihnen zur Verfügung stehenden UI-API. Bitte beachten Sie, dass diese Richtlinien in keiner Weise "offiziell" sind. In den folgenden Artikeln werden wir uns mehr „praktische“ Beispiele ansehen, einschließlich der Verwendung von Metaboxen auf benutzerdefinierten Admin-Seiten und der Verwendung von WordPress-Admin-Pointern.

Warum ist die Integration mit WordPress wichtig?

Benutzererfahrung

Dies ist der wichtigste Grund. Der Hauptzweck sowohl der WordPress-Benutzeroberfläche als auch Ihres Plugins oder Themes besteht darin, das Content-Management und die Produktion für den Endbenutzer zu erleichtern. Es soll dem Benutzer ermöglichen, einen bestimmten Zweck zu erreichen. Wenn dein Plugin oder Theme eine Benutzeroberfläche einführt, die sich stark von WordPress unterscheidet, zwingst du den Benutzer, eine völlig neue Benutzeroberfläche zu erlernen. Damit machst du es ihnen schwerer und sie werden wahrscheinlich dein Plugin deinstallieren und ein anderes finden. Konsistenz ist hier das A und O.

Zweitens ist es einfach hässlich, wenn ein Plugin oder Theme wie ein wunder Daumen herausragt. Der WordPress-Admin ist(meistens) schön konsistent – und Plugins, die nicht reinpassen, sind nur eine Augenweide. Das soll nicht einmal heißen, dass die eigene Benutzeroberfläche des Plugins besonders hässlich ist. Es kann gut sein, dass die Oberfläche des Plugins glatt ist - aber es wird immer noch aus dem Kontext gerissen.

Die besten Plugins fügen sich nahtlos in WordPress ein, so dass es fast unmöglich ist zu sagen, wo WordPress selbst aufhört und das Plugin startet. Es sind diese Plugins, die Benutzer gerne verwenden, vor allem, weil sie so aussehen, als wären sie dazu bestimmt. Plugins sollen WordPress erweitern - nicht zu einem CMS machen, das Dr. Frankenstein produzieren würde.

Machen Sie Ihr Plugin zukunftssicher

WordPress bietet viele Möglichkeiten, Ihnen zu helfen, sich in WordPress einzufügen. Es bietet auch eine Menge CSS auf den Admin-Seiten, die Sie nutzen können. Beides ist eine effektive Möglichkeit, die Benutzeroberfläche Ihres Plugins zukunftssicher zu machen. Alle an WordPress vorgenommenen Änderungen werden auch in Ihrem Plugin widergespiegelt. Auf der anderen Seite, wenn Sie mit Ihrer Admin-Benutzeroberfläche „allein gehen“ – jedes WordPress-Update bringt eine erhöhte Wahrscheinlichkeit mit sich, dass Ihre Plugin-Benutzeroberfläche mit WordPress in Konflikt gerät. Durch die Verwendung von WordPress-Stilen und -Layouts erleichtern Sie sich und Ihren Benutzern das Leben.

Inoffizielle Richtlinien für die Admin-Benutzeroberfläche

Reduzieren Sie Ihren Plugin-Fußabdruck

Sie denken vielleicht, dass Ihr Plugin das Wichtigste im Repository ist, und es könnte das beste seiner Art auf dem Markt sein. Aber braucht es wirklich einen erstklassigen Platz im Admin-Menü? Ein wichtiger Aspekt jeder Benutzeroberfläche ist eine Einfachheit, die es Benutzern ermöglicht, schnell zu finden, was sie suchen. Das Überladen des Menüs ist das Gegenteil davon.

Ihr Plugin benötigt möglicherweise nicht einmal eine eigene Unterseite. Allen Standardeinstellungsseiten können Abschnitte hinzugefügt werden. Wenn Ihr Plugin nur wenige Einstellungen hat und diese auf einer vorhandenen Einstellungsseite nicht fehl am Platz wären, sollten Sie dies berücksichtigen.

Wenn Ihr Plugin einen Platz im Menü der obersten Ebene benötigt, denken Sie sorgfältig darüber nach, wohin es gehen soll. Das Admin-Menü ist in drei Bereiche unterteilt: das Dashboard, die Inhaltsverwaltung und die Einstellungen. Wo Ihr Menüelement der obersten Ebene hingehen sollte, hängt davon ab, was der Hauptzweck Ihres Plugins ist. Wenn es um die Produktion, Bearbeitung und Verwaltung von Inhalten geht, sollte es in der Mitte liegen. Wenn der Zweck Wartung, Leistung oder Konfiguration ist (z. B. Integration mit einer Drittanbietersoftware, Caching oder Backup-Plugins), sollten diese wahrscheinlich ganz unten stehen.

Schließlich sollte sich Ihr Plugin nicht überfordern. Wenn Sie Ihr Plugin mit „Spenden“-Links, Werbung oder Feeds aus Ihrem Blog überhäufen, wird Ihr Plugin bei Ihren Benutzern nicht beliebt. Plugin-Branding sollte vermieden werden oder zumindest subtil genug, um nicht mit der Benutzeroberfläche von WordPress in Konflikt zu geraten.

Obwohl dies die Benutzerfreundlichkeit des Plugins möglicherweise nicht beeinträchtigt, sorgt die Integration in das Erscheinungsbild von WordPress für eine nahtlose und bessere Benutzererfahrung. Es ist nicht so, dass die Marke des Plugins schrecklich wäre (einige sehen fantastisch aus) - sondern eher, dass sie fehl am Platz aussehen.

Entscheidungen statt Optionen

Die meisten Plugin-Autoren möchten verständlicherweise, dass ihr Plugin so viele Benutzer wie möglich anspricht. Ein unglücklicher Nebeneffekt ist, dass dem Benutzer ein Cockpit mit Optionen präsentiert wird. Teil der WordPress-Philosophie sind Entscheidungen, keine Optionen:

Als Entwickler denken wir manchmal, dass es eine gute Sache ist, Optionen für alles bereitzustellen, man kann nie zu viele Möglichkeiten haben, oder? Letztendlich sind diese Entscheidungen technische Entscheidungen, an denen der durchschnittliche Endbenutzer kein Interesse hat. Es ist unsere Pflicht als Entwickler, kluge Designentscheidungen zu treffen und zu vermeiden, dass unsere Endbenutzer das Gewicht der technischen Entscheidungen belasten.

Es gibt zwei Dinge, die ausgeglichen werden müssen: Einerseits möchten Sie, dass die Benutzer das Verhalten Ihres Plugins optimieren können. Andererseits können zu viele Optionen das Auffinden erschweren und den Benutzer verwirren und frustrieren. Es gibt hier keine Einheitsgröße, und es ist ein Urteil, das Sie anhand Ihrer Erfahrungen mit den Wünschen Ihrer Benutzer treffen sollten.

Optionen sind jedoch nicht die einzige Möglichkeit, Ihr Plugin zu optimieren:

Verwenden Sie Plugin-Hooks. Manchmal, insbesondere wenn es um die eher technischen Aspekte Ihres Plugins geht, ist es angemessener, einen Hook einzuführen, um das Ändern einer Einstellung oder das Auslösen einer Aktion zu ermöglichen, als eine Reihe von Optionen einzuführen, um denselben Zweck zu erreichen.
Bereitstellung überschreibbarer Plugin-Vorlagen. In meinem Plugin Event Organizer sind beispielsweise grundlegende Vorlagen enthalten, die standardmäßig verwendet werden. Der Benutzer kann diese in sein Theme kopieren und dort bearbeiten, um es zu überschreiben. Dies gibt dem Benutzer die vollständige Kontrolle, benötigt jedoch keine umfangreiche Einstellungsseite.
Seien Sie clever. Zum Beispiel habe ich vor kurzem ein Zahlungsprotokoll erstellt, das eine Datumsspalte enthielt, die nur mit Zahlen formatiert werden sollte. Amerikanische Benutzer erwarten jedoch häufig Datumsangaben im Format TT-MM-JJJJ, während Europäer Datumsangaben im Format TT-MM-JJJJ erwarten. Das Protokoll formatierte die Daten entsprechend der Zeitzone der Site (obwohl eine Bildschirmoption hinzugefügt wurde, falls sie geändert werden musste).

Plugin-Einstellungen gehen unter…

Der Menüpunkt Einstellungen? Oder Ihr eigenes Top-Level-Menü? Ich habe sogar schon einige im Menüpunkt „Plugins“ gefunden. Darüber wird viel diskutiert. Für die meisten Plugins, die kein eigenes Top-Level-Menü benötigen, wird die Entscheidung für sie getroffen. Aber was ist mit Plugins, die das tun? Ich kann hier nur meine Meinung abgeben. Ein überzeugender Punkt ist, dass einige Benutzer erwarten, die Plugin-Einstellungen im Menü des Plugins zu finden. In einigen Fällen denke ich jedoch, dass dies einen Missbrauch des Admin-Menüs aufdeckt - das Menü sollte nicht das "Menü des Plugins" sein, sondern ein Menü, das mit einer Art von Aufgabe verbunden ist (wie das Erstellen und Bearbeiten von Beiträgen, das Anzeigen von Kommentaren usw.). So wie WordPress Aufgaben von Einstellungen trennt, sollten dies auch Plugins tun.

Zweitens ist das Ändern von Einstellungen eine eigenständige Aufgabe – eine, die selten durchgeführt wird, oft erst nach der Installation von WordPress oder einem Plugin. Da es nicht regelmäßig besucht wird, räumt die Platzierung unter dem Menüpunkt Einstellungen das Untermenü Ihres Plugins für den täglichen Gebrauch auf.

Wenn Sie sicherstellen möchten, dass Ihre Einstellungsseite nicht übersehen wird, empfehle ich Ihnen, einen Link dazu unter dem Namen Ihres Plugins auf der Seite "Plugins" hinzuzufügen. Dies ist die Seite, auf die der Benutzer gelangt, wenn er das Plugin aktiviert, und erleichtert so das Auffinden Ihrer Einstellungen.

Hier ist ein Beispiel, wie Sie dies erreichen können:

add_filter('plugin_action_links', 'wptuts_plugin_settings_link', 10, 2);
function wptuts_plugin_settings_link($links, $file) {

	if ( $file == 'myplugin/myplugin.php' ) {
		/* Insert the link at the end*/
		$links['settings'] = sprintf( '<a href="%s"> %s </a>', admin_url( 'options-general.php?page=my_plugin_settings' ), __( 'Settings', 'plugin_domain' ) );
	}
	return $links;

}

Seiten-Tabs

Wenn Ihre Plugin-Einstellungen nicht bequem auf eine Seite passen, sollten Sie erwägen, Tabs zu verwenden, um sie aufzuteilen. WordPress verwendet Registerkarten auf der Seite Aussehen -> Themen, die zu Ihren Einstellungen (oder bei Bedarf zu benutzerdefinierten Admin-Seiten) hinzugefügt werden können. Bei der Verwendung von Seiten-Tabs gibt es nur sehr wenige Gründe, die WordPress-Tabs nicht zu verwenden. Wie das geht, wurde in der Einstellungs-API-Serie von Tom McFarlin hier auf Wptuts+ behandelt.

Aber was ist, wenn Sie zu viele Registerkarten benötigen? Horizontale Registerkarten lassen sich nicht besonders gut skalieren – und überlaufende Registerkarten können verwirrend und hässlich aussehen. Dieses Plugin macht einen guten Versuch, mit vielen Einstellungsseiten umzugehen - aber die Einstellungszeilen machen es immer noch überwältigend:

Nehmen wir an, dass alle diese Registerkarten notwendig sind (was sie wahrscheinlich nicht sind), dann könnten Sie entscheiden, dass vertikale Registerkarten eine geeignetere Lösung sind. Ich habe gesehen, dass einige Designs vertikale Registerkarten implementiert haben (oft schlecht), normalerweise mit ihrem eigenen Stil. Während WordPress keine vertikalen Tabs verwendet (mit Ausnahme der Hilfe-Tabs), sollten Sie Ihre Designs auf dem basieren, was Ihr zur Verfügung steht. Fühlen Sie sich frei zu experimentieren, aber versuchen Sie, es nativ zu WordPress aussehen zu lassen - es wird interessant sein zu sehen, was die Leute sich einfallen lassen.

Admin-Hinweise

WordPress hat zwei Arten von Admin-Hinweisen: allgemeine Hinweise und Fehlermeldungen – jeweils gelb und rot. Wenn Ihr Plugin dem Benutzer einen Hinweis anzeigen muss, sollten Sie je nach Kontext der Nachricht den einen oder anderen verwenden.

Die Verwendung der Benachrichtigungs-API von WordPress ist eine sehr einfache Möglichkeit, dem Benutzer ein konsistentes Erlebnis zu bieten. Ein Beispiel dafür ist:

/*
 * Admin notice nag - displays a message
 */
/* Display a notice that can be dismissed */
add_action( 'admin_notices', 'wptuts_admin_notices' );
function wptuts_admin_notices() {

	printf( '<div class="updated"> <p> %s </p> </div>', esc_html__( 'This is a yellow notice', 'plugin_domain' ) );

	printf( '<div class="error"> <p> %s </p> </div>', esc_html__( 'This is a red error warning', 'plugin_domain' ) );

}

Sie sollten selbstverständlich nur relevante Meldungen anzeigen, dh Ihre Mitteilungen bedingt nur auf bestimmten Bildschirmen und für bestimmte Benutzer anzeigen. Dazu können Sie get_current_user_id() und get_current_screen() verwenden:

function wptuts_admin_notices() {

	// Display notice if user has '_wptuts_display_notice' stored and on screen with id 'portfolio'
	$screen_id = get_current_screen()->id;
	$display_notice = get_user_meta( get_current_user_id(), '_wptuts_display_notice', true );

	if ( $display_notice && 'portfolio' == $screen_id ) {
		// Display notices
	}

}

Bei dauerhaften Benachrichtigungen sollten Sie einen Link zum Schließen einfügen, damit der Benutzer die Nachricht ausblenden kann. Wie das folgende Beispiel:

/* Conditionally display notice */
add_action( 'admin_notices', 'wptuts_persistant_notice' );
function wptuts_persistant_notice() {

	/* Check that the user hasn't already clicked to ignore the message */
	if ( ! get_user_meta( get_current_user_id(), '_wptuts_hide_notice', true ) ) {

		printf( '<div class="updated"> <p> %1$s  | <a href="%2$s"> %3$s </a> </p> </div>', __( "This is a persistent notice. To hide it click 'dismiss'", 'plugin_domain' ), esc_url( add_query_arg( 'wptus_nag', wp_create_nonce( 'wptus_nag' ) ) ), __( 'Dismiss', 'plugin_domain' ) );
	}
}

/* Hide notice */
add_action( 'admin_init', 'wptuts_hide_notice' );
function wptuts_hide_notice() {
	if ( ! isset( $_GET['wptus_nag'] ) ) {
		return;
	}

	// Check nonce
	check_admin_referer( 'wptus_nag', 'wptus_nag' );

	// updated user meta to indicate dismissed notice
	update_user_meta( get_current_user_id(), '_wptuts_hide_notice', 1 );
}

Sie können ajax auch verwenden, um Administrator-Benachrichtigungen zu verwerfen, aber Sie sollten auch einen Nicht-JavaScript-Fallback bereitstellen.

Tasten

WordPress bietet Styling für zwei „Typen“ von Schaltflächen: „primär“ und „sekundär“. Ersteres erscheint als blaue Schaltfläche und es sollte immer nur eine dieser Schaltflächen auf einer Seite vorhanden sein. Die sekundäre Taste ist eine weiße Taste. WordPress bietet einige Hilfsfunktionen zum Erstellen von Schaltflächen: get_submit_button() /submit_button()-Funktionen.

submit_button(
	__( 'Submit text', 'plugin_domain' ),
	'primary',
	'submit'
);

Links

Aktionen, die „zerstörerisch“ sind, beispielsweise ein Link, der etwas löscht, sollten rot sein. Es gibt oft Klassen, die Sie verwenden können (wie trash), die dies für Sie tun. Für andere Links legt WordPress automatisch die Farben fest und dies sollte nicht überschrieben werden.

Links zu Tabellen (wie der Posts-Tabelle) sollten die Tabelle filtern und den Benutzer nicht umleiten. Die Ausnahme sind „Aktionslinks“, die angezeigt werden, wenn Sie mit der Maus über eine Zeile fahren (z. B. die Links „Bearbeiten“ und „Papierkorb“).

Bildschirm- und Menüsymbole

Sie können (und sollten) Seitensymbole auf Ihren Admin-Seiten verwenden. Idealerweise sollten diese benutzerdefiniert sein (vermeiden Sie die Wiederverwendung derselben Symbole für verschiedene Zwecke). Um das Symbol für einen benutzerdefinierten Beitragstyp zu ändern, können Sie(bedingt) CSS im Admin-Kopf drucken, um das Standardsymbolbild zu überschreiben.

Sie müssen sicherstellen, dass Sie dies nur für die Seiten Ihres Beitragstyps tun, um Symbole auf anderen Seiten nicht zu überschreiben. Hier ist ein Beispiel dafür, wie:

<?php
// Add screen icon
add_action( 'admin_head', 'wptuts_event_screen_icon' );
function wptuts_event_screen_icon() {
	$post_type = get_current_screen()->post_type;

	if ( 'event' == $post_type ) {
		?>
		<style type="text/css">
			#icon-edit {
				background: url(<?php echo plugin_dir_url(__FILE__ ); ?>css/images/icon-32.png);
			}
		</style>
		<?php
	}
}
?>

Für benutzerdefinierte Admin-Seiten können Sie auch screen_icon() verwenden. Dadurch wird der HTML-Code für die Bildschirmsymbole gedruckt. Es braucht ein(optionales) Argument: entweder einen String (wird im ID-Attribut des Icon-Containers verwendet) oder ein Bildschirmobjekt, das verwendet wird, um ein geeignetes ID-Attribut zu erstellen. Zum Beispiel: screen_icon('myplugin'); druckt etwas wie:

1	<div id="icon-myplugin" class="icon32">
2	<br />
3	</div>

Mit dem admin_head-Hook wie oben können Sie #icon-myplugin ansprechen und ein Hintergrundbild bereitstellen.

Für benutzerdefinierte Beitragstypen kann das Menü beim Registrieren des Beitragstyps angegeben werden:

register_post_type( 'event', array(
	...
	'menu_icon' => plugin_dir_url( __FILE__ ) . 'css/images/icon-32.png';
	...
));

Für Registerkarten, die dem Menü mit add_menu_page hinzugefügt wurden, können Sie das Symbol als eines der Argumente angeben:

add_menu_page(
	__( 'Page title', 'plugin_domain' ), // Used for the title tags of the page
	__( 'Page title', 'plugin_domain' ), // Page as it appears on the menu
	'manage_options', // Capabilities to access this page
	'wptuts_custom_page_callback', // Callback which prints the content of the page
	plugin_dir_url( __FILE__ ) . 'css/images/icon-32.png'
);

Bildschirm- und Menüsymbole sollten Graustufen sein. Ein buntes Menüsymbol sticht deutlicher hervor und sieht gelinde gesagt „seltsam“ aus. Unabhängig davon, wie gut das Symbol ist, ruiniert es die Ästhetik der Admin-Seitenleiste. Schlimmer noch, ein buntes Menüsymbol sagt mir, dass Sie sich nicht darum kümmern, mit der WordPress-Benutzeroberfläche „nett zu spielen“, also vermute ich, dass der Code des Plugins auch mit WordPress nicht „nett spielt“.

Denken Sie daran, dass das Bildschirmsymbol auf drei verschiedenen Hintergründen gut funktionieren muss:

Hilfe-Tabs

Es ist immer eine gute Idee, Ihren Benutzern zusätzliche Anleitungen zu geben, falls sie diese benötigen. Die Aufnahme auf der Seite kann jedoch zu Unordnung führen (und Hilfetext ist niemals eine Alternative zum intuitiven UI-Design). Mit WordPress können Sie Inhalte zur Registerkarte „Hilfe“ hinzufügen, die oben rechts auf dem Bildschirm angezeigt wird. (Bildschirmoptionen und Hilfe-Tabs können von Benutzern oft übersehen werden, es gibt jedoch erste Diskussionen darüber, wie sie verbessert werden können. Bitte beachten Sie, dass dies nur Diskussionen sind und noch nichts entschieden wurde).

Die Möglichkeit, „kontextbezogene Hilfe“ hinzuzufügen, gibt es seit 2.7, aber seit 3.3 wurde die Registerkarte „Hilfe“ etwas überarbeitet und eine Hilfeleiste mit Registerkarten eingeführt.

Sie können Ihre eigene Registerkarte mit dem folgenden Code hinzufügen. Es ist wichtig, dass Sie die kontextbezogene Hilfe nur auf den entsprechenden Bildschirmen hinzufügen. Sie sollten auch überprüfen, ob die Methode WP_Screen::add_help_tab existiert, da sonst WordPress-Versionen vor 3.3 einen fatalen Fehler auslösen.

add_filter( 'contextual_help', 'wptuts_contextual_help', 10, 3 );
function wptuts_contextual_help( $contextual_help, $screen_id, $screen ) {

	// Only add to certain screen(s). The add_help_tab function for screen was introduced in WordPress 3.3.
	if ( $screen_id != 'screen_id' || ! method_exists( $screen, 'add_help_tab' ) )
		return $contextual_help;

	$screen->add_help_tab( array(
		'id'      => 'wptuts-overview-tab',
		'title'   => __( 'Overview', 'plugin_domain' ),
		'content' => '<p>' . __( 'Some help text here', 'plugin_domain' ) . '</p>',
	));
	return $contextual_help;
}

Tabellen

Wenn Sie Tabellen auf der Admin-Seite Ihres Plugins verwenden, ist es fast immer besser, das gleiche Styling zu verwenden, das WordPress für seine Tabellen verwendet. Das Layout und das Erscheinungsbild sind ideal für die Präsentation von Daten wie Produktverkäufen, Aktivitätsprotokollen usw. und bieten Ihren Benutzern eine konsistente Oberfläche. Wichtig ist, dass die Benutzer instinktiv erwarten, dass beim Bewegen der Maus über eine Zeile „Aktionslinks“ angezeigt werden und dass Links in den Spalten die Tabelle filtern. Haben Sie keine Angst, Ihre Tabelle an Ihre spezifischen Bedürfnisse anzupassen (Ändern der Spaltenbreite, benutzerdefinierter Stil für Bilder in der Spalte usw.) - aber es ist wichtig, Ihre Daten auf eine Weise zu präsentieren, die allgemein bekannt und intuitiv ist Ihre Benutzer.

Der bei weitem einfachste Weg, die Admin-Tabelle von WordPress zu replizieren, besteht darin, die Klasse WP_List_Table zu erweitern. Es gibt zahlreiche Artikel, die erklären, wie das geht - aber das beste "Tutorial" ist das Custom List Table Plugin, das Ihnen ein funktionierendes Beispiel liefert und unglaublich gut kommentiert ist. Seien Sie jedoch gewarnt, dass, obwohl der Codex sagt, dass die WP_List_Table-Klasse für Entwickler geeignet ist, der eigentliche Quellcode diese Klasse als „Privat“ markiert. Möglicherweise könnte WordPress die Klasse ändern – und wenn solche Änderungen passieren, müssen Sie überprüfen, ob sie Ihre Tabelle nicht zerstören.

jQuery-UI-Styling

Die gesamte jQuery-Benutzeroberfläche wird in WordPress bereitgestellt (und wenn Ihr Plugin eine verwendet, sollte es die von WordPress bereitgestellten Skripte verwenden). Leider gibt es nicht unbedingt die entsprechenden CSS-Styles. Dies bleibt derzeit den Plugins überlassen. Dies kann sich jedoch mit diesem Trac-Ticket ändern. Helen Hou Sandi, WordPress-Kernentwicklerin, hat an zwei jQuery-UI-Themen gearbeitet, die WordPress ergänzen (eines für jedes Admin-Farbschema). Es gibt keine Garantie dafür, dass dies in WordPress* ankommt – aber auf jeden Fall solltest du beide Themes herunterladen und mit deinen Plugins verwenden.

Ein Demo-Plugin kann hier heruntergeladen werden. Daraus können Sie auch die beiden Themen extrahieren:

jquery-ui-fresh.css (das standardmäßige graue Farbschema)
jquery-ui-classic.css (das blaue Farbschema)

Legen Sie diese in Ihren Plugin-Ordner. Verwenden Sie beim Registrieren von Skripten das vom Benutzer ausgewählte Thema:

add_action( 'wp_enqueue_scripts', 'wptuts_register_scripts' );
function wptuts_register_scripts() {

	if ( 'classic' == get_user_option( 'admin_color' ) ) {
		wp_register_style ( 'wptuts-plugin-jquery-ui-css', plugin_dir_url( __FILE__ ) . 'jquery-ui-classic.css' );
	} else {
		wp_register_style ( 'wptuts-plugin-jquery-ui-css', plugin_dir_url( __FILE__ ) . 'jquery-ui-fresh.css' );
	}

}

Dann können Sie wp_enqueue_style( 'wptuts-plugin-jquery-ui-css' ) aufrufen, wo Sie es brauchen (natürlich sollten Sie den Stilen ein anderes Handle geben, das für Ihr Plugin einzigartig ist). Dies allein kann einen großen Beitrag dazu leisten, Ihrem Plugin ein mit WordPress konsistentes Aussehen zu verleihen.

*Wenn es es in WordPress schafft, kannst du das oben genannte aus deinem Plugin entfernen und stattdessen das von WordPress bereitgestellte Styling verwenden.

Außerhalb des Kastens denken

Nicht alle Inhalte in WordPress sind ein Beitrag, ein Kommentar oder ein Anhang und manchmal bietet die vorhandene Benutzeroberfläche nicht das, was Sie brauchen. In diesen Fällen ist es einfach nicht angemessen, ihm die nativ vorhandenen „Post“-Strukturen aufzuzwingen. Gravity Forms ist beispielsweise ein Plugin, mit dem Sie Formulare zu Ihrer Site hinzufügen und verwalten können. Wenn sie sich auf die native WordPress-Benutzeroberfläche beschränken und Formulare beispielsweise fast wie Beiträge darstellen, wäre das Ergebnis eine schlechtere Benutzererfahrung und weniger Umsatz für Gravity Forms.

Um Ihren Benutzern die beste UX zu bieten, müssen Sie nicht einfach alles in Listen und Metaboxen stecken. Wenn Ihr Plugin Informationen auf eine Weise darstellen muss, die der nativen WordPress-Benutzeroberfläche fremd ist, können Sie kreativ werden und experimentieren. Aber wie zieht man die Grenze zwischen Kreativität und Integration in die WordPress-Benutzeroberfläche? Dies wurde in den Kommentaren von Tom zuvor erwähntem Beitrag erwähnt. Die Wahrheit ist, dass es auf das persönliche Urteilsvermögen und das Experimentieren ankommt, um zu sehen, was funktioniert. Gravitationsformen machen dies im Großen und Ganzen gut:

Auch wenn die WordPress-Benutzeroberfläche möglicherweise nicht genau das bietet, was Sie benötigen, gibt es viel, von dem Sie sich inspirieren lassen können. Wenn Sie beispielsweise möchten, dass Ihre Benutzer Elemente per Drag-and-Drop verschieben können, können Sie auf der Seite Menüs nach Anleitungen suchen. Sie sollten die Admin-Benutzeroberfläche nicht vollständig verwerfen. Einige „Prinzipien“ der Admin-Benutzeroberfläche (einige oben aufgeführt) sind übersetzbar, unabhängig davon, was Sie erreichen möchten, z. B. die Verwendung von Farben, Links, Schaltflächen und Symbolen. Und die Details sind wichtig – die richtigen Farbverläufe, Radius und Schriftarten sind wichtig, um die Konsistenz zu wahren, insbesondere wenn Sie etwas „anderes“ machen. Für das Drag-and-Drop-Beispiel möchten Sie möglicherweise den grauen Platzhalter mit einem gestrichelten Rahmen wiederverwenden.

Diese Liebe zum Detail mag schwierig erscheinen - aber es richtig zu machen ist eigentlich die faule (und in diesem Fall angemessen) Sache. WordPress fügt der Admin-Seite viel Styling hinzu – und das wird größtenteils automatisch von Ihrem Plugin übernommen. In anderen Fällen müssen Sie Ihren Elementen nur die richtigen Klassen hinzufügen.

Abschluss

Die folgenden Artikel in dieser Serie werden viel „praktischer“ sein, aber hoffentlich hat dieser Artikel einige sofortige und einfache Schritte gezeigt, um Ihren Benutzern einen konsistenteren Administrator bereitzustellen. Die hier aufgeführten Richtlinien sind in keiner Weise offiziell und auch nicht vollständig - und ich würde mich über Diskussionen und Anregungen freuen!