Não perca as promoções do Mês do Consumidor!

Como adicionar um plugin de botão WordPress para seu site

Os plugins de botões do WordPress permitem adicionar facilmente botões personalizados ao seu site por meio de shortcodes, sem precisar escrever o código CSS do zero. Esses trechos de código são fáceis de criar, reutilizar e personalizar, tornando-os o método preferido para adicionar esses elementos interativos.

A maneira mais fácil de criar e adicionar shortcodes do WordPress ao seu site é usar um plugin como o MaxButtons. Após a instalação, basta:

  1. Abra o menu de criação de botões do MaxButtons no painel de administração do WordPress.
  2. Crie um novo botão e configure seu comportamento.
  3. Edite a publicação onde deseja inserir o botão.
  4. Insira o botão usando o bloco MaxButtons ou manualmente usando um código curto.

Se você não quiser usar um shortcode, pode adicionar botões usando plugins como o Ultimate Blocks, que oferece um recurso de personalização de design integrado ao editor do WordPress. No WordPress 5.4 ou posterior, você também pode fazer isso com o bloco de botões padrão.

Antes de nos aprofundarmos no assunto, explore o que são os shortcodes de botões do WordPress e como adicioná-los ao seu site usando um plugin. Em seguida, aprenda sobre métodos alternativos para que você possa determinar se eles são mais adequados para os seus casos de uso.

O que são shortcodes de botões do WordPress?

Os shortcodes de botões do WordPress são pequenos trechos de código que permitem incluir facilmente elementos interativos, como botões de chamada para ação, em sua página da web. Eles são úteis por alguns motivos:

  • Facilidade no uso. Inserir botões no seu site usando shortcodes é fácil, pois você só precisa escrever um pequeno trecho de código no editor de posts, sem precisar escrever CSS ou JavaScript personalizados.
  • Personalização. Você pode personalizar vários aspectos dos seus botões de código curto, incluindo tamanho, cor, formato e URL de destino.
  • Consistência e reutilização. Depois de criar um código curto (shortcode) para um botão no WordPress, você pode inseri-lo em várias páginas e manter o mesmo design sempre.

A plataforma WordPress oferece diferentes maneiras de criar códigos curtos para botões, incluindo a possibilidade de escrevê-los do zero. Neste tutorial, vamos configurá-lo usando um plugin, pois é o método mais fácil e simplifica o gerenciamento de shortcodes no futuro.

Como criar um shortcode de botão no WordPress

Para configurar um shortcode de botão no WordPress, basta instalar o plugin necessário e seguir o procedimento. No entanto, dependendo do plugin, os passos para criar um shortcode podem variar. Portanto, consulte os manuais para aprender sobre o processo em si.

Neste artigo, mostraremos como criar um shortcode de botão com o MaxButtons, já que ele é um dos plugins mais populares e simples para essa tarefa. Eis como fazer:

  1. Abra o painel de administração do WordPress. Acesse a barra lateral e clique em MaxButtons.
  2. Clique em Adicionar novo, o que o redirecionará para o menu de criação do código curto do botão.
  1. Na seção “Noções básicas”, configure as definições essenciais do seu botão. Por exemplo, defina o nome do botão, o URL, a fonte, o espaçamento interno e muito mais.
  2. Deslize a tela para baixo até as próximas seções para personalizar a borda, o fundo, a sombra do texto e o contêiner , refinando ainda mais o estilo do seu botão. Você pode visualizar como o botão ficará no canto superior direito da tela.
  1. Acesse a seção Avançado e ajuste outras configurações opcionais.
  2. Após concluir o design do botão, clique em Salvar.

Para verificar os botões criados anteriormente, acesse a barra lateral do WordPressMaxButtonsBotões. Aqui você encontra todos os botões existentes com opções para gerenciá-los, além de seus IDs e nomes.

Assim que o botão estiver pronto, adicione-o à sua página web. Eis como fazer:

  1. Acesse a barra lateral do painel de administração do WordPress → PostsTodos os Posts.
  2. Clique em Editar na página em que deseja inserir o botão.
  3. Clique no ícone + para adicionar um novo bloco e selecione o bloco MaxButtons.
  4. Navegue até o painel de configuração de blocos no lado direito da tela e clique no botão Selecionar.
  1. Selecione o botão que deseja inserir e clique em Inserir botão no editor.

O botão aparecerá no seu editor. Ao inserir um botão, você pode sobrescrever sua configuração ajustando as definições no painel de configuração do bloco. Por exemplo, você pode alterar o texto, o URL e configurar para que o link seja aberto em uma nova aba.

Se você usa o Editor Clássico do WordPress, os passos para inserir um botão são semelhantes. A diferença é que você adiciona um botão clicando no botão “Adicionar bloco” em vez de usar um bloco e sobrescrever as configurações antes da inserção.

No editor Gutenberg, você também pode usar o bloco Shortcode padrão para inserir o botão manualmente. No entanto, você precisa digitar o código curto manualmente, e o design do botão não é exibido no editor de posts.

Utilizando códigos curtos, você pode inserir um botão do MaxButtons usando seu nome ou ID, como mostrado abaixo.

