A barra de administração do WordPress, para quem não sabe, é uma pequena barra escura que se encontra no topo do website e da administração assim que um usuário se encontra logado. Essa barra contém, além do logotipo do WordPress com links para vários sites de ajuda, atalhos para criação de conteúdo como posts e páginas, além de outras informações relevantes ao usuário. Esta barra pode ser desativada por usuário, a partir do perfil de cada um, no entanto existem vários plugins que a desativam completamente para todos os usuários.

Este tipo de plugins é muito usado pelos desenvolvedores que desativam a barra quando constroem sites para os seus clientes. Em alguns casos, a presença da barra de administração pode trazer benefícios concretos para o administrador do site; no entanto, quando falamos de portais ou websites com sistema de cadastro, ter a barra de administração tal como ela é nativamente pode se tornar inconveniente e não traz mais valia.

Neste artigo iremos aprender a customizar a barra de administração do WordPress (recentemente renomeada “Barra de Ferramentas”) alterando-se os links, colocando um logotipo próprio e, no fundo, torná-la uma ferramenta útil para este tipo de websites.

Explorando o código

No WordPress encontramos a class PHP WP_Admin_Bar responsável pela barra de administração, que se encontra no arquivo:

wp-includes/class-wp-admin-bar.php

Esta classe se inicia com a instanciação do método initialize(), que analiza se o usuário está ativado e faz as próprias verificações para saber se a barra foi desligada nas opções do usuário. Além disso, imprime no cabeçalho através da action hook wp_head o código JS e CSS necessário para que a barra apareça.

<?php
class WP_Admin_Bar {
...
public function initialize() {
...
do_action( 'admin_bar_init' );
...
}
public function add_node( $args ) {
...
}
final public function get_node( $id ) {
...
}
final public function get_nodes() {
...
}
final public function add_group( $args ) {
...
}
public function remove_node( $id ) {
...
}
public function add_menus() {
...
do_action( 'add_admin_bar_menus' );
...
}

}

Repare que a classe tem dois métodos muito importantes. O método get_node() e o método remove_node() são muito importantes para nós, pois possibilitam a remoção de links existentes e igualmente a criação de novos links.

As action hooks da barra de adminsitração

O método add_menus() tem substancialmente chamadas à função add_action() através da action hook admin_bar_menu e no final corre as funções agregadas à hook add_admin_bar_menus. Estas são as duas action hooks mais importantes, no entanto só iremos usar a hook admin_bar_menu para customizar a nossa barra.

Customizar a barra de administração

Como descrito em cima, iremos usar as action hooks para customizar a nossa barra de administração. Começaremos por criar um arquivo de plugin (ou usar o functions.php do seu tema, o que desaconselho quando se trata de realizar alterações no WordPress) onde iremos incluir as nossas funções que serão chamadas quando as action hook agregadas forem corridas.

1. Removendo elementos da barra

Para remover os elementos da barra, iremos usar o método remove_node da nossa classe. Assim, criaremos uma função que será chamada pela action hook admin_bar_menu. Esta função irá chamar o método remove_menu para todos os elementos nativos que se encontram na barra de administração:

<?php

function alterar_admin_bar( $admin_bar ) {

// Remove o logotipo
$admin_bar->remove_menu( 'wp-logo' );

// Remove o menu suspenso de adição de novo conteúdo
$admin_bar->remove_node( 'new-content' );

// Remove o link para editar a página atual
$admin_bar->remove_menu( 'edit' );

// Remove o notificador de atualizações
$admin_bar->remove_menu( 'updates' );

// Remove o menu de pesquisa
$admin_bar->remove_menu( 'search' );

// Remove o balão de comentários
$admin_bar->remove_menu( 'comments' );

// Remove o menu suspenso com o nome do site
$admin_bar->remove_node( 'site-name' );

// Remove o menu suspenso da conta do usuário
$admin_bar->remove_node( 'my-account' );

return $admin_bar;

}
// Adicionamos a chamada à action hook com um valor de posição alto
// de maneira a não correr o risco desta função processar-se antes
// dos elementos estarem completamente carregados.
add_action( 'admin_bar_menu', 'alterar_admin_bar', 99 );

Neste momento, temos uma barra de administração vazia, sem nenhum elemento. Isto quer dizer que estamos prontos para adicionar os nossos próprios elementos.

2. Adicionando elementos à barra

Agora que a nossa barra de administração está limpa dos elementos indesejados (que no caso do nosso exemplo são todos), vamos adicionar através do método add_node novos elementos customizados. Para isso, vamos extender a nossa função para adicionar os novos elementos. O método add_node aceita como argumento um array com os seguintes parâmetros:

'id' - identificador CSS para o no do menu
'title' - titulo a dar ao no, que ira aparecer no menu
'parent' - identificador do no pai, caso se queira mostrar este no como um submenu desse menu
'href' - o link do menu. Poderá passar o valor falso caso queira que o nó seja um texto e não um link
'group' - caso queira agregar este no a um grupo do menu, criado com o metodo <em>add_group()</em>
'meta' - qualquer atributo HTML tal como class ou style podera ser passado aqui

Sabendo os parâmetros, podemos criar os nossos elementos. Vamos começar por criar um elemento simples, que irá mostrar o título e a descrição do website com um link para a homepage:

<?php
// Adicionar a descrição do website
$toolbar->add_node( array(
'id'    => 'description',
'title' => get_bloginfo( 'name' ) . ' - ' . get_bloginfo( 'description' ),
'href'  => site_url(),
'meta'  => array(
'class' => 'description',
),
)
);

O resultado daquele código é o mostrado na imagem abaixo. Viu como é interessante? Então vamos adicionar mais elementos.

