crear menus en el panel de administracion de WordPress


Vamos a ver un ejemplo sencillo de como crear menus en el panel de administracion de WordPress o como crear vuestros menus de administracion.

Crear un menu en WordPress es bastante sencillo lo complicado es saber que poner en el y el fin.

Existen varias formas de hacerlo, lo puedes poner en un plugin, lo puedes poner en un tema, y luego lo puedes hacer con clases o con funciones sueltas. Dependera de la situacion en la que estes, por sencillez lo vamos a ver con funciones sueltas y os dejare una clase basica tambien.

Para que vale tener un menu de administracion en WordPress

Si quereis poder personalizar o tener vuestras propias paginas de configuracion para vuestro plugin o vuestro tema esta es la mejor solucion.  Si lo que quereis es hacer un tema personalizado con muchos campos siempres podeis ayudaros de algun framework como option tree o option framework theme.  En mi caso me gusta mas option tree de Valentin me permite crear listas automaticamente.

 

Crear un Menu en WordPress

Para esto usaremos la funcion add_menu_page()  que nos provee la api de WordPress

add_menu_page ( string $page_title, // titulo de la pagina a mostrar
                string $menu_title, // titulo del menu 
                string $capability, // permisos 
                string $menu_slug, // url unica 
                callable $function = '', // funcion que contiene el codigo que queremos pintar
                string $icon_url = '', // icono que queramos poner ver dashicons
                int $position = null // posicion en la lista
 )

Crear un subMenu en WordPress

En este caso para crear una subopcion de tu menu utilizaremos la funcion add_submenu_page().

add_submenu_page ( string $parent_slug, // nombre opcion padre
                   string $page_title, // titulo se vera en la pagina
                   string $menu_title, // opcion menu
                   string $capability, // tipo permisos administrator, editor,..
                   string $menu_slug, // ruta que tendra
                   callable $function = ''  // funcion que pinta la informacion a mostrar
)

 

 

Ejemplo en codigo de ambas opciones para que veais las diferencias

add_menu_page( 
         __( 'Simple', 'simple-wp' ),
         __( 'Simple', 'simple-wp' ), 
         'administrator', 
         'simplewp',
         'simple_dashboard'
);
// subpagina
add_submenu_page( 'simplewp',
                    __( 'Ingresos', 'simple-wp' ),
                    __( 'Ingresos', 'simple-wp' ), 
                   'administrator', 'simplewp-ingresos',
                   'simple_ingresos' 
);    

Puesto que “Ingresos” es una subpagina de “Simple” lo primero que ponemos es el nombre de la opcion principal. Lo siguiente son el nombre pagina y el nombre de la opcion, seguido por los permisos , ruta y por ultimo la llamada a la funcion de callback que es la que nos va a pintar la informacion.

La ruta sera algo asi url  http://dev.dcg.com/wp-admin/admin.php?page=simplewp-ingresos  como veis tenemos $menu-slug como simplewp

ejemplo-pagina-admin-WordPress

 

Esta seria la funcion de callback simple_ingresos() que pintar la informacion de la foto anterior

<?php
function simple_ingresos() {
?>
	<div class="wrap">
		<h2><?php _e( 'Listado de Ingresos', 'simple-wp' ); ?></h2>
		<p> Esto es un ejemplo de pagina del panel de administración de WordPress </p>
		
	</div>
<?php
}

 

Aqui os dejo la referencia oficial de la parte de menus en Españo de la web de WordPress.org

Referencia oficial en español

 

Como veis crear opciones de menu y pantallas es realmente sencillo.

 

 

Ejemplo de codigo si lo hicieramos en una clase yo tengo un fichero que se llama simple.php y que hago un require_once en mi plugin

 

<?php
class Simple_WP_Admin_Menu {
	public function __construct() {
		add_action( 'admin_menu', array( $this, 'register_menus' ) );
	}
	public function register_menus() {
		add_menu_page( __( 'Simple', 'simple-wp' ), __( 'Simple', 'simple-wp' ), 'administrator', 'simplewp', 'simple_dashboard');
		add_submenu_page( 'simplewp', __( 'Ingresos', 'simple-wp' ), __( 'Ingresos', 'simple-wp' ), 'administrator', 'simplewp-ingresos', 'simple_ingresos' );	
	}
}
$simplewp_menu = new Simple_WP_Admin_Menu;

 

Ejemplo de una funcion del plugin donde hago los includes, como es una pantalla backend vereis que solo la llama si es administracion.

 

private function includes() { 
		 
		require_once SIMPLEWP_PLUGIN_DIR . 'includes/class-db.php';
		require_once SIMPLEWP_PLUGIN_DIR . 'includes/class-orders-db.php';
                requere_once SIMPLEWP_PLUGIN_DIR . 'includes/class-ingresos-db.php';
	        require_once SIMPLEWP_PLUGIN_DIR . 'includes/class-capabilities.php';
		if( is_admin() ) {
		
			 require_once SIMPLEWP_PLUGIN_DIR . 'includes/admin/class-menu.php';
                         require_once SIMPLEWP_PLUGIN_DIR . 'includes/admin/dashboard/dashboard.php';
			 require_once SIMPLEWP_PLUGIN_DIR . 'includes/admin/orders/orders.php';
			 require_once SIMPLEWP_PLUGIN_DIR . 'includes/admin/ingresos/ingresos.php';
		}
	   
	   require_once SIMPLEWP_PLUGIN_DIR . 'includes/class-templates.php';
	   require_once SIMPLEWP_PLUGIN_DIR . 'includes/install.php';
		 
}