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

Hace unos días, me pidieron que creara un panel de WordPress personalizado 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 abra el archivo.

Para declarar el complemento, simplemente agregue este código al archivo:


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 se carga index.php (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, por eso en parte 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», 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 tablero estuviera en 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:

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:

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:


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.