Agregar menú y opciones en el panel de admin en WordPress

En este artículo os voy a mostrar cómo crear menús en el panel de admin en WordPress.

 
Al personalizar el menu admin en WordPress, podemos crear nuevos menús y opciones de la forma que queramos. Requiere un poco de trabajo pero es una buena forma de personalizar la barra de herramientas en WordPress, dándole un toque ideal y distinguido frente a otros sitios WP.
 
En la siguiente imágen se pueden ver enmarcadas en rojo los nuevos menús y las nuevas opciones que vamos a añadir a nuestra barra admin bar en WordPress.

Agregar opciones en la barra de admin bar de WordPress

 

La personalización de la barra de menú de admin bar en WordPress puede servir para ofrecer proyectos WordPress personalizados a clientes.

 
En nuestra nueva barra de administración de WordPress vamos a añadir las opciones de:

  • Entrar en la Zona de Usuario. Con las sub-opciones:

 

 

    • Perfil de usuario
    • editar el perfil de usuario
    • Resetear contraseña

 

 

Y otras dos opciones en el menú:

  • Contactar
  • Salir.

También añadiremos iconos a las nuevas opciones en admin bar de WordPress. Podremos utilizar los dashicons que lleva integrados WordPress, o también los iconos de FontAwesome.

Solo tendremos que cambiar la opción “title” del código anterior y poner el código del icono deseado.
 

 

Ahora si. ¿Cómo añadir nuevos elementos a la barra de admin de WordPress?

 

– Simplemente hemos de editar nuestro archivo functions.php y añadir el siguiente código.

– Por supuesto hemos de cambiar los enlaces a midominio.com (opción “href“) por los enlaces personalizados en cada uno de nuestros casos.

– También podeis editar el campo “title“, y añadir los items del menú que necesitéis.

– También pueden cambiarse los iconos.

– Podéis ver que este código añade __ delante de los arrays. Puede ser utilizado junto al plugin de traducción WPML. De esta forma el addon “string translation” de WPML puede reconocer estas cadenas y permitir su traducción.

 

Dicho y explicado todo esto, aquí tenéis la forma de agregar opciones en admin bar de WordPress!

 

 

Espero que os sea de mucha utilidad. Y no seais malos… Compartid!

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
// Añadimos un enlace y un submenú con tres opciones
function link_simple_toolbars($wp_admin_bar) {
    $link = array(
        'id' => __('Opciones2'), // Identificador único
        'title' => __('<span class="ab-icon"></span>ZONA DE USUARIO'), // Texto e icono del enlace
        'href' => __('http://midominio.com/login/'), // URL de destino (si no queremos que apunte a ningún sitio, podemos dejarlo en blanco)
        'meta' => array('class' => 'mi-clases') // Clase del elemento
        );
 
 
    $sublink1 = array(
        'id'    => __('sublink11'), // Identificador único
        'parent' => __('Opciones2'), // Identificador del elemento superior
        'title' => __('Perfil de usuario'), // Título del enlace
        'href'  => __('http://midominio.com/wp-admin/profile.php'), // URL de destino
        'meta'  => array(
            'title' => __('Perfil de usuario'), // Atributo "title" del enlace
            'target' => '_self', // Destino ("_blank" abrirá el enlace en una página o pestaña nueva)
            'class' => 'mi_link' // Clase del elemento
            )
        );
 
 
   $sublink2 = array(
        'id'    => __('sublink22'),
        'parent' => __('Opciones2'), // Identificador del elemento superior
        'title' => __('MODIFICAR PERFIL'),
        'href'  => __('http://midominio.com/editar-perfil-usuario/'),
        'meta'  => array(
            'title' => __('MODIFICAR PERFIL'),
            'target' => '_self',
            'class' => 'mi_link'
            )
        );
 
 
   $sublink3 = array(
        'id'    => __('sub-linkk33'),
        'parent' => __('Opciones2'), // Identificador del elemento superior
        'title' => __('RESETEAR CONTRASE&amp;Ntilde;A'),
        'href'  => __('http://midominio.com/resetear-contrasena/'),
        'meta'  => array(
            'title' => __('RESETEAR CONTRASE&amp;Ntilde;A'),
            'target' => '_self',
            'class' => 'mi_link'
            )
        );
 
    $wp_admin_bar->add_node($link);
    $wp_admin_bar->add_node($sublink1);
    $wp_admin_bar->add_node($sublink2);
	$wp_admin_bar->add_node($sublink3);
}
 
add_action('admin_bar_menu', 'link_simple_toolbars', 80); // 25 = En la primera posición (justo después del logo)
 
 
 
/*
 * Estilos para el nuevo enlace
 */
function prefix_toolbar_styles7() {
    echo '<style>#wp-toolbar .mi-clases .ab-icon:before { content: "\f110"; top: 2px; }</style>';
}
add_action( 'admin_head', 'prefix_toolbar_styles7' );
 
 
 
/*
 * Función para añadir nueva opción con icono en la barra de administración
 */
function prefix_link_with_icons_in_toolbar6($wp_admin_bar) {
    $args = array(
        'id'    => __('mi-linkkk'), // Identificador
        'title' => __('<span class="ab-icon"></span>CONTACTA'), // Texto e icono del enlace
        'href'  => __('http://midominio.com/contacto/'), // URL de destino
        'meta'  => array('class' => 'mi-clase3') // Clase para poder editar los estilos
        );
    $wp_admin_bar->add_node($args);
}
add_action( 'admin_bar_menu', 'prefix_link_with_icons_in_toolbar6', 100 ); // 25, si queremos que salga en primera posición
 
 
/*
 * Estilos para el nuevo enlace, y código para el icono.
 */
function prefix_toolbar_stylesss() {
    echo '<style>#wp-toolbar .mi-clase3 .ab-icon:before { content: "\f348"; top: 2px; }</style>';
}
add_action( 'admin_head', 'prefix_toolbar_stylesss' );
 
 
 
/*
 * Función para añadir nueva opción e icono en la barra de administración
 */
function prefix_link_with_icons_in_toolbar7($wp_admin_bar) {
    $args = array(
        'id'    => __('salir'), // Identificador
        'title' => __('<span class="ab-icon"></span>SALIR'), // Texto e icono del enlace
        'href'  => __('http://midominio.com/?a=logout'), // URL de destino
        'meta'  => array('class' => 'mi-clase4') // Clase para poder editar los estilos
        );
    $wp_admin_bar->add_node($args);
}
add_action( 'admin_bar_menu', 'prefix_link_with_icons_in_toolbar7', 100 ); // 25, si queremos que salga en primera posición

 
Bueno el código es bastante extenso y podéis recortarlo para simplemente añadir una opción por ejemplo, o modificarlo para añadir otras diferentes.
 

 

Si te ha sido útil, no dudes en compartirlo!