Hace unos días, me pidieron que creara una WordPress tablero para reemplazar el original. No solo mostraba u ocultaba metaboxes ya personalizados, estaba reemplazando todo el tablero. Esta fue la primera vez que me pidieron que hiciera algo así, así que fue bastante desafiante. Como siempre, en este caso, busqué en Internet para ver si ya se había hecho algo similar. y una vez más, sin resultado. No sé si soy malo preguntando cosas específicas a Google, o si la mayoría de los tutoriales de WordPress tratan sobre los mismos temas, pero no pude encontrar nada.
Entonces, recuerdo que desde WordPress 3.x, hay una nueva página una vez que iniciamos sesión por primera vez después de una actualización. Esto es más o menos lo que quería hacer.
Después de una búsqueda rápida en los archivos centrales de WordPress, encontré cosas realmente geniales. Y finalmente, logré crear un panel personalizado completo al estilo de WordPress. Para hacerlo, una vez más creé un complemento.
Paso 1: la creación del complemento
Si leíste mis publicaciones anteriores en WPexplorer, ahora deberías saber cómo crear un complemento, pero aquí hay un recordatorio.
Abra la carpeta de complementos en wp-content y cree un nuevo repositorio llamado «sweet-custom-dashboard», y dentro de esta carpeta cree un nuevo archivo llamado «sweet-custom-dashboard.php». Luego abre el archivo.
Para declarar el complemento, simplemente agregue este código al archivo:
<?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
*/
Solo al agregar este código, ya creó un complemento, un complemento vacío, ¡pero un complemento que funciona!
Ahora, necesitamos definir una constante para la URL del complemento, lo necesitaremos más adelante. Agrega este código:
/*
|--------------------------------------------------------------------------
| CONSTANTS
|--------------------------------------------------------------------------
*/
// plugin folder url
if(!defined('RC_SCD_PLUGIN_URL')) {
define('RC_SCD_PLUGIN_URL', plugin_dir_url( __FILE__ ));
}
Ahora es el momento de crear la clase principal de nuestro complemento:
/*
|--------------------------------------------------------------------------
| 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();
Paso 2: el constructor
En el paso dos, necesitamos agregar una acción que ocurrirá solo si el usuario está en la página del tablero. Para hacerlo, reemplace la función constructore por este código:
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
Al agregar este código, le estamos diciendo a WordPress que queremos cargar la función rc_get_screen () cuando index.php está cargado (index.php es la página del tablero). También le estamos diciendo a WordPress que registre una nueva página de panel. El que usaremos en la redirección. El siguiente paso es la construcción de la función rc_redirect_dashboard ().
Paso 3: la redirección del tablero
La función rc_redirect_dashboard () es bastante simple. Su objetivo es redirigir al usuario a una página personalizada cuando quiera acceder al panel predeterminado. Para ello, tenemos que comprobar si estamos en la pantalla correcta (leer «página») utilizando la función get_current_screen (). Cuando esta función se llama desde el gancho ‘admin_init’, devuelve NULL, eso es en parte por qué enganché rc_dashboard_redirection () a «load-index.php». Aquí está el contenido de la función:
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' ) );
}
}
}
Este código es muy comprensible, si estamos en el administrador, y si la pantalla actual es «tablero», forzamos una redirección a un archivo llamado «custom_dashboard.php».
Registro de la página del panel
Ahora es el momento de registrar la nueva página del panel. Para hacer esto, necesitamos agregar dos funciones: una para registrar la página en el menú de WordPress y otra para completar la página de contenido:
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' );
}
Si guardó el archivo, active el complemento e intente acceder al tablero, debería ver una página en blanco o un mensaje 404. Podemos crear nuestro panel de control personalizado.
Paso 4: la creación del panel personalizado
Cuando creé este complemento, quería que el nuevo panel tuviera el estilo de WordPress, por eso mi punto de partida fue la página que ves cuando inicias sesión por primera vez después de una actualización principal. Revisé el código de esta página para encontrar inspiración.
Para comenzar, cree un nuevo archivo llamado «custom_dashboard.php» en su carpeta sweet-custom-dashboard. Ábrelo y agrega este código:
<?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' );
?>
La primera función require_once (), carga WordPress, al agregar esta línea simple, ahora puede usar cualquier variable de WordPress o cualquier función.
Los otros dos require_once () cargar deben archivarse para mostrar correctamente la administración.
Todo lo que tenemos que hacer ahora es crear el contenido de nuestro panel personalizado. El código a continuación está inspirado en el archivo mencionado anteriormente, por eso es posible que deba ajustarlo un poco para que se ajuste a sus necesidades. En mi ejemplo, solo quiero un menú con 3 enlaces que se mostrarán como pestañas y dos párrafos, una vez que incluya una imagen. Aquí está el código:
<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>
No hay nada realmente interesante en este código, es solo código HTML.
Y finalmente, tenemos que cargar el pie de página de administración de WordPress. Para hacerlo, solo esta línea en la parte inferior del archivo:
<?php include( ABSPATH . 'wp-admin/admin-footer.php' );
Y eso es ! El complemento ahora funciona muy bien, por supuesto, hay muchas formas de mejorarlo, por ejemplo, puede agregar hojas de estilo personalizadas y archivos javascript personalizados, o puede agregar alguna verificación adicional para mostrar el panel personalizado solo para algunos roles de usuario …
Bueno, espero que hayas disfrutado de este tutorial, ¡y espero leer tus comentarios en la sección de comentarios!
Una cosa más, hay una versión ya compilada del complemento en el repositorio oficial de complementos de WordPress. haga clic aquí para descargarlo.