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

Responder a Diseño web Valladolid Cancelar la respuesta

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)

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.