Widgets permitem que você adicione elementos que não são de conteúdo a uma barra lateral ou a qualquer área pronta para widgets em seu site WordPress. Você pode usá-los para adicionar banners, anúncios, formulários de inscrição para newsletters e outros elementos ao seu site.
Você também pode criar um widget personalizado para incorporar funções exclusivas com um toque personalizado, como feeds de mídia social, posts recentes ou tags HTML.
Na WPBeginner, usamos widgets personalizados para exibir diferentes tipos de conteúdo na barra lateral do nosso site. E neste artigo, mostraremos como criar um widget WordPress personalizado, passo a passo.
Observação: Este tutorial é para usuários de WordPress que estão aprendendo desenvolvimento e codificação WordPress.
O que é um Widget WordPress?
Widgets WordPress contêm trechos de código que você pode adicionar às barras laterais ou áreas prontas para widgets do seu site.
Pense neles como módulos que você pode usar para adicionar diferentes elementos e funcionalidades ao seu site.
Por padrão, o WordPress vem com um conjunto padrão de widgets que você pode usar com qualquer tema WordPress. Para mais detalhes, consulte nosso guia para iniciantes sobre como adicionar e usar widgets no WordPress.
O WordPress também permite que os desenvolvedores criem seus próprios widgets personalizados.
Muitos temas WordPress premium e plugins vêm com seus próprios widgets personalizados que você pode adicionar às suas barras laterais.
Por exemplo, você pode adicionar um formulário de contato, um formulário de login personalizado, uma galeria de fotos, um formulário de inscrição para lista de e-mails e muito mais a uma barra lateral sem escrever nenhum código.
Dito isso, vamos ver como você pode facilmente criar seus próprios widgets personalizados no WordPress.
Antes de Criar um Widget Personalizado no WordPress
Se você está aprendendo a codificar em WordPress, precisará de um ambiente de desenvolvimento local. Isso lhe dá a liberdade de aprender e testar coisas sem a preocupação de seu site estar no ar.
Você pode instalar o WordPress localmente no Mac usando MAMP ou no Windows usando WAMP.
Se você já tem um site ativo, pode movê-lo para um host local. Para mais detalhes, veja nosso guia sobre como mover um site WordPress ativo para um servidor local.
Depois disso, existem várias maneiras de adicionar seu código de widget personalizado no WordPress.
Idealmente, você pode criar um plugin específico do site e colar seu código de widget lá. Isso permite que você adicione código ao WordPress que não depende do seu tema WordPress.
Você também pode colar o código no arquivo functions.php do seu tema. No entanto, ele só estará disponível quando esse tema específico estiver ativo.
Outra ferramenta que você pode usar é o plugin WPCode, que permite adicionar facilmente códigos personalizados ao seu site.
Neste tutorial, criaremos um widget simples que apenas cumprimenta os visitantes. O objetivo aqui é familiarizá-lo com a classe de widget do WordPress.
Pronto? Vamos começar.
Criando um Widget Básico do WordPress
O WordPress vem com uma classe de Widget do WordPress integrada. Cada novo widget do WordPress estende a classe de widget do WordPress.
Existem 19 métodos mencionados no manual do desenvolvedor do WordPress que podem ser usados com a classe WP Widget.
No entanto, para fins deste tutorial, focaremos nos seguintes métodos.
- __construct() : Esta é a parte onde criamos o ID do widget, título e descrição.
- widget : É aqui que definimos a saída gerada pelo widget.
- form : Esta parte do código é onde criamos o formulário com opções de widget para o backend.
- update: Esta é a parte onde salvamos as opções do widget no banco de dados.
Para criar um widget personalizado, você pode copiar e colar o seguinte trecho de código no seu arquivo functions.php ou no WPCode (recomendado):
<?php
// Creating the widget
class wpb_widget extends WP_Widget {
function __construct() {
parent::__construct(
// Base ID of your widget
'wpb_widget',
// Widget name will appear in UI
__( 'WPBeginner Widget', 'textdomain' ),
// Widget description
[
'description' => __( 'Sample widget based on WPBeginner Tutorial', 'textdomain' ),
]
);
}
// Creating widget front-end
public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );
// before and after widget arguments are defined by themes
echo $args['before_widget'];
if ( ! empty( $title ) ) {
echo $args['before_title'] . $title . $args['after_title'];
}
// This is where you run the code and display the output
echo __( 'Hello, World!', 'textdomain' );
echo $args['after_widget'];
}
// Widget Settings Form
public function form( $instance ) {
if ( isset( $instance['title'] ) ) {
$title = $instance['title'];
} else {
$title = __( 'New title', 'textdomain' );
}
// Widget admin form
?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>">
<?php _e( 'Title:', 'textdomain' ); ?>
</label>
<input
class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>"
name="<?php echo $this->get_field_name( 'title' ); ?>"
type="text"
value="<?php echo esc_attr( $title ); ?>"
/>
</p>
<?php
}
// Updating widget replacing old instances with new
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
return $instance;
}
// Class wpb_widget ends here
}
// Register and load the widget
function wpb_load_widget() {
register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );
A maneira mais fácil de adicionar código personalizado ao seu site WordPress é usando WPCode. É o melhor plugin de trechos de código que ajuda a gerenciar e inserir trechos de código no seu site sem o risco de quebrar nada.
Primeiro, você precisará instalar e ativar o plugin WPCode no seu site. Se precisar de ajuda, consulte nosso guia sobre como instalar um plugin do WordPress.
Após a ativação, você pode ir para Trechos de Código » + Adicionar Trecho no painel de administração do WordPress. A partir daqui, selecione a opção ‘Adicionar Seu Código Personalizado (Novo Trecho)’.
Depois disso, você pode colar o código do widget personalizado na área de Visualização do Código.
Você também precisará clicar no menu suspenso ‘Tipo de Código’ e selecionar a opção ‘Trecho PHP’.
Em seguida, você pode rolar para baixo e selecionar o método de Inserção para o seu código.
O WPCode permite que você escolha onde executar o código. Para este tutorial, você pode usar as opções padrão e executá-lo em todos os lugares.
Assim que isso for feito, você pode rolar de volta para o topo para Salvar o trecho.
Para ativar o trecho, basta clicar no alternador para ‘Ativo’.
Para saber mais, consulte nosso guia sobre como adicionar código personalizado ao seu site WordPress.
Após adicionar o código ao WordPress, você precisa acessar a página Aparência » Widgets no seu painel de administração do WordPress.
Em seguida, clique no ícone de adicionar bloco ‘Mais’, procure por ‘WPBeginner Widget’ e selecione o novo widget.
Este widget possui apenas um campo de formulário para preencher.
Você pode adicionar seu texto e clicar no botão ‘Atualizar’ para salvar suas alterações.
Agora, você pode visitar seu site WordPress para ver o widget personalizado em ação.
Aqui está um exemplo de como ele se parece em nosso site de demonstração.
Adicionando Widget Personalizado no Editor Clássico do WordPress
Se você estiver usando o editor de widgets clássico para adicionar novos widgets ao seu site, o processo será semelhante.
Haverá um novo widget chamado ‘WPBeginner Widget’ na lista de widgets disponíveis. Você precisa arrastar e soltar este widget na sua barra lateral.
Em seguida, insira um título e clique em ‘Salvar’ para salvar as configurações do seu widget.
Seu novo widget personalizado agora estará ativo em seu site.
Agora, vamos estudar o código novamente.
Primeiro, registramos o ‘wpb_widget’ e carregamos nosso widget personalizado. Depois disso, definimos o que esse widget faz e como exibir o back-end do widget.
Por fim, definimos como lidar com as alterações feitas no widget.
Agora, há algumas coisas que você pode querer perguntar. Por exemplo, qual é o propósito do textdomain?
O WordPress usa o 'gettext' para lidar com tradução e localização. Este textdomain e _e dizem ao 'gettext' para tornar uma string disponível para tradução. Para saber mais, veja nosso guia sobre como encontrar temas do WordPress prontos para tradução.
Se você está criando um widget personalizado para o seu tema, então você pode substituir textdomain pelo text domain do seu tema.
Alternativamente, você pode usar um plugin de tradução do WordPress para traduzir o WordPress facilmente e criar um site WordPress multilíngue.
Bônus: Adicione Estilos Personalizados aos Seus Widgets do WordPress
Depois de criar um widget do WordPress, você também pode adicionar estilos personalizados a ele. Isso pode melhorar a aparência do seu site, manter a consistência e chamar a atenção para informações importantes.
Para fazer isso, visite a página Aparência » Widgets e adicione o widget que você deseja personalizar. Agora você verá algumas opções para alterar suas cores e tipografia no painel de blocos à direita.
No entanto, se o widget não exibir essa opção, você poderá personalizá-lo adicionando classes CSS após expandir a aba 'Avançado'.
Agora, você pode adicionar CSS personalizado ao seu tema do WordPress direcionando essa classe CSS específica.
Para isso, acesse a página Aparência » Personalizar e mude para a aba CSS Adicional. Aqui, você verá uma prévia do seu site com uma caixa para adicionar suas regras CSS.
Agora você pode usar CSS personalizado para customizar a aparência do seu widget. Para mais detalhes, veja nosso tutorial sobre como adicionar estilos personalizados aos seus widgets do WordPress.
Esperamos que este artigo tenha ajudado você a aprender como criar facilmente um widget personalizado do WordPress. Você também pode querer ver nosso guia sobre como desativar blocos de widgets no WordPress e nosso tutorial sobre como remover widgets inativos no WordPress.
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.
Dan
A string ‘wpb_text_domain’ não foi encontrada no código de exemplo. Imagino que o código de exemplo foi atualizado e a redação do artigo não?
Além disso, para confirmar, ‘wpb_text_domain’ é realmente ‘web_widget_domain’ do código de exemplo?
Agradeço antecipadamente por qualquer feedback.
WPBeginner Support
Obrigado por apontar isso, atualizaremos este artigo e esclareceremos melhor e deixaremos claro.
Admin
marwan
Olá,
posso colocar o código como uma classe.php separada e não no functions.php
Karel Hanton
Obrigado pelo ótimo tutorial. Adicionei o código ao meu plugin de teste e funcionou perfeitamente como descrito – vejo o Widget na lista Aparência » Widgets e posso adicioná-lo à Barra Lateral.
Mas não vejo o novo Widget na lista do editor de páginas. Estou perdendo algo, é necessário outro registro ou configuração?
Obrigado novamente pela ajuda.
Aldo
Isso agora é exibido como um “Widget Legado” no Wordpress. Existe uma nova maneira de criar widgets?
JP
isso é ótimo, um exemplo simples de copiar e colar era exatamente o que eu estava procurando. Obrigado!
WPBeginner Support
You’re welcome
Admin
Banu
Criei um Plugin CRUD e preciso usá-lo em uma página. Você poderia me guiar sobre como usar esse plugin na página?
WPBeginner Support
Dependeria de como você configurou o plugin. Para tê-lo em uma página, você pode procurar usar um shortcode para exibição no front-end ou procurar a API de opções se quisesse exibi-lo no lado do administrador de um site.
Admin
Kishan
Como posso criar mais de 1 widget personalizado?
E também, como posso definir outros campos como rádio, checkbox, dropdown, texto no widget?
WPBeginner Support
Você precisaria substituir o wpb_widget pelo nome que deseja dar ao seu novo widget e, em seguida, o código dependeria do que você gostaria especificamente de adicionar. Se você der uma olhada no codex do WordPress, poderá ver os diferentes códigos disponíveis.
Admin
Carmen
Olá!
Atualmente, estou desenvolvendo um plugin e preciso criar um widget para permitir que o usuário adicione uma funcionalidade específica ao site dele.
Copiei o código do seu widget para um arquivo e salvei o arquivo no diretório do meu plugin. Usei add_action e do_action no arquivo principal do meu plugin para carregá-lo, mas ainda não funciona. Você pode me ajudar, por favor?
Obrigado!
WPBeginner Support
Infelizmente, isso dependeria muito de como seu plugin está configurado, você pode querer garantir que ambas as seções deste código estejam sendo carregadas para que o widget seja adicionado e exibido.
Admin
Maximilian K.
Uma pergunta rápida, e se eu quiser criar widgets onde eu também possa colocar outros widgets? Como colunas bootstrap vazias de 6-3-3, por exemplo, e em cada coluna eu possa colocar widgets como imagem, texto, posts recentes etc.
Existe um comando / palavra-chave para sinalizar que há espaço para outros widgets neste widget...
porque estou meio confuso sobre meu próprio tema criado e como o WP está funcionando... você vê, sou um iniciante ^^
Já coloquei informações gerais como título da página, criei áreas de widget no meu rodapé para que eu possa colocar menus, links relacionados etc. nele. Funcionou.
Mas agora estou confuso sobre como posso realizar meu conteúdo no WordPress como o projetei antes. Talvez algumas palavras-chave sejam úteis para ler mais sobre elas.
WPBeginner Support
Isso exigiria mais personalização do que abordamos neste artigo, você pode precisar pesquisar como criar uma barra lateral para código que você pode usar: https://www.wpbeginner.com/wp-themes/how-to-add-dynamic-widget-ready-sidebars-in-wordpress/
Admin
Lars
Ótimo tutorial! Funcionou perfeitamente.
WPBeginner Support
Glad our tutorial could help
Admin
Watson Anikwai
Como obter um campo de tipo de post personalizado do banco de dados do WP e usar um widget para exibir no front-end?
vicky
não consigo adicionar dois widgets personalizados.. o segundo widget não está aparecendo....
o que devo fazer???.. por favor, ajude
Ahad Bhatti
Muito compreensível e útil. Obrigado.
Belitza Gomez
Olá, gostaria de saber onde posso encontrar nos widgets disponíveis o “menu personalizado”. Ele não aparece e não consegui adicionar uma página ao rodapé através deste widget.
Obrigado pela sua ajuda!!!!
Samdoxer
Olá, como eu mostraria um logotipo em vez de texto. Substituir a URL do logotipo pelo texto seria suficiente.
Obrigado antecipadamente.
WPBeginner Support
Por favor, consulte as configurações do seu tema ou visite a página Aparência » Personalizador na área de administração. Lá você encontrará uma opção para fazer o upload da imagem do seu logotipo.
Admin
Gary Foster
O que veio primeiro, o widget ou o aplicativo?
Um widget precisa ser registrado? Se sim, como, por favor?
Como você protege melhor sua ideia de um widget ou aplicativo?
Obrigado a todos
shelley
Estas instruções funcionaram maravilhosamente para criar meu widget personalizado. No entanto, não consigo descobrir como mudar o tamanho da fonte para 60px. Consegui adicionar CSS às opções do tema Divi que centralizaram o texto e adicionaram uma borda de linha. Mas como mudo a estilização da fonte, por favor? Adicionar “font-size:60px” não funciona. Quero que a fonte seja grande, como uma linha de título que percorre a página. Obrigado.
Ahmad Farhan
Very helpfull. tankyou
Eyad
Muito obrigado pelos seus tutoriais
Luigi Briganti
Olá! Espero que você possa me ajudar.
Criei um tipo de postagem personalizado que exibe o horário de funcionamento de uma loja. Claro, você pode criar quantos horários de funcionamento quiser, mas minha necessidade é exibir um determinado horário de funcionamento na barra lateral do site.
Para esse fim, criei um widget que percorre as postagens de horário de funcionamento exibindo apenas 1 (ou seja, a primeira, pois ordenei em ordem ASC). Esta é uma solução temporária, apenas para ver se o widget funciona e ele funciona, de fato.
O que eu realmente quero fazer é mostrar no backend uma lista suspensa de todas as postagens pertencentes ao tipo de postagem “timetable” para que eu possa escolher a que preciso quando precisar e exibi-la no frontend. Como posso fazer isso?
Obrigado se puder/quiser ajudar.
Anees Ijaz
Valeu cara por economizar meu tempo..
Kevin
Adorei este post, me ajudou muito! Obrigado!