O que são widgets WordPress? Saiba como usar, criar e personalizar no seu site

Os widgets do WordPress são recursos prontos que permitem adicionar conteúdos e funcionalidades ao seu site sem precisar escrever código. Eles são ótimos para incluir coisas como feed de redes sociais, posts recentes do blog, formulários de contato e muito mais — tudo de forma prática e rápida.

Neste guia, você vai entender tudo sobre widgets WordPress: o que são, onde encontrá-los no painel, como usar os que já vêm instalados e também como criar seus próprios widgets personalizados. Vamos mostrar ainda como configurá-los para deixar seu site do jeitinho que você precisa. Boa leitura!

Onde encontrar widgets no WordPress

Se você estiver usando um tema clássico, siga estas etapas para acessar a área de widgets do seu site WordPress:

1. Faça login na área de administração do WordPress.
2. Certifique-se de que o plugin Classic Widgets esteja instalado e ativado.
3. No menu lateral esquerdo, clique em Aparência.
4. Selecione Widgets.

Você verá os Widgets disponíveis no lado esquerdo da tela. Esses são os widgets que você pode adicionar diretamente ao seu site.

No lado direito, estarão visíveis as áreas de widget ou sidebars, que normalmente incluem a barra lateral, o rodapé e o cabeçalho. As áreas disponíveis dependem do tema clássico que você estiver usando.

Se você estiver usando um tema baseado em blocos, os widgets ficam acessíveis no editor de site, página ou post. Basta clicar no botão de inserir blocos (ícone de +) e rolar a lista até encontrar os widgets disponíveis.

Como adicionar widget no WordPress

O WordPress oferece vários widgets prontos para usar que você pode adicionar facilmente ao seu site. Alguns já vêm integrados ao próprio WordPress, enquanto outros podem ser instalados por meio de plugins. Vamos ver como funcionam essas duas opções.

Adicionando widgets nativos ao seu site

Se você estiver usando um tema clássico, siga estas etapas para concluir a adição de um dos widgets pré-instalados ao seu site WordPress:

1. No painel de administração do WordPress, vá até Aparência → Widgets.
2. Escolha uma opção entre os Widgets disponíveis e arraste-a para a área desejada à direita. Por exemplo, adicionaremos um widget de Posts Recentes à área principal de widgets.
3. Personalize o widget inserindo um título e especificando o número de publicações a serem exibidas. Você também tem a opção de exibir a data da postagem.
4. Quando terminar de personalizar, clique em Salvar.

Veja como o widget aparecerá no seu site:

Se estiver usando um tema baseado em blocos, siga estas etapas para adicionar qualquer um dos widgets nativos ao seu site do WordPress:

1. No painel de administração do WordPress, vá até Aparência → Editor.
2. Na pré-visualização do site, clique na área onde deseja adicionar o widget..
3. Clique no botão + e role para baixo até encontrar a categoria Widgets. Como exemplo, selecionaremos o widget Posts mais recentes.
4. O widget aparecerá diretamente na área de visualização. Você pode ajustar o alinhamento e escolher se os links serão exibidos em formato de lista ou grade.
5. Quando terminar de personalizar, clique em Salvar.

Veja como o widget aparecerá no seu site:

Adicionando widgets ao site usando plugins

Você também pode adicionar widgets WordPress instalando plugins de terceiros que oferecem esses recursos extras. Neste exemplo, usaremos o plugin RaraTheme Companion, que adiciona 23 widgets e ferramentas extras para ajudar a personalizar ainda mais seu tema do WordPress. No entanto, observe que alguns desses plugins de widget são compatíveis apenas com temas clássicos.

Siga estas etapas:

1. Certifique-se de que o RaraTheme Companion está instalado e ativado. 
2. Vá até Aparência → Widgets. Você verá novas opções na seção de Widgets disponíveis.

3. Escolha o widget que deseja adicionar e arraste-o para a área desejada. Neste exemplo, vamos adicionar o widget Author Bio ao rodapé.
4. Personalize o widget — você pode adicionar um título, nome do autor, foto e outros detalhes.

5. Clique em Salvar quando terminar.

Pronto! O widget adicionado pelo plugin já estará visível no seu site.

Como personalizar widgets WordPress com CSS

Dependendo do seu tema, é possível personalizar os widgets do WordPress diretamente pelo painel ou pelo Editor do Site. No entanto, o nível de personalização pode ser limitado em alguns casos.

Se você tem familiaridade com o básico de HTML e CSS, é possível aplicar estilos avançados adicionando CSS personalizado ao WordPress. Veja como:

1. No Editor, selecione o widget que você deseja personalizar com CSS.
2. Na barra lateral direita, vá até a aba Bloco e role até encontrar a seção Avançado.

3. Digite um nome de classe CSS na barra Classe(s) CSS Adicional(is) e clique em Atualizar. Você usará essa classe para aplicar o novo estilo CSS.
4. Volte ao painel de administração e vá até Aparência → Personalizar → CSS Adicional.
5. Será exibida uma caixa de texto na qual você adicionará o estilo CSS. Por exemplo, veja como adicionar uma cor de fundo para seu widget. Observe que widget, no CSS abaixo, significa a classe personalizada que definimos na etapa anterior.

