Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Como adicionar links de atalho personalizados à barra de ferramentas do WordPress

Você gostaria de personalizar a barra de ferramentas de administração do WordPress?

A barra de administração contém links úteis para algumas das páginas de administração mais usadas. No entanto, talvez você queira adicionar seus próprios atalhos para as páginas que mais usa ao trabalhar no site.

Neste artigo, mostraremos como adicionar links de atalho personalizados à barra de ferramentas de administração do WordPress.

How to Add Custom Shortcut Links to WordPress Admin Toolbar

Por que adicionar links de atalho personalizados à barra de ferramentas de administração do WordPress?

Sempre que estiver conectado ao seu site WordPress, você notará uma barra de ferramentas na parte superior da tela. Essa é a barra de ferramentas de administração do WordPress ou barra de administração.

Há algumas maneiras de assumir o controle da barra de administração do WordPress, como desativá-la ao visualizar o site e desativá-la para todos os usuários, exceto os administradores.

Por padrão, a barra de ferramentas exibe um conjunto de links para telas de administração específicas que se encontram na barra lateral de administração. Esses links permitem que você execute rapidamente tarefas administrativas comuns.

Mas todo mundo tem sua própria lista de links favoritos que visita com frequência ao escrever posts ou trabalhar em seu site. Eles podem ser páginas em sua área de administração ou links para um recurso, serviço ou site externo.

Você pode adicioná-los à barra de ferramentas do WordPress como links de atalho personalizados. Dessa forma, você e seus usuários podem acessá-los facilmente no site ou na área de administração. Isso é especialmente útil se você administra um site movimentado com vários autores.

Dito isso, vamos dar uma olhada em como adicionar links de atalho personalizados à barra de ferramentas de administração do WordPress. Abordaremos três métodos:

A primeira coisa que você precisa fazer é instalar e ativar o plug-in WP Custom Admin Interface. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Após a ativação, você precisa visitar a página Custom Admin Interface ” Admin Toolbar para configurar o plug-in. Essa página exibe tudo o que aparece na barra de ferramentas e permite que você adicione novos itens.

Para adicionar um link de atalho personalizado à barra de ferramentas do administrador, é necessário clicar no botão “+ Add Menu Item” (+ Adicionar item de menu) próximo à parte superior da tela.

Visit Custom Admin Interface » Admin Toolbar to Configure the Plugin

Um novo item é adicionado ao topo da lista e contém dois campos.

Um é para o título do item e o outro para o link.

A New Item Is Added to the Top of the List

Para adicionar um título, você precisa clicar no item do bloco de notas para colocar o campo de título no modo de edição. Em seguida, você pode digitar o título e clicar no ícone de marca de seleção para armazená-lo.

Para este tutorial, digitaremos “Widgets”.

Add a Title to the New Custom Menu Item

Da mesma forma, para adicionar o link, você precisa clicar no ícone de link e, em seguida, digitar o link. Quando terminar, você pode clicar no ícone de marca de seleção para salvar o link.

Para este tutorial, colaremos o link para a página de widgets. Ele deve se parecer com http://example.com/wp-admin/widgets.php. Não se esqueça de substituir “example.com” por seu próprio nome de domínio.

Add a Link to the New Custom Menu Item

Certifique-se de alterar “example.com” para seu próprio nome de domínio e não se esqueça de clicar no ícone de marca de seleção para armazenar o link.

Como o novo item está no topo da lista, ele será adicionado ao lado esquerdo da barra de ferramentas do administrador. Para movê-lo mais para a direita, você precisa mover o item mais para baixo na lista usando o recurso de arrastar e soltar.

Drag and Drop the New Item to the Desired Location

Você gostaria de adicionar mais de um link de atalho personalizado? Em caso afirmativo, basta repetir as mesmas etapas para criar outro item.

