{"id":35324,"date":"2020-02-13T06:57:35","date_gmt":"2020-02-13T14:57:35","guid":{"rendered":"https:\/\/kinsta.com\/?p=65034"},"modified":"2025-02-18T06:41:06","modified_gmt":"2025-02-18T09:41:06","slug":"wordpress-widgets","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/wordpress-widgets\/","title":{"rendered":"O Guia Completo para WordPress Widgets: Como Utiliz\u00e1-los, Adicion\u00e1-los e Configur\u00e1-los para Personalizar o Seu Site"},"content":{"rendered":"<p>Os widgets WordPress s\u00e3o incrivelmente \u00fateis. Eles permitem que voc\u00ea adicione todo tipo de conte\u00fado extra ao seu site fora do corpo do pr\u00f3prio post ou p\u00e1gina, incentivando os usu\u00e1rios a obter informa\u00e7\u00f5es, seguir links, ou tomar medidas.<\/p>\n<p>Neste post, vou mostrar tudo o que voc\u00ea precisa saber sobre os widgets do WordPress. Como adicion\u00e1-los ao seu site, como criar \u00e1reas de widgets para coloc\u00e1-los, como\u00a0<a href=\"https:\/\/kinsta.com\/pt\/blog\/como-instalar-plugins-no-wordpress\/\">instalar plugins<\/a> que lhe d\u00e3o mais deles, como codificar seus pr\u00f3prios widgets, e muito mais.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<p>Primeiro, vamos come\u00e7ar por identificar o que s\u00e3o widgets WordPress.<\/p>\n<h2><strong>O que s\u00e3o widgets WordPress?<br \/>\n<\/strong><\/h2>\n<p>No WordPress, widgets s\u00e3o trechos de conte\u00fado que vivem fora do fluxo da p\u00e1gina ou do conte\u00fado do post.<\/p>\n<p>Os widgets cont\u00eam informa\u00e7\u00f5es, navega\u00e7\u00e3o ou m\u00eddia separada de um post ou p\u00e1gina individual. Na maioria dos casos, cada widget ser\u00e1 exibido em cada p\u00e1gina do site, mas voc\u00ea tamb\u00e9m pode registrar \u00e1reas widget para p\u00e1ginas espec\u00edficas, como a p\u00e1gina inicial.<\/p>\n<p>Para adicionar um widget ao seu site, voc\u00ea precisa adicion\u00e1-lo a uma \u00e1rea widget. As \u00e1reas Widget s\u00e3o criadas pelo seu tema porque est\u00e3o relacionadas com o design e layout do seu site e n\u00e3o com a funcionalidade.<\/p>\n<p>A maioria dos <a href=\"https:\/\/kinsta.com\/pt\/blog\/temas-wordpress-mais-rapidos\/\">temas do WordPress<\/a>\u00a0tem \u00e1reas widget na barra lateral e no rodap\u00e9, embora alguns tenham m\u00faltiplas \u00e1reas widget em muitos lugares, como abaixo ou acima do conte\u00fado ou no cabe\u00e7alho.<\/p>\n<p>A captura de tela abaixo, de um dos meus pr\u00f3prios sites, mostra widgets na barra lateral e no rodap\u00e9.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/widget-areas-meu-site.jpg\" alt=\"Widget \u00e1reas no meu site\" width=\"1500\" height=\"1080\"><figcaption class=\"wp-caption-text\">Widget \u00e1reas no meu site<\/figcaption><\/figure>\n<p>O WordPress vem com um monte de widgets pr\u00e9-carregados para que voc\u00ea possa us\u00e1-los sem ter que<a href=\"https:\/\/kinsta.com\/pt\/blog\/como-instalar-plugins-no-wordpress\/\"> instalar nenhum plugin<\/a> ou escrever qualquer c\u00f3digo. Mas voc\u00ea tamb\u00e9m pode adicionar muito mais widgets instalando plugins ou codificando os seus pr\u00f3prios.<\/p>\n<p>Estes podem cobrir uma vasta gama de tipos de conte\u00fado, tais como m\u00eddia, feeds de m\u00eddia social, navega\u00e7\u00e3o, pesquisa, mapas e muito mais. H\u00e1 muito pouco que voc\u00ea pode querer no seu site para o qual voc\u00ea n\u00e3o consegue encontrar um widget. Na verdade, o maior desafio \u00e9 muitas vezes escolher entre todas as op\u00e7\u00f5es e n\u00e3o exagerar.<\/p>\n<h2><strong>Quando usar WordPress Widgets<br \/>\n<\/strong><\/h2>\n<p>Voc\u00ea deve usar um widget sempre que quiser adicionar conte\u00fado extra a uma ou mais p\u00e1ginas do seu site (e quando digo p\u00e1gina, incluo posts, arquivos, etc.), mas isso n\u00e3o faz parte do conte\u00fado dessa p\u00e1gina. Eles s\u00e3o particularmente \u00fateis para conte\u00fados que voc\u00ea quer mostrar em cada p\u00e1gina do site, como uma lista dos seus \u00faltimos posts, um <a href=\"https:\/\/kinsta.com\/pt\/blog\/abandono-do-carrinho-de-compras\/\">carrinho de compras<\/a>, ou um bot\u00e3o de chamada para a\u00e7\u00e3o.<\/p>\n<p>Pense em quantos usu\u00e1rios precisar\u00e3o de acesso a cada widget e como \u00e9 importante quando voc\u00ea decide onde coloc\u00e1-lo. <a href=\"https:\/\/kinsta.com\/pt\/blog\/barras-laterais-dinamicas-wordpress\/\">Os widgets na barra lateral<\/a> ser\u00e3o mais proeminentes do que os do rodap\u00e9, que alguns usu\u00e1rios podem nem mesmo ver.<\/p>\n<p>Portanto, um widget de posts mais recentes ou um widget de chamada para a\u00e7\u00e3o pode estar melhor na barra lateral onde as pessoas t\u00eam mais chances de interagir com elas, enquanto um feed de m\u00eddia social pode ir no rodap\u00e9.<\/p>\n<p>Se o seu tema tamb\u00e9m tiver \u00e1reas widget especiais para a p\u00e1gina inicial, voc\u00ea pode querer us\u00e1-las para navegar pelos departamentos do seu site, listas de conte\u00fado relevante ou m\u00eddia, como um v\u00eddeo de boas-vindas ao site.<\/p>\n<h2><strong>11 Exemplos de Widgets no WordPress<br \/>\n<\/strong><\/h2>\n<p>A melhor maneira de entender as possibilidades oferecidas pelos widgets WordPress \u00e9 olhar para alguns exemplos deles. Vamos dar uma olhada em onze tipos de widget que voc\u00ea ver\u00e1 frequentemente em sites WordPress.<\/p>\n<h3><strong>1. Widget de Posts Recentes<br \/>\n<\/strong><\/h3>\n<p>O widget Posts Recentes \u00e9 possivelmente o widget mais usado nos blogs.<\/p>\n<p>Permite mostrar uma lista dos seus posts mais recentes na barra lateral ou rodap\u00e9 de cada p\u00e1gina do seu site, aumentando a possibilidade das pessoas navegarem no site e lerem um n\u00famero de posts.<\/p>\n<p>O widget Posts Recentes vem pr\u00e9-instalado com WordPress. Permite definir quantos posts voc\u00ea quer mostrar e que t\u00edtulo voc\u00ea quer dar ao widget.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/widget-recentes-posts.jpg\" alt=\"Widget Recentes Posts\" width=\"1500\" height=\"1301\"><figcaption class=\"wp-caption-text\">Widget Recentes Posts<\/figcaption><\/figure>\n<p>Se voc\u00ea quiser adicionar funcionalidades extras, voc\u00ea pode instalar um plugin para um widget alternativo como o <a href=\"https:\/\/wordpress.org\/plugins\/wordpress-popular-posts\/\">WordPress Popular Posts<\/a>, que exibe o conte\u00fado mais popular. Alternativamente, o widget<a href=\"https:\/\/wordpress.org\/plugins\/advanced-random-posts-widget\/\"> Advanced Random Posts<\/a> refresca cada vez que o usu\u00e1rio visita uma nova tela.<\/p>\n<h3><strong>2. Coment\u00e1rios recentes Widget<br \/>\n<\/strong><\/h3>\n<p>Quer mostrar aos visitantes o quanto seu site \u00e9 vibrante e o quanto seu p\u00fablico est\u00e1 envolvido com seu conte\u00fado?<\/p>\n<p>O widget Coment\u00e1rios Recentes exibe os \u00faltimos coment\u00e1rios em seu site, dando aos visitantes a oportunidade de navegar diretamente para esses coment\u00e1rios e participar da discuss\u00e3o.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/comentarios-recentes-widget.jpg\" alt=\"Coment\u00e1rios recentes widget\" width=\"1500\" height=\"1106\"><figcaption class=\"wp-caption-text\">Coment\u00e1rios recentes widget<\/figcaption><\/figure>\n<p>O widget Recent Comments vem com WordPress. Mais uma vez, se voc\u00ea quiser adicionar funcionalidades extras, voc\u00ea pode instalar um <a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-plugins-de-comentarios-do-wordpress\/\">plugin de coment\u00e1rios de<\/a> terceiros, como o\u00a0<a href=\"https:\/\/wordpress.org\/plugins\/gs-facebook-comments\/\">WP Social Comments<\/a> widget, que permite que as pessoas comentem usando sua conta do Facebook: bom para o envolvimento nas m\u00eddias sociais.<\/p>\n<h3><strong>3. Widgets de Chamada para A\u00e7\u00e3o<br \/>\n<\/strong><\/h3>\n<p>Um grande uso de um widget \u00e9 encorajar as pessoas a agir, e voc\u00ea pode fazer isso com um widget de chamada \u00e0 a\u00e7\u00e3o.<\/p>\n<p>Seu widget pode ser um simples bot\u00e3o, ou voc\u00ea pode criar algo mais personalizado usando um widget de texto ou HTML, ou mesmo um widget de imagem, todos pr\u00e9-instalados com o WordPress.<\/p>\n<p>Em um dos meus pr\u00f3prios sites, eu criei um widget de chamada para a\u00e7\u00e3o incentivando as pessoas a se inscreverem na minha lista de discuss\u00e3o. Isto usa o widget HTML incorporado no qual eu inclu\u00ed uma imagem, algum texto e um bot\u00e3o que eu codifiquei em HTML.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/widgets-call-action-meu-site.jpg\" alt=\"Widgets Call to Action no meu site\" width=\"1500\" height=\"934\"><figcaption class=\"wp-caption-text\">Widgets Call to Action no meu site<\/figcaption><\/figure>\n<h3><strong>4. Widgets de Navega\u00e7\u00e3o<br \/>\n<\/strong><\/h3>\n<p>Voc\u00ea tamb\u00e9m pode usar widgets para incentivar as pessoas a navegar pelo seu site.<\/p>\n<p>Existem algumas op\u00e7\u00f5es para isso: os widgets Categorias ou Tag Cloud e o widget Menu de Navega\u00e7\u00e3o.<\/p>\n<p>O widget Menu de Navega\u00e7\u00e3o permite-lhe criar um <a href=\"https:\/\/kinsta.com\/pt\/blog\/menus-navegacao-personalizados\/\">menu de navega\u00e7\u00e3o personalizado,<\/a> bem como o menu principal de navega\u00e7\u00e3o no seu site, e depois adicion\u00e1-lo a uma \u00e1rea widget.<\/p>\n<p>Voc\u00ea pode at\u00e9 adicionar seu menu principal de navega\u00e7\u00e3o a uma \u00e1rea widget, embora isso s\u00f3 funcione se voc\u00ea tiver um menu de navega\u00e7\u00e3o pequeno.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/widget-menu-navegacao.jpg\" alt=\"Widget do Menu de Navega\u00e7\u00e3o\" width=\"1500\" height=\"1086\"><figcaption class=\"wp-caption-text\">Widget do Menu de Navega\u00e7\u00e3o<\/figcaption><\/figure>\n<p>Adicionar um menu de navega\u00e7\u00e3o ao rodap\u00e9 do seu site ir\u00e1 encorajar as pessoas que chegam ao final de um post a navegar pelo seu site. \u00c9 particularmente \u00fatil para usu\u00e1rios m\u00f3veis que podem ter que fazer muita rolagem para voltar ao\u00a0<a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-menu-plugins\/\">menu principal de navega\u00e7\u00e3o<\/a> depois de chegar ao final de um post.<\/p>\n<p>Alternativamente, voc\u00ea 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.<\/p>\n<h3><strong>5. Widgets de m\u00eddia<br \/>\n<\/strong><\/h3>\n<p><a href=\"https:\/\/kinsta.com\/pt\/blog\/biblioteca-midia-wordpress\/\">Adicionar m\u00eddia<\/a> \u00e0 sua barra lateral ou rodap\u00e9 dar\u00e1 vida ao seu site e dar\u00e1 aos usu\u00e1rios algo para ver ou interagir com ele.<\/p>\n<p>Voc\u00ea pode usar o widget de imagem embutido para exibir qualquer imagem em sua barra lateral ou rodap\u00e9, e ele permite que voc\u00ea transforme essa imagem em um link tamb\u00e9m.<\/p>\n<figure style=\"width: 1305px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/dispositivo-imagem.jpg\" alt=\"Dispositivo de imagem\" width=\"1305\" height=\"1500\"><figcaption class=\"wp-caption-text\">Dispositivo de imagem<\/figcaption><\/figure>\n<p>Em alternativa, o widget V\u00eddeo permite-lhe transmitir v\u00eddeo do YouTube ou Vimeo diretamente para a \u00e1rea widget do seu site. Isto \u00e9 particularmente \u00fatil se o seu site tem \u00e1reas widget especiais para a p\u00e1gina inicial, mas tamb\u00e9m pode ser bom no rodap\u00e9 como forma de chamar a aten\u00e7\u00e3o das pessoas quando elas chegam ao fim de um post.<\/p>\n<h3><strong>6. Social Media Widgets<\/strong><\/h3>\n<p>Se voc\u00ea quiser se envolver com pessoas que visitam seu site pelas m\u00eddias sociais, adicionar seu feed de m\u00eddia social \u00e0 barra lateral ou rodap\u00e9 do seu site mostrar\u00e1 \u00e0s pessoas que voc\u00ea \u00e9 ativo nas m\u00eddias sociais e as incentivar\u00e1 a gostar ou segui-lo.<\/p>\n<p>Uma maneira de obter acesso aos widgets das redes sociais para as maiores plataformas (Facebook, Twitter, Instagram) \u00e9 i<a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-jetpack\/\">nstalar o plugin Jetpack<\/a>, que inclui tudo isso e muito mais.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/plugin-jetpack-pt.jpg\" alt=\"Plugin Jetpack\" width=\"1500\" height=\"1105\"><figcaption class=\"wp-caption-text\">Plugin Jetpack<\/figcaption><\/figure>\n<p>Alternativamente, todas as plataformas de m\u00eddia social t\u00eam seus pr\u00f3prios plugins, dispon\u00edveis gratuitamente atrav\u00e9s do diret\u00f3rio de plugins. Ou voc\u00ea pode encontrar\u00a0<a href=\"https:\/\/kinsta.com\/pt\/blog\/plugins-de-midia-social-do-wordpress\/\">plugins de terceiros<\/a> que lhe permitir\u00e3o personalizar a forma como voc\u00ea exibe seu feed de m\u00eddia social.<\/p>\n<h3><strong>7. Widget do carrinho de compras<br \/>\n<\/strong><\/h3>\n<p>Se voc\u00ea est\u00e1 rodando uma loja de\u00a0<a href=\"https:\/\/kinsta.com\/pt\/blog\/estrategias-ecommerce\/\">com\u00e9rcio eletr\u00f4nico<\/a> no seu site usando um plugin como o <a href=\"https:\/\/kinsta.com\/pt\/blog\/tutorial-woocommerce\/\">WooCommerce<\/a>, \u00e9 uma boa id\u00e9ia incluir um widget para que os usu\u00e1rios possam navegar facilmente at\u00e9 o carrinho onde quer que estejam na loja.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/widget-carrinho-compras.jpg\" alt=\"Widget do carrinho de compras\" width=\"1500\" height=\"909\"><figcaption class=\"wp-caption-text\">Widget do carrinho de compras<\/figcaption><\/figure>\n<p>Voc\u00ea pode colocar isto na barra lateral onde as pessoas poder\u00e3o facilmente v\u00ea-lo, ou no cabe\u00e7alho para maior visibilidade se o seu tema incluir uma \u00e1rea widget l\u00e1.<\/p>\n<p><a href=\"https:\/\/kinsta.com\/pt\/blog\/plugins-ecommerce-do-wordpress\/\">Plugins de com\u00e9rcio eletr\u00f4nico<\/a> como o WooCommerce incluem widgets de carrinho de compras e outros widgets de com\u00e9rcio eletr\u00f4nico como parte do plugin, assim, uma vez que voc\u00ea tenha adicionado o com\u00e9rcio eletr\u00f4nico ao seu site, voc\u00ea vai encontr\u00e1-los adicionados \u00e0 sua tela de <strong>Widgets<\/strong>.<\/p>\n<h3><strong>8. Formul\u00e1rio Widget<br \/>\n<\/strong><\/h3>\n<p>Se voc\u00ea quiser que as pessoas entrem em contato com voc\u00ea, fa\u00e7am perguntas ou\u00a0<a href=\"https:\/\/kinsta.com\/pt\/blog\/como-criar-uma-lista-de-e-mails\/\">se inscrevam em uma lista de discuss\u00e3o<\/a>, voc\u00ea pode adicionar um formul\u00e1rio \u00e0 sua barra lateral.<\/p>\n<p>N\u00e3o h\u00e1 um widget de formul\u00e1rio inclu\u00eddo no WordPress, mas voc\u00ea pode adicionar plugins para fornec\u00ea-los, tais como o\u00a0<a href=\"https:\/\/kinsta.com\/pt\/blog\/contact-form-7\/\">Formul\u00e1rio de Contato 7<\/a> gratuito ou os\u00a0<a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-plugins-formulario-contato\/#gravity-forms\">Formul\u00e1rios de Gravidade<\/a> Premium, mas muito poderosos.<\/p>\n<h3><strong>9. Mapa Widget<br \/>\n<\/strong><\/h3>\n<p>Se o seu neg\u00f3cio est\u00e1 baseado em um local f\u00edsico e voc\u00ea quer que as pessoas sejam capazes de encontr\u00e1-lo facilmente, adicionar um widget de mapa ao seu site ajudar\u00e1.<\/p>\n<p>H\u00e1 uma s\u00e9rie de <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-google-maps\/#use-a-wordpress-google-maps-plugin-instead\">plugins gratuitos de mapas do Google<\/a> ou outros <a href=\"https:\/\/kinsta.com\/pt\/blog\/plugin-mapa-wordpress\/\">plugins de mapas do WordPress<\/a> que voc\u00ea pode usar, tais como o plugin <a href=\"https:\/\/en-gb.wordpress.org\/plugins\/wp-google-maps\/\">WP Google Maps<\/a>.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/wp-plugin-google-maps.jpg\" alt=\"WP Plugin do Google Maps\" width=\"1500\" height=\"1073\"><figcaption class=\"wp-caption-text\">WP Plugin do Google Maps<\/figcaption><\/figure>\n<p>Alternativamente, se voc\u00ea n\u00e3o quiser instalar um plugin, voc\u00ea pode<a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-google-maps\/\"> pegar o c\u00f3digo incorporado do Google Maps e adicion\u00e1-lo<\/a> a um widget HTML.<\/p>\n<h3><strong>10. Widget de Login<br \/>\n<\/strong><\/h3>\n<p>Se voc\u00ea estiver executando um <a href=\"https:\/\/kinsta.com\/pt\/blog\/plugins-de-membros-wordpress\/\">site de membros<\/a>, um widget de login facilitar\u00e1 o acesso\u00a0das pessoas\u00a0<a href=\"https:\/\/kinsta.com\/pt\/blog\/login-wordpress-url\/\">ao seu site<\/a> sem ter que ir a uma p\u00e1gina de login separada.<\/p>\n<p>O Meta widget que vem com o WordPress inclui um link de login, mas tamb\u00e9m inclui outras coisas que voc\u00ea pode n\u00e3o querer, ent\u00e3o eu recomendaria usar um plugin separado para isso do diret\u00f3rio de plugins.<\/p>\n<p>O <a href=\"https:\/\/wordpress.org\/plugins\/login-with-ajax\/\">Login com o widget\u00a0Ajax<\/a> d\u00e1-lhe um formul\u00e1rio de login no seu widget, o que significa que as pessoas podem entrar no seu site a partir de qualquer p\u00e1gina.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/login-ajax-widget-plugin.jpg\" alt=\"Login com Ajax widget plugin\" width=\"1500\" height=\"883\"><figcaption class=\"wp-caption-text\">Login com Ajax widget plugin<\/figcaption><\/figure>\n<h3><strong>11. Pesquisar Widget<br \/>\n<\/strong><\/h3>\n<p>Um widget realmente simples mas incrivelmente \u00fatil \u00e9 o\u00a0<a href=\"https:\/\/kinsta.com\/pt\/blog\/pesquisa-wordpress\/\">widget Search<\/a>, que vem pr\u00e9-carregado com o WordPress.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/pesquisa-widget.jpg\" alt=\"Pesquisa widget\" width=\"1500\" height=\"368\"><figcaption class=\"wp-caption-text\">Pesquisa widget<\/figcaption><\/figure>\n<p>Adicione isto \u00e0 sua barra lateral ou ao cabe\u00e7alho e facilitar\u00e1 as pessoas a encontrarem coisas no seu site.<\/p>\n<p>Se voc\u00ea quiser aumentar o poder do seu widget de pesquisa, voc\u00ea pode instalar o widget gratuito <a href=\"https:\/\/wordpress.org\/plugins\/wp-google-search\/\">WP Google Search<\/a>, que usa a pesquisa do Google.<\/p>\n<h2><strong>Como Adicionar Widgets ao seu Site WordPress<br \/>\n<\/strong><\/h2>\n<p>Depois de decidir que tipo de widgets voc\u00ea precisa para o seu site WordPress, \u00e9 hora de instal\u00e1-los.<\/p>\n<p>N\u00e3o te sintas tentado a acrescentar demasiadas. Quanto mais existem, menos prov\u00e1vel \u00e9 que os utilizadores reparem neles. Em vez disso, concentre-se em dois ou tr\u00eas widgets-chave para a barra lateral. Pode acrescentar mais ao rodap\u00e9, onde s\u00e3o menos importantes de qualquer forma.<\/p>\n<p>E se voc\u00ea tiver alguma \u00e1rea extra de widgets no <a href=\"https:\/\/kinsta.com\/pt\/blog\/como-instalar-um-tema-do-wordpress\/\">seu tema<\/a>, decida quais widgets colocar neles. Certifique-se de que eles se encaixam no layout e <a href=\"https:\/\/kinsta.com\/pt\/blog\/principais-tendencias-em-web-design\/\">design do seu site<\/a>.<\/p>\n<p>H\u00e1 tr\u00eas maneiras de adicionar widgets:<\/p>\n<ul>\n<li>Use os widgets que j\u00e1 v\u00eam com o WordPress.<\/li>\n<li>Adicione um widget de terceiros a partir do\u00a0<a href=\"https:\/\/kinsta.com\/blog\/publish-plugin-wordpress-plugin-directory\/\">diret\u00f3rio de plugins<\/a>.<\/li>\n<li>Compre um plugin premium que inclui um widget.<\/li>\n<\/ul>\n<h3><strong>Encontrar Widgets para o seu site WordPress<br \/>\n<\/strong><\/h3>\n<p>H\u00e1 uma vasta gama de widgets dispon\u00edveis, por isso pode ser dif\u00edcil escolher qual deles instalar. Vamos dar uma olhada nas op\u00e7\u00f5es e depois examinar como voc\u00ea pode escolher a melhor para voc\u00ea.<\/p>\n<h4><strong>Widgets que v\u00eam com WordPress<br \/>\n<\/strong><\/h4>\n<p>Se um dos widgets pr\u00e9-instalados fizer o que voc\u00ea precisa, ent\u00e3o use-o. Isso lhe poupar\u00e1 tempo e significar\u00e1 menos c\u00f3digo rodando no seu site.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/widgets-wordpress-pre-instalados.jpg\" alt=\"Widgets WordPress pr\u00e9-instalados\" width=\"1500\" height=\"1158\"><figcaption class=\"wp-caption-text\">Widgets WordPress pr\u00e9-instalados<\/figcaption><\/figure>\n<p>Os widgets pr\u00e9-instalados s\u00e3o:<\/p>\n<ul>\n<li><strong>Arquivos<\/strong>: link para arquivos por m\u00eas, projetado para blogs, mas um pouco desatualizado agora.<\/li>\n<li><strong>Calend\u00e1rio<\/strong>: um calend\u00e1rio dos seus posts, mais uma vez adequado para blogs, especialmente se o seu \u00e9 sens\u00edvel ao tempo (mas n\u00e3o t\u00e3o comum hoje em dia).<\/li>\n<li><strong>HTML personalizado<\/strong>: a \u00faltima palavra em flexibilidade, adicione o conte\u00fado que voc\u00ea quiser digitando ou colando no HTML (como <a href=\"https:\/\/kinsta.com\/pt\/blog\/incorporar-google-forms\/\">formul\u00e1rios do Google<\/a>). Evite se n\u00e3o estiver confort\u00e1vel com a codifica\u00e7\u00e3o.<\/li>\n<li><strong>Imagem<\/strong>: <a href=\"https:\/\/kinsta.com\/pt\/blog\/otimizar-imagens-para-web\/\">exibir uma imagem<\/a> da sua biblioteca de m\u00eddia.<\/li>\n<li><strong>Menu de Navega\u00e7\u00e3o<\/strong>: mostra o menu de navega\u00e7\u00e3o principal ou um menu separado que voc\u00ea cria.<\/li>\n<li><strong>Coment\u00e1rios recentes<\/strong>: uma lista de coment\u00e1rios recentes com links para eles.<\/li>\n<li><strong>Tag Cloud<\/strong>: uma lista de tags em formato de nuvem, com links para os arquivos relevantes.<\/li>\n<li><strong>V\u00eddeo<\/strong>: <a href=\"https:\/\/kinsta.com\/pt\/blog\/incorporar-videos-youtube-wordpress\/\">incorporar um v\u00eddeo do YouTube<\/a> ou de qualquer outro servi\u00e7o de streaming.<\/li>\n<li><strong>\u00c1udio<\/strong>: incorporar um podcast, um <a href=\"https:\/\/kinsta.com\/pt\/blog\/reprodutores-de-audio-wordpress\/\">leitor<\/a>, uma can\u00e7\u00e3o ou outros clips de \u00e1udio (sugest\u00e3o: How to <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-podcast\/\">Como iniciar um Podcast usando o WordPress<\/a>).<\/li>\n<li><strong>Categorias<\/strong>: uma lista das<a href=\"https:\/\/kinsta.com\/pt\/blog\/reprodutores-de-audio-wordpress\/\"> categorias do seu blog<\/a>, com links para as p\u00e1ginas de arquivo.<\/li>\n<li><strong>Galeria<\/strong>: mais avan\u00e7ado do que o widget de imagem, exibir uma <a href=\"https:\/\/kinsta.com\/pt\/blog\/plugins-galeria-fotos-wordpress\/\">galeria de imagens<\/a>.<\/li>\n<li><strong>Meta<\/strong>: metadados tais como<a href=\"https:\/\/kinsta.com\/pt\/blog\/login-wordpress-url\/\"> links de login <\/a>e <a href=\"https:\/\/kinsta.com\/pt\/blog\/feeds-rss-wordpress\/\">feeds RSS<\/a>. Uma ressaca dos primeiros tempos do WordPress e n\u00e3o muito \u00fatil agora.<\/li>\n<li><strong>P\u00e1ginas<\/strong>: mostre uma lista das p\u00e1ginas do seu site com links.<\/li>\n<li><strong>Posts recentes<\/strong>: exiba uma lista dos seus posts mais recentes para incentivar as pessoas a l\u00ea-los.<\/li>\n<li><strong>Pesquisa<\/strong>: uma simples caixa de pesquisa.<\/li>\n<li><strong>Texto<\/strong>: qualquer texto que voc\u00ea queira adicionar, como informa\u00e7\u00f5es sobre o site.<\/li>\n<\/ul>\n<h3><strong>Adicionando Widgets com um Plugin<br \/>\n<\/strong><\/h3>\n<p>O diret\u00f3rio de plugins do WordPress tem milhares de plugins gratuitos de widgets que lhe dar\u00e3o mais widgets para escolher.<\/p>\n<p>Al\u00e9m disso, muitos outros plugins tamb\u00e9m incluem widgets, como um ecommerce plugin que lhe d\u00e1 um <a href=\"https:\/\/kinsta.com\/pt\/blog\/temas-woocommerce\/\">widget de carrinho e muito mais<\/a>.<\/p>\n<p>Se o diret\u00f3rio de plugins n\u00e3o tiver o plugin que voc\u00ea precisa, voc\u00ea pode decidir adicionar um plugin premium. Por vezes, estes oferecem mais fun\u00e7\u00f5es ou uma interface mais intuitiva. Mas \u00e0s vezes voc\u00ea encontrar\u00e1 as mesmas caracter\u00edsticas em um plugin gratuito, ent\u00e3o fa\u00e7a uma boa busca no diret\u00f3rio de plugins antes de pagar por plugins.<\/p>\n<h4><strong>Como encontrar o Widget certo para o seu site<br \/>\n<\/strong><\/h4>\n<p>Para encontrar o widget WordPress certo para voc\u00ea, siga estas dicas:<\/p>\n<ol>\n<li>Identifique exatamente o que voc\u00ea precisa do widget. Que funcionalidade precisa ter e como voc\u00ea quer que fique? Precisa de se ligar a alguma API de terceiros?<\/li>\n<li>Verifique os widgets embutidos para ver se h\u00e1 um que atenda \u00e0s suas necessidades. Teste qualquer um relevante, se voc\u00ea encontrar um adequado, isso \u00e9 \u00f3timo. Se n\u00e3o&#8230;<\/li>\n<li>Verifique o diret\u00f3rio de plugins, que voc\u00ea pode acessar atrav\u00e9s de <strong>Plugins &gt; Adicionar Novo.<\/strong> Tente procurar por mais de um termo para encontrar o plugin certo para voc\u00ea, e procure com e sem a palavra &#8216;widget&#8217;. \u00c0s vezes um plugin que n\u00e3o esteja focado em widgets incluir\u00e1 um widget como parte de um conjunto mais amplo de funcionalidades.<\/li>\n<li>Se voc\u00ea n\u00e3o encontrar nada adequado entre os plugins gratuitos, procure por um <a href=\"https:\/\/kinsta.com\/blog\/wordpress-free-vs-paid-themes\/\">pr\u00eamio plugin<\/a>. Pe\u00e7a recomenda\u00e7\u00f5es a outros usu\u00e1rios do WordPress e veja as revis\u00f5es antes de escolher uma.<\/li>\n<\/ol>\n<p>Qualquer que seja o widget que voc\u00ea escolher, voc\u00ea precisar\u00e1 test\u00e1-lo para verificar se funciona como voc\u00ea quer. Se voc\u00ea estiver comprando plugins premium, eu recomendaria comprar um com garantia de devolu\u00e7\u00e3o do dinheiro ou um per\u00edodo de teste gratuito, caso n\u00e3o seja adequado para voc\u00ea.<\/p>\n<h3><strong>Como Adicionar Widgets \u00e0 Barra Lateral e Rodap\u00e9 no WordPress<br \/>\n<\/strong><\/h3>\n<p>Agora que voc\u00ea escolheu seu widget, \u00e9 hora de adicion\u00e1-lo ao seu site.<\/p>\n<p>Voc\u00ea pode adicionar widgets a qualquer \u00e1rea ativa de widgets fornecida pelo seu tema. Se o seu tema n\u00e3o tem uma \u00e1rea widget no local que voc\u00ea quer, tente procurar um <a href=\"https:\/\/kinsta.com\/pt\/blog\/como-alterar-tema-wordpress\/\">tema alternativo<\/a>.<\/p>\n<p>Mais tarde neste post, vou mostrar-lhe como codificar a sua pr\u00f3pria \u00e1rea widget.<\/p>\n<p>H\u00e1 duas maneiras de adicionar widgets ao seu site:<\/p>\n<ul>\n<li>Ao usar o\u00a0<a href=\"https:\/\/kinsta.com\/pt\/blog\/como-personalizar-tema-wordpress\/\">Customizer<\/a>. V\u00e1 para <strong>Apar\u00eancia &gt; Personalizador &gt; Widgets no<\/strong> menu admin, ou Personalizar <strong>&gt; Widgets na<\/strong> barra de administra\u00e7\u00e3o na parte superior da tela.<\/li>\n<li>Atrav\u00e9s da tela de administra\u00e7\u00e3o dos Widgets. V\u00e1 para <strong>Apar\u00eancia &gt; Widgets<\/strong> no menu admin, ou na barra admin, clique em <strong>Personalizar &gt; Widgets<\/strong>.<\/li>\n<\/ul>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/widgets-customizer-pt.jpg\" alt=\"Widgets no Customizer\" width=\"1500\" height=\"801\"><figcaption class=\"wp-caption-text\">Widgets no Customizer<\/figcaption><\/figure>\n<p>Mostrarei a voc\u00ea como usar esses dois m\u00e9todos em breve, mas primeiro vamos dar uma olhada nas \u00e1reas de widget e por que voc\u00ea obt\u00e9m as que voc\u00ea faz com o seu tema.<\/p>\n<h4>Os Widgets n\u00e3o s\u00e3o s\u00f3 para a Barra Lateral<\/h4>\n<p>Dependendo do seu <a href=\"https:\/\/kinsta.com\/pt\/blog\/temas-wordpress-mais-rapidos\/\">tema WordPress<\/a>, voc\u00ea pode encontrar \u00e1reas widget em v\u00e1rios lugares.<\/p>\n<p>A maioria dos temas tem \u00e1reas widget na barra lateral e no rodap\u00e9. Mas alguns tamb\u00e9m os t\u00eam em outros lugares, como abaixo ou acima do conte\u00fado ou no cabe\u00e7alho.<\/p>\n<p>Se voc\u00ea for para a tela de configura\u00e7\u00f5es de widgets no\u00a0<a href=\"https:\/\/kinsta.com\/pt\/blog\/painel-administrativo-wordpress\/\">administrador do WordPress<\/a>, voc\u00ea poder\u00e1 ver todas as \u00e1reas de widgets no seu tema.<\/p>\n<p>Eu uso um tema com m\u00faltiplas \u00e1reas widget em muitos lugares. Voc\u00ea pode ver na captura de tela abaixo que existem \u00e1reas widget acima e abaixo do conte\u00fado, no cabe\u00e7alho, abaixo do rodap\u00e9 principal.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/tela-configuracao-widgets-areas-widgets.jpg\" alt=\"Tela de configura\u00e7\u00e3o de widgets, \u00e1reas de widgets\" width=\"1500\" height=\"731\"><figcaption class=\"wp-caption-text\">Tela de configura\u00e7\u00e3o de widgets, \u00e1reas de widgets<\/figcaption><\/figure>\n<p>Se voc\u00ea quiser adicionar widgets a outros lugares no seu site, faz sentido encontrar um tema que tenha m\u00faltiplas \u00e1reas de widgets. A melhor maneira de fazer isso \u00e9 usar um <a href=\"https:\/\/kinsta.com\/pt\/blog\/como-personalizar-tema-wordpress\/#using-page-builders-and-frameworks-to-customize-your-wordpress-theme\">tema de enquadramento<\/a>.<\/p>\n<p>Um bom exemplo de um widget em um lugar do seu tema que n\u00e3o \u00e9 a barra lateral ou o rodap\u00e9 \u00e9 adicionar uma barra de busca no cabe\u00e7alho, como eu tenho em um dos meus sites.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/barra-pesquisa-cabecalho.jpg\" alt=\"Barra de pesquisa no cabe\u00e7alho\" width=\"1500\" height=\"409\"><figcaption class=\"wp-caption-text\">Barra de pesquisa no cabe\u00e7alho<\/figcaption><\/figure>\n<h4><strong>\u00c1reas e Temas de Widget<br \/>\n<\/strong><\/h4>\n<p>As \u00e1reas Widget s\u00e3o codificadas nos arquivos de modelos de temas, bem como no arquivo de fun\u00e7\u00f5es do tema.<\/p>\n<p>Aqui voc\u00ea pode ver o c\u00f3digo que eu usei no meu arquivo de fun\u00e7\u00f5es tem\u00e1ticas para adicionar uma \u00e1rea widget que ir\u00e1 no cabe\u00e7alho.<\/p>\n<pre><code class=\"language-php\">register_sidebar( array(\n 'name' =&gt; __( 'In Header Widget Area', 'rmccollin' ),\n 'id' =&gt; 'in-header-widget-area',\n 'description' =&gt; __( 'A widget area located to the right hand side of the header, next to the site title and description.', 'rmccollin' ),\n 'before_widget' =&gt; '&lt;div id=\"%1$s\" class=\"widget-container %2$s\"&gt;',\n 'after_widget' =&gt; '&lt;\/div&gt;',\n 'before_title' =&gt; '&lt;h3 class=\"widget-title\"&gt;',\n 'after_title' =&gt; '&lt;\/h3&gt;',\n) );<\/code><\/pre>\n<p>E aqui est\u00e1 o c\u00f3digo no meu arquivo header.php que adiciona essa \u00e1rea widget no lugar certo do tema.<\/p>\n<pre><code class=\"language-php\">if ( is_active_sidebar( 'in-header-widget-area' ) ) { ?&gt;\n\n &lt;aside class=\"in-header widget-area right\" role=\"complementary\"&gt;\n  &lt;?php dynamic_sidebar( 'in-header-widget-area' ); ?&gt;\n &lt;\/aside&gt;\n\n&lt;?php }<\/code><\/pre>\n<p>Se voc\u00ea quiser adicionar \u00e1reas widget extras no seu tema, voc\u00ea precisa adicionar o mesmo tipo de c\u00f3digo. Eu mostro-te como fazer isto mais tarde, neste post.<\/p>\n<p>N\u00e3o se esque\u00e7a que se o seu tema n\u00e3o tiver tantas \u00e1reas widget como gostaria, pode sempre fazer uma de duas coisas:<\/p>\n<ul>\n<li>Encontre um tema que tenha \u00e1reas widget onde voc\u00ea as queira.<\/li>\n<li>Codifique a nova \u00e1rea widget para o seu tema ou para uma <a href=\"https:\/\/kinsta.com\/pt\/blog\/tema-filho-no-wordpress\/\">crian\u00e7a of your theme<\/a>.<\/li>\n<\/ul>\n<p>Uma vez que voc\u00ea tenha \u00e1reas de widgets em todos os lugares do seu tema que voc\u00ea quer, voc\u00ea pode come\u00e7ar a adicionar widgets a eles.<\/p>\n<h4><strong>Como usar a tela de Widgets para adicionar Widgets<br \/>\n<\/strong><\/h4>\n<p>H\u00e1 duas maneiras de adicionar widgets ao seu site WordPress. A primeira \u00e9 usar a tela Widgets no administrador do WordPress.<\/p>\n<p>Clique em <strong>Appearance &gt; Widgets.<\/strong> Isto faz surgir o ecr\u00e3 dos widgets.<\/p>\n<figure id=\"attachment_35347\" aria-describedby=\"caption-attachment-35347\" style=\"width: 768px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-35347\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/tela-widgets-pt.jpg\" alt=\"Tela de Widgets\" width=\"768\" height=\"304\" srcset=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/tela-widgets-pt.jpg 768w, https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/tela-widgets-pt-300x119.jpg 300w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><figcaption id=\"caption-attachment-35347\" class=\"wp-caption-text\">Tela de Widgets<\/figcaption><\/figure>\n<p>Para adicionar um widget, voc\u00ea pode fazer uma de duas coisas:<\/p>\n<ul>\n<li>Arraste-o da lista de widgets no lado esquerdo para a \u00e1rea relevante do widget.<\/li>\n<li>Clique no widget que deseja adicionar, e ver\u00e1 uma lista de onde o pode adicionar. Selecione a \u00e1rea widget que voc\u00ea deseja e clique no bot\u00e3o <strong>Adicionar Widget<\/strong>.<\/li>\n<\/ul>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/selecionando-area-widget-widget-pt.jpg\" alt=\"Selecionando uma \u00e1rea widget e widget\" width=\"1500\" height=\"1234\"><figcaption class=\"wp-caption-text\">Selecionando uma \u00e1rea widget e widget<\/figcaption><\/figure>\n<p>Voc\u00ea pode ent\u00e3o precisar editar onde o widget est\u00e1 posicionado dentro da \u00e1rea do widget.<\/p>\n<p>Voc\u00ea pode adicionar quantos widgets quiser a cada \u00e1rea de widgets, mas n\u00e3o exagere. Voc\u00ea pode arrast\u00e1-los dentro da \u00e1rea do widget para coloc\u00e1-los na ordem certa. Voc\u00ea tamb\u00e9m pode arrast\u00e1-los de uma \u00e1rea widget para outra se voc\u00ea decidir que n\u00e3o gosta da apar\u00eancia deles.<\/p>\n<p>Voc\u00ea tamb\u00e9m pode usar seu teclado para adicionar widgets usando a tela Widgets, ent\u00e3o se voc\u00ea n\u00e3o tiver acesso a um mouse voc\u00ea ainda pode adicionar widgets.<\/p>\n<h4><strong>Adicionando e Editando Widgets no Modo Acessibilidade<br \/>\n<\/strong><\/h4>\n<p>Se voc\u00ea n\u00e3o pode usar um mouse, voc\u00ea pode usar a tela Widgets com um teclado.<\/p>\n<p>Primeiro, coloque a tela no modo de acessibilidade clicando (ou tabulando e selecionando) o link <strong>Habilitar modo de acessibilidade<\/strong> no canto superior direito da tela.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/ligacao-modo-acessibilidade-pt.jpg\" alt=\"Liga\u00e7\u00e3o ao modo de acessibilidade\" width=\"1500\" height=\"666\"><figcaption class=\"wp-caption-text\">Liga\u00e7\u00e3o ao modo de acessibilidade<\/figcaption><\/figure>\n<p>O ecr\u00e3 ir\u00e1 ent\u00e3o mudar para refletir o fato de estar no modo de acessibilidade.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/widgets-modo-acessibilidade-tela-pt.jpg\" alt=\"Widgets modo de acessibilidade da tela\" width=\"1500\" height=\"737\"><figcaption class=\"wp-caption-text\">Widgets modo de acessibilidade da tela<\/figcaption><\/figure>\n<p>Voc\u00ea pode ent\u00e3o navegar entre os elementos da tela usando a tecla <strong>Tab<\/strong> do seu teclado e pressionar Enter para selecionar um item e agir sobre ele. Voc\u00ea pode tanto abas para um widget, pressionar <strong>Return<\/strong> no link <strong>Adicionar<\/strong> e depois escolher onde voc\u00ea quer adicion\u00e1-lo, ou abas para a \u00e1rea do widget e pressionar <strong>Return<\/strong> no link <strong>Editar<\/strong>.<\/p>\n<h4><strong>Como Usar o Personalizador WordPress para Adicionar Widgets<br \/>\n<\/strong><\/h4>\n<p>Usando o Customizer para adicionar widgets em vez da tela de widgets significa que voc\u00ea pode ver seus widgets enquanto os adiciona. Isto torna mais f\u00e1cil ver como os seus widgets ficar\u00e3o e mov\u00ea-los entre as \u00e1reas de widgets se voc\u00ea quiser.<\/p>\n<p>No menu de administra\u00e7\u00e3o, clique em <strong>Apar\u00eancia &gt; Personalizar<\/strong>. Alternativamente, a partir da barra de administra\u00e7\u00e3o no topo da tela no site ao vivo (assumindo que voc\u00ea esteja logado), basta clicar em <strong>Personalizar<\/strong>. Isto ir\u00e1 abrir o Customizer.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/barra-administracao-wordpress.jpg\" alt=\"Barra de administra\u00e7\u00e3o do WordPress\" width=\"1500\" height=\"377\"><figcaption class=\"wp-caption-text\">Barra de administra\u00e7\u00e3o do WordPress<\/figcaption><\/figure>\n<p>Agora clique na op\u00e7\u00e3o <strong>Widgets<\/strong> e voc\u00ea ver\u00e1 uma lista de todas as \u00e1reas de widgets no seu tema. Clique na \u00e1rea widget onde voc\u00ea deseja adicionar um widget e clique no bot\u00e3o <strong>Add a widget<\/strong>.<\/p>\n<p>Isto d\u00e1-lhe uma lista de todos os widgets dispon\u00edveis para o seu site. Isso incluir\u00e1 todos os widgets embutidos que vieram com o WordPress mais qualquer widget que voc\u00ea tenha adicionado via plugins.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/adicionar-botao-widget.jpg\" alt=\"Adicionar um bot\u00e3o widget\" width=\"1500\" height=\"760\"><figcaption class=\"wp-caption-text\">Adicionar um bot\u00e3o widget<\/figcaption><\/figure>\n<p>Escolha o widget que voc\u00ea quer adicionar a essa \u00e1rea widget e voc\u00ea o ver\u00e1 na tela de visualiza\u00e7\u00e3o no lado direito.<\/p>\n<p>Voc\u00ea pode reordenar widgets arrastando-os para cima e para baixo no lado esquerdo ou clicando no link <strong>Reordenar<\/strong> abaixo da lista de widgets e depois clicando nas setas para mov\u00ea-los para cima e para baixo.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/edicao-widgets-customizer-pt.jpg\" alt=\"Edi\u00e7\u00e3o de widgets no Customizer\" width=\"1500\" height=\"551\"><figcaption class=\"wp-caption-text\">Edi\u00e7\u00e3o de widgets no Customizer<\/figcaption><\/figure>\n<p>Quando terminar de adicionar widgets atrav\u00e9s do Customizer, n\u00e3o se esque\u00e7a de clicar no bot\u00e3o <strong>Publish<\/strong> no canto superior esquerdo para que as suas altera\u00e7\u00f5es sejam salvas. Se voc\u00ea deixar o Customizer sem fazer isso, nenhuma de suas mudan\u00e7as ser\u00e1 refletida no site ao vivo.<\/p>\n<p>Uma vez adicionados os widgets, d\u00ea uma olhada neles e verifique como eles se encaixam no design da sua p\u00e1gina. Se voc\u00ea adicionou muitas \u00e1reas widget, as coisas podem parecer um pouco confusas. Voc\u00ea precisar\u00e1 remover algumas delas ou pode mov\u00ea-las de uma \u00e1rea widget para outra.<\/p>\n<p>\u00c9 muito f\u00e1cil fazer isso na tela Widgets, onde voc\u00ea pode arrastar widgets entre as \u00e1reas de widgets.<\/p>\n<p><strong>Como adicionar um Widget a uma p\u00e1gina espec\u00edfica<br \/>\n<\/strong><\/p>\n<p>Alguns temas incluem \u00e1reas widget que s\u00e3o apenas para p\u00e1ginas espec\u00edficas, como a p\u00e1gina inicial. Mas e se voc\u00ea quiser adicionar um widget a apenas uma p\u00e1gina do seu site?<\/p>\n<p>Voc\u00ea pode fazer isto no editor de p\u00e1ginas e no post do <a href=\"https:\/\/kinsta.com\/pt\/blog\/editor-gutenberg-wordpress\/\">Gutenberg.<\/a><\/p>\n<p>Adicione um novo bloco da forma habitual e depois selecione o tipo de bloco <strong>Widgets<\/strong>.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/tipo-bloco-widgets.jpg\" alt=\"Tipo de bloco de widgets\" width=\"1500\" height=\"1393\"><figcaption class=\"wp-caption-text\">Tipo de bloco de widgets<\/figcaption><\/figure>\n<p>Voc\u00ea pode ent\u00e3o escolher entre muitos dos widgets que voc\u00ea habilitou para seu site, e adicion\u00e1-lo ao conte\u00fado do seu post ou p\u00e1gina. \u00c9 realmente \u00fatil se voc\u00ea quiser adicionar um widget de formul\u00e1rio, um widget de chamada para a\u00e7\u00e3o, ou uma lista de suas \u00faltimas mensagens.<\/p>\n<h3><strong>Como Editar Widgets<br \/>\n<\/strong><\/h3>\n<p>Depois de adicionar widgets ao seu site, voc\u00ea pode fazer altera\u00e7\u00f5es neles. Os widgets individuais ter\u00e3o configura\u00e7\u00f5es que voc\u00ea pode acessar atrav\u00e9s da tela Widgets ou do Customizer (n\u00e3o importa qual deles voc\u00ea usou para adicionar o widget).<\/p>\n<p>Alguns widgets n\u00e3o incluem nenhuma configura\u00e7\u00e3o, mas outros t\u00eam configura\u00e7\u00f5es para o t\u00edtulo do widget, por exemplo, ou o n\u00famero de posts exibidos. Alguns s\u00e3o mais complicados e requerem que voc\u00ea configure o widget em uma p\u00e1gina de configura\u00e7\u00f5es separada. Verifique a documenta\u00e7\u00e3o do desenvolvedor do seu plugin.<\/p>\n<p>As op\u00e7\u00f5es que voc\u00ea tem para editar plugins widget incluem:<\/p>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li style=\"list-style-type: none\"><\/li>\n<\/ul>\n<\/li>\n<li>Edi\u00e7\u00e3o das configura\u00e7\u00f5es para o plugin.<\/li>\n<li>Movendo o widget de uma \u00e1rea widget para outra.<\/li>\n<li>A remover o widget. Voc\u00ea tem duas op\u00e7\u00f5es para isso, que ser\u00e3o examinadas em breve.<\/li>\n<\/ul>\n<p>Para editar as configura\u00e7\u00f5es para o widget, encontre esse widget na tela de widgets ou no customizador, e simplesmente edite qualquer op\u00e7\u00e3o fornecida.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/edicao-opcoes-widget-pt.jpg\" alt=\"Edi\u00e7\u00e3o de op\u00e7\u00f5es de widget\" width=\"1500\" height=\"1154\"><figcaption class=\"wp-caption-text\">Edi\u00e7\u00e3o de op\u00e7\u00f5es de widget<\/figcaption><\/figure>\n<p>Para mover o widget de uma \u00e1rea para outra, abra a tela de widgets e arraste-o de uma \u00e1rea de widgets para outra. No modo de acessibilidade, navegue at\u00e9 a seta \u00e0 direita do widget e selecione a partir das op\u00e7\u00f5es.<\/p>\n<h4><strong>Elimina\u00e7\u00e3o de Widgets<br \/>\n<\/strong><\/h4>\n<p>Para excluir um widget na tela Widgets, encontre esse widget e clique no link excluir na parte inferior esquerda da caixa de configura\u00e7\u00f5es de widgets.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/eliminacao-widget-tela-widgets-por.jpg\" alt=\"Elimina\u00e7\u00e3o de um widget na tela de widgets\" width=\"1500\" height=\"810\"><figcaption class=\"wp-caption-text\">Elimina\u00e7\u00e3o de um widget na tela de widgets<\/figcaption><\/figure>\n<p>Para apagar um widget no Customizer, encontre o widget na sua \u00e1rea widget. Clique na seta \u00e0 direita do nome do widget, e depois clique no link <strong>Remover<\/strong> na parte inferior esquerda das configura\u00e7\u00f5es do widget.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/remocao-widget-customizer-pt.jpg\" alt=\"Remo\u00e7\u00e3o de um widget no Customizer\" width=\"1500\" height=\"1093\"><figcaption class=\"wp-caption-text\">Remo\u00e7\u00e3o de um widget no Customizer<\/figcaption><\/figure>\n<p>Voc\u00ea tamb\u00e9m pode remover um widget de uma \u00e1rea widget, mas ainda assim disponibiliz\u00e1-lo para uso posterior atrav\u00e9s da tela Widgets.<\/p>\n<p>Des\u00e7a at\u00e9 a \u00e1rea <strong>Inactive Widgets<\/strong> em dire\u00e7\u00e3o \u00e0 parte inferior da tela. Arraste os widgets para esta \u00e1rea para remov\u00ea-los da \u00e1rea de widgets, mas mantenha-os como rascunhos com suas configura\u00e7\u00f5es atuais. Voc\u00ea pode ent\u00e3o sempre arrast\u00e1-los de volta para uma \u00e1rea widget, se quiser no futuro.<\/p>\n<p>Se\u00a0<a href=\"https:\/\/kinsta.com\/pt\/blog\/como-alterar-tema-wordpress\/\">voc\u00ea trocar de tema<\/a> e seu novo tema tiver diferentes \u00e1reas de widgets, quaisquer widgets que n\u00e3o se encaixem nas \u00e1reas de widgets do novo tema ser\u00e3o automaticamente movidos para a lista Inactive Widgets pelo WordPress.<\/p>\n<h2><strong>Como Adicionar uma Nova \u00c1rea Widget ao seu Tema<br \/>\n<\/strong><\/h2>\n<p>Se o seu tema n\u00e3o tiver \u00e1reas widget onde as queira, pode sempre adicionar as suas pr\u00f3prias \u00e1reas. Voc\u00ea faz isso adicionando duas pe\u00e7as de c\u00f3digo.<\/p>\n<p>Vamos adicionar uma \u00e1rea widget abaixo do conte\u00fado.<\/p>\n<h3>Cria\u00e7\u00e3o da \u00e1rea Widget no seu arquivo de fun\u00e7\u00f5es tem\u00e1ticas<\/h3>\n<p>O primeiro passo \u00e9 configurar a \u00e1rea widget usando a fun\u00e7\u00e3o <code class=\"language-php\">register_widget()<\/code>.<\/p>\n<p>Se voc\u00ea estiver usando um tema WordPress de terceiros (aqui est\u00e1 uma <a href=\"https:\/\/kinsta.com\/pt\/blog\/temas-wordpress-mais-rapidos\/\">sele\u00e7\u00e3o dos melhores<\/a>), voc\u00ea precisa criar um tema infantil para fazer isso. A raz\u00e3o para isso \u00e9 que se voc\u00ea<a href=\"https:\/\/kinsta.com\/pt\/blog\/como-atualizar-um-tema-wordpress\/\"> atualizar o tema<\/a> no futuro, todas as suas mudan\u00e7as ser\u00e3o perdidas.<\/p>\n<p>Se voc\u00ea est\u00e1 trabalhando com seu pr\u00f3prio tema, voc\u00ea pode simplesmente editar o tema.<\/p>\n<p>Comece por abrir o ficheiro <strong>functions.php<\/strong> do seu tema. No final do arquivo, adicione este c\u00f3digo.<\/p>\n<pre><code class=\"language-php\">function kinsta_register_widgets() {\n \n register_sidebar( array(\n\u00a0 'name' =&gt; __( 'After Content Widget Area', 'kinsta' ),\n  'id' =&gt; 'after-content-widget-area',\n  'description' =&gt; __( 'Widget area after the content', 'kinsta' ),\n  'before_widget' =&gt; '&lt;div id=\"%1$s\" class=\"widget-container %2$s\"&gt;',\n  'after_widget' =&gt; '&lt;\/div&gt;',\n  'before_title' =&gt; '&lt;h3 class=\"widget-title\"&gt;',\n  'after_title' =&gt; '&lt;\/h3&gt;',\n\n ) );\n\n}\n\nadd_action( 'widgets_init', 'kinsta_register_widgets' );<\/code><\/pre>\n<p>Agora salve o seu arquivo functions.php. Se voc\u00ea for \u00e0 sua tela de Widgets ou ao Customizer, voc\u00ea encontrar\u00e1 a nova \u00e1rea de widgets dispon\u00edvel para que voc\u00ea possa adicionar widgets.<\/p>\n<p>Mas se fizeres isto, eles n\u00e3o v\u00e3o aparecer na p\u00e1gina. Isto \u00e9 porque voc\u00ea precisa adicionar algum c\u00f3digo ao seu arquivo de modelo de tema.<\/p>\n<p><strong>Adicionando o Widget a um arquivo de modelo tem\u00e1tico<br \/>\n<\/strong><\/p>\n<p>A primeira coisa \u00e9 descobrir qual arquivo de modelo de tema voc\u00ea precisa usar.<\/p>\n<ul>\n<li>Se voc\u00ea estiver adicionando uma barra lateral extra, ent\u00e3o voc\u00ea precisar\u00e1 adicionar este c\u00f3digo ao seu arquivo <strong>sidebar.php<\/strong>.<\/li>\n<li>Se voc\u00ea estiver adicionando sua \u00e1rea widget antes ou depois do conte\u00fado, voc\u00ea precisar\u00e1 adicion\u00e1-la a qualquer arquivo de template tem\u00e1tico que esteja produzindo o conte\u00fado.<\/li>\n<li>Se voc\u00ea estiver adicionando uma \u00e1rea widget ao seu cabe\u00e7alho, voc\u00ea precisar\u00e1 adicionar o c\u00f3digo ao seu arquivo header.php.<\/li>\n<li>Se a sua nova \u00e1rea de widgets for apenas para uma p\u00e1gina do seu site ou para um tipo de conte\u00fado, voc\u00ea precisar\u00e1 usar a\u00a0<a href=\"https:\/\/developer.wordpress.org\/themes\/basics\/template-hierarchy\/\">hierarquia de modelos do WordPress<\/a>\u00a0para descobrir exatamente qual arquivo de modelo voc\u00ea precisa usar\/criar e, em seguida, edit\u00e1-lo. Ent\u00e3o, por exemplo, voc\u00ea gostaria de adicionar \u00e1reas widget \u00e0 sua p\u00e1gina inicial, voc\u00ea precisar\u00e1 criar um arquivo <strong>front-page.php<\/strong> e adicionar sua \u00e1rea widget l\u00e1.<\/li>\n<\/ul>\n<p>Depois de identificar qual arquivo de modelo voc\u00ea precisa editar e exatamente onde voc\u00ea precisa ter o c\u00f3digo para a \u00e1rea widget, adicione o seguinte c\u00f3digo. No caso de uma \u00e1rea widget ap\u00f3s o conte\u00fado, n\u00f3s adicionamos ao arquivo <strong>post.php<\/strong> e <strong>page.php<\/strong> no nosso tema:<\/p>\n<pre><code class=\"language-php\">if ( is_active_sidebar( 'after-content-widget-area' ) ) { ?&gt;\n\n aside class=\"after-content widget-area full-width\" role=\"complementary\"&gt;\n  &lt;?php dynamic_sidebar( 'after-content-widget-area' ); ?&gt;\n &lt;\/aside&gt;\n\n&lt;?php }<\/code><\/pre>\n<p>Agora salve o(s) seu(s) arquivo(s) modelo(s).<\/p>\n<p>Note que seu c\u00f3digo ser\u00e1 diferente do meu, dependendo do que voc\u00ea chamou de sua \u00e1rea widget e quais elementos voc\u00ea quer colocar dentro dela. Eu geralmente uso um elemento <strong>\u00e0 parte<\/strong> porque, na minha mente, eles s\u00e3o projetados para \u00e1reas de sidebars e widget.<\/p>\n<p>Dica Ninja: Se voc\u00ea mover o final do elemento do recipiente para o conte\u00fado para o in\u00edcio da barra lateral e\/ou arquivo de rodap\u00e9, ent\u00e3o voc\u00ea pode adicionar isto l\u00e1 e voc\u00ea s\u00f3 precisa adicion\u00e1-lo uma vez.<\/p>\n<p>Agora, se voc\u00ea der uma olhada no seu site, ver\u00e1 que quaisquer widgets que tenha adicionado \u00e0s suas \u00e1reas widget aparecer\u00e3o no lugar certo. Se eles n\u00e3o estiverem no lugar certo, volte e edite seus arquivos template, certificando-se de que o c\u00f3digo est\u00e1 no local onde voc\u00ea quer que ele esteja. Voc\u00ea tamb\u00e9m pode precisar\u00a0<a href=\"https:\/\/kinsta.com\/pt\/blog\/editar-codigo-wordpress\/\">editar o seu CSS<\/a> para ficar do jeito que voc\u00ea quer.<\/p>\n<figure id=\"attachment_65282\" aria-describedby=\"caption-attachment-65282\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-65282 size-full\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/widget-no-site-vivo.jpg\" alt=\"Widget no site ao vivo\" width=\"1500\" height=\"449\"><figcaption id=\"caption-attachment-65282\" class=\"wp-caption-text\">Widget no site ao vivo<\/figcaption><\/figure>\n<h2><strong>Como codificar Widgets usando a API de Widgets<br \/>\n<\/strong><\/h2>\n<p>Ent\u00e3o agora voc\u00ea sabe como escolher widgets para seu site, como adicion\u00e1-los ao seu site e como registrar novas barras laterais ou \u00e1reas de widgets. O pr\u00f3ximo passo \u00e9 aprender como criar um widget WordPress.<\/p>\n<p>\u00c0s vezes, voc\u00ea pode descobrir que n\u00e3o h\u00e1 um plugin dispon\u00edvel para criar o widget exato que voc\u00ea quer no seu site. Isso significa que ter\u00e1s de ser tu a codific\u00e1-lo.<\/p>\n<p>Neste exemplo, vou mostrar-lhe como codificar um widget de chamada para a\u00e7\u00e3o muito simples.<\/p>\n<p><strong>Vis\u00e3o geral do Widgets API<br \/>\n<\/strong><\/p>\n<p>A <a href=\"https:\/\/developer.wordpress.org\/themes\/functionality\/widgets\/\">API de Widgets<\/a> no WordPress inclui todo o c\u00f3digo que voc\u00ea precisa para se registrar, criar e codificar widgets. O Widgets API inclui:<\/p>\n<ul>\n<li>Aulas para construir novos widgets.<\/li>\n<li>Fun\u00e7\u00f5es para registrar widgets e implant\u00e1-los em seu site.<\/li>\n<li>Fun\u00e7\u00f5es para anular o registo de widgets, por exemplo, a partir de um tema pai.<\/li>\n<\/ul>\n<p>Aqui estaremos usando uma aula para construir um widget. O primeiro passo \u00e9 criar um plugin para segurar o widget.<\/p>\n<h3><strong>Crie um Plugin para o seu WordPress Widget<br \/>\n<\/strong><\/h3>\n<p>Para criar o seu pr\u00f3prio widget, voc\u00ea precisar\u00e1<a href=\"https:\/\/kinsta.com\/blog\/publish-plugin-wordpress-plugin-directory\/\"> codificar um plugin<\/a>. N\u00e3o adicione o c\u00f3digo para um novo widget ao seu tema, porque os widgets s\u00e3o sobre funcionalidade e n\u00e3o sobre exibi\u00e7\u00e3o. Se voc\u00ea<a href=\"https:\/\/kinsta.com\/pt\/blog\/como-alterar-tema-wordpress\/\"> mudar o seu tema<\/a> no futuro, voc\u00ea ainda quer poder acessar esse widget.<\/p>\n<p>Comece por criar um plugin vazio. Crie uma pasta de plugins no seu diret\u00f3rio <code>wp-content\/plugins<\/code> e adicione um arquivo vazio a isso. D\u00ea-lhe um nome apropriado. Abra esse arquivo e adicione esse c\u00f3digo.<\/p>\n<pre><code class=\"language-php\">&lt;?php\n\/**\n\u00a0* Plugin Name: Kinsta Call to Action Widget\n * Plugin URI: https:\/\/rachelmccollin.com\n\u00a0* Description: A simple call to action widget.\n\u00a0* Version: 1.0\n\u00a0* Author: Rachel McCollin\n\u00a0* Author URI: https:\/\/rachelmccollin.co.uk\n\u00a0*\/<\/code><\/pre>\n<p>Voc\u00ea precisar\u00e1 editar o URI do autor e ligar o URI ao seu pr\u00f3prio. Isso ir\u00e1 criar um plugin para voc\u00ea que voc\u00ea pode ativar atrav\u00e9s da tela Plugins.<\/p>\n<figure id=\"attachment_65286\" aria-describedby=\"caption-attachment-65286\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-65286 size-full\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/tela-plugins-widget-plugins.jpg\" alt=\"Tela de plugins Widget em plugins\" width=\"1500\" height=\"306\"><figcaption id=\"caption-attachment-65286\" class=\"wp-caption-text\">Tela de plugins Widget em plugins<\/figcaption><\/figure>\n<p>Mas se o ativar, nada acontecer\u00e1. Vais ter de adicionar algum c\u00f3digo ao teu plugin.<\/p>\n<h3><strong>Criar uma aula para o Widget<br \/>\n<\/strong><\/h3>\n<p>O c\u00f3digo para o widget vai para dentro de uma aula. Ent\u00e3o acrescente isso a seguir.<\/p>\n<pre><code class=\"language-php\">class kinsta_Cta_Widget extends WP_Widget {\n\n}<\/code><\/pre>\n<h4><strong>Criar a Fun\u00e7\u00e3o Construtora<br \/>\n<\/strong><\/h4>\n<p>A primeira coisa a entrar na classe \u00e9 a fun\u00e7\u00e3o do construtor para criar o widget. Adiciona isto dentro do aparelho da classe.<\/p>\n<pre><code class=\"language-php\">\/\/widget constructor function\n\nfunction __construct() {\n\n $widget_options = array (\n  'classname' =&gt; 'kinsta_cta_widget',\n  'description' =&gt; 'Add a call to action box with your own text and link.'\n );\n\n parent::__construct( 'kinsta_cta_widget', 'Call to Action', $widget_options );\n\n}<\/code><\/pre>\n<p>Isto come\u00e7a a construir o widget.<\/p>\n<h4><strong>Criar o formul\u00e1rio para emitir o Widget<br \/>\n<\/strong><\/h4>\n<p>A seguir, precisamos de um formul\u00e1rio que ser\u00e1 usado pela tela Widgets e pelo Customizer para criar o widget. Adiciona isto, ainda dentro do aparelho.<\/p>\n<pre><code class=\"language-php\">\/\/function to output the widget form\n\nfunction form( $instance ) {\n\n $title = ! empty( $instance['title'] ) ? $instance['title'] : '';\n $link = ! empty( $instance['link'] ) ? $instance['link'] : 'Your link here';\n $text = ! empty( $instance['text'] ) ? $instance['text'] : 'Your text here';\n?&gt;\n\n&lt;p&gt;\n &lt;label for=\"&lt;?php echo $this-&gt;get_field_id( 'title'); ?&gt;\"&gt;Title:&lt;\/label&gt;\n &lt;input class=\"widefat\" type=\"text\" id=\"&lt;?php echo $this-&gt;get_field_id( 'title' ); ?&gt;\" name=\"&lt;?php echo $this-&gt;get_field_name( 'title' ); ?&gt;\" value=\"&lt;?php echo esc_attr( $title ); ?&gt;\" \/&gt;&lt;\/p&gt;\n\n&lt;p&gt;\n &lt;label for=\"&lt;?php echo $this-&gt;get_field_id( 'text'); ?&gt;\"&gt;Text in the call to action box:&lt;\/label&gt;\n &lt;input class=\"widefat\" type=\"text\" id=\"&lt;?php echo $this-&gt;get_field_id( 'text' ); ?&gt;\" name=\"&lt;?php echo $this-&gt;get_field_name( 'text' ); ?&gt;\" value=\"&lt;?php echo esc_attr( $text ); ?&gt;\" \/&gt;&lt;\/p&gt;\n\n&lt;p&gt;\n &lt;label for=\"&lt;?php echo $this-&gt;get_field_id( 'link'); ?&gt;\"&gt;Your link:&lt;\/label&gt;\n &lt;input class=\"widefat\" type=\"text\" id=\"&lt;?php echo $this-&gt;get_field_id( 'link' ); ?&gt;\" name=\"&lt;?php echo $this-&gt;get_field_name( 'link' ); ?&gt;\" value=\"&lt;?php echo esc_attr( $link ); ?&gt;\" \/&gt;&lt;\/p&gt;\n\n&lt;?php }<\/code><\/pre>\n<p>Isto d\u00e1 aos utilizadores um formul\u00e1rio que podem usar para adicionar texto e um link para a chamada para a caixa de a\u00e7\u00e3o.<\/p>\n<h4><strong>Criar a fun\u00e7\u00e3o para gravar o Widget<br \/>\n<\/strong><\/h4>\n<p>Agora voc\u00ea precisa salvar qualquer coisa que seja entrada para esse formul\u00e1rio. Adiciona isto.<\/p>\n<pre><code class=\"language-php\">\/\/function to define the data saved by the widget\n\nfunction update( $new_instance, $old_instance ) {\n $instance = $old_instance;\n $instance['title'] = strip_tags( $new_instance['title'] );\n $instance['text'] = strip_tags( $new_instance['text'] );\n $instance['link'] = strip_tags( $new_instance['link'] );\n return $instance;\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \n\n}<\/code><\/pre>\n<p>Isto salvar\u00e1 a entrada de dados pelos usu\u00e1rios nas configura\u00e7\u00f5es do widget.<\/p>\n<h4><strong>Criar a fun\u00e7\u00e3o de sa\u00edda do Widget<br \/>\n<\/strong><\/h4>\n<p>Agora voc\u00ea precisa adicionar o c\u00f3digo que ir\u00e1 exibir o widget no site. Mais uma vez, adiciona isto dentro do aparelho:<\/p>\n<pre><code class=\"language-php\">\/\/function to display the widget in the site\n\nfunction widget( $args, $instance ) {\n \/\/define variables\n $title = apply_filters( 'widget_title', $instance['title'] );\n $text = $instance['text'];\n $link = $instance['link'];\n\n \/\/output code\n echo $args['before_widget'];\n ?&gt;\n\n &lt;div class=\"cta\"&gt;\n  &lt;?php if ( ! empty( $title ) ) {\n   echo $args['before_title'] . $title . $args['after_title'];\n  };\n  echo '&lt;a href=\"' . $link . '\"&gt;' . $text . '&lt;\/a&gt;';\n  ?&gt;\n &lt;\/div&gt;\n\n &lt;?php\n echo $args['after_widget'];\n\n}<\/code><\/pre>\n<h3><strong>Registrar o Widget<br \/>\n<\/strong><\/h3>\n<p>Agora voc\u00ea tem sua aula escrita, \u00e9 hora de registrar o widget WordPress para que ele funcione. Adicione este c\u00f3digo fora da classe.<\/p>\n<pre><code class=\"language-php\">\/\/function to register the widget\nfunction kinsta_register_cta_widget() {\n\n register_widget( 'kinsta_Cta_Widget' );\n\u00a0\u00a0\n}\nadd_action( 'widgets_init', 'kinsta_register_cta_widget' );<\/code><\/pre>\n<p>Agora salve seu arquivo de plugin. V\u00e1 para a tela de Widgets e voc\u00ea ver\u00e1 o widget para uso.<\/p>\n<figure id=\"attachment_65287\" aria-describedby=\"caption-attachment-65287\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-65287 size-full\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/novo-widget-ecra-widgets.jpg\" alt=\"Novo widget no ecr\u00e3 de widgets\" width=\"1500\" height=\"838\"><figcaption id=\"caption-attachment-65287\" class=\"wp-caption-text\">Novo widget no ecr\u00e3 de widgets<\/figcaption><\/figure>\n<p>Se voc\u00ea adicion\u00e1-lo a uma \u00e1rea widget e adicionar texto e um link para ele, ele ser\u00e1 produzido no site ao vivo.<\/p>\n<figure id=\"attachment_65288\" aria-describedby=\"caption-attachment-65288\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-65288 size-full\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/novo-widget-site-vivo.jpg\" alt=\"Novo widget no site ao vivo\" width=\"1500\" height=\"761\"><figcaption id=\"caption-attachment-65288\" class=\"wp-caption-text\">Novo widget no site ao vivo<\/figcaption><\/figure>\n<p>Pode n\u00e3o parecer assim t\u00e3o bom neste momento. Voc\u00ea precisa <a href=\"https:\/\/kinsta.com\/pt\/blog\/css-wordpress\/\">adicionar um pouco de CSS<\/a> para dar estilo.<\/p>\n<h3><strong>Adicionando CSS ao Widget<br \/>\n<\/strong><\/h3>\n<p>Para adicionar o CSS ao seu plugin, voc\u00ea precisa criar uma folha de estilo e solicitar no seu plugin. Adicione isto ao seu arquivo de plugin antes da aula.<\/p>\n<pre><code class=\"language-php\">function kinsta_widget_enqueue_styles() {\n\n wp_register_style( 'widget_cta_css', plugins_url( 'css\/style.css', __FILE__ ) );\n wp_enqueue_style( 'widget_cta_css' );\n\n}\nadd_action( 'wp_enqueue_scripts', 'kinsta_widget_enqueue_styles' );<\/code><\/pre>\n<p>Agora voc\u00ea precisa adicionar um arquivo <strong>style.css<\/strong> dentro da pasta do plugin e adicionar qualquer estilo a isso. Eu deixo isso para ti!<\/p>\n<p>Agora voc\u00ea tem uma simples\u00a0<a href=\"https:\/\/kinsta.com\/pt\/blog\/dicas-otimizacao-taxa-conversao\/#2-strategic-ctas-button-popups-pricing-tables\">chamada para o bot\u00e3o de a\u00e7\u00e3o<\/a> que voc\u00ea pode adicionar a qualquer \u00e1rea do widget no seu site. Se voc\u00ea adicion\u00e1-lo \u00e0 sua barra lateral, por exemplo, as pessoas poder\u00e3o us\u00e1-lo para chegar \u00e0 sua p\u00e1gina de inscri\u00e7\u00e3o de qualquer lugar do site.<\/p>\n<p>Voc\u00ea pode criar widgets mais complexos com configura\u00e7\u00f5es e op\u00e7\u00f5es extras, mas isso lhe d\u00e1 uma id\u00e9ia de como come\u00e7ar a criar seu pr\u00f3prio widget.<\/p>\n<p>Se voc\u00ea quiser ver meu c\u00f3digo para este plugin, incluindo o estilo, voc\u00ea pode encontr\u00e1-lo no\u00a0<a href=\"https:\/\/github.com\/rachelmccollin\/kinsta-cta-widget-plugin\">Github<\/a>. Se voc\u00ea est\u00e1 come\u00e7ando com c\u00f3digo, aqui est\u00e1 um guia detalhado sobre\u00a0<a href=\"https:\/\/kinsta.com\/pt\/blog\/git-vs-github\/\">gitHub vs GitHub<\/a> e como come\u00e7ar com ambos.<\/p>\n\n<h2><strong>Resumo<br \/>\n<\/strong><\/h2>\n<p>Widgets s\u00e3o uma das minhas caracter\u00edsticas favoritas do <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-wordpress\/\">WordPress<\/a>. Eles podem dar vida ao seu site e ajud\u00e1-lo a obter mais inscri\u00e7\u00f5es ou\u00a0<a href=\"https:\/\/kinsta.com\/pt\/blog\/ferramentas-de-teste-a-b-do-wordpress\/\">converter mais visitantes em clientes<\/a>. Voc\u00ea pode adicionar widgets WordPress a qualquer \u00e1rea widget existente no seu tema, ou pode adicionar \u00e1reas widget extras para que voc\u00ea possa adicionar mais widgets em mais lugares.<\/p>\n<p>H\u00e1 tamb\u00e9m muitos lugares para encontrar widgets. O WordPress vem com uma s\u00e9rie deles pr\u00e9-instalados, e voc\u00ea tamb\u00e9m pode instalar mais deles\u00a0<a href=\"https:\/\/kinsta.com\/pt\/topicos\/plugins-wordpress\/\">atrav\u00e9s de plugins<\/a>. Mas isso n\u00e3o \u00e9 tudo, se voc\u00ea se sentir confort\u00e1vel, voc\u00ea tamb\u00e9m pode codificar seus pr\u00f3prios widgets usando o Widgets API.<\/p>\n<p>Agora \u00e9 a sua vez: como voc\u00ea usa widgets WordPress no seu site? Quantos est\u00e1s a usar?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Os widgets WordPress s\u00e3o incrivelmente \u00fateis. Eles permitem que voc\u00ea adicione todo tipo de conte\u00fado extra ao seu site fora do corpo do pr\u00f3prio post ou &#8230;<\/p>\n","protected":false},"author":105,"featured_media":35325,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[64,30],"topic":[1026],"class_list":["post-35324","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-webdesign","tag-wordpress","topic-desenvolvimento-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>O Guia Completo para WordPress Widgets (O Que, Como e C\u00f3digo Snippets)<\/title>\n<meta name=\"description\" content=\"Use os widgets WordPress para melhorar seu site: adicione um login na barra lateral, um bot\u00e3o cta, uma galeria. Aprenda como adicionar, usar e codificar widgets WordPress a partir do zero.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-widgets\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"O Guia Completo para WordPress Widgets: Como Utiliz\u00e1-los, Adicion\u00e1-los e Configur\u00e1-los para Personalizar o Seu Site\" \/>\n<meta property=\"og:description\" content=\"Use os widgets WordPress para melhorar seu site: adicione um login na barra lateral, um bot\u00e3o cta, uma galeria. Aprenda como adicionar, usar e codificar widgets WordPress a partir do zero.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-widgets\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-02-13T14:57:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-18T09:41:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/widgets-wordpress.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Rachel McCollin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Use os widgets WordPress para melhorar seu site: adicione um login na barra lateral, um bot\u00e3o cta, uma galeria. Aprenda como adicionar, usar e codificar widgets WordPress a partir do zero.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/widgets-wordpress.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rachel McCollin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"35 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-widgets\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-widgets\/\"},\"author\":{\"name\":\"Rachel McCollin\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/52eb266d622b565d3206e355caac172e\"},\"headline\":\"O Guia Completo para WordPress Widgets: Como Utiliz\u00e1-los, Adicion\u00e1-los e Configur\u00e1-los para Personalizar o Seu Site\",\"datePublished\":\"2020-02-13T14:57:35+00:00\",\"dateModified\":\"2025-02-18T09:41:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-widgets\/\"},\"wordCount\":6375,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-widgets\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/widgets-wordpress.jpg\",\"keywords\":[\"webdesign\",\"WordPress\"],\"articleSection\":[\"Desenvolvimento WordPress\"],\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/wordpress-widgets\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-widgets\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-widgets\/\",\"name\":\"O Guia Completo para WordPress Widgets (O Que, Como e C\u00f3digo Snippets)\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-widgets\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-widgets\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/widgets-wordpress.jpg\",\"datePublished\":\"2020-02-13T14:57:35+00:00\",\"dateModified\":\"2025-02-18T09:41:06+00:00\",\"description\":\"Use os widgets WordPress para melhorar seu site: adicione um login na barra lateral, um bot\u00e3o cta, uma galeria. Aprenda como adicionar, usar e codificar widgets WordPress a partir do zero.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-widgets\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/wordpress-widgets\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-widgets\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/widgets-wordpress.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/widgets-wordpress.jpg\",\"width\":1460,\"height\":730,\"caption\":\"O Guia Completo para WordPress Widgets\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-widgets\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Desenvolvimento WordPress\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/desenvolvimento-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"O Guia Completo para WordPress Widgets: Como Utiliz\u00e1-los, Adicion\u00e1-los e Configur\u00e1-los para Personalizar o Seu Site\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/52eb266d622b565d3206e355caac172e\",\"name\":\"Rachel McCollin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f99f27294a4a0acb07caa4d0604a1fef?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f99f27294a4a0acb07caa4d0604a1fef?s=96&d=mm&r=g\",\"caption\":\"Rachel McCollin\"},\"description\":\"Rachel McCollin has been helping people build websites with WordPress since 2010. She's a huge fan of self-hosted WordPress and wants to help as many people as possible create an awesome website with it.\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/author\/rachelmccollin\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"O Guia Completo para WordPress Widgets (O Que, Como e C\u00f3digo Snippets)","description":"Use os widgets WordPress para melhorar seu site: adicione um login na barra lateral, um bot\u00e3o cta, uma galeria. Aprenda como adicionar, usar e codificar widgets WordPress a partir do zero.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/pt\/blog\/wordpress-widgets\/","og_locale":"pt_PT","og_type":"article","og_title":"O Guia Completo para WordPress Widgets: Como Utiliz\u00e1-los, Adicion\u00e1-los e Configur\u00e1-los para Personalizar o Seu Site","og_description":"Use os widgets WordPress para melhorar seu site: adicione um login na barra lateral, um bot\u00e3o cta, uma galeria. Aprenda como adicionar, usar e codificar widgets WordPress a partir do zero.","og_url":"https:\/\/kinsta.com\/pt\/blog\/wordpress-widgets\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2020-02-13T14:57:35+00:00","article_modified_time":"2025-02-18T09:41:06+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/widgets-wordpress.jpg","type":"image\/jpeg"}],"author":"Rachel McCollin","twitter_card":"summary_large_image","twitter_description":"Use os widgets WordPress para melhorar seu site: adicione um login na barra lateral, um bot\u00e3o cta, uma galeria. Aprenda como adicionar, usar e codificar widgets WordPress a partir do zero.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/widgets-wordpress.jpg","twitter_creator":"@kinsta_pt","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Rachel McCollin","Tempo estimado de leitura":"35 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-widgets\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-widgets\/"},"author":{"name":"Rachel McCollin","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/52eb266d622b565d3206e355caac172e"},"headline":"O Guia Completo para WordPress Widgets: Como Utiliz\u00e1-los, Adicion\u00e1-los e Configur\u00e1-los para Personalizar o Seu Site","datePublished":"2020-02-13T14:57:35+00:00","dateModified":"2025-02-18T09:41:06+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-widgets\/"},"wordCount":6375,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-widgets\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/widgets-wordpress.jpg","keywords":["webdesign","WordPress"],"articleSection":["Desenvolvimento WordPress"],"inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/wordpress-widgets\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-widgets\/","url":"https:\/\/kinsta.com\/pt\/blog\/wordpress-widgets\/","name":"O Guia Completo para WordPress Widgets (O Que, Como e C\u00f3digo Snippets)","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-widgets\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-widgets\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/widgets-wordpress.jpg","datePublished":"2020-02-13T14:57:35+00:00","dateModified":"2025-02-18T09:41:06+00:00","description":"Use os widgets WordPress para melhorar seu site: adicione um login na barra lateral, um bot\u00e3o cta, uma galeria. Aprenda como adicionar, usar e codificar widgets WordPress a partir do zero.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-widgets\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/wordpress-widgets\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-widgets\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/widgets-wordpress.jpg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/widgets-wordpress.jpg","width":1460,"height":730,"caption":"O Guia Completo para WordPress Widgets"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-widgets\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Desenvolvimento WordPress","item":"https:\/\/kinsta.com\/pt\/topicos\/desenvolvimento-wordpress\/"},{"@type":"ListItem","position":3,"name":"O Guia Completo para WordPress Widgets: Como Utiliz\u00e1-los, Adicion\u00e1-los e Configur\u00e1-los para Personalizar o Seu Site"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/52eb266d622b565d3206e355caac172e","name":"Rachel McCollin","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f99f27294a4a0acb07caa4d0604a1fef?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f99f27294a4a0acb07caa4d0604a1fef?s=96&d=mm&r=g","caption":"Rachel McCollin"},"description":"Rachel McCollin has been helping people build websites with WordPress since 2010. She's a huge fan of self-hosted WordPress and wants to help as many people as possible create an awesome website with it.","url":"https:\/\/kinsta.com\/pt\/blog\/author\/rachelmccollin\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/35324","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/105"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=35324"}],"version-history":[{"count":13,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/35324\/revisions"}],"predecessor-version":[{"id":49111,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/35324\/revisions\/49111"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/35324\/translations\/en"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/35324\/translations\/fr"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/35324\/translations\/es"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/35324\/translations\/pt"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/35324\/translations\/it"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/35324\/translations\/nl"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/35324\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/35324\/translations\/jp"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/35324\/translations\/dk"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/35324\/translations\/se"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/35324\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/35325"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=35324"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=35324"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=35324"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}