En este artículo os voy a mostrar cómo agregar opciones en menú admin bar de WordPress.

En la siguiente imágen podeis ver enmarcadas en rojo 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.

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' => __('<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&Ntilde;A'),
        'href'  => __('http://midominio.com/resetear-contrasena/'),
        'meta'  => array(
            'title' => __('RESETEAR CONTRASE&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!

 


Etiquetas del articulo:


Suscríbete para acceder a la zona privada

Suscribiéndote a la lista de correo de El Taller del Bit conseguirás entrar a la zona privada de descargas con materiales exclusivos (ebooks, artículos privados, plugins, descargas de exámenes resueltos ...)

Gracias. Te has suscrito con éxito!