Skip to content

Cómo personalizar la nueva barra de herramientas en WordPress

La actualización a WordPress 3.3 incluye, entre otras cosas, un cambio importante en el area de administración, una nueva barra de herramientas (Toolbar) que combina la barra de administración de la versión 3.1 (the Admin bar) y la cabecera. Desde esta barra podemos acceder rápidamente a algunas páginas internas e información, como accesos para crear nuevo contenido, comentarios o actualizaciones disponibles.

Esta nueva barra se puede personalizar. Es un lugar perfecto para añadir elementos, ahora llamados nodos (nodes), que pueden contener otros nodos agrupados en submenús, como enlaces personalizados, accesos directos, etc., aunque para personalizarla necesitaremos editar algo de código.

En principio no se recomienda eliminarla por completo (ver nota ampliada más abajo). Es mejor ajustarla a nuestras necesidades a través de reglas CSS y enlaces personalizados.

Vamos a ver algunos ejemplos para conseguirlo:

Cómo eliminar elementos de la barra de herramientas

Para desactivar alguno de los elementos o nodos que WordPress 3.3 instala por defecto tenemos que crear una nueva función especificando qué enlaces queremos suprimir. El código, como siempre, lo podemos añadir al archivo functions.php de nuestro tema activo o añadirlo a un plugin que nos ayude a ajustar esta funcionalidad.