Ter uma barra só com essa informação não é interessante para nenhum site. Ela tem que conter algo de realmente útil. Que tal fornecer um link de login e registo para seus usuários? O código seguinte mostra como é fácil fazer isso. No entanto, para manter a barra coesa, vamos acrescentar esses links do lado direito da barra. Para isso teremos que acrescentar o parâmetro parent usado no método add_node() passando o valor top-secondary:

// Adicionar links para login e registo

// Vamos guardar numa variável o link para a homepage
// desta forma ao passarmos esta URL na função
// wp_login_url(), após o login retorna à homepage
// em vez de ir parar à administração
$redirect = site_url();

$admin_bar->add_menu( array(
'id'    => 'register',
'parent'=> 'top-secondary',
'title' => 'Não tem login? Registe-se!',
'href'  => wp_login_url( $redirect ) . '?action=register',
'meta'  => array(
'class' => 'link-register',
),
)
);

$admin_bar->add_menu( array(
'id'    => 'login',
'parent'=> 'top-secondary',
'title' => 'Faça Login',
'href'  => wp_login_url( $redirect ),
'meta'  => array(
'class' => 'link-login',
),
)
);

O resultado da adição dos links é a seguinte:

No entanto, se um usuário já estiver logado não vale a pena mostrar estes dois links. O ideal seria mostrar uma mensagem de boas-vindas com uma ligação para o perfil do usuário e um link para o usuário poder fazer logout. Vamos, então, dentro da função fazer um teste condicional através da função is_user_logged_in() que irá retornar verdade se o usuário existir e estiver logado no sistema. Sendo assim, iremos alterar o código para o seguinte:

// Link da homepage para ser usado nas funções
// wp_login_url e wp_logout_url
$redirect = site_url();

// Verifica se o usuário está logado
if ( is_user_logged_in() ) :

// Este é um pequeno hack necessário para
// podermos usar o nome do nome do usuário
global $current_user;
get_currentuserinfo();

// Vamos adicionar uma mensagem de boas-vindas e
// um link para o usuário poder fazer logout
$admin_bar->add_menu( array(
'id'    => 'welcome',
'parent'=> 'top-secondary',
'title' => sprintf( 'Bem-vindo %s', $current_user->display_name ),
'href'  => admin_url( 'profile.php' ),
'meta'  => array(
'class' => 'link-profile',
),
)
);

$admin_bar->add_menu( array(
'id'    => 'logout',
'parent'=> 'top-secondary',
'title' => 'Logout',
'href'  => wp_logout_url( $redirect ),
'meta'  => array(
'class' => 'link-logout',
),
)
);

else :

// O usuário não está logado
// Adicionar links para login e registo

$admin_bar->add_menu( array(
'id'    => 'register',
'parent'=> 'top-secondary',
'title' => 'Não tem login? Registe-se!',
'href'  => wp_login_url( $redirect ) . '?action=register',
'meta'  => array(
'class' => 'link-register',
),
)
);

$admin_bar->add_menu( array(
'id'    => 'login',
'parent'=> 'top-secondary',
'title' => 'Faça Login',
'href'  => wp_login_url( $redirect ),
'meta'  => array(
'class' => 'link-login',
),
)
);

endif;

E obtemos esta barra se o usuário estiver logado:

Estilizar a barra mudando as cores

A escolha de uma cor escura na escala de cinza para a barra de administração é óbvia: cinza escuro é uma cor neutra que pode-se afirmar “vai bem com todas as outras cores”. No entanto, o que por vezes pode parecer óbvio pode também não ser satisfatório para algumas pessoas. Se você quiser conferir à barra de administração um maior impacto, é certo que você terá que fazer algumas alterações no look. Como seria de esperar, também podemos alterar as cores da barra e não é uma tarefa muito dificil, basta usarmos a action hook wp_head.

Facilmente conseguimos atingir este resultado, injetando código CSS para o cabeçalho do website. O seguinte código é responsável por produzir este resultado. Você poderá facilmente adaptá-lo para o seu website:

function alterar_admin_bar_head() {
?>
<style type="text/css">
#wpadminbar,
#wp-admin-bar-root-default,
#wp-admin-bar-top-secondary {
background: #D6433B !important;
}
#wpadminbar li {
border: 0 !important;
}
#wpadminbar li.hover,
#wpadminbar li.hover a {
background: #D6433B !important;
}
#wpadminbar li a {
color: #fff;
font-size: 15px;
border-color: #FAB5B1 !important;
text-shadow: 0 1px 0 #666;
}
</style>
<?php
}
add_action( 'wp_head', 'alterar_admin_bar_head' );

Como pode ver na imagem, o primeiro elemento da barra tem também o ícone da Escola WordPress. Isto é feito passando ao parâmetro title do método add_node() o código HTML com uma imagem. Segue o trecho a ser alterado:

'title' => '<img src="'.plugins_url( 'bg-credit.png', __FILE__ ).'" style="height: 20px; padding: 4px 10px 0 0; float: left;" /> ' . get_bloginfo( 'name' ) . ' - ' . get_bloginfo( 'description' ),

Customizar elementos nativos

Todos os elementos nativos da barra de administração encontram-se no arquivo:

wp-includes/admin-bar.php

Cada um numa única função que é chamada na construção da barra. Se quiser usar algum dos elementos nativos, mas necessita de realizar algumas ou mais alterações, ou simplesmente você pretende usar o seu código como base para um desenvolvimento mais complexo, aconselho a copiar o código da função relativo a esse elemento e criar uma nova função através de um plugin modificando a seu gosto. No final, basta adicionar o nó tal como descrito em cima.

Download do código

Faça o download do código deste tutorial aqui: Download do código

Deixe as suas dúvidas e sugestões como comentário. Até breve!