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.

 

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!

 

 

// Añadimos un enlace y un submenú con tres opciones
function link_simple_toolbars($wp_admin_bar) {
    $link = array(
        'id' => __('Opciones2'), // Identificador único
        'title' => __('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ÑA'),
        'href'  => __('http://midominio.com/resetear-contrasena/'),
        'meta'  => array(
            'title' => __('RESETEAR CONTRASEÑ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 '';
}
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' => __('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 '';
}
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' => __('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!