Personalize sua Admin Bar no WordPress.org

Siga o Blog no Facebook e no Twitter

Admin BarUma das grandes novidades do WordPress 3.1 foi com certeza a Admin Bar. Confesso que no início não gostei dela e não via grande utilidade, porém depois de usar ela por algum tempo, pude observar como ela realmente pode ajudar com várias tarefas no dia a dia como blogueiro.

Hoje vamos ver como personalizar ela usando alguns códigos no arquivo functions.php de seu tema.
Para encontrar este arquivo realize o login em seu blog, depois no menu “Aparências” clique em “editar”, surge uma nova tela, dentro dela temos finalmente “Funções do tema (functions.php)” .
Os códigos devem ser inseridos a baixo da tag “<?php” onde inicia o código PHP do seu arquivo.

Admin Bar no canto de baixo da tela:

É possível tirar a Admin Bar do topo do blog e colocar no rodapé, para isso acrescente o seguinte código no arquivo functions.php.

function admin_bar_rodape() {
echo '
<style type="text/css">
body {margin-top:-28px;padding-bottom:28px;}
body.admin-bar #wphead {padding-top:0;}
body.admin-bar #footer {padding-bottom:28px;}
#wpadminbar {top:auto !important;bottom:0;}
#wpadminbar .quicklinks .menupop ul {bottom:28px;}
</style>';
}
add_action( 'admin_head', 'admin_bar_rodape' );
add_action( 'wp_head', 'admin_bar_rodape' );

Remover a Admin Bar de todo o blog:

O Marcos Lemos já tinha ensinado um código para isso em um primeiro post sobre a Admin Bar, porém vou ensinar aqui um código um pouco mais limpo e menor para remove-lá:

add_filter( 'show_admin_bar', '__return_false' );

Remover botões da Admin Bar:

É possível excluir elementos da Admin Bar, como a parte de comentários, aparências e etc.

Veja o exemplo:

function remove_item_admin_bar() {
global $wp_admin_bar;
$wp_admin_bar->remove_menu('appearance');
}
add_action( 'wp_before_admin_bar_render', 'remove_item_admin_bar' );

Aqui removemos o menu “Aparência” da Admin Bar.

Para remover outros elementos é preciso conhecer seus IDs e aqui estão alguns:

my-account: Remove a opção que mostra sua conta, usa este ID em seu blog caso você não use opção de habilitar gravatar;
my-account-with-avatar
: Remove o link da sua conta, este aqui é para quem usas gravatar no blog;
my-blogs: Para quem usa WordPress multi-sites pode usar esta opção para remover o botão “Meus Sites”;
get-shortlink: Remove o botão “URL encurtado”;
edit: Remove a opção “Editar posts”;
new-content: Remove o menu “Adicionar Novo”;
new-post: Remove a opção “Post” do menu “Adicionar Novo”;
new-page: Remove a opção “Página” do menu “Adicionar Novo”;
comments: Remove o botão “Comentários”;
appearance: Remove o menu “Aparência”;
widgets: Remove a opção “Widgets” do menu “Aparência”;
menus: Remove a opção “Menus” do menu “Aparência”;
updates: Remove o botão que notifica sobre atualizações;
stats: Remove o botão do plugin WordPress.com Stats, este plugin cria um botão para mostrar dados sobre os visitantes.

É possível excluir mais de um elemento de uma vez da Admin Bar, para isso basta duplicar a linha:

$wp_admin_bar->remove_menu('SEU-ID-AQUI');

Veja o exemplo excluindo as opções “URL encurtada”, “Comentários” e “Atualizações”:

function remove_item_admin_bar() {
global $wp_admin_bar;
$wp_admin_bar->remove_menu('get-shortlink');
$wp_admin_bar->remove_menu('comments');
$wp_admin_bar->remove_menu('updates');
}
add_action( 'wp_before_admin_bar_render', 'remove_item_admin_bar' );

Remova o campo de busca da Admin Bar:

Para remover o campo de busca da sua barra basta acrescentar o seguinte código:

function no_search_admin_bar() {
echo '
<style type="text/css">
form#adminbarsearch {display:none;visibility:hidden;}
</style>';
}
add_action( 'admin_head', 'no_search_admin_bar' );
add_action( 'wp_head', 'no_search_admin_bar' );

Acrescente botões em seu Admin Bar:

Para acrescentar um novo botão é bem simples, basta usar o seguinte código:

function new_btn_admin_bar() {
global $wp_admin_bar;
if ( !is_super_admin() || !is_admin_bar_showing() )
return;
$wp_admin_bar->add_menu( array(
'id' => 'menu_botao,
'title' => __( 'Meu Novo Menu'),
'href' => 'http://www.ferramentasblog.com/' ) );
}
add_action('admin_bar_menu', 'new_btn_admin_bar', 11);

Com este código você pode criar botões do jeito que preferir, basta ficar atento com os seguinte campos:
id: Neste campo coloque um nome sem espaços que será o ID único do seu botão;
title: Este é o nome do menu, altere como bem entender;
href: Aqui você coloca o link para o seu botão.

O numero “11” que destaquei em vermelho, significa onde o botão irá aparecer, este valor faz com que ele apareça depois do primeiro menu, que fica seu gravatar.

Desta forma é possível acrescentar quantos botões você quiser, basta apenas repetir a parte:

$wp_admin_bar->add_menu( array(
'id' => 'menu_botao',
'title' => __( 'Meu Novo Menu'),
'href' => 'http://www.ferramentasblog.com/' ) );

Veja um exemplo de com dois botões:

function new_btn_admin_bar() {
global $wp_admin_bar;
if ( !is_super_admin() || !is_admin_bar_showing() )
return;
$wp_admin_bar->add_menu( array(
'id' => 'botao_fb',
'title' => __( 'Ferramentas Blog'),
'href' => 'http://www.ferramentasblog.com/' ) );
$wp_admin_bar->add_menu( array(
'id' => 'botao_fb_twitter',
'title' => __( 'Twitter Ferramentas Blog'),
'href' => 'http://twitter.com/ferramentasblog' ) );
}
add_action('admin_bar_menu', 'new_btn_admin_bar', 11);

Mais botões na Admin Bar

Criando menus Drop-Down na Admin Bar:

Para criar menus do tipo Drop-Down na Admin Bar é bem simples também, sendo bem semelhante com o processo para inserir um novo botão.
Veja o código:

function new_menu_admin_bar() {
global $wp_admin_bar;
if ( !is_super_admin() || !is_admin_bar_showing() )
return;
$wp_admin_bar->add_menu( array(
'id' => 'meu_menu',
'title' => __( 'Ferramentas Blog'),
'href' => FALSE ) );
$wp_admin_bar->add_menu( array(
'parent' => 'meu_menu',
'title' => __( 'Blog'),
'href' => 'http://www.ferramentasblog.com/' ) );
$wp_admin_bar->add_menu( array(
'parent' => 'meu_menu',
'title' => __( 'Twitter'),
'href' => 'http://twitter.com/ferramentasblog' ) );
$wp_admin_bar->add_menu( array(
'parent' => 'meu_menu',
'title' => __( 'Facebook'),
'href' => 'http://www.facebook.com/BlogFerramentasBlog' ) );
}
add_action('admin_bar_menu', 'new_menu_admin_bar', 12);

Este código funciona da seguinte maneira:

Aqui seguimos o raciocino do código para inserir um botão colocando “id”, “title” e “href”, porém o valor do “href” esta como False para que este botão não tenha link.
Agora que foi criado o botão criamos os itens deste menu, para isso precisamos usar agora o valor “parent” no lugar de “id”. Isso quer dizer que o valor que for atribuído ao “id” do botão deve ser igual para todos os “parent” dos itens do menu.

No menu exemplo o “id” ficou como “meu_menu“, desta forma repare que em todos os “parent” que vem em seguida tem o mesmo valor.

Desta forma é possível acrescentar o numero que quiser de menus e itens dentro destes menus.

Veja o exemplo de como ficou o menu:

Admin Bar Menu Personalizado

Artigos Relacionados a códigos no WordPress.org:

Fontes em inglês:

FBlogHost - Hospede seu Blog

8 Comentários

  1. Marcos me da uma ajuda aqui por favor ,rsrs.
    Como faz pra traduzir um tema se puder faz um tuto . Vlw .

    Responder

      • Realmente merece um post isso dai, existe dois jeitos de se fazer, vou ver de falar de uma forma prática para todos entender.
        Se der certo até final de semana ou no final de semana que vem escrevo sobre isso.

        Responder

  2. Pingback: Wordpress 3.3: Customize o logo e link da nova Admin Bar | [ Ferramentas Blog ]

  3. muito bons teus posts cláudio. Demonstra que você realmente saca das functions do wp. Tá ajudango a configurar meu site e criar autonomia no meu aprendizado a partir de tuas ideias.

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.