Se você cometer um erro ao personalizar a barra de administração, poderá clicar no botão “Restore to default WordPress toolbar” (Restaurar para a barra de ferramentas padrão do WordPress) na parte superior para remover todas as suas personalizações ou no botão “Restore to last save” (Restaurar para o último salvamento) para remover todas as alterações desde o último salvamento.

Por fim, você precisa rolar até a parte inferior da página. Aqui você pode decidir quais funções de usuário podem ver o novo item e, em seguida, salvar suas configurações.

Se quiser que todos os usuários conectados vejam o novo link, será necessário selecionar “Todos” no menu suspenso para que a configuração seja “Implementar isso para todos, exceto”. Se você não adicionar exceções, todos os usuários poderão ver o item.

Implement the Menu Item for Everyone

No entanto, se não quiser que os usuários com a função de usuário Assinante ou Colaborador vejam o item, será necessário selecionar essas funções como exceções.

Primeiro, você deve clicar no link “+ Adicionar um caso de exceção”. Isso exibirá um menu suspenso no qual você poderá selecionar “Role: Subscriber”. Em seguida, clique no ícone + e adicione “Role: Contributor”.

Implement the New Menu Item for Everyone Except Subscribers and Contributors

Outro exemplo é quando você deseja que o link fique visível apenas para você ou para um único usuário.

Nesse caso, escolha as opções nos menus suspensos para que a configuração seja “Implementar isso para ninguém, exceto o usuário: nome da pessoa”.

Implement the New Menu Item Just for Yourself

Você está quase terminando. Se você preferir não ver o link personalizado ao visualizar seu site, certifique-se de clicar também na caixa de seleção “Disable the custom toolbar on the frontend” (Desativar a barra de ferramentas personalizada no frontend).

Depois de terminar de configurar a barra de ferramentas de administração, não se esqueça de clicar no botão “Save All Settings” (Salvar todas as configurações).

Depois de atualizar a página ou clicar em outra página na barra lateral do administrador, você poderá ver o link do seu shortcode personalizado.

Preview of Custom Shortcut Link Added By Plugin

Aqui está outra maneira de adicionar um link de atalho personalizado à barra de ferramentas do WordPress. Esse método é para aqueles que se sentem à vontade para copiar trechos de código no WordPress.

Você precisa copiar e colar o seguinte código no arquivo functions.php do seu tema, em um plug-in específico do site ou em um plug-in de snippets de código.

// add a link to the WP Toolbar
function custom_toolbar_link($wp_admin_bar) {
    $args = array(
        'id' => 'wpbeginner',
        'title' => 'Search WPBeginner', 
        'href' => 'https://www.google.com:443/cse/publicurl?cx=014650714884974928014:oga60h37xim', 
        'meta' => array(
            'class' => 'wpbeginner', 
            'title' => 'Search WPBeginner Tutorials'
            )
    );
    $wp_admin_bar->add_node($args);
}
add_action('admin_bar_menu', 'custom_toolbar_link', 999);

Este código de exemplo adiciona um link para um mecanismo de pesquisa personalizado do Google que pesquisará tutoriais do WordPress no WPBeginner. Ele usa a função add_node com os argumentos descritos na matriz.

Você precisa substituir os itens id, title, href e meta por valores para seu próprio link personalizado.

Preview of a Single Custom Shortcut Link Added With Code

Recomendamos adicionar esse código no WordPress com o WPCode. Ele é o melhor plug-in de snippets de código que facilita a adição de código personalizado sem editar o arquivo functions.php do seu tema. Assim, você não precisa se preocupar em danificar seu site.

Para começar, você precisará instalar e ativar o plug-in gratuito WPCode. Para obter instruções detalhadas, consulte este guia sobre como instalar um plug-in do WordPress.

Depois que o plug-in for ativado, um novo item de menu chamado “Code Snippets” será adicionado ao painel do WordPress. Ao clicar nele, você verá uma lista de todos os snippets de código personalizados salvos em seu site. Como você acabou de instalar o plug-in, sua lista estará vazia.

