WordPress
add_menu_page ()
Buscar..
Introducción
Esta función es para agregar un elemento en la barra de navegación del panel de administración.
Sintaxis
- add_menu_page ($ page_title, $ menu_title, $ capacidad, $ menu_slug, $ function, $ icon_url, $ position)
Parámetros
Parámetro | Detalles |
---|---|
$ page_title | (cadena) El texto que se mostrará en las etiquetas de título de la página cuando se seleccione el menú. |
$ menu_title | (cadena) El texto que se utilizará para el menú. |
$ capacidad | (cadena) La capacidad requerida para que este menú se muestre al usuario. |
$ menu_slug | (cadena) El nombre del slug para referirse a este menú por (debe ser único para este menú). |
$ función | (callable) (opcional) La función que se llamará para generar el contenido de esta página. |
$ icon_url | (cadena) (opcional) La URL del icono que se utilizará para este menú. |
$ posición | (int) (opcional) La posición en el orden del menú debería aparecer. |
Observaciones
Aquí hay una lista de las posiciones predeterminadas (para $ posición)
- 2 - Dashboard
- 4 - Separador
- 5 - Mensajes
- 10 - Medios
- 15 - Enlaces
- 20 - Páginas
- 25 - Comentarios
- 59 - Separador
- 60 - Apariencia
- 65 - Complementos
- 70 - Usuarios
- 75 - Herramientas
- 80 - Configuraciones
- 99 - Separador
Agregar el elemento "Título de la página del tema" a la barra de navegación
Código
function add_the_theme_page(){
add_menu_page('Theme page title', 'Theme menu label', 'manage_options', 'theme-options', 'page_content', 'dashicons-book-alt');
}
add_action('admin_menu', 'add_the_theme_page');
function page_content(){
echo '<div class="wrap"><h2>Testing</h2></div>';
}
Salida
Explicación
En el código, creamos una función llamada add_the_theme_page
y usamos add_menu_page
para agregar el elemento a la barra de navegación. Verifique la parte de parámetros en esta página para conocer los argumentos que pasamos. Luego usamos add_action
para ejecutar nuestra función add_the_theme_page
. Finalmente, creamos la función page_content
para mostrar los contenidos en la página.
OOP y cómo cargar scripts / estilos en la página del menú
<?php
/*
* Plugin Name: Custom Admin Menu
*/
class SO_WP_Menu {
private $plugin_url;
public function __construct() {
$this->plugin_url = plugins_url( '/', __FILE__ );
add_action( 'plugins_loaded', array( $this, 'init' ) );
}
public function init() {
add_action( 'admin_menu', array( $this, 'add_menu' ) );
}
public function add_menu() {
$hook = add_menu_page(
'My Menu', // Title, html meta tag
'<span style="color:#e57300;">My Menu</span>', // Menu title, hardcoded style
'edit_pages', // capability
'dummy-page-slug', // URL
array( $this, 'content' ), // output
null, // icon, uses default
1 // position, showing on top of all others
);
add_action( "admin_print_scripts-$hook", array( $this, 'scripts' ) );
add_action( "admin_print_styles-$hook", array( $this, 'styles' ) );
}
public function content() {
?>
<div id="icon-post" class="icon32"></div>
<h2>Dummy Page</h2>
<p> Lorem ipsum</p>
<?php
}
# Printing directly, could be wp_enqueue_script
public function scripts() {
?><script>alert('My page');</script><?php
}
# Enqueing from a CSS file on plugin directory
public function styles() {
wp_enqueue_style( 'my-menu', $this->plugin_url . 'my-menu.css' );
}
}
new SO_WP_Menu();
Lo que es importante tener en cuenta en este ejemplo es que, al usar add_menu_page()
, devuelve un add_menu_page()
que puede usarse para apuntar a nuestra página exacta y cargar estilos y secuencias de comandos allí.
Un error común es poner en cola sin segmentar y eso derrama los scripts y los estilos en todo /wp-admin
.
Usando OOP podemos almacenar variables comunes para ser usadas entre métodos internos.