O Guia Completo para WordPress Widgets: Como Utilizá-los, Adicioná-los e Configurá-los para Personalizar o Seu Site

Os widgets WordPress são incrivelmente úteis. Eles permitem que você adicione todo tipo de conteúdo extra ao seu site fora do corpo do próprio post ou página, incentivando os usuários a obter informações, seguir links, ou tomar medidas.

Neste post, vou mostrar tudo o que você precisa saber sobre os widgets do WordPress. Como adicioná-los ao seu site, como criar áreas de widgets para colocá-los, como instalar plugins que lhe dão mais deles, como codificar seus próprios widgets, e muito mais.

Primeiro, vamos começar por identificar o que são widgets WordPress.

O que são widgets WordPress?

No WordPress, widgets são trechos de conteúdo que vivem fora do fluxo da página ou do conteúdo do post.

Os widgets contêm informações, navegação ou mídia separada de um post ou página individual. Na maioria dos casos, cada widget será exibido em cada página do site, mas você também pode registrar áreas widget para páginas específicas, como a página inicial.

Para adicionar um widget ao seu site, você precisa adicioná-lo a uma área widget. As áreas Widget são criadas pelo seu tema porque estão relacionadas com o design e layout do seu site e não com a funcionalidade.

A maioria dos temas do WordPress tem áreas widget na barra lateral e no rodapé, embora alguns tenham múltiplas áreas widget em muitos lugares, como abaixo ou acima do conteúdo ou no cabeçalho.

A captura de tela abaixo, de um dos meus próprios sites, mostra widgets na barra lateral e no rodapé.

O WordPress vem com um monte de widgets pré-carregados para que você possa usá-los sem ter que instalar nenhum plugin ou escrever qualquer código. Mas você também pode adicionar muito mais widgets instalando plugins ou codificando os seus próprios.

Estes podem cobrir uma vasta gama de tipos de conteúdo, tais como mídia, feeds de mídia social, navegação, pesquisa, mapas e muito mais. Há muito pouco que você pode querer no seu site para o qual você não consegue encontrar um widget. Na verdade, o maior desafio é muitas vezes escolher entre todas as opções e não exagerar.

Quando usar WordPress Widgets

Você deve usar um widget sempre que quiser adicionar conteúdo extra a uma ou mais páginas do seu site (e quando digo página, incluo posts, arquivos, etc.), mas isso não faz parte do conteúdo dessa página. Eles são particularmente úteis para conteúdos que você quer mostrar em cada página do site, como uma lista dos seus últimos posts, um carrinho de compras, ou um botão de chamada para ação.

Pense em quantos usuários precisarão de acesso a cada widget e como é importante quando você decide onde colocá-lo. Os widgets na barra lateral serão mais proeminentes do que os do rodapé, que alguns usuários podem nem mesmo ver.

Portanto, um widget de posts mais recentes ou um widget de chamada para ação pode estar melhor na barra lateral onde as pessoas têm mais chances de interagir com elas, enquanto um feed de mídia social pode ir no rodapé.

Se o seu tema também tiver áreas widget especiais para a página inicial, você pode querer usá-las para navegar pelos departamentos do seu site, listas de conteúdo relevante ou mídia, como um vídeo de boas-vindas ao site.

11 Exemplos de Widgets no WordPress

A melhor maneira de entender as possibilidades oferecidas pelos widgets WordPress é olhar para alguns exemplos deles. Vamos dar uma olhada em onze tipos de widget que você verá frequentemente em sites WordPress.

1. Widget de Posts Recentes

O widget Posts Recentes é possivelmente o widget mais usado nos blogs.

Permite mostrar uma lista dos seus posts mais recentes na barra lateral ou rodapé de cada página do seu site, aumentando a possibilidade das pessoas navegarem no site e lerem um número de posts.

O widget Posts Recentes vem pré-instalado com WordPress. Permite definir quantos posts você quer mostrar e que título você quer dar ao widget.

Se você quiser adicionar funcionalidades extras, você pode instalar um plugin para um widget alternativo como o WordPress Popular Posts, que exibe o conteúdo mais popular. Alternativamente, o widget Advanced Random Posts refresca cada vez que o usuário visita uma nova tela.

2. Comentários recentes Widget

Quer mostrar aos visitantes o quanto seu site é vibrante e o quanto seu público está envolvido com seu conteúdo?

O widget Comentários Recentes exibe os últimos comentários em seu site, dando aos visitantes a oportunidade de navegar diretamente para esses comentários e participar da discussão.

