Em nossa experiência, uma das coisas básicas que você deve aprender no WordPress é como usar shortcodes em seus widgets de barra lateral.
Isso ocorre porque muitos plugins usam shortcodes para exibir seu conteúdo em vez de ter seus próprios widgets. Saber como usar shortcodes em barras laterais permite que você faça mais com seu site e aproveite ao máximo diferentes plugins.
Este artigo mostrará como usar shortcodes em seus widgets de barra lateral do WordPress. Abordaremos métodos para temas clássicos e temas de blocos.
Por que usar shortcodes em seus widgets de barra lateral do WordPress?
Shortcodes permitem que você adicione conteúdo e recursos avançados ao seu site, incluindo formulários de contato, tabelas, principais comentaristas e muito mais. O WordPress vem com vários shortcodes integrados, mas alguns plugins também adicionam seus próprios shortcodes.
Por exemplo, você pode exibir fotos do Instagram na barra lateral do WordPress usando um shortcode fornecido pelo Smash Balloon Instagram Feed.
Esse conteúdo aparecerá em todo o seu site WordPress, portanto, você não precisa adicioná-lo a cada página e postagem manualmente. Isso pode economizar muito tempo e esforço e ajuda a manter o design do seu site consistente.
Com isso em mente, vamos analisar algumas maneiras diferentes de adicionar e usar shortcodes nos widgets da barra lateral do WordPress. Simplesmente use os links rápidos abaixo para ir direto para o método que você deseja usar.
- Método 1: Adicionando Shortcode ao Editor de Widgets de Bloco do WordPress (Temas Clássicos)
- Método 2: Adicionando Shortcode ao Editor de Site Completo (Temas de Bloco)
- Method 3: Using the Custom HTML Widget (More Customizable)
Método 1: Adicionando Shortcode ao Editor de Widgets de Bloco do WordPress (Temas Clássicos)
A maioria dos temas do WordPress clássicos, gratuitos e pagos, vêm com barras laterais prontas para widgets. Com isso em mente, você geralmente pode simplesmente adicionar um widget de Shortcode à barra lateral do seu site.
Primeiro, vá para Aparência » Widgets no seu painel. Aqui, você verá todas as diferentes áreas onde você pode adicionar widgets no WordPress, incluindo a barra lateral.
Simplesmente clique no botão ‘+ Adicionar Bloco’ e comece a digitar ‘Shortcode’.
Quando o bloco correto aparecer, arraste-o para a barra lateral do WordPress.
Agora você pode adicionar seu shortcode ao bloco.
Quando terminar, não se esqueça de clicar em ‘Atualizar’ para tornar as alterações ao vivo.
Agora você pode visitar seu blog ou site WordPress para ver o shortcode em ação.
Método 2: Adicionando Shortcode ao Editor de Site Completo (Temas de Bloco)
Se você estiver usando um tema de bloco, poderá adicionar um shortcode à barra lateral usando o Editor de Site Completo. No seu painel do WordPress, vá para Temas » Editor.
Agora você verá algumas configurações para editar seu tema de bloco.
Para editar a barra lateral do seu tema, você normalmente precisa clicar no menu ‘Padrões‘.
Agora, role para baixo até ‘Partes do Modelo’.
É aqui que você encontrará as partes do modelo padrão do seu tema de blocos, como cabeçalhos, rodapés e barras laterais. Temas clássicos geralmente categorizam esses elementos como áreas de widgets.
Assim como os temas clássicos, seu tema de blocos pode ou não ter uma parte do modelo de barra lateral. Nesse caso, você pode ter que criar uma você mesmo. Você pode ler nosso guia para iniciantes sobre Edição Completa de Sites no WordPress para saber como fazer isso.
Assim que localizar sua barra lateral, basta clicar nela.
Em seguida, basta clicar no ícone de lápis ‘Editar’.
Isso o levará ao editor de blocos para editar a barra lateral.
Agora, assim como ao usar o editor de blocos, você pode clicar no botão ‘+ Adicionar Bloco’ em qualquer lugar.
Depois disso, selecione o bloco ‘Shortcode’.
Assim que terminar, basta adicionar o shortcode como faria normalmente.
Em seguida, clique em ‘Salvar’ para oficializar suas alterações.
Dica Pro: Se você mudou recentemente para um tema de blocos de um tema clássico e deseja usar seu antigo widget de barra lateral como um bloco, leia nosso guia sobre como converter um widget do WordPress em um bloco.
Método 3: Usando o Widget de HTML Personalizado (Mais Personalizável)
Às vezes, você pode querer exibir outro conteúdo junto com o shortcode. Por exemplo, RafflePress pode adicionar um concurso ou sorteio à sua barra lateral usando um shortcode. Para chamar ainda mais atenção para o concurso, você pode querer exibir um título acima da competição.
Em vez de criar blocos separados de Shortcode e Título, você pode simplesmente adicionar o shortcode e o texto a um bloco de HTML Personalizado.
Isso ajuda você a organizar o conteúdo de forma organizada. Você também pode estilizar o bloco usando HTML, para que possa controlar exatamente como ele aparece na barra lateral.
Para mais detalhes, veja nossa análise completa do RafflePress.
O bloco HTML Personalizado não suporta shortcodes por padrão, mas você pode facilmente mudar isso adicionando código personalizado ao WordPress. Após adicionar este código, você pode usar shortcodes em qualquer bloco HTML Personalizado em todo o seu site WordPress.
Frequentemente, você encontrará guias com instruções para adicionar código personalizado ao arquivo functions.php do seu site. No entanto, isso não é recomendado, pois qualquer erro no código pode causar erros comuns do WordPress ou até mesmo quebrar completamente o seu site.
É aí que o WPCode entra em ação.
Este plugin gratuito facilita a adição de CSS, PHP, HTML personalizados e muito mais ao WordPress, sem colocar seu site em risco. Melhor ainda, ele vem com uma biblioteca de snippets prontos, incluindo código que permite usar shortcodes em widgets de texto.
Para começar, você precisará instalar e ativar o WPCode. Para mais informações, você pode ver nosso guia passo a passo sobre como instalar um plugin do WordPress.
Depois disso, vá para Snippets de Código » Adicionar Snippet no painel do WordPress. Agora você pode começar a digitar 'shortcode'.
Quando ele aparecer, passe o mouse sobre o seguinte snippet: ‘Enable Shortcode Execution in Text Widgets.’
Você pode então prosseguir e clicar em ‘Usar snippet.’
Isso abrirá o snippet no editor WPCode. O WPCode configura as definições do snippet para você, então você pode simplesmente clicar no interruptor ‘Inativo’ para que ele fique azul.
Com isso feito, clique em ‘Atualizar’ para tornar o snippet ativo.
Agora, você pode adicionar um shortcode a qualquer widget de texto.
Simplesmente vá para Aparência » Widgets e digite ‘HTML Personalizado’ na barra de pesquisa.
Quando o bloco certo aparecer, arraste-o para a barra lateral do seu site.
Com isso feito, você pode adicionar seu HTML e shortcode ao bloco.
Quando estiver satisfeito com a configuração do widget, clique em 'Atualizar'.
Agora, se você visitar seu site, verá o shortcode e o HTML personalizado em tempo real.
Perguntas Frequentes: Usando Shortcodes em Widgets da Barra Lateral do WordPress
Não importa qual tema você esteja usando, você deve ser capaz de adicionar shortcodes à barra lateral usando um dos métodos acima.
No entanto, se você precisar de ajuda extra, aqui estão algumas das perguntas mais frequentes sobre como adicionar shortcodes à barra lateral.
Como Mudo Onde o Widget da Barra Lateral Aparece?
A localização da barra lateral é controlada pelo seu tema do WordPress. Se você não estiver satisfeito com a posição da barra lateral, poderá alterá-la usando as configurações do tema.
Muitos temas do WordPress permitem que você escolha entre diferentes layouts. Frequentemente, isso inclui mostrar a barra lateral em diferentes lados da tela.
Você pode ir ao Personalizador de Tema do WordPress ou ao Editor de Site Completo para ver as áreas de barra lateral disponíveis.
Como Adicionar uma Barra Lateral ao Meu Tema do WordPress?
Se o seu tema não tiver uma barra lateral, você pode criar um tema filho e, em seguida, adicionar uma barra lateral usando código.
Você pode ler nosso guia sobre como adicionar cabeçalhos, rodapés e barras laterais personalizados no WordPress para mais informações.
Se você não se sente confortável escrevendo código, também pode criar um tema personalizado do WordPress usando um plugin como o SeedProd. Você pode usar este popular plugin de construtor de páginas para projetar seu próprio tema e barra lateral usando um editor simples de arrastar e soltar.
Para instruções passo a passo, consulte nosso guia sobre como criar um tema personalizado do WordPress sem nenhum código.
Como Usar um Shortcode Diferente em Cada Post ou Página?
Às vezes, você pode querer usar shortcodes diferentes em algumas de suas postagens e páginas. Por exemplo, você pode querer exibir as postagens mais populares em sua página de arquivo e exibir anúncios em sua página inicial.
Para saber mais, consulte nosso guia sobre como exibir barras laterais diferentes para cada postagem e página no WordPress.
Esperamos que este artigo tenha ajudado você a aprender como adicionar facilmente shortcodes aos seus widgets de barra lateral do WordPress. Você também pode querer ver nosso guia sobre como mostrar ou ocultar widgets em páginas específicas do WordPress e nossas escolhas de especialistas dos melhores temas amigáveis ao Gutenberg.
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Dennis Muthomi
Descobri que criar um modelo padronizado combinando shortcodes com HTML personalizado e classes CSS torna muito mais fácil manter uma marca consistente, ao mesmo tempo que permite ajustes de estilo específicos do cliente.
Usar o WPCode em vez de editar o functions.php diretamente me salvou de muitos problemas potenciais em diferentes sites. Ótima dica incluir essa abordagem mais segura no guia!
Mrteesurez
Você quer dizer, no último método, que posso adicionar shortcodes na caixa de widget HTML original e fazê-lo funcionar bem como a caixa de widget de shortcode?
WPBeginner Support
For now you should be able to
Admin
Ralph
Shortcodes são uma das melhores coisas no WordPress. Eles economizam tanto tempo quando só precisamos mudar o código em 1 lugar e em todos os outros lugares atualiza sozinho. Eu os amo!
Eu usei o Ad Inserter por anos, mas ele é limitado a 20 shortcodes na versão gratuita. Com certeza vou mudar para o método do WordPress agora que sei sobre ele.
WPBeginner Support
Glad you found it helpful
Admin
Arkanum
Thanks! For me it’s work
WPBeginner Support
Glad our guide helped
Admin
Zdenko Zec
Olá. Eu tentei no meu site desenvolvido em localhost, mas não está funcionando. Eu tentei tanto com o widget de texto quanto adicionando o filtro ao functions.php e usando o HTML Personalizado. Você poderia compartilhar suas opiniões sobre isso? Obrigado.
WPBeginner Support
Você pode querer garantir que o shortcode que você está usando é um shortcode funcional.
Admin
Muito obrigado!!
Ótimo post! muito obrigado
WPBeginner Support
You’re welcome
Admin
Muhammad Zeeshan
Oi
Bom dia
Na verdade, eu quero mostrar apenas o texto do post em uma página específica, como posso fazer isso?
WPBeginner Support
Pelo que parece que você quer, você pode querer dar uma olhada em:
https://www.wpbeginner.com/plugins/how-to-insert-wordpress-page-content-to-another-page-or-post/
Admin
Rahul
Ontem à noite instalei um plugin para shortcode. Mas não consegui usá-lo. Mas agora estou tendo sucesso
WPBeginner Support
Glad our article could help
Admin
Ahmer
Este é um post muito bom e informativo sobre como usar shortcodes.
Eu estava procurando por um artigo assim.
Shortcodes realmente fazem a diferença em blogs e muitas pessoas não sabem como usá-los corretamente.
MikeL
A opção de código personalizado só funciona na área de CONTEÚDO do widget de texto, mas não na área de TÍTULO.
nicole
onde você vai para realmente criar os shortcodes?? Estou procurando onde encontrar as configurações mostradas nesta captura de tela:
Neville
Olá,
Tenho experiência em desenvolvimento de sites, mas sou novo no WooCommerce. Estou construindo um site para um cliente, baseado no tema Avada WP (5.6.1). Isso está em desenvolvimento:
Você verá que há um carrossel na página inicial, mas tenho procurado sem sucesso um plugin para substituí-lo que me permita exibir produtos variáveis em estilo de galeria/grade. Precisa funcionar com variações de produtos do WooCommerce, por exemplo, preço, categoria, breve descrição. Adicionar ao Carrinho também seria ideal.
Estou imaginando se shortcodes poderiam ser usados para criar isso?
Se sim, como eles poderiam ser adicionados para substituir o carrossel?
Obrigado.
Neville
Brendan
Olá,
Tentei usar o widget de shortcode como você sugeriu, mas ainda não consigo alinhar os widgets no rodapé lado a lado em vez de um em cima do outro.
Você pode ajudar, por favor?
Obrigado!
Brendan
lukman
Não está funcionando
Mathiew Burkett
Olá
Criei o Plugin Específico do Site e ativei o plugin.
Estou tentando fazer um shortcode funcionar em uma área diferente onde um shortcode atualmente não funciona com meu Tema.
Estou usando o tema da versão Socrates 3.08.
Aqui está um link para uma captura de tela que criei, mostrando os dois lugares que circulei com um círculo vermelho onde preciso que um shortcode funcione e cliquei com o botão direito na área onde preciso adicionar o plugin e inspecionei para encontrar o código na área do meu tema onde estou tentando fazer um shortcode funcionar e adicionei a captura de tela do código também.
Alguém poderia me dizer se existe uma função que eu possa adicionar ao plugin específico do site que fará um shortcode funcionar nas duas áreas que circulei.
Gurpreet Singh Saini
Obrigado, está funcionando.
Bilal
sim, está funcionando.
A WP Life
Olá,
Usuário relatou após nova atualização do WordPress 4.5.3.
Shortcode não funciona no widget de texto..
Nosso plugin é
Preciso de ajuda, obrigado desde já.
A WP Life
WPBeginner Support
Por favor, relate o conflito ao autor do plugin.
Admin
Vinicius
Obrigado!
Monuruzzaman Milon
Realmente Incrível, amo todos os seus posts de blog. Porque estou aprendendo sobre desenvolvimento de temas para WordPress. Realmente me ajuda sobre o hook add_filter.
Obrigado,
Alfredo
Muito obrigado.
Arra Referees
Obrigado por isso. Salva-vidas. Estava usando um plugin (GCAL) com um widget de barra lateral especial, mas não me permitia adicionar um link ao calendário abaixo dele sem entrar em código. Simplesmente adicionar isso e usar o shortcode realmente fez o trabalho. Muito obrigado. Funcionando em 4.1.1
Manuel Meurer
Dica incrível, ainda funciona muito bem no Wordpress 4.0!
cob-web
This saved my day – thanks!
slim shady
ele interpretará [ ] tudo como um shortcode?
WPBeginner Support
Não, apenas se um shortcode for registrado. Por exemplo, se você não tiver um shortcode [apples], ele será exibido como está.
Admin
firoz
Quero um shortcode na barra lateral
queenofthehivemomof5
Tentei colocar no final do template functions PHP dentro das tags php e ainda estou recebendo o código RAW em volta do meu shortcode. O shortcode está sendo exibido, mas mostra [raw] [/raw] de cada lado.
Alguma outra sugestão? Agradeço desde já!
wpbeginner
@queenofthehivemomof5 Você precisa colar entre as tags php e garantir que não faça parte de nenhuma outra função... então é melhor colocá-lo no final.
queenofthehivemomof5
Existe alguma parte específica do arquivo functions.php onde devo colar? Não parece estar funcionando para mim. Recebo a saída do meu shortcode, mas ele está cercado por "Raw"
[raw][/raw]ABA 1ABA 2ABA 3[raw][/raw]Conteúdo da aba 1[raw] [raw] [raw][/raw] (algo assim)
edward.caissie
Esta linha de código pode ser adicionada a um plugin que tenha um shortcode e fará a mesma coisa também... embora adicionar a linha de código ao arquivo functions.php de um Child-Theme seria um método mais à prova de futuro.