Utilizando el código del siguiente ejemplo tal como está, nos quedará una barra totalmente vacía (a excepción del nombre de la web). Para personalizar los elementos que queremos conservar basta comentar (añadir “//”) delante de las lineas que nos interesen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// Eliminamos elementos del nuevo toolbar en WP 3.3
function eliminar_nodos_admin_bar() {
global $wp_admin_bar;
$wp_admin_bar->remove_menu('wp-logo'); // Elimina el logo de WordPress (desaparece también todo el submenú)
$wp_admin_bar->remove_menu('about'); // Elimina el enlace "Sobre WordPress"
$wp_admin_bar->remove_menu('wporg'); // Elimina el enlace a wordpress.org
$wp_admin_bar->remove_menu('documentation'); // Elimina el enlace a la documentación oficial (Codex)
$wp_admin_bar->remove_menu('support-forums'); // Elimina el enlace a los foros de ayuda
$wp_admin_bar->remove_menu('feedback'); // Elimina el enlace "Sugerencias"
$wp_admin_bar->remove_menu('view-site'); // Elimina el submenú que aparece al pasar el cursor sobre el nombre de la web
$wp_admin_bar->remove_menu('comments'); // Elimina el acceso directo a los comentarios
$wp_admin_bar->remove_menu('updates'); // Elimina el icono de notificación de actualizaciones
$wp_admin_bar->remove_menu('new-content'); // Elimina el menú para generar nuevo contenido
$wp_admin_bar->remove_menu('my-account'); // Elimina el acceso a la cuenta de usuario y al enlace para desconectarse
}
add_action('wp_before_admin_bar_render', 'eliminar_nodos_admin_bar');

Cómo cambiar el aspecto visual de la barra

Podemos adaptar el backend del sistema a nuestro gusto o a los colores de la marca del cliente, for example. Con esta función podremos cambiar el logo del sistema en WordPress 3.3, cambiar el color de fondo de la barra, el color de los elementos y cualquier otro detalle al que se pueda acceder mediante CSS.

Las funciones que existían hasta ahora para eliminar o cambiar el logo de WordPress no sirven en esta nueva versión. El logo tiene clases CSS nuevas y los bloques HTML donde se inserta también han cambiado. En el siguiente ejemplo tendremos que cambiar la ruta en la linea 3 por la correspondiente en cada caso:

1
2
3
4
5
6
7
8
9
10
11
// Editamos el aspecto visual de la barra
function personalizar_aspecto_toolbar() {
$adminlogo = '/images/adminlogo.png'; // Especificar ruta (tamaño = 20 x 20 px)
echo '<style>
#wpadminbar { background: #1B3E6E !important; }
#wp-admin-bar-wp-logo > .ab-item .ab-icon {
background-image: url('.get_bloginfo('template_directory').$adminlogo.') !important;
background-position: 0 0;
}
</style>'; }
add_action('admin_head', 'personalizar_aspecto_toolbar');

Cómo añadir un enlace simple a la barra de administación

Los ejemplos que he visto en otras páginas utilizan el método “add menu“, sin embargo en la documentación de WordPress se recomienda utilizar la función add_node() para añadir elementos a la barra de herramientas:

1
2
3
4
5
6
7
8
9
10
11
// Añadir un enlace simple con la función "add_node"
function link_simple_toolbar($wp_admin_bar) {
$args = array(
'id' => 'mi-link', // Identificador único
'title' => 'Mi nuevo enlace', // Título del enlace
'href' => 'http://miweb.com/mi-pagina/', // URL de destino
'meta' => array('class' => 'mi-clase') // Clase del elemento
);
$wp_admin_bar->add_node($args);
}
add_action('admin_bar_menu', 'link_simple_toolbar', 100); // 25, si queremos que salga el primero

Cómo añadir elementos agrupados a la barra de administación

Para incorporar nuevos elementos a esta barra tendremos que crear otra función especificando los títulos y enlaces que queremos añadir. Podemos crear un submenú con diferentes opciones anidadas e incluso ampliarlo hasta donde queramos.

Lo importante en este caso es que los elementos “hijos” hagan referencia al identificador del elemento superior (parent):

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
// Añadimos un enlace y un submenú con dos opciones
function link_simple_toolbar($wp_admin_bar) {
$link = array(
'id' => 'mi-link', // Identificador único
'title' => 'Nuevo enlace', // Título del enlace
'href' => '#', // URL de destino (si no queremos que apunte a ningún sitio, podemos dejarlo tal cual)
'meta' => array('class' => 'mi-clase') // Clase del elemento
);
$sublink1 = array(
'id' => 'mi-sublink1', // Identificador único
'parent' => 'mi-link', // Identificador del elemento superior
'title' => 'Nuevo sublink 1', // Título del enlace
'href' => 'http://www.google.es/', // URL de destino
'meta' => array(
'title' => __('Titulo para este link'), // Atributo "title" del enlace
'target' => '_blank', // Destino ("_blank" abrirá el enlace en una página o pestaña nueva)
'class' => 'mi_link_item_class' // Clase del elemento
)
);
$sublink2 = array(
'id' => 'mi-sublink2',
'parent' => 'mi-link', // Identificador del elemento superior
'title' => 'Nuevo sublink 2',
'href' => 'http://www.google.es/',
'meta' => array(
'title' => __('Titulo para este link'),
'target' => '_blank',
'class' => 'mi_link_item_class'
)
);
$wp_admin_bar->add_node($link);
$wp_admin_bar->add_node($sublink1);
$wp_admin_bar->add_node($sublink2);
}
add_action('admin_bar_menu', 'link_simple_toolbar', 100); // 25 = En la primera posición (justo después del logo)
?>

¿Es posible desactivar la barra por completo?

No sin importantes esfuerzos. Algunos filtros como “show_admin_bar” ya no sirven en WordPress 3.3 para desactivar la barra. A diferencia de la anterior “Admin bar”, ahora no se incluye una manera para eliminarla en el backend del sistema (solo en el frontend, a través de las opciones de cada usuario, ya que ahí no es imprescindible). Tampoco funcionarán por tanto algunos plugins que ocultaban esta barra.

The justificación de los desarrolladores para no permitir la desactivación de este elemento es que ahora se combina con la cabecera (header) del sistema e incluye funciones importantes para el usario, como la posibilidad de cerrar sesión o documentación de utilidad para el usuario, por lo que se recomienda no eliminarla completamente.

Aun así, hay plugins que ya permiten eliminar la barra por completo:

Creamos un plugin para tenerlo todo a mano

Para no cargar nuestro archivo functions.php, en este caso sería buena idea crear un plugin para meter todos estos fragmentos de código y facilitar así la edición. Además, al cambiar de un tema a otro, nuestros ajustes permanecerán intactos.

En realidad, crear un plugin básico es muy fácil, aunque en este caso se podría completar, for example, con una página de opciones para editar fácilmente los detalles.

Este plugin no pretende ser una solución de instalar y listo. Es necesario adaptarlo a las necesidades de cada uno, pero es muy fácil hacer modificaciones siguiendo las instrucciones y comentarios incluidos.

Personalizando un poco el código del plugin podremos:

  • Eliminar algunos elementos por defecto (solo hay que editar los comentarios para activar y desactivar cada uno)
  • Cambiar el color de fondo de la barra (editar para modificar el color)
  • Cambiar el logo de WordPress por la imagen que especifiquemos
  • Añadir enlaces nuevos con o sin submenús (editar para configurar los detalles)

 

SOURCE: http://www.danielnabil.com/blog/como-personalizar-barra-herramientas-wordpress-3-3/