O widget Recent Comments vem com WordPress. Mais uma vez, se você quiser adicionar funcionalidades extras, você pode instalar um plugin de comentários de terceiros, como o WP Social Comments widget, que permite que as pessoas comentem usando sua conta do Facebook: bom para o envolvimento nas mídias sociais.

3. Widgets de Chamada para Ação

Um grande uso de um widget é encorajar as pessoas a agir, e você pode fazer isso com um widget de chamada à ação.

Seu widget pode ser um simples botão, ou você pode criar algo mais personalizado usando um widget de texto ou HTML, ou mesmo um widget de imagem, todos pré-instalados com o WordPress.

Em um dos meus próprios sites, eu criei um widget de chamada para ação incentivando as pessoas a se inscreverem na minha lista de discussão. Isto usa o widget HTML incorporado no qual eu incluí uma imagem, algum texto e um botão que eu codifiquei em HTML.

4. Widgets de Navegação

Você também pode usar widgets para incentivar as pessoas a navegar pelo seu site.

Existem algumas opções para isso: os widgets Categorias ou Tag Cloud e o widget Menu de Navegação.

O widget Menu de Navegação permite-lhe criar um menu de navegação personalizado, bem como o menu principal de navegação no seu site, e depois adicioná-lo a uma área widget.

Você pode até adicionar seu menu principal de navegação a uma área widget, embora isso só funcione se você tiver um menu de navegação pequeno.

Adicionar um menu de navegação ao rodapé do seu site irá encorajar as pessoas que chegam ao final de um post a navegar pelo seu site. É particularmente útil para usuários móveis que podem ter que fazer muita rolagem para voltar ao menu principal de navegação depois de chegar ao final de um post.

Alternativamente, você pode usar o widget Categorias embutido para exibir uma lista das categorias do seu site, ou o widget Nuvem de Tags para facilitar o acesso das pessoas aos arquivos de tags.

5. Widgets de mídia

Adicionar mídia à sua barra lateral ou rodapé dará vida ao seu site e dará aos usuários algo para ver ou interagir com ele.

Você pode usar o widget de imagem embutido para exibir qualquer imagem em sua barra lateral ou rodapé, e ele permite que você transforme essa imagem em um link também.

Em alternativa, o widget Vídeo permite-lhe transmitir vídeo do YouTube ou Vimeo diretamente para a área widget do seu site. Isto é particularmente útil se o seu site tem áreas widget especiais para a página inicial, mas também pode ser bom no rodapé como forma de chamar a atenção das pessoas quando elas chegam ao fim de um post.

6. Social Media Widgets

Se você quiser se envolver com pessoas que visitam seu site pelas mídias sociais, adicionar seu feed de mídia social à barra lateral ou rodapé do seu site mostrará às pessoas que você é ativo nas mídias sociais e as incentivará a gostar ou segui-lo.

Uma maneira de obter acesso aos widgets das redes sociais para as maiores plataformas (Facebook, Twitter, Instagram) é instalar o plugin Jetpack, que inclui tudo isso e muito mais.

Alternativamente, todas as plataformas de mídia social têm seus próprios plugins, disponíveis gratuitamente através do diretório de plugins. Ou você pode encontrar plugins de terceiros que lhe permitirão personalizar a forma como você exibe seu feed de mídia social.

7. Widget do carrinho de compras

Se você está rodando uma loja de comércio eletrônico no seu site usando um plugin como o WooCommerce, é uma boa idéia incluir um widget para que os usuários possam navegar facilmente até o carrinho onde quer que estejam na loja.

Você pode colocar isto na barra lateral onde as pessoas poderão facilmente vê-lo, ou no cabeçalho para maior visibilidade se o seu tema incluir uma área widget lá.

Plugins de comércio eletrônico como o WooCommerce incluem widgets de carrinho de compras e outros widgets de comércio eletrônico como parte do plugin, assim, uma vez que você tenha adicionado o comércio eletrônico ao seu site, você vai encontrá-los adicionados à sua tela de Widgets.

8. Formulário Widget

Se você quiser que as pessoas entrem em contato com você, façam perguntas ou se inscrevam em uma lista de discussão, você pode adicionar um formulário à sua barra lateral.

Não há um widget de formulário incluído no WordPress, mas você pode adicionar plugins para fornecê-los, tais como o Formulário de Contato 7 gratuito ou os Formulários de Gravidade Premium, mas muito poderosos.

9. Mapa Widget

Se o seu negócio está baseado em um local físico e você quer que as pessoas sejam capazes de encontrá-lo facilmente, adicionar um widget de mapa ao seu site ajudará.