A partir daí, clique no botão “Add New” (Adicionar novo) para adicionar seu primeiro trecho de código.

Click 'Add New Snippet' in WPCode

Em seguida, navegue até a opção “Add Your Custom Code (New Snippet)” (Adicionar seu código personalizado (novo snippet)) e clique no botão “Use snippet” (Usar snippet) abaixo dela.

Add custom code in WPCode with new snippet

Na página “Criar snippet personalizado”, você pode começar adicionando um título para o snippet. Ele pode ser qualquer coisa que o ajude a lembrar para que serve o snippet.

Em seguida, basta colar o código acima na caixa “Code Preview” (Visualização de código) e selecionar “PHP Snippet” como o tipo de código no menu suspenso.

Paste code snippet into WPCode plugin

Depois disso, alterne a chave de “Inativo” para “Ativo” e clique no botão “Salvar snippet”.

Activate and save code snippet WPCode

O último método mostrou como adicionar um link personalizado à barra de ferramentas usando código. Mas e se você quiser criar um menu personalizado com alguns de seus próprios atalhos?

Para fazer isso, você pode agrupar vários atalhos em um item principal. Os nós filhos sob o link pai serão exibidos quando um usuário passar o mouse sobre o link pai.

Aqui está um exemplo de como adicionar um grupo de links personalizados na barra de ferramentas do WordPress. Como no método anterior, você deve copiar e colar esse trecho de código no arquivo functions.php do seu tema, em um plug-in específico do site ou em um plug-in de trechos de código como o WPCode.

/*
* add a group of links under a parent link
*/
  
// Add a parent shortcut link
  
function custom_toolbar_link($wp_admin_bar) {
    $args = array(
        'id' => 'wpbeginner',
        'title' => 'WPBeginner', 
        'href' => 'https://www.wpbeginner.com', 
        'meta' => array(
            'class' => 'wpbeginner', 
            'title' => 'Visit WPBeginner'
            )
    );
    $wp_admin_bar->add_node($args);
  
// Add the first child link 
      
    $args = array(
        'id' => 'wpbeginner-guides',
        'title' => 'WPBeginner Guides', 
        'href' => 'https://www.wpbeginner.com/category/beginners-guide/',
        'parent' => 'wpbeginner', 
        'meta' => array(
            'class' => 'wpbeginner-guides', 
            'title' => 'Visit WordPress Beginner Guides'
            )
    );
    $wp_admin_bar->add_node($args);
  
// Add another child link
$args = array(
        'id' => 'wpbeginner-tutorials',
        'title' => 'WPBeginner Tutorials', 
        'href' => 'https://www.wpbeginner.com/category/wp-tutorials/',
        'parent' => 'wpbeginner', 
        'meta' => array(
            'class' => 'wpbeginner-tutorials', 
            'title' => 'Visit WPBeginner Tutorials'
            )
    );
    $wp_admin_bar->add_node($args);
  
// Add a child link to the child link
  
$args = array(
        'id' => 'wpbeginner-themes',
        'title' => 'WPBeginner Themes', 
        'href' => 'https://www.wpbeginner.com/category/wp-themes/',
        'parent' => 'wpbeginner-tutorials', 
        'meta' => array(
            'class' => 'wpbeginner-themes', 
            'title' => 'Visit WordPress Themes Tutorials on WPBeginner'
            )
    );
    $wp_admin_bar->add_node($args);
  
}
  
add_action('admin_bar_menu', 'custom_toolbar_link', 999);

Neste código de exemplo, primeiro adicionamos um link de atalho personalizado. Em seguida, adicionamos um segundo link personalizado e o transformamos em um filho do primeiro link. Adicionamos o ID do link pai acrescentando o argumento 'parent' => 'wpbeginner'.