6. Quando terminar, clique em Salvar.

E pronto — o estilo CSS adicional será aplicado ao seu widget!

Como criar um novo widget no WordPress

Apesar de existirem muitos widgets WordPress prontos para usar — tanto os que já vêm com o sistema quanto os oferecidos por plugins — pode ser útil criar um widget personalizado, especialmente se você tiver uma necessidade muito específica. A parte boa é que a flexibilidade do WordPress como sistema de código aberto torna isso possível até mesmo para quem está começando.

A seguir, mostramos o passo a passo para criar um widget no WordPress. Para facilitar a visualização, vamos criar um exemplo simples: um widget que adiciona um bloco de conteúdo à barra lateral (sidebar) ou a uma área de widget do seu site.

1. Crie o arquivo do plugin do widget

Primeiro, crie uma nova pasta chamada my-custom-widget. Dentro dela, crie um novo arquivo chamado my-custom-widget.php. Esse arquivo conterá todo o código de seu widget.

Abra o arquivo em um editor de texto e copie o código abaixo. Ele define o cabeçalho do plugin, com as informações básicas como nome, descrição, versão e autor. O código também inclui uma verificação de segurança para evitar que o plugin seja executado fora do ambiente WordPress:

<?php

/*

Plugin Name: My Custom Widget

Description: A simple custom widget example.

Version: 1.0

Author: Your-Name-here

*/

// Ensure this file is being included by WordPress.

defined('ABSPATH') or die('No script kiddies please!');

Em seguida, vamos criar a classe My_Custom_Widget, que define o comportamento do widget personalizado no WordPress. Essa classe estende a classe nativa WP_Widget e precisa incluir as seguintes funções:

• __construct() – inicializa o widget do WordPress com um identificador, um nome e uma descrição exclusivos.
• widget() – exibe o conteúdo do widget no site, com título (se definido nas configurações) e uma mensagem padrão “Hello, World!”.
• form() – gera o formulário de configurações do widget no painel administrativo, permitindo personalizar o título. 
• update() – salva as configurações do widget no banco de dados.

As funções __construct() e widget() são obrigatórias. Já as funções form() e update() podem ser omitidas se o widget não tiver configurações, mas é recomendado incluí-las, mesmo que vazias.

Agora, copie e cole o código a seguir no mesmo arquivo PHP.

class My_Custom_Widget extends WP_Widget {

// Constructor

function __construct() {

     parent::__construct(

         'my_custom_widget', // Base ID

         __('My Custom Widget', 'text_domain'), // Name

         array('description' => __('A Custom Widget', 'text_domain'),) // Args

     );

}

// The widget() method to display the widget content on the front-end

public function widget($args, $instance) {

     echo $args['before_widget'];

     if (!empty($instance['title'])) {

         echo $args['before_title'] . apply_filters('widget_title', $instance['title']) . $args['after_title'];

     }

     echo __('Hello, World!', 'text_domain');

     echo $args['after_widget'];

}

// The form() method to create the widget settings form in the admin area

public function form($instance) {

     $title = !empty($instance['title']) ? $instance['title'] : __('New title', 'text_domain');

     ?>

     <p>

     <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></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

}

// The update() method to save the widget settings

public function update($new_instance, $old_instance) {

     $instance = array();

     $instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']) : '';

     return $instance;

}

}

Por fim, adicione o código abaixo no final do arquivo para registrar o widget no WordPress. Com isso, o plugin estará completo e pronto para uso:

// Register the widget

function register_my_custom_widget() {

register_widget('My_Custom_Widget');

}

add_action('widgets_init', 'register_my_custom_widget');

2. Crie um arquivo ZIP e envie para o WordPress

Quando o arquivo PHP do plugin estiver pronto, compacte a pasta my-custom-widget em um arquivo ZIP.

Em seguida, faça login no painel do WordPress e vá para Plugins → Adicionar Novo Plugin. Faça upload do arquivo ZIP e aguarde até que o plugin seja instalado.

Por fim, vá para Plugins → Plugins instalados, role para baixo até ver My Custom Widget na área do widget e clique em Ativar.

3. Adicione o widget à barra lateral do WordPress

Para adicionar o widget personalizado que você acabou de criar à barra lateral do WordPress, vá até Aparência → Widgets.

Em seguida, selecione a barra lateral onde você deseja colocar o widget. Clique no ícone +  e, em seguida, procure My Custom Widget na barra de pesquisa. Quando o widget aparecer, clique nele.

Agora, você pode definir o título do widget e ajustar as opções de visibilidade, se desejar.

Por fim, clique em Atualizar no canto superior direito da tela. Pronto, o novo widget já está instalado e pode ser adicionado ao seu site do WordPress.

10 exemplos populares de widgets WordPress

O WordPress oferece centenas de widgets nativos e de terceiros que você pode usar para adicionar funcionalidades ao seu site e melhorar a experiência dos visitantes. A seguir, veja 10 widgets WordPress populares que são práticos e bastante utilizados:

