Cómo crear una página de panel de control personalizada de WordPress

Cómo crear una página de panel de control personalizada de WordPress

Hace unos días, me pidieron que creara una WordPress tablero para reemplazar el original. No se trataba solo de mostrar u ocultar metaboxes ya personalizados, estaba reemplazando todo el tablero. Fue la primera vez que me pidieron que hiciera algo así, así que fue bastante difícil. Como siempre, en este caso, busqué en Internet para ver si ya se había hecho algo similar. y de nuevo, sin resultado. No estoy seguro de si me equivoco al hacer preguntas específicas a Google, o si la mayoría de los tutoriales de WordPress cubren los mismos temas, pero no puedo 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. Eso es más o menos lo que quería hacer.

Después de una búsqueda rápida en los archivos principales de WordPress, encontré algunas cosas realmente buenas. Y finalmente, logré crear un panel personalizado completo al estilo de WordPress. Para hacer esto, volví a crear un complemento.

Paso 1: creación del complemento

Si ha estado leyendo mis artículos anteriores sobre WPexplorer, ahora debería saber cómo crear un complemento, pero aquí hay un repaso.

Abra la carpeta de complementos en wp-content y cree un nuevo repositorio llamado “sweet-custom-dashboard”, y dentro de esa 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 agregando este código, ya ha creado un complemento, un complemento vacío, ¡pero un complemento funcional!

Ahora necesitamos definir una constante para la URL del complemento, la 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 segundo paso, necesitamos agregar una acción que solo ocurrirá si el usuario está en la página del tablero. Para hacer esto, reemplace la función constructore con 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 se carga index.php (index.php es la página del tablero). También le pedimos a WordPress que guarde una nueva página de panel. El que usaremos en la redirección. El siguiente paso es construir la función rc_redirect_dashboard ().

Paso 3: redirección del tablero

La función rc_redirect_dashboard () es bastante simple. Su propósito es redirigir al usuario a una página personalizada cuando quiera acceder al panel predeterminado. Para hacer esto, necesitamos verificar si estamos en la pantalla correcta (leer “página”) usando la función get_current_screen (). Cuando se llama a esta función desde el gancho ‘admin_init’, devuelve NULL, eso es parte de la razón por la que conecté 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 bastante comprensible, si estamos en el administrador, y si la pantalla actual es “tablero”, entonces forzamos una redirección a un archivo llamado “custom_dashboard.php”.

Guardar la página del panel

Ahora es el momento de guardar la nueva página del panel. Para hacer esto, necesitamos agregar dos funciones: una para guardar la página en el menú de WordPress y otra para llenar la página con 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 tablero personalizado.

Paso 4: creación del panel personalizado

Cuando creé este complemento, quería que el nuevo panel estuviera en el estilo de WordPress, por lo que mi punto de partida fue la página que ves cuando inicias sesión por primera vez después de una actualización importante. Revisé el código de esta página en busca de 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, agregando esta única línea ahora puede usar cualquier variable de WordPress o cualquier función.

Las otras dos cargas útiles require_once () requeridas se han clasificado para mostrar correctamente admin.

Todo lo que tenemos que hacer es crear el contenido de nuestro panel personalizado. El siguiente código está inspirado en el archivo mencionado anteriormente, por lo que es posible que deba modificarlo un poco para satisfacer 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, necesitamos cargar el pie de página del administrador de WordPress. Para hacer esto, simplemente use esta línea en la parte inferior del archivo:

<?php include( ABSPATH . 'wp-admin/admin-footer.php' );

Y es todo ! 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 una verificación adicional para mostrar el panel personalizado solo para ciertos roles de usuario …

Bueno, espero que hayas disfrutado de este tutorial y no puedo esperar a 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.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir arriba