Editando elementos del area de administración

Cómo personalizar la barra de administración de 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 (o 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:

// 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, por ejemplo. 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:

// 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:

// 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):

// 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)

Cómo añadir enlaces con iconos en la barra de administración

Además de enlaces simples, podemos añadir también iconos para simplificar o vestir estos enlaces de la barra de administración.

Iconos WordPress

Dashicons, los iconos de WordPress 3.8

Por ejemplo, si quisiéramos utilizar la familia de iconos que vienen por defecto con WordPress desde la versión 3.8 (Dashicons), solo tendríamos que cambiar la opción “title” de los ejemplos anteriores para que incluya el código necesario. Después, con CSS, especificamos qué imagen nos interesa:

/*
 * Función para añadir iconos en la barra de administración
 */
function prefix_link_with_icons_in_toolbar($wp_admin_bar) {
    $args = array(
        'id' 	=> 'mi-link', // Identificador
        'title' => '<span class="ab-icon"></span> Mi nuevo enlace', // Texto e icono del enlace
        'href' 	=> 'http://www.ejemplo.com/', // URL de destino
        'meta' 	=> array('class' => 'mi-clase') // Clase para poder editar los estilos
        );
    $wp_admin_bar->add_node($args);
}
add_action( 'admin_bar_menu', 'prefix_link_with_icons_in_toolbar', 100 ); // 25, si queremos que salga en primera posición

/*
 * Estilos para el nuevo enlace
 */
function prefix_toolbar_styles() {
	echo '<style>#wp-toolbar .mi-clase .ab-icon:before { content: "\f463"; top: 2px; }</style>';
}
add_action( 'admin_head', 'prefix_toolbar_styles' );

La ventaja de utilizar los iconos que ya vienen con el sistema es que así no tenemos que cargar nada extra, pero si preferimos añadir una imagen nueva, podemos cambiar la etiqueta span de la linea 7 del código anterior por esta:

'title' => '<img src="URL_DE_LA_IMAGEN" alt="" /> Mi nuevo enlace',

¿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.

La 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 de funciones, 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, por ejemplo, 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 no es complicado 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, con o sin iconos (editar para configurar los detalles)

Descargar plugin: Toolbar personalizado (ZIP, 2 KB)

Más información y artículos relacionados

Comentarios

  1. Parece que solamente sirve para la barra en el backend.

  2. luis

    Hola, veo que eres un gran entendido en diseño y en lo que a wordpress se refiere. Yo estoy enpezando y te quería consultar si existealguna guia para aprender a usarlo. No se como cambiar el nombre de un menú entre otras cosas que me ocurren. un saludo y gracias

  3. Daniel

    @luis: Lo mejor yo diría que es empezar por el Codex. La versión en español la encontrarás aquí: http://codex.wordpress.org/es:Main_Page

    Después de eso, lo más importante es practicar mucho y aprender de cada problema.

    WordPress hoy en día es tan popular que es difícil encontrarse con algún problema que no esté documentado por alguién en Internet.

  4. mattinsalto

    Muy bueno, muchas gracias por compartirlo.
    Por cierto, sabes si hay alguna API para esconder otros elementos del dashboard. Ahora mismo estoy escondiendo elementos con ayuda de jQuery, pero lo hago modificando las páginas del core, por lo que cualquier cambio que haga se perderá con la siguiente actualización.

    A Eric, decirle que a mi me funciona tanto en el backend como el frontend.

  5. Daniel

    Eliminar widgets del dashboard, por ejemplo, se puede hacer fácilmente con “wp_dashboard_setup”, sin tener que tocar ningún archivo del core.

    Aquí encontrarás un ejemplo: http://www.wprecipes.com/how-to-programatically-remove-wordpress-dashboard-widgets

    Esto elimina completamente la posibilidad de activar y desactivar los widgets (como enlaces entrantes, noticias sobre WordPress, plugins recientes, etc), que normalmente no interesan en el caso de webs para clientes.

    Otro artículo muy completo sobre cómo personalizar el area de administración: http://sixrevisions.com/wordpress/how-to-customize-the-wordpress-admin-area/

  6. Josean

    Hola Daniel. He instaldo tu fantástico plugin en la página que estoy creando con el Theme Inove modificado por mí y el WP 3.3.2 y al activar tu plugin me sale el siguiente mensaje:

    “El plugin ha generado 3 caracteres de salida inesperada durante la activación. Si te sale el mensaje de advertencia “headers already sent” (cabeceras ya enviadas), problemas con las feeds u otros problemas, prueba a desactivar o eliminar este plugin.”

    Y al cerrar sesión como administrador el siguiente mensaje:

    Warning: Cannot modify header information – headers already sent by (output started at C:\Domains\afi-iae.es\wwwroot\blog\wp-content\plugins\toolbar-personalizado.php:1) in C:\Domains\afi-iae.es\wwwroot\blog\wp-login.php on line 349

    Warning: Cannot modify header information – headers already sent by (output started at C:\Domains\afi-iae.es\wwwroot\blog\wp-content\plugins\toolbar-personalizado.php:1) in C:\Domains\afi-iae.es\wwwroot\blog\wp-login.php on line 361

    Felicitaciones por tu trabajo y un Saludo de Josean.

  7. Daniel

    Hola Josean.
    Muchas gracias!

    He hecho pruebas instalando el plugin con la misma configuración que estás usando tú (WordPress 3.3.2 + Tema Inove) y no me da ningún problema.

    Se me ocurren dos soluciones:

    1. Prueba a poner la función o funciones que necesitas directamente en el archivo ‘functions.php’. Este plugin son solo unas funciones de ejemplo, así que no perderás ninguna funcionalidad.

    2. El error apunta a la primera linea del archivo ‘toolbar-personalizado.php’. Lo más probable es que haya algún espacio antes de los signos de apertura de php. Aquí lo explican:

    http://codex.wordpress.org/FAQ_Troubleshooting#How_do_I_solve_the_Headers_already_sent_warning_problem.3F

    A ver si esto te resuelve el problema.

  8. Luis Feo

    Saludos. Tengo un gran problema con la admin bar que me tiene desesperado. Hice un upgrade de mi sitio a la versión 3.3 y dicha barra dejo de ser funcional. No tiene menúes. Solo se ve una barra marrón. ¿Cómo se le pueden hacer visibles los items del menú?.

  9. Daniel

    Hmm, si no funciona la barra puede ser, por ejemplo, porque no hay memoria suficiente para cargar los scripts (típico en algunos servidores compartidos). Hace poco me pasó con la web de un cliente.

    También puede ser simplemente porque hay algún plugin que crea conflictos con el javascript. Podrías probar desactivando algunos plugins y ver qué tal.

  10. david

    y si quiero que mi barra personalizada tamibén salga cuando NO está logueado uno???

  11. Daniel

    La barra de administración de WordPress es solo para usuarios registrados. No tendría sentido que cualquier visita viera una barra con accesos para editar páginas, añadir contenidos, moderar comentarios, etc. en una web que no es suya, no?

    En ese caso, lo suyo sería crear una barra propia y darle la forma y contenido necesario.

  12. johan

    Gracias amigo… tu info me ha serido muchisimo… Salu2…

  13. edi

    Muchas gracias, muy interesante.

  14. Diego

    Buenas , quisiera saber si la informacion se puede editar por tipo de usuario.

  15. Daniel

    Hola Diego. Se me ocurre que se podrían utilizar condicionales junto con “get_currentuserinfo()“, para poder diferenciar la información que se presenta a cada usuario. Por ejemplo:

    global $current_user;
    get_currentuserinfo();
    $usuario = $current_user-&gt;user_login;
    if ($usuario === 'Mi-Nombre') {
    echo 'Tu nombre de usuario es ' . $usuario;
    } else {
    echo 'Tu nombre de usuario NO es ' . $usuario;
    }
    
  16. alejandro

    @ David

    Se a lo q te referis.
    La barra tambien aparece cuando uno esta deslogeado… aparecen dos links registrarse y logearte..

    Agrega estas 2 lineas:
    $wp_admin_bar->remove_menu(‘bp-register’);
    $wp_admin_bar->remove_menu(‘bp-login’);

    En este caso yo puse en vez de wp (wordpress)
    puse bp (buddy press)

    Saludos!

  17. hola gracias por la ayuda pero si queriero hacer un menu sencillo con target _blank como hago asi

                ‘target’ => ‘_blank’, // Destino (“_blank” abrirá el enlace en una página o pestaña nueva)

    pero no me funciona :(

  18. Daniel

    @charlescuellar: Sí, definiendo ‘target’ como ‘_blank’ abrirá el enlace en otra pestaña. Pero fíjate que esto hay que especificarlo dentro de la matriz (array) de ‘meta’, junto con el atributo ‘title’ y ‘class’, no en la matriz principal.

    Si no funciona, hazlo al revés: copia el código de ejemplo tal como está aquí y ves eliminando lo que no necesites hasta que veas dónde falla.

    Acabo de hacer una prueba con WordPress 3.5.1 y funciona bien, tanto con links directos como con target: blank.

  19. Viktor

    Hola, muy buen articulo. Yo quisiera saber porqué no me aparece la barra admin cuando estoy en la página web, fuera del admin, y que me permitía ir del admin a la web rápidamente…

  20. Daniel

    @ Viktor:
    La barra de administración solo aparece cuando uno está conectado y tiene marcada la opción de activarla que hay en:

    Usuarios > Usuario > “Muestra la barra de herramientas en el sitio”.

    Es decir, es una opción que depende de la configuración de cada usuario registrado: por ejemplo, un administrador puede querer ver la barra, mientras que un editor no.

    Si uno no está conectado con su cuenta de WordPress o bien no ha marcado esa opción (viene activada por defecto), la barra no aparecerá.

  21. Todo Juego

    Muy bueno, me sirvió. Aunque no pude cambiar el logo de la barra me conformo con el primer paso.

  22. Dannypid

    Hola,

    Esta muy bien y me ha servido para añadir menus a mi barra, pero considero que más que texto es recomendable utilizar iconos, pero… ¿como añado una imagen 32×32 a la barra?, lo he probado todo, pero no hay manera.

  23. Daniel

    Para añadir iconos en la barra puedes incluir el código en la opción TITLE. Acabo de actualizar esta entrada con ejemplos utilizando los iconos de Dashicons de WordPress 3.8. Échale un vistazo.

Y tú qué opinas?

Las URLs se convertirán en enlaces automáticamente. Tu dirección de email no se publicará ni se utilizará para enviar ningún tipo de información. Los mensajes que no aporten nada al tema que se trata en esta entrada se borrarán. Las imágenes que aparecen al lado de cada autor utilizan el servicio de Gravatar. Recuerda que puedes usar etiquetas HTML como <a href>, <code>, <em> o <strong> en los comentarios.

(necesario)

(opcional)