Há uma série de plugins gratuitos de mapas do Google ou outros plugins de mapas do WordPress que você pode usar, tais como o plugin WP Google Maps.

Alternativamente, se você não quiser instalar um plugin, você pode pegar o código incorporado do Google Maps e adicioná-lo a um widget HTML.

10. Widget de Login

Se você estiver executando um site de membros, um widget de login facilitará o acesso das pessoas ao seu site sem ter que ir a uma página de login separada.

O Meta widget que vem com o WordPress inclui um link de login, mas também inclui outras coisas que você pode não querer, então eu recomendaria usar um plugin separado para isso do diretório de plugins.

O Login com o widget Ajax dá-lhe um formulário de login no seu widget, o que significa que as pessoas podem entrar no seu site a partir de qualquer página.

11. Pesquisar Widget

Um widget realmente simples mas incrivelmente útil é o widget Search, que vem pré-carregado com o WordPress.

Adicione isto à sua barra lateral ou ao cabeçalho e facilitará as pessoas a encontrarem coisas no seu site.

Se você quiser aumentar o poder do seu widget de pesquisa, você pode instalar o widget gratuito WP Google Search, que usa a pesquisa do Google.

Como Adicionar Widgets ao seu Site WordPress

Depois de decidir que tipo de widgets você precisa para o seu site WordPress, é hora de instalá-los.

Não te sintas tentado a acrescentar demasiadas. Quanto mais existem, menos provável é que os utilizadores reparem neles. Em vez disso, concentre-se em dois ou três widgets-chave para a barra lateral. Pode acrescentar mais ao rodapé, onde são menos importantes de qualquer forma.

E se você tiver alguma área extra de widgets no seu tema, decida quais widgets colocar neles. Certifique-se de que eles se encaixam no layout e design do seu site.

Há três maneiras de adicionar widgets:

• Use os widgets que já vêm com o WordPress.
• Adicione um widget de terceiros a partir do diretório de plugins.
• Compre um plugin premium que inclui um widget.

Encontrar Widgets para o seu site WordPress

Há uma vasta gama de widgets disponíveis, por isso pode ser difícil escolher qual deles instalar. Vamos dar uma olhada nas opções e depois examinar como você pode escolher a melhor para você.

Widgets que vêm com WordPress

Se um dos widgets pré-instalados fizer o que você precisa, então use-o. Isso lhe poupará tempo e significará menos código rodando no seu site.

Os widgets pré-instalados são:

• Arquivos: link para arquivos por mês, projetado para blogs, mas um pouco desatualizado agora.
• Calendário: um calendário dos seus posts, mais uma vez adequado para blogs, especialmente se o seu é sensível ao tempo (mas não tão comum hoje em dia).
• HTML personalizado: a última palavra em flexibilidade, adicione o conteúdo que você quiser digitando ou colando no HTML (como formulários do Google). Evite se não estiver confortável com a codificação.
• Imagem: exibir uma imagem da sua biblioteca de mídia.
• Menu de Navegação: mostra o menu de navegação principal ou um menu separado que você cria.
• Comentários recentes: uma lista de comentários recentes com links para eles.
• Tag Cloud: uma lista de tags em formato de nuvem, com links para os arquivos relevantes.
• Vídeo: incorporar um vídeo do YouTube ou de qualquer outro serviço de streaming.
• Áudio: incorporar um podcast, um leitor, uma canção ou outros clips de áudio (sugestão: How to Como iniciar um Podcast usando o WordPress).
• Categorias: uma lista das categorias do seu blog, com links para as páginas de arquivo.
• Galeria: mais avançado do que o widget de imagem, exibir uma galeria de imagens.
• Meta: metadados tais como links de login e feeds RSS. Uma ressaca dos primeiros tempos do WordPress e não muito útil agora.
• Páginas: mostre uma lista das páginas do seu site com links.
• Posts recentes: exiba uma lista dos seus posts mais recentes para incentivar as pessoas a lê-los.
• Pesquisa: uma simples caixa de pesquisa.
• Texto: qualquer texto que você queira adicionar, como informações sobre o site.

Adicionando Widgets com um Plugin

O diretório de plugins do WordPress tem milhares de plugins gratuitos de widgets que lhe darão mais widgets para escolher.

Além disso, muitos outros plugins também incluem widgets, como um ecommerce plugin que lhe dá um widget de carrinho e muito mais.

Se o diretório de plugins não tiver o plugin que você precisa, você pode decidir adicionar um plugin premium. Por vezes, estes oferecem mais funções ou uma interface mais intuitiva. Mas às vezes você encontrará as mesmas características em um plugin gratuito, então faça uma boa busca no diretório de plugins antes de pagar por plugins.