Publicações mais recentes

Esse é um dos widgets clássicos do WordPress — e por um bom motivo. Ele exibe os posts mais recentes do seu blog, ajudando os visitantes a descobrirem seu conteúdo mais novo e aumentando o tempo de navegação no site.

Lista de categorias

O widget Lista de categorias mostra todas as categorias existentes no seu blog. Isso permite que os usuários encontrem rapidamente os tópicos que mais interessam, organizando melhor o conteúdo do site.

Nuvem de tags

A nuvem de tags exibe as tags mais usadas em formato visual. Quanto mais uma tag é utilizada, maior será o tamanho da fonte — o que destaca os assuntos mais recorrentes do seu conteúdo.

Ícones de redes sociais

Esse widget exibe ícones com links para seus perfis nas redes sociais, facilitando o contato com seus seguidores em outras plataformas. É possível personalizar as cores, tamanhos e o alinhamento dos ícones para combinar com o seu tema.

HTML personalizado

O widget HTML personalizado permite adicionar código HTML diretamente nas áreas de widget. Ele é ideal para desenvolvedores ou usuários avançados que querem inserir funcionalidades específicas ou elementos personalizados.

Arquivos

O widget de arquivos exibe um menu com os posts organizados por mês ou ano. É uma forma útil de permitir que os visitantes encontrem conteúdos mais antigos de forma rápida e intuitiva.

Pesquisa do Jetpack

Esse widget usa o Jetpack Search, baseado no mecanismo de busca Elasticsearch. Ele oferece recursos avançados como indexação automática de todas as páginas e posts públicos, melhorando a busca interna do seu site.

Perguntas frequentes do RaraTheme Companion

Um widget de terceiros oferecido pelo RaraTheme Companion, que permite adicionar uma seção de perguntas frequentes (FAQ) diretamente nas áreas de widget, com perguntas, respostas e configurações de visibilidade personalizáveis.

WPForms

O widget WPForms é outra opção popular de terceiros. Ele permite adicionar facilmente formulários de contato, pesquisas, formulários de pagamento ou registro em barras laterais e outras áreas do tema.

WP Go Maps

Com o plugin WP Go Maps, esse widget permite adicionar um mapa interativo do Google Maps ao seu site. É possível personalizar a aparência do mapa, definir local padrão, adicionar múltiplos marcadores com texto ou imagem, e muito mais.

Dicas para gerenciar widgets do WordPress

Os widgets WordPress são ótimos para adicionar funcionalidades e recursos ao seu site sem complicações. Mas é importante lembrar que cada novo widget pode impactar o desempenho da sua página, a responsividade e até a simplicidade visual da interface.

Esses impactos costumam ser pequenos individualmente — por exemplo, um widget de redes sociais pode adicionar apenas alguns milissegundos ao tempo de carregamento. No entanto, ao acumular vários widgets, esses efeitos podem somar e prejudicar a performance geral do site.

Não existe um número exato de widgets que você pode usar, mas o ideal é manter apenas os que realmente são necessários para oferecer uma boa experiência aos visitantes. Em geral, até cinco widgets costumam ser mais que suficientes para a maioria dos sites.

Outro ponto essencial é considerar o provedor de hospedagem, já que ele influencia diretamente na velocidade e desempenho do site. A hospedagem WordPress da Hostinger, recomendada pelo WordPress.org, oferece recursos otimizados especialmente para WordPress — o que ajuda a garantir o melhor desempenho possível, mesmo com o uso de widgets.

Aqui estão mais algumas práticas recomendadas para manter seu site o mais limpo e intuitivo possível ao usar widgets.

• Organize seus widgets – use diferentes áreas do tema (como sidebar, rodapé e cabeçalho) e distribua os widgets de forma lógica. Por exemplo, utilize a barra lateral para navegação e o rodapé para informações complementares.
• Visualize suas alterações – use a opção de visualização ao vivo no personalizador para conferir se o widget está funcionando corretamente e se combina com o design do site.
• Mantenha seus plugins atualizados – muitos widgets fazem parte de plugins, então manter tudo atualizado ajuda a evitar falhas, manter a compatibilidade com seu tema e reforçar a segurança do site. 

Conclusão

Os widgets WordPress são uma excelente forma de personalizar o layout e as funcionalidades do seu site. Com eles, você pode exibir posts recentes, ícones de redes sociais, formulários de contato, depoimentos de clientes e muito mais — tudo sem precisar programar.

Neste guia, você aprendeu onde encontrar os widgets no WordPress, como adicioná-los ao seu site e personalizá-los conforme sua necessidade. Também vimos alguns dos widgets mais populares, incluindo opções nativas do WordPress e de terceiros, como RaraTheme Companion e Jetpack Search.

Se quiser ir além, você pode até criar seu próprio widget com um pouco de conhecimento em CSS — e seguir o passo a passo que mostramos aqui.

Esperamos que este conteúdo te ajude a explorar novas possibilidades com widgets, deixando seu site mais dinâmico, funcional e fácil de navegar para seus visitantes.

Perguntas frequentes sobre widgets WordPress

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