Repetimos esse procedimento para adicionar outro link sob o mesmo pai. Também usamos um link filho como um link pai para mostrar como adicionar subitens a um subitem em seu menu de links personalizados.

Preview of a Group of Custom Shortcut Links Added With Code

Esperamos que este tutorial tenha ajudado você a aprender como adicionar links de atalho personalizados à barra de ferramentas de administração do WordPress. Você também pode querer saber como criar fluxos de trabalho automatizados no WordPress ou conferir nossa lista dos melhores plug-ins e ferramentas de SEO para expandir seu site.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.

Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Veja como o WPBeginner é financiado, por que isso é importante e como você pode nos apoiar. Aqui está nosso processo editorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

O kit de ferramentas definitivo WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Reader Interactions

20 ComentáriosDeixe uma resposta

  1. Rick Rottman

    Thanks for posting this!

    I’ve always wanted a direct link in the admin bar to my Simple CSS screen. Thanks to this tutorial, I have one.

    • WPBeginner Support

      Glad to hear our guide was helpful!

      Administrador

  2. Edward Bonthrone

    Hi all..
    This is all working great for PC view – but the custom toolbar item icons/menus disappear when viewing on mobile with responsive theme.

    I have seen this question asked many times but no examples of code I can insert as a test that works on both PC and mobile view?

    Anyone give me a menu snippet that will stay visible on mobile phone?

    Thanks

    • WPBeginner Support

      Your CSS would be hiding it for your mobile view, if you would like this to appear on mobile you would need to add the following CSS for our examples.


      #wpadminbar li#wp-admin-bar-wpbeginner {
      display: block;
      }

      For your own shortcut links, you would change the -wpbeginner to the ID of your widget, as an example: -yourid

      Administrador

  3. dan

    Why this code is not work for mobile view?

    • WPBeginner Support

      You may want to try disabling your other plugins to ensure there isn’t a plugin that is overriding the default bar on mobile.

      Administrador

    • WPBeginner Support

      You’re welcome :)

      Administrador

  4. Mohammad Kashif

    Hi
    How can i add tool bar user menu in theme navigation?
    And why i don’t receive email notification when i got reply? While i select (Replies to my comments).
    Thanks

  5. Court

    This works great, my question is, how do you add a second parent menu item to this code?

  6. Small Details

    I don’t know if this is recommended but I was looking for a ‘new window’ solution (see Yassin’s comment). It didn’t work by itself but works fine when combined with ‘meta’:

    add_action( ‘admin_bar_menu’, ‘toolbar_link_to_mypage’, 999 );

    function toolbar_link_to_mypage( $wp_admin_bar ) {
    $args = array(
    ‘id’ => ‘my_page’,
    ‘title’ => ‘PRODUCT MANAGEMENT’,
    ‘href’ => ‘http://www.mexample.com’,
    ‘meta’ => array( ‘class’ => ‘my-toolbar-page’, ‘target’ => ‘_blank’ )
    );
    $wp_admin_bar->add_node( $args );
    }

  7. Mel

    Thanks!! This helped me out a ton!

  8. Yassin

    Great tip
    How can we make these custom links open in new tab ?
    I try to add ‘target’ => ‘_blank’ but didn’t work

    • Henry E.

      To add a ‘target’ => ‘_blank’ you have to add it to the ‘meta’ => array()

  9. Gary Cook

    This is awesome. Thanks. Although, I have added several custom menus and I want to center them all in a group using CSS, if possible? Please.

  10. Rosendo Cuyasen

    Cool! I think this is a cool feature for Wordpress if you’re going to use this toolbar above your web pages. Thanks for sharing.

  11. adolf witzeling

    I was looking for something like this. Thanks for sharing this awesome tip.

Deixe uma resposta

Obrigado por deixar um comentário. Lembre-se de que todos os comentários são moderados de acordo com nossos política de comentários, e seu endereço de e-mail NÃO será publicado. NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.