[maxbutton id="1"]
[maxbutton name="Google"]

Você também pode sobrescrever as configurações existentes adicionando mais parâmetros ao seu código curto. Se você deseja substituir todas as configurações suportadas, seu código deve ser semelhante a este:

[maxbutton id="1" text="yourtext" url="http://yoururl" linktitle="tooltip" window="new" nofollow="true" extraclass="extra"]

Isso pressupõe que você queira apenas substituir o texto, omitir outras configurações e incluir somente o parâmetro de texto.

Quais são as alternativas aos plugins de shortcode para botões?

Existem alternativas aos plugins de shortcode de botão que oferecem um processo mais simples para criar e inserir esse conteúdo interativo. Aqui estão duas das opções mais comuns.

Plugin de bloco

Embora os shortcodes ofereçam flexibilidade e reutilização, eles podem não ser tão vantajosos se você preferir inserir botões usando um bloco. Para isso, um plugin de botões como o Ultimate Blocks é o método ideal.

O Ultimate Blocks oferece um bloco de botão pré-configurado que você pode inserir facilmente no editor de posts do WordPress e estilizar a partir daí. Basta adicionar o bloco Botões (UB) e começar a modificar seu botão diretamente.

As opções de design são mais abrangentes do que as do MaxButtons, permitindo que você altere a orientação do botão, aplique uma animação e inclua um ícone para torná-lo mais atraente. No entanto, algumas configurações de estilo estão disponíveis apenas na versão PRO.

Você pode salvar o design do seu botão acessando a aba Estilo no painel de configuração do bloco. Em seguida, expanda a seção Avançado e clique em Salvar estilo atual.

Se desejar reutilizar o estilo em outro botão, acesse a guia Estilo, expanda a seção Estilos e selecione um design salvo. Você também pode definir um design de botão como padrão, o que ajuda a manter um design consistente facilmente, sem usar códigos curtos.

Importante! Como o plugin Ultimate Blocks é baseado em blocos, ele não funciona com o Editor Clássico do WordPress. Se você deseja continuar trabalhando com o Editor Clássico, permaneça com o MaxButtons ou encontre outras alternativas que sejam compatíveis com o editor antigo do WordPress.

Bloco de botões

O bloco de botões é um recurso integrado do WordPress 5.4 e versões posteriores que permite arrastar e soltar um botão em sua postagem ou página sem a necessidade de instalar um plugin adicional. Eis como usá-lo:

  1. Abra o editor de blocos Gutenberg do WordPress e clique no ícone de mais para adicionar um novo bloco.
  2. No explorador de blocos, procure e selecione o bloco “Botões“.
  3. Digite o texto para o seu botão.
  4. Ajuste as configurações do seu botão na dica de ferramenta embutida e no painel de configuração do bloco.

Embora seja simples, esse método oferece opções de personalização limitadas. Além disso, não é reutilizável e não funciona com o Editor Clássico.

Se você busca uma solução simples e precisa adicionar apenas alguns botões, este bloco integrado é uma excelente alternativa ao uso de um plugin. Caso esteja usando uma versão mais antiga do WordPress, basta abrir o painel de controle ou o painel de administração da sua hospedagem WordPress e baixar a versão 5.4 ou mais recente.

Como criar um shortcode personalizado no WordPress

Até agora, explicamos como adicionar códigos curtos de botões ao seu site WordPress usando plugins. Embora sejam fáceis de usar, você pode descobrir que oferecem opções de personalização limitadas e podem deixar seu servidor mais lento, especialmente se você já tiver várias extensões instaladas.

Se você quiser evitar plugins, pode criar um shortcode do WordPress para o seu botão do zero. Como esse método envolve codificação manual, requer algum conhecimento técnico e pode não ser adequado para iniciantes que desejam uma solução rápida.

Por outro lado, desenvolvedores ou usuários experientes do WordPress podem preferir criar o shortcode do zero, já que têm controle total sobre o design e a configuração do botão. Além disso, esse método ajuda a manter o desempenho ideal, uma vez que o código adicional é mais enxuto e limpo do que o uso de um plugin.

Independentemente do método que funcionar melhor para você, agora você estará totalmente equipado para começar a criar seus próprios códigos curtos para botões.

Semua konten tutorial di website ini telah melalui peninjauan menyeluruh sesuai padrões editoriais e valores da Hostinger.

Author
O autor

Bruno Santana

Jornalista formado pela Universidade Federal da Bahia e Especialista em Marketing de Conteúdo na Hostinger, onde atuo na criação e otimização de artigos úteis, envolventes e criativos em áreas como desenvolvimento web e, marketing. Além disso, sou colaborador eventual do site MacMagazine e da editoria de cultura do Jornal A Tarde, fascinado por arte, culinária e tecnologia.

O que dizem nossos clientes

Comentários

Author
Belchior Filho

May 21 2020

Esse artigo me ajudou muito. Obrigado equipe hostinger

Deixe uma resposta

Por gentileza, preencha os campos solicitados.Marque o campo de aceitação da privacidade.Preencha os campos necessários e marque a opção de aceitar termos de privacidade.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Thank you! Your comment has been successfully submitted. It will be approved within the next 24 hours.