Como encontrar o Widget certo para o seu site

Para encontrar o widget WordPress certo para você, siga estas dicas:

1. Identifique exatamente o que você precisa do widget. Que funcionalidade precisa ter e como você quer que fique? Precisa de se ligar a alguma API de terceiros?
2. Verifique os widgets embutidos para ver se há um que atenda às suas necessidades. Teste qualquer um relevante, se você encontrar um adequado, isso é ótimo. Se não…
3. Verifique o diretório de plugins, que você pode acessar através de Plugins > Adicionar Novo. Tente procurar por mais de um termo para encontrar o plugin certo para você, e procure com e sem a palavra ‘widget’. Às vezes um plugin que não esteja focado em widgets incluirá um widget como parte de um conjunto mais amplo de funcionalidades.
4. Se você não encontrar nada adequado entre os plugins gratuitos, procure por um prêmio plugin. Peça recomendações a outros usuários do WordPress e veja as revisões antes de escolher uma.

Qualquer que seja o widget que você escolher, você precisará testá-lo para verificar se funciona como você quer. Se você estiver comprando plugins premium, eu recomendaria comprar um com garantia de devolução do dinheiro ou um período de teste gratuito, caso não seja adequado para você.

Como Adicionar Widgets à Barra Lateral e Rodapé no WordPress

Agora que você escolheu seu widget, é hora de adicioná-lo ao seu site.

Você pode adicionar widgets a qualquer área ativa de widgets fornecida pelo seu tema. Se o seu tema não tem uma área widget no local que você quer, tente procurar um tema alternativo.

Mais tarde neste post, vou mostrar-lhe como codificar a sua própria área widget.

Há duas maneiras de adicionar widgets ao seu site:

• Ao usar o Customizer. Vá para Aparência > Personalizador > Widgets no menu admin, ou Personalizar > Widgets na barra de administração na parte superior da tela.
• Através da tela de administração dos Widgets. Vá para Aparência > Widgets no menu admin, ou na barra admin, clique em Personalizar > Widgets.

Mostrarei a você como usar esses dois métodos em breve, mas primeiro vamos dar uma olhada nas áreas de widget e por que você obtém as que você faz com o seu tema.

Os Widgets não são só para a Barra Lateral

Dependendo do seu tema WordPress, você pode encontrar áreas widget em vários lugares.

A maioria dos temas tem áreas widget na barra lateral e no rodapé. Mas alguns também os têm em outros lugares, como abaixo ou acima do conteúdo ou no cabeçalho.

Se você for para a tela de configurações de widgets no administrador do WordPress, você poderá ver todas as áreas de widgets no seu tema.

Eu uso um tema com múltiplas áreas widget em muitos lugares. Você pode ver na captura de tela abaixo que existem áreas widget acima e abaixo do conteúdo, no cabeçalho, abaixo do rodapé principal.

Se você quiser adicionar widgets a outros lugares no seu site, faz sentido encontrar um tema que tenha múltiplas áreas de widgets. A melhor maneira de fazer isso é usar um tema de enquadramento.

Um bom exemplo de um widget em um lugar do seu tema que não é a barra lateral ou o rodapé é adicionar uma barra de busca no cabeçalho, como eu tenho em um dos meus sites.

Áreas e Temas de Widget

As áreas Widget são codificadas nos arquivos de modelos de temas, bem como no arquivo de funções do tema.

Aqui você pode ver o código que eu usei no meu arquivo de funções temáticas para adicionar uma área widget que irá no cabeçalho.

register_sidebar( array(
 'name' => __( 'In Header Widget Area', 'rmccollin' ),
 'id' => 'in-header-widget-area',
 'description' => __( 'A widget area located to the right hand side of the header, next to the site title and description.', 'rmccollin' ),
 'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
 'after_widget' => '</div>',
 'before_title' => '<h3 class="widget-title">',
 'after_title' => '</h3>',
) );

E aqui está o código no meu arquivo header.php que adiciona essa área widget no lugar certo do tema.

if ( is_active_sidebar( 'in-header-widget-area' ) ) { ?>

 <aside class="in-header widget-area right" role="complementary">
  <?php dynamic_sidebar( 'in-header-widget-area' ); ?>
 </aside>

<?php }

Se você quiser adicionar áreas widget extras no seu tema, você precisa adicionar o mesmo tipo de código. Eu mostro-te como fazer isto mais tarde, neste post.

Não se esqueça que se o seu tema não tiver tantas áreas widget como gostaria, pode sempre fazer uma de duas coisas:

• Encontre um tema que tenha áreas widget onde você as queira.
• Codifique a nova área widget para o seu tema ou para uma criança of your theme.

Uma vez que você tenha áreas de widgets em todos os lugares do seu tema que você quer, você pode começar a adicionar widgets a eles.

Como usar a tela de Widgets para adicionar Widgets

Há duas maneiras de adicionar widgets ao seu site WordPress. A primeira é usar a tela Widgets no administrador do WordPress.

Clique em Appearance > Widgets. Isto faz surgir o ecrã dos widgets.

Para adicionar um widget, você pode fazer uma de duas coisas:

• Arraste-o da lista de widgets no lado esquerdo para a área relevante do widget.
• Clique no widget que deseja adicionar, e verá uma lista de onde o pode adicionar. Selecione a área widget que você deseja e clique no botão Adicionar Widget.

Você pode então precisar editar onde o widget está posicionado dentro da área do widget.

Você pode adicionar quantos widgets quiser a cada área de widgets, mas não exagere. Você pode arrastá-los dentro da área do widget para colocá-los na ordem certa. Você também pode arrastá-los de uma área widget para outra se você decidir que não gosta da aparência deles.

Você também pode usar seu teclado para adicionar widgets usando a tela Widgets, então se você não tiver acesso a um mouse você ainda pode adicionar widgets.

Adicionando e Editando Widgets no Modo Acessibilidade

Se você não pode usar um mouse, você pode usar a tela Widgets com um teclado.

Primeiro, coloque a tela no modo de acessibilidade clicando (ou tabulando e selecionando) o link Habilitar modo de acessibilidade no canto superior direito da tela.

O ecrã irá então mudar para refletir o fato de estar no modo de acessibilidade.

Você pode então navegar entre os elementos da tela usando a tecla Tab do seu teclado e pressionar Enter para selecionar um item e agir sobre ele. Você pode tanto abas para um widget, pressionar Return no link Adicionar e depois escolher onde você quer adicioná-lo, ou abas para a área do widget e pressionar Return no link Editar.

Como Usar o Personalizador WordPress para Adicionar Widgets

Usando o Customizer para adicionar widgets em vez da tela de widgets significa que você pode ver seus widgets enquanto os adiciona. Isto torna mais fácil ver como os seus widgets ficarão e movê-los entre as áreas de widgets se você quiser.

No menu de administração, clique em Aparência > Personalizar. Alternativamente, a partir da barra de administração no topo da tela no site ao vivo (assumindo que você esteja logado), basta clicar em Personalizar. Isto irá abrir o Customizer.

Agora clique na opção Widgets e você verá uma lista de todas as áreas de widgets no seu tema. Clique na área widget onde você deseja adicionar um widget e clique no botão Add a widget.

Isto dá-lhe uma lista de todos os widgets disponíveis para o seu site. Isso incluirá todos os widgets embutidos que vieram com o WordPress mais qualquer widget que você tenha adicionado via plugins.

Escolha o widget que você quer adicionar a essa área widget e você o verá na tela de visualização no lado direito.

Você pode reordenar widgets arrastando-os para cima e para baixo no lado esquerdo ou clicando no link Reordenar abaixo da lista de widgets e depois clicando nas setas para movê-los para cima e para baixo.

Quando terminar de adicionar widgets através do Customizer, não se esqueça de clicar no botão Publish no canto superior esquerdo para que as suas alterações sejam salvas. Se você deixar o Customizer sem fazer isso, nenhuma de suas mudanças será refletida no site ao vivo.

Uma vez adicionados os widgets, dê uma olhada neles e verifique como eles se encaixam no design da sua página. Se você adicionou muitas áreas widget, as coisas podem parecer um pouco confusas. Você precisará remover algumas delas ou pode movê-las de uma área widget para outra.

É muito fácil fazer isso na tela Widgets, onde você pode arrastar widgets entre as áreas de widgets.

Como adicionar um Widget a uma página específica

Alguns temas incluem áreas widget que são apenas para páginas específicas, como a página inicial. Mas e se você quiser adicionar um widget a apenas uma página do seu site?

Você pode fazer isto no editor de páginas e no post do Gutenberg.

Adicione um novo bloco da forma habitual e depois selecione o tipo de bloco Widgets.

Você pode então escolher entre muitos dos widgets que você habilitou para seu site, e adicioná-lo ao conteúdo do seu post ou página. É realmente útil se você quiser adicionar um widget de formulário, um widget de chamada para ação, ou uma lista de suas últimas mensagens.

Como Editar Widgets

Depois de adicionar widgets ao seu site, você pode fazer alterações neles. Os widgets individuais terão configurações que você pode acessar através da tela Widgets ou do Customizer (não importa qual deles você usou para adicionar o widget).

Alguns widgets não incluem nenhuma configuração, mas outros têm configurações para o título do widget, por exemplo, ou o número de posts exibidos. Alguns são mais complicados e requerem que você configure o widget em uma página de configurações separada. Verifique a documentação do desenvolvedor do seu plugin.

As opções que você tem para editar plugins widget incluem:

• Edição das configurações para o plugin.
• Movendo o widget de uma área widget para outra.
• A remover o widget. Você tem duas opções para isso, que serão examinadas em breve.

Para editar as configurações para o widget, encontre esse widget na tela de widgets ou no customizador, e simplesmente edite qualquer opção fornecida.

Para mover o widget de uma área para outra, abra a tela de widgets e arraste-o de uma área de widgets para outra. No modo de acessibilidade, navegue até a seta à direita do widget e selecione a partir das opções.

Eliminação de Widgets

Para excluir um widget na tela Widgets, encontre esse widget e clique no link excluir na parte inferior esquerda da caixa de configurações de widgets.

Para apagar um widget no Customizer, encontre o widget na sua área widget. Clique na seta à direita do nome do widget, e depois clique no link Remover na parte inferior esquerda das configurações do widget.

Você também pode remover um widget de uma área widget, mas ainda assim disponibilizá-lo para uso posterior através da tela Widgets.

Desça até a área Inactive Widgets em direção à parte inferior da tela. Arraste os widgets para esta área para removê-los da área de widgets, mas mantenha-os como rascunhos com suas configurações atuais. Você pode então sempre arrastá-los de volta para uma área widget, se quiser no futuro.

Se você trocar de tema e seu novo tema tiver diferentes áreas de widgets, quaisquer widgets que não se encaixem nas áreas de widgets do novo tema serão automaticamente movidos para a lista Inactive Widgets pelo WordPress.

Como Adicionar uma Nova Área Widget ao seu Tema

Se o seu tema não tiver áreas widget onde as queira, pode sempre adicionar as suas próprias áreas. Você faz isso adicionando duas peças de código.

Vamos adicionar uma área widget abaixo do conteúdo.

Criação da área Widget no seu arquivo de funções temáticas

O primeiro passo é configurar a área widget usando a função register_widget().

Se você estiver usando um tema WordPress de terceiros (aqui está uma seleção dos melhores), você precisa criar um tema infantil para fazer isso. A razão para isso é que se você atualizar o tema no futuro, todas as suas mudanças serão perdidas.

Se você está trabalhando com seu próprio tema, você pode simplesmente editar o tema.

Comece por abrir o ficheiro functions.php do seu tema. No final do arquivo, adicione este código.

function kinsta_register_widgets() {
 
 register_sidebar( array(
  'name' => __( 'After Content Widget Area', 'kinsta' ),
  'id' => 'after-content-widget-area',
  'description' => __( 'Widget area after the content', 'kinsta' ),
  'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
  'after_widget' => '</div>',
  'before_title' => '<h3 class="widget-title">',
  'after_title' => '</h3>',

 ) );

}

add_action( 'widgets_init', 'kinsta_register_widgets' );

Agora salve o seu arquivo functions.php. Se você for à sua tela de Widgets ou ao Customizer, você encontrará a nova área de widgets disponível para que você possa adicionar widgets.

Mas se fizeres isto, eles não vão aparecer na página. Isto é porque você precisa adicionar algum código ao seu arquivo de modelo de tema.

Adicionando o Widget a um arquivo de modelo temático

A primeira coisa é descobrir qual arquivo de modelo de tema você precisa usar.

• Se você estiver adicionando uma barra lateral extra, então você precisará adicionar este código ao seu arquivo sidebar.php.
• Se você estiver adicionando sua área widget antes ou depois do conteúdo, você precisará adicioná-la a qualquer arquivo de template temático que esteja produzindo o conteúdo.
• Se você estiver adicionando uma área widget ao seu cabeçalho, você precisará adicionar o código ao seu arquivo header.php.
• Se a sua nova área de widgets for apenas para uma página do seu site ou para um tipo de conteúdo, você precisará usar a hierarquia de modelos do WordPress para descobrir exatamente qual arquivo de modelo você precisa usar/criar e, em seguida, editá-lo. Então, por exemplo, você gostaria de adicionar áreas widget à sua página inicial, você precisará criar um arquivo front-page.php e adicionar sua área widget lá.

Depois de identificar qual arquivo de modelo você precisa editar e exatamente onde você precisa ter o código para a área widget, adicione o seguinte código. No caso de uma área widget após o conteúdo, nós adicionamos ao arquivo post.php e page.php no nosso tema:

if ( is_active_sidebar( 'after-content-widget-area' ) ) { ?>

 aside class="after-content widget-area full-width" role="complementary">
  <?php dynamic_sidebar( 'after-content-widget-area' ); ?>
 </aside>

<?php }

Agora salve o(s) seu(s) arquivo(s) modelo(s).

Note que seu código será diferente do meu, dependendo do que você chamou de sua área widget e quais elementos você quer colocar dentro dela. Eu geralmente uso um elemento à parte porque, na minha mente, eles são projetados para áreas de sidebars e widget.

Dica Ninja: Se você mover o final do elemento do recipiente para o conteúdo para o início da barra lateral e/ou arquivo de rodapé, então você pode adicionar isto lá e você só precisa adicioná-lo uma vez.

Agora, se você der uma olhada no seu site, verá que quaisquer widgets que tenha adicionado às suas áreas widget aparecerão no lugar certo. Se eles não estiverem no lugar certo, volte e edite seus arquivos template, certificando-se de que o código está no local onde você quer que ele esteja. Você também pode precisar editar o seu CSS para ficar do jeito que você quer.

Como codificar Widgets usando a API de Widgets

Então agora você sabe como escolher widgets para seu site, como adicioná-los ao seu site e como registrar novas barras laterais ou áreas de widgets. O próximo passo é aprender como criar um widget WordPress.

Às vezes, você pode descobrir que não há um plugin disponível para criar o widget exato que você quer no seu site. Isso significa que terás de ser tu a codificá-lo.

Neste exemplo, vou mostrar-lhe como codificar um widget de chamada para ação muito simples.

Visão geral do Widgets API

A API de Widgets no WordPress inclui todo o código que você precisa para se registrar, criar e codificar widgets. O Widgets API inclui:

• Aulas para construir novos widgets.
• Funções para registrar widgets e implantá-los em seu site.
• Funções para anular o registo de widgets, por exemplo, a partir de um tema pai.

Aqui estaremos usando uma aula para construir um widget. O primeiro passo é criar um plugin para segurar o widget.

Crie um Plugin para o seu WordPress Widget

Para criar o seu próprio widget, você precisará codificar um plugin. Não adicione o código para um novo widget ao seu tema, porque os widgets são sobre funcionalidade e não sobre exibição. Se você mudar o seu tema no futuro, você ainda quer poder acessar esse widget.

Comece por criar um plugin vazio. Crie uma pasta de plugins no seu diretório wp-content/plugins e adicione um arquivo vazio a isso. Dê-lhe um nome apropriado. Abra esse arquivo e adicione esse código.

<?php
/**
 * Plugin Name: Kinsta Call to Action Widget
 * Plugin URI: https://rachelmccollin.com
 * Description: A simple call to action widget.
 * Version: 1.0
 * Author: Rachel McCollin
 * Author URI: https://rachelmccollin.co.uk
 */

Você precisará editar o URI do autor e ligar o URI ao seu próprio. Isso irá criar um plugin para você que você pode ativar através da tela Plugins.

Mas se o ativar, nada acontecerá. Vais ter de adicionar algum código ao teu plugin.

Criar uma aula para o Widget

O código para o widget vai para dentro de uma aula. Então acrescente isso a seguir.

class kinsta_Cta_Widget extends WP_Widget {

}

Criar a Função Construtora

A primeira coisa a entrar na classe é a função do construtor para criar o widget. Adiciona isto dentro do aparelho da classe.

//widget constructor function

function __construct() {

 $widget_options = array (
  'classname' => 'kinsta_cta_widget',
  'description' => 'Add a call to action box with your own text and link.'
 );

 parent::__construct( 'kinsta_cta_widget', 'Call to Action', $widget_options );

}

Isto começa a construir o widget.

Criar o formulário para emitir o Widget

A seguir, precisamos de um formulário que será usado pela tela Widgets e pelo Customizer para criar o widget. Adiciona isto, ainda dentro do aparelho.

//function to output the widget form

function form( $instance ) {

 $title = ! empty( $instance['title'] ) ? $instance['title'] : '';
 $link = ! empty( $instance['link'] ) ? $instance['link'] : 'Your link here';
 $text = ! empty( $instance['text'] ) ? $instance['text'] : 'Your text here';
?>

<p>
 <label for="<?php echo $this->get_field_id( 'title'); ?>">Title:</label>
 <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo esc_attr( $title ); ?>" /></p>

<p>
 <label for="<?php echo $this->get_field_id( 'text'); ?>">Text in the call to action box:</label>
 <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'text' ); ?>" name="<?php echo $this->get_field_name( 'text' ); ?>" value="<?php echo esc_attr( $text ); ?>" /></p>

<p>
 <label for="<?php echo $this->get_field_id( 'link'); ?>">Your link:</label>
 <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'link' ); ?>" name="<?php echo $this->get_field_name( 'link' ); ?>" value="<?php echo esc_attr( $link ); ?>" /></p>

<?php }

Isto dá aos utilizadores um formulário que podem usar para adicionar texto e um link para a chamada para a caixa de ação.

Criar a função para gravar o Widget

Agora você precisa salvar qualquer coisa que seja entrada para esse formulário. Adiciona isto.

//function to define the data saved by the widget

function update( $new_instance, $old_instance ) {
 $instance = $old_instance;
 $instance['title'] = strip_tags( $new_instance['title'] );
 $instance['text'] = strip_tags( $new_instance['text'] );
 $instance['link'] = strip_tags( $new_instance['link'] );
 return $instance;          

}

Isto salvará a entrada de dados pelos usuários nas configurações do widget.

Criar a função de saída do Widget

Agora você precisa adicionar o código que irá exibir o widget no site. Mais uma vez, adiciona isto dentro do aparelho:

//function to display the widget in the site

function widget( $args, $instance ) {
 //define variables
 $title = apply_filters( 'widget_title', $instance['title'] );
 $text = $instance['text'];
 $link = $instance['link'];

 //output code
 echo $args['before_widget'];
 ?>

 <div class="cta">
  <?php if ( ! empty( $title ) ) {
   echo $args['before_title'] . $title . $args['after_title'];
  };
  echo '<a href="' . $link . '">' . $text . '</a>';
  ?>
 </div>

 <?php
 echo $args['after_widget'];

}

Registrar o Widget

Agora você tem sua aula escrita, é hora de registrar o widget WordPress para que ele funcione. Adicione este código fora da classe.

//function to register the widget
function kinsta_register_cta_widget() {

 register_widget( 'kinsta_Cta_Widget' );
  
}
add_action( 'widgets_init', 'kinsta_register_cta_widget' );

Agora salve seu arquivo de plugin. Vá para a tela de Widgets e você verá o widget para uso.

Se você adicioná-lo a uma área widget e adicionar texto e um link para ele, ele será produzido no site ao vivo.

Pode não parecer assim tão bom neste momento. Você precisa adicionar um pouco de CSS para dar estilo.

Adicionando CSS ao Widget

Para adicionar o CSS ao seu plugin, você precisa criar uma folha de estilo e solicitar no seu plugin. Adicione isto ao seu arquivo de plugin antes da aula.

function kinsta_widget_enqueue_styles() {

 wp_register_style( 'widget_cta_css', plugins_url( 'css/style.css', __FILE__ ) );
 wp_enqueue_style( 'widget_cta_css' );

}
add_action( 'wp_enqueue_scripts', 'kinsta_widget_enqueue_styles' );

Agora você precisa adicionar um arquivo style.css dentro da pasta do plugin e adicionar qualquer estilo a isso. Eu deixo isso para ti!

Agora você tem uma simples chamada para o botão de ação que você pode adicionar a qualquer área do widget no seu site. Se você adicioná-lo à sua barra lateral, por exemplo, as pessoas poderão usá-lo para chegar à sua página de inscrição de qualquer lugar do site.

Você pode criar widgets mais complexos com configurações e opções extras, mas isso lhe dá uma idéia de como começar a criar seu próprio widget.

Se você quiser ver meu código para este plugin, incluindo o estilo, você pode encontrá-lo no Github. Se você está começando com código, aqui está um guia detalhado sobre gitHub vs GitHub e como começar com ambos.

Resumo

Widgets são uma das minhas características favoritas do WordPress. Eles podem dar vida ao seu site e ajudá-lo a obter mais inscrições ou converter mais visitantes em clientes. Você pode adicionar widgets WordPress a qualquer área widget existente no seu tema, ou pode adicionar áreas widget extras para que você possa adicionar mais widgets em mais lugares.

Há também muitos lugares para encontrar widgets. O WordPress vem com uma série deles pré-instalados, e você também pode instalar mais deles através de plugins. Mas isso não é tudo, se você se sentir confortável, você também pode codificar seus próprios widgets usando o Widgets API.

Agora é a sua vez: como você usa widgets WordPress no seu site? Quantos estás a usar?