Vor ein paar Tagen wurde ich gebeten, ein Custom zu erstellen WordPress Dashboard, um das Original zu ersetzen. Es wurden nicht nur bereits benutzerdefinierte Metaboxen angezeigt oder ausgeblendet, sondern das gesamte Dashboard ersetzt. Dies war das erste Mal, dass ich gebeten wurde, so etwas zu tun, also war es ziemlich herausfordernd. Wie immer habe ich in diesem Fall im Internet nachgesehen, ob schon etwas Ähnliches gemacht wurde. und wieder kein ergebnis. Ich weiß nicht, ob ich schlecht darin bin, Google-spezifische Dinge zu fragen, oder ob die meisten WordPress-Tutorials dieselben Themen behandeln, aber ich konnte nichts finden.
Dann erinnere ich mich, dass es seit WordPress 3.x eine neue Seite gibt, sobald wir uns nach einem Update zum ersten Mal anmelden. Das ist mehr oder weniger das, was ich machen wollte.
Nach einer kurzen Suche in WordPress-Kerndateien habe ich wirklich tolle Sachen gefunden. Und schließlich habe ich es geschafft, ein ganzes benutzerdefiniertes Dashboard im WordPress-Stil zu erstellen. Dazu habe ich wieder ein Plugin erstellt.
Schritt 1: die Plugin-Erstellung
Wenn Sie meine vorherigen Beiträge zu WPexplorer gelesen haben, sollten Sie jetzt wissen, wie Sie ein Plugin erstellen, aber hier ist eine Erinnerung.
Öffnen Sie den Ordner plugins unter wp-content und erstellen Sie ein neues Repository namens «sweet-custom-dashboard», und erstellen Sie in diesem Ordner eine neue Datei namens «sweet-custom-dashboard.php». Öffnen Sie dann die Datei.
Um das Plugin zu deklarieren, fügen Sie einfach diesen Code zur Datei hinzu:
<?php
/*
Plugin Name: Sweet Custom Dashboard
Plugin URL: http://remicorson.com/sweet-custom-dashboard Description: A nice plugin to create your custom dashboard page
Version: 0.1
Author: Remi Corson
Author URI: http://remicorson.com Contributors: corsonr
Text Domain: rc_scd
*/
Nur durch das Hinzufügen dieses Codes haben Sie bereits ein Plugin erstellt, ein leeres Plugin, aber ein funktionierendes Plugin!
Jetzt müssen wir eine Konstante für die Plugin-URL definieren, die wir später brauchen. Fügen Sie diesen Code hinzu:
/*
|--------------------------------------------------------------------------
| CONSTANTS
|--------------------------------------------------------------------------
*/
// plugin folder url
if(!defined('RC_SCD_PLUGIN_URL')) {
define('RC_SCD_PLUGIN_URL', plugin_dir_url( __FILE__ ));
}
Jetzt ist es an der Zeit, die Hauptklasse unseres Plugins zu erstellen:
/*
|--------------------------------------------------------------------------
| MAIN CLASS
|--------------------------------------------------------------------------
*/
class rc_sweet_custom_dashboard {
/*--------------------------------------------*
* Constructor
*--------------------------------------------*/
/**
* Initializes the plugin
*/
function __construct() {
} // end constructor
}
// instantiate plugin's class
$GLOBALS['sweet_custom_dashboard'] = new rc_sweet_custom_dashboard();
Schritt 2: Der Konstruktor
In Schritt zwei müssen wir eine Aktion hinzufügen, die nur ausgeführt wird, wenn sich der Benutzer auf der Dashboard-Seite befindet. Ersetzen Sie dazu die Funktion Konstruktor durch diesen Code:
function __construct() {
add_action('admin_menu', array( &$this,'rc_scd_register_menu') );
add_action('load-index.php', array( &$this,'rc_scd_redirect_dashboard') );
} // end constructor
Indem wir diesen Code hinzufügen, teilen wir WordPress mit, dass wir die Funktion rc_get_screen() laden möchten, wenn index.php geladen wird (index.php ist die Dashboard-Seite). Wir weisen WordPress auch an, eine neue Dashboard-Seite zu registrieren. Diejenige, die wir in der Umleitung verwenden werden. Der nächste Schritt ist die Konstruktion der Funktion rc_redirect_dashboard().
Schritt 3: die Dashboard-Umleitung
Die Funktion rc_redirect_dashboard() ist ziemlich einfach. Sein Ziel ist es, den Benutzer auf eine benutzerdefinierte Seite umzuleiten, wenn er auf das Standard-Dashboard zugreifen möchte. Dazu müssen wir mit der Funktion get_current_screen() prüfen, ob wir uns auf dem richtigen Bildschirm befinden (lesen Sie «Seite»). Wenn diese Funktion vom ‚admin_init‘-Hook aufgerufen wird, gibt sie NULL zurück. Das ist zum Teil der Grund, warum ich rc_dashboard_redirection() an «load-index.php» angehängt habe. Hier der Inhalt der Funktion:
function rc_scd_redirect_dashboard() {
if( is_admin() ) {
$screen = get_current_screen();
if( $screen->base == 'dashboard' ) {
wp_redirect( admin_url( 'index.php?page=custom-dashboard' ) );
}
}
}
Dieser Code ist ziemlich verständlich, wenn wir uns im Admin befinden und der aktuelle Bildschirm «dashboard» ist, dann erzwingen wir eine Umleitung auf eine Datei namens «custom_dashboard.php».
Registrieren der Dashboard-Seite
Es ist jetzt an der Zeit, die neue Dashboard-Seite zu registrieren. Dazu müssen wir zwei Funktionen hinzufügen: eine zum Registrieren der Seite im WordPress-Menü und eine zum Ausfüllen der Inhaltsseite:
function rc_scd_register_menu() {
add_dashboard_page( 'Custom Dashboard', 'Custom Dashboard', 'read', 'custom-dashboard', array( &$this,'rc_scd_create_dashboard') );
}
function rc_scd_create_dashboard() {
include_once( 'custom_dashboard.php' );
}
Wenn Sie die Datei gespeichert haben, das Plugin aktivieren und versuchen, auf das Dashboard zuzugreifen, sollten Sie eine leere Seite oder eine 404-Meldung sehen. Wir können unser benutzerdefiniertes Dashboard erstellen.
Schritt 4: Die benutzerdefinierte Dashboard-Erstellung
Als ich dieses Plugin erstellt habe, wollte ich das neue Dashboard im WordPress-Stil haben, deshalb war mein Ausgangspunkt die Seite, die Sie sehen, wenn Sie sich nach einem Core-Update zum ersten Mal anmelden. Ich bin den Code dieser Seite durchgegangen, um Inspiration zu finden.
Erstellen Sie zunächst eine neue Datei namens «custom_dashboard.php» in Ihrem sweet-custom-dashboard-Ordner. Öffne es und füge diesen Code hinzu:
<?php
/**
* Our custom dashboard page
*/
/** WordPress Administration Bootstrap */
require_once( ABSPATH . 'wp-load.php' );
require_once( ABSPATH . 'wp-admin/admin.php' );
require_once( ABSPATH . 'wp-admin/admin-header.php' );
?>
Die erste Funktion require_once() lädt WordPress. Durch Hinzufügen dieser einfachen Zeile können Sie nun beliebige WordPress-Variablen oder Funktionen verwenden.
Die beiden anderen require_once() Ladedateien werden benötigt um die Administration richtig anzuzeigen.
Jetzt müssen wir nur noch den Inhalt unseres benutzerdefinierten Dashboards erstellen. Der folgende Code ist von der zuvor erwähnten Datei inspiriert, weshalb Sie ihn möglicherweise ein wenig an Ihre Bedürfnisse anpassen müssen. In meinem Beispiel möchte ich nur ein Menü mit 3 Links, die als Registerkarten angezeigt werden, und zwei Absätzen, einmal mit einem Bild. Hier ist der Code:
<div class="wrap about-wrap">
<h1><?php _e( 'Welcome to My Custom Dashboard Page' ); ?></h1>
<div class="about-text">
<?php _e('Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.' ); ?>
</div>
<h2 class="nav-tab-wrapper">
<a href="#" class="nav-tab nav-tab-active">
<?php _e( 'Step 1' ); ?>
</a><a href="#" class="nav-tab">
<?php _e( 'Step 2' ); ?>
</a><a href="#" class="nav-tab">
<?php _e( 'Step 3' ); ?>
</a>
</h2>
<div class="changelog">
<h3><?php _e( 'Morbi leo risus, porta ac consectetur' ); ?></h3>
<div class="feature-section images-stagger-right">
<img src="<?php echo esc_url( admin_url( 'images/screenshots/theme-customizer.png' ) ); ?>" class="image-50" />
<h4><?php _e( 'Risus Consectetur Elit Sollicitudin' ); ?></h4>
<p><?php _e( 'Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui.' ); ?></p>
<h4><?php _e( 'Mattis Justo Purus' ); ?></h4>
<p><?php _e( 'Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.' ); ?></p>
</div>
</div>
</div>
Nichts wirklich Interessantes an diesem Code, es ist nur HTML-Code.
Und zum Schluss müssen wir noch die WordPress-Administrations-Fußzeile laden. Dazu einfach diese Zeile am Ende der Datei:
<?php include( ABSPATH . 'wp-admin/admin-footer.php' );
Und das ist es ! Das Plugin funktioniert jetzt großartig, es gibt natürlich viele Möglichkeiten, es zu verbessern, zum Beispiel könnten Sie benutzerdefinierte Stylesheets und benutzerdefinierte Javascript-Dateien hinzufügen oder Sie könnten eine zusätzliche Überprüfung hinzufügen, um das benutzerdefinierte Dashboard nur für einige Benutzerrollen anzuzeigen…
Nun, ich hoffe, Ihnen hat dieses Tutorial gefallen und ich freue mich darauf, Ihre Kommentare im Kommentarbereich zu lesen!
Eine weitere Sache, es gibt eine bereits kompilierte Version des Plugins im offiziellen WordPress-Plugin-Repositoryn klicken Sie hier um es herunterzuladen.