{"id":14063,"date":"2019-01-17T11:37:35","date_gmt":"2019-01-17T13:37:35","guid":{"rendered":"https:\/\/blog.hostinger.io\/pt-tutoriais\/?p=14063"},"modified":"2026-03-27T19:32:51","modified_gmt":"2026-03-27T22:32:51","slug":"o-que-e-widget","status":"publish","type":"post","link":"\/pt\/tutoriais\/o-que-e-widget","title":{"rendered":"O que s\u00e3o widgets WordPress? Saiba como usar, criar e personalizar no seu site"},"content":{"rendered":"<p>Os widgets do WordPress s&atilde;o elementos modulares e independentes &ndash; barras de pesquisa, listas de posts recentes, feeds de redes sociais &ndash; que voc&ecirc; pode inserir em &aacute;reas como barras laterais, rodap&eacute;s e cabe&ccedil;alhos sem escrever nenhum c&oacute;digo. O principal objetivo deles &eacute; adicionar e aprimorar a funcionalidade e o layout do site.<\/p><p>Como os widgets funcionam depende do seu tema. Temas cl&aacute;ssicos usam uma interface de widgets dedicada, enquanto temas de blocos substituem os widgets inteiramente pelo Editor de Site Completo. O WordPress inclui v&aacute;rios widgets integrados, mas voc&ecirc; tamb&eacute;m pode usar plugins para adicionar mais.<\/p><p>Para usar widgets de forma estrat&eacute;gica, mantenha as &aacute;reas de widgets focadas, evite a polui&ccedil;&atilde;o visual, verifique a compatibilidade com o seu tema e monitore o impacto deles no desempenho do site WordPress.<\/p><p>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-o-que-sao-widgets-do-wordpress\">O que s&atilde;o widgets do WordPress?<\/h2><p>Um widget do WordPress &eacute; um pequeno elemento de conte&uacute;do independente que pode ser colocado em &aacute;reas do seu site preparadas para widgets. Essas &aacute;reas s&atilde;o se&ccedil;&otilde;es de layout definidas pelo tema WordPress escolhido, tipicamente em barras laterais e rodap&eacute;s, mas &agrave;s vezes tamb&eacute;m em cabe&ccedil;alhos, acima ou abaixo do conte&uacute;do, ou em locais dentro de modelos de p&aacute;gina.<\/p><p>Widgets s&atilde;o modulares por design, o que significa que cada um pode ser adicionado, removido ou reutilizado de forma independente ao editar um site WordPress,<strong> sem afetar o restante do seu layout<\/strong>.<\/p><p>Os widgets do WordPress existem desde a vers&atilde;o 2.2, em 2007. No in&iacute;cio, os temas definiam &aacute;reas de widgets dedicadas, permitindo que voc&ecirc; arrastasse e soltasse widgets pr&eacute;-constru&iacute;dos a partir do painel.<\/p><p>Com o lan&ccedil;amento do WordPress 5.8 em 2021, <strong>widgets baseados em blocos<\/strong> foram introduzidos nos temas cl&aacute;ssicos. Em vez de se limitar aos widgets tradicionais, voc&ecirc; pode adicionar blocos como imagens, galerias, bot&otilde;es ou HTML personalizado &agrave;s &aacute;reas de widgets. Isso trouxe a flexibilidade do editor de blocos para partes do layout do site que antes eram muito r&iacute;gidas.<\/p><p>Com temas de blocos como o Twenty Twenty-Five, o <strong>Editor de Site<\/strong> substitui o sistema cl&aacute;ssico de widgets. Cabe&ccedil;alhos, rodap&eacute;s, barras laterais e outros elementos de layout s&atilde;o todos gerenciados como blocos do WordPress no Editor de Site, portanto, voc&ecirc; n&atilde;o ver&aacute; um menu separado.<\/p><p>Cada widget tem suas pr&oacute;prias configura&ccedil;&otilde;es, que s&atilde;o salvas por inst&acirc;ncia de widget, de modo que o mesmo widget pode se comportar de forma diferente em diferentes &aacute;reas.<\/p><p>Por exemplo, um widget de <strong>Posts Recentes<\/strong> permite que voc&ecirc; controle quantos posts aparecem e se as datas s&atilde;o exibidas. Um widget de <strong>Texto<\/strong> ou <strong>HTML Personalizado<\/strong> aceita marca&ccedil;&atilde;o personalizada, tornando-o &uacute;til para formul&aacute;rios, an&uacute;ncios ou ferramentas incorporadas.<\/p><h3 class=\"wp-block-heading\">Tipos e exemplos de widgets do WordPress<\/h3><p>Os widgets do WordPress dividem-se em tr&ecirc;s categorias principais: <strong>widgets padr&atilde;o<\/strong> inclu&iacute;dos nativamente, <strong>widgets de terceiros<\/strong> adicionados via plugins e <strong>widgets personalizados do WordPress<\/strong> criados especificamente para um site.<\/p><p>Cada categoria serve a um prop&oacute;sito diferente, mas todas s&atilde;o projetadas para aprimorar a funcionalidade do site e melhorar a experi&ecirc;ncia do visitante.<\/p><h4 class=\"wp-block-heading\">Widgets principais padr&atilde;o<\/h4><p>Widgets nativos atendem &agrave;s necessidades mais comuns de sites e est&atilde;o dispon&iacute;veis em todas as instala&ccedil;&otilde;es do WordPress. Alguns dos principais widgets s&atilde;o:<\/p><ul class=\"wp-block-list\">\n<li><strong>Pesquisar.<\/strong> Adiciona uma barra de pesquisa para que os visitantes encontrem conte&uacute;do rapidamente.<\/li>\n\n\n\n<li><strong>&Uacute;ltimas Postagens. <\/strong>Exibe automaticamente seus artigos mais recentes, ajudando a manter as barras laterais atualizadas.<\/li>\n\n\n\n<li><strong><\/strong> <strong>Lista de Categorias e Arquivos.<\/strong> Permite que os visitantes naveguem pelo conte&uacute;do por t&oacute;pico ou data de publica&ccedil;&atilde;o.<\/li>\n\n\n\n<li><strong>Calend&aacute;rio. <\/strong>Mostra uma visualiza&ccedil;&atilde;o mensal com links para posts por data.<\/li>\n\n\n\n<li><strong>HTML personalizado.<\/strong> Comumente usado para incorporar formul&aacute;rios de inscri&ccedil;&atilde;o em newsletters, scripts de an&uacute;ncios ou ferramentas de terceiros.<\/li>\n<\/ul><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"6a00a76c3b851\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/br\/tutoriais\/wp-content\/uploads\/sites\/53\/2026\/03\/widget-padrao-do-WordPress.png\" alt=\"Os widgets padr&atilde;o do WordPress\" class=\"wp-image-53846\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Ampliar\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><h4 class=\"wp-block-heading\">Widgets de terceiros<\/h4><p>Widgets de terceiros s&atilde;o widgets que voc&ecirc; adiciona ao instalar um plugin e s&atilde;o projetados para exibir recursos espec&iacute;ficos em &aacute;reas prontas para widgets. Este tipo de widget aprimora a experi&ecirc;ncia do usu&aacute;rio ao facilitar o acesso &agrave;s a&ccedil;&otilde;es principais em todo o site.<\/p><p>Por exemplo, plugins de e-commerce adicionam widgets de categorias de produtos ou pr&eacute;vias do carrinho, enquanto plugins de redes sociais fornecem &iacute;cones de redes sociais ou widgets de feed que incentivam os visitantes a seguir ou compartilhar conte&uacute;do. Enquanto isso, plugins de formul&aacute;rio adicionam widgets que incorporam formul&aacute;rios de contato ou de inscri&ccedil;&atilde;o diretamente em barras laterais ou rodap&eacute;s.<\/p><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"6a00a76c3cc71\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/br\/tutoriais\/wp-content\/uploads\/sites\/53\/2026\/03\/widget-adicional-do-WordPress-do-WooCommerce.png\" alt=\"Widgets adicionais do plugin WooCommerce\" class=\"wp-image-53848\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Ampliar\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><h4 class=\"wp-block-heading\">Widgets personalizados do WordPress<\/h4><p>Widgets personalizados do WordPress s&atilde;o criados por desenvolvedores usando c&oacute;digo e s&atilde;o adaptados para necessidades muito espec&iacute;ficas do site. Eles s&atilde;o frequentemente usados quando widgets ou plugins padr&atilde;o n&atilde;o oferecem a funcionalidade necess&aacute;ria.<\/p><p>Exemplos incluem widgets que exibem o hor&aacute;rio de funcionamento, detalhes de contato espec&iacute;ficos do local, diret&oacute;rios de funcion&aacute;rios ou conte&uacute;do promocional din&acirc;mico.<\/p><p>Embora os widgets personalizados exijam esfor&ccedil;o de desenvolvimento, eles oferecem controle total sobre o layout, o comportamento e o desempenho, tornando-os ideais para empresas com requisitos exclusivos.<\/p><h3 class=\"wp-block-heading\">Diferen&ccedil;as entre widgets e plugins do WordPress<\/h3><p>Um plugin do WordPress <strong>adiciona ou altera funcionalidades<\/strong> <strong>no n&iacute;vel do site<\/strong>. Um widget, por outro lado, &eacute; um <strong>componente modular de interface de usu&aacute;rio<\/strong> que exibe um conte&uacute;do ou funcionalidade espec&iacute;fica em uma &aacute;rea definida do seu layout, como uma barra lateral, rodap&eacute; ou cabe&ccedil;alho.<\/p><p>Plugins podem introduzir sistemas inteiramente novos, como ferramentas de SEO, plataformas de e-commerce, recursos de seguran&ccedil;a ou tipos de postagem personalizados, e seus efeitos se aplicam a todo o seu site.<\/p><p>Por exemplo, para come&ccedil;ar a vender produtos no seu site, voc&ecirc; instalaria um <a href=\"\/pt\/tutoriais\/plugins-para-loja-virtual-wordpress\">plugin de e-commerce<\/a>.<\/p><p>Enquanto isso, os widgets dependem de recursos nativos do WordPress ou de funcionalidades fornecidas por plugins para funcionar. Portanto, use um widget quando voc&ecirc; j&aacute; tiver a funcionalidade e apenas precisar exibi-la em uma &aacute;rea espec&iacute;fica. Por exemplo, para exibir seus posts mais recentes em uma barra lateral, use o widget Posts Recentes.<\/p><p>Na maioria dos casos, um site WordPress precisar&aacute; tanto de plugins quanto de widgets.<\/p><h2 class=\"wp-block-heading\" id=\"h-como-adicionar-widgets-do-wordpress\">Como adicionar widgets do WordPress<\/h2><p>Os widgets do WordPress s&oacute; podem ser colocados em <strong>&aacute;reas prontas para widgets<\/strong>, que s&atilde;o as se&ccedil;&otilde;es de layout definidas pelo seu tema, como barras laterais, rodap&eacute;s ou outros cont&ecirc;ineres designados. Estas &aacute;reas funcionam como espa&ccedil;os onde os widgets podem ser adicionados, organizados e configurados individualmente.<\/p><p>A maneira como voc&ecirc; adiciona widgets do WordPress depende do tema do WordPress escolhido. Temas cl&aacute;ssicos usam uma tela de <strong>Widgets<\/strong> dedicada no painel do WordPress, enquanto temas de blocos gerenciam elementos de layout atrav&eacute;s do <strong>Editor de Site<\/strong>.<\/p><p>Como os sistemas funcionam de forma diferente, as etapas para adicionar widgets variam de acordo.<\/p><h3 class=\"wp-block-heading\">Como adicionar widgets em temas de blocos<\/h3><p>Se voc&ecirc; estiver usando um tema de blocos, siga estas etapas para adicionar qualquer um dos widgets pr&eacute;-instalados ao seu site WordPress:<\/p><ol class=\"wp-block-list\">\n<li>No painel de administra&ccedil;&atilde;o do WordPress, v&aacute; em <strong>Apar&ecirc;ncia<\/strong> &rarr; <strong>Editor<\/strong>.<\/li>\n\n\n\n<li>Selecione a p&aacute;gina que deseja editar no menu <strong>P&aacute;ginas<\/strong>.&nbsp;<\/li>\n\n\n\n<li>Passe o mouse sobre o local onde deseja adicionar um widget at&eacute; que o bot&atilde;o de mais (<strong>+<\/strong>) apare&ccedil;a.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"6a00a76c3e142\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/br\/tutoriais\/wp-content\/uploads\/sites\/53\/2026\/03\/adicionar-botao-de-bloco-no-editor-de-site-do-wordpress.png\" alt=\"O bot&atilde;o Adicionar bloco no Editor de Site do WordPress\" class=\"wp-image-53850\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Ampliar\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"4\" class=\"wp-block-list\">\n<li>Clique no bot&atilde;o <strong>+<\/strong> para abrir a lista de blocos. Voc&ecirc; pode selecionar <strong>Navegar por tudo<\/strong> para abrir o painel de blocos completo.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"6a00a76c3f6ff\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/br\/tutoriais\/wp-content\/uploads\/sites\/53\/2026\/03\/painel-de-bloco-completo-aberto-no-editor-de-site-do-wordpress.png\" alt=\"A se&ccedil;&atilde;o de Widgets no painel de todos os blocos do WordPress\" class=\"wp-image-53857\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Ampliar\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"5\" class=\"wp-block-list\">\n<li>Escolha seu widget e voc&ecirc; ver&aacute; como ele ficar&aacute; na &aacute;rea de pr&eacute;-visualiza&ccedil;&atilde;o da p&aacute;gina.<\/li>\n\n\n\n<li>Personalize o widget usando o painel de configura&ccedil;&otilde;es que aparece ao clicar nele.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"6a00a76c40b9f\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/br\/tutoriais\/wp-content\/uploads\/sites\/53\/2026\/03\/painel-de-configuracoes-do-bloco-do-WordPress-aberto.png\" alt=\"O painel de configura&ccedil;&otilde;es do bloco no Editor de Site do WordPress\" class=\"wp-image-53859\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Ampliar\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"7\" class=\"wp-block-list\">\n<li>Assim que terminar de personalizar, clique em <strong>Salvar<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"6a00a76c41eb0\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/br\/tutoriais\/wp-content\/uploads\/sites\/53\/2026\/03\/botao-salvar-no-editor-de-site-do-wordpress.png\" alt=\"Bot&atilde;o Salvar no Editor de Site do WordPress\" class=\"wp-image-53862\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Ampliar\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><h3 class=\"wp-block-heading\">Como adicionar widgets em temas cl&aacute;ssicos<\/h3><p>Temas cl&aacute;ssicos ainda usam um sistema de widgets dedicado. Widgets s&atilde;o adicionados e gerenciados atrav&eacute;s do painel do WordPress, e voc&ecirc; <strong>s&oacute; pode adicion&aacute;-los em &aacute;reas de widgets<\/strong> definidas pelo seu tema.<\/p><p>Veja como adicionar um widget em um tema cl&aacute;ssico do WordPress:<\/p><ol class=\"wp-block-list\">\n<li>Navegue at&eacute; <strong>Apar&ecirc;ncia<\/strong> &rarr; <strong>Widgets<\/strong> no seu painel do WordPress.<\/li>\n\n\n\n<li>Voc&ecirc; ver&aacute; a &aacute;rea de widgets dispon&iacute;vel do seu tema no painel de visualiza&ccedil;&atilde;o. Clique no bot&atilde;o <strong>+<\/strong> para adicionar um widget.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"6a00a76c433b0\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/br\/tutoriais\/wp-content\/uploads\/sites\/53\/2026\/03\/menu-de-widgets-no-editor-classico-do-wordpress.png\" alt=\"A &aacute;rea de Widgets em um tema cl&aacute;ssico do WordPress\" class=\"wp-image-53864\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Ampliar\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Selecione o widget que voc&ecirc; deseja e personalize-o conforme necess&aacute;rio.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"6a00a76c44773\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"\/br\/tutoriais\/wp-content\/uploads\/sites\/53\/2026\/03\/widget-selecionado-no-tema-classico-do-wordpress.png\" alt=\"Um widget do WordPress selecionado no Personalizador de um tema cl&aacute;ssico\" class=\"wp-image-53867\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Ampliar\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"4\" class=\"wp-block-list\">\n<li>Finalize clicando em <strong>Atualizar<\/strong>.<\/li>\n<\/ol><h3 class=\"wp-block-heading\">Como adicionar widgets usando um plugin<\/h3><p>Alguns <a href=\"\/pt\/tutoriais\/o-que-e-plugin\">plugins do WordPress<\/a> estendem o sistema de widgets padr&atilde;o ao adicionar novos widgets ou fornecer mais controle sobre os existentes, como regras de visibilidade ou configura&ccedil;&otilde;es de exibi&ccedil;&atilde;o.<\/p><p>Se voc&ecirc; estiver usando um <strong>tema cl&aacute;ssico<\/strong>, plugins complementares de tema como Widget Options, RaraTheme Companion ou Custom Sidebars podem ajudar a expandir o funcionamento dos widgets do WordPress no seu site.<\/p><p>Em temas de blocos, onde os layouts s&atilde;o constru&iacute;dos inteiramente com blocos no Editor de Site, os recursos baseados em widgets podem estar limitados ou indispon&iacute;veis. Nesses casos, &eacute; melhor usar plugins de blocos como Spectra, Kadence Blocks ou Stackable para expandir a funcionalidade.<\/p><p>Assim que encontrar sua op&ccedil;&atilde;o preferida, <a href=\"\/pt\/tutoriais\/como-instalar-plugins-wordpress\">instale o plugin<\/a>. Em seguida, voc&ecirc; pode adicionar e configurar os widgets adicionais usando as mesmas etapas abordadas nas se&ccedil;&otilde;es anteriores.<\/p><h2 class=\"wp-block-heading\" id=\"h-melhores-praticas-para-usar-widgets-do-wordpress\">Melhores pr&aacute;ticas para usar widgets do WordPress<\/h2><p>Widgets podem melhorar seu site quando usados intencionalmente. Se usados em excesso ou mal configurados, eles podem poluir seu layout e afetar negativamente o desempenho do seu site WordPress.<\/p><p>As seguintes dicas ajudar&atilde;o voc&ecirc; a usar widgets estrategicamente e a evitar armadilhas comuns.<\/p><h3 class=\"wp-block-heading\">Priorize a relev&acirc;ncia e o minimalismo.<\/h3><p>Cada widget deve ter um prop&oacute;sito claro para o visitante. Se n&atilde;o melhora a navega&ccedil;&atilde;o, destaca conte&uacute;do importante ou auxilia nas convers&otilde;es, provavelmente n&atilde;o deveria estar l&aacute;.<\/p><p>Por exemplo, uma barra lateral com uma <strong>barra de pesquisa<\/strong>, um pequeno texto <strong>&ldquo;Sobre&rdquo;<\/strong> e uma lista de <strong>categorias<\/strong> oferece uma navega&ccedil;&atilde;o &uacute;til. Mas acumul&aacute;-los apenas por ter pode criar ru&iacute;do visual, e a maioria dos visitantes n&atilde;o percorrer&aacute; tudo.<\/p><p>&Eacute; melhor adotar uma abordagem minimalista:<\/p><ul class=\"wp-block-list\">\n<li>Foque na utilidade, n&atilde;o na decora&ccedil;&atilde;o.<\/li>\n\n\n\n<li>Limite os widgets a tr&ecirc;s a cinco por &aacute;rea.<\/li>\n\n\n\n<li>Mantenha a consist&ecirc;ncia visual com espa&ccedil;amento, alinhamento e tipografia para que os widgets n&atilde;o pare&ccedil;am complementos desconectados.<\/li>\n<\/ul><p>Widgets bem posicionados devem apoiar seu conte&uacute;do, n&atilde;o competir com ele.<\/p><h3 class=\"wp-block-heading\">Considere o impacto no desempenho<\/h3><p>Cada widget adiciona marca&ccedil;&atilde;o, scripts ou requisi&ccedil;&otilde;es externas. Widgets que carregam feeds de redes sociais, mapas incorporados ou scripts de an&uacute;ncios de terceiros fazem chamadas de servidor adicionais toda vez que uma p&aacute;gina &eacute; carregada. Isso afeta diretamente o desempenho de sites WordPress, especialmente em dispositivos m&oacute;veis.<\/p><p>Para ajudar a identificar quais elementos aumentam o tempo de carregamento, teste a velocidade do seu site usando ferramentas como o Google PageSpeed Insights ou o GTmetrix antes e depois de adicionar widgets.<\/p><p>Widgets que carregam recursos externos est&atilde;o entre as primeiras &aacute;reas a serem auditadas ao se deparar com um baixo desempenho do site, pois est&atilde;o entre os motivos comuns pelos quais seu site WordPress est&aacute; lento.<\/p><p>Tenha em mente que alguns widgets, como <strong>Produtos Relacionados<\/strong>, exibem conte&uacute;do din&acirc;mico que pode exigir exclus&otilde;es de cache para funcionar corretamente. Uma configura&ccedil;&atilde;o de cache inadequada pode comprometer a funcionalidade ou deixar seu site mais lento.<\/p><h3 class=\"wp-block-heading\">Verifique a compatibilidade antes de publicar<\/h3><p>Nem todo widget funciona perfeitamente com todos os temas ou em todas as &aacute;reas de widgets.<\/p><p>Por exemplo, widgets projetados para &aacute;reas de rodap&eacute; largas podem parecer estranhos em barras laterais estreitas, e widgets de terceiros podem entrar em conflito com o CSS ou JavaScript do seu tema.<\/p><p>Sempre visualize os widgets usando o Personalizador, o Editor de Site ou um <a href=\"\/pt\/tutoriais\/ambiente-de-teste-wordpress\">ambiente de teste<\/a> antes de publicar as altera&ccedil;&otilde;es. Isso permite que voc&ecirc; identifique problemas de layout, conflitos de estilo ou comportamentos inesperados antes que eles afetem seu site ao vivo.<\/p><h3 class=\"wp-block-heading\">Pense primeiro no mobile<\/h3><p>Muitos temas movem os widgets da barra lateral para baixo do conte&uacute;do principal em telas menores. Isso significa que os visitantes em dispositivos m&oacute;veis podem precisar rolar por um artigo inteiro antes de ver qualquer conte&uacute;do da barra lateral.<\/p><p>Pergunte-se:<\/p><ul class=\"wp-block-list\">\n<li>Este widget precisa aparecer em dispositivos m&oacute;veis?<\/li>\n\n\n\n<li>Ainda &eacute; &uacute;til quando colocado abaixo do conte&uacute;do?<\/li>\n<\/ul><p>Se necess&aacute;rio, use controles de visibilidade para ocultar certos widgets em dispositivos espec&iacute;ficos.<\/p><h2 class=\"wp-block-heading\" id=\"h-erros-comuns-a-evitar-ao-usar-widgets-do-wordpress\">Erros comuns a evitar ao usar widgets do WordPress<\/h2><p>Para garantir que seus widgets melhorem seu site em vez de prejudic&aacute;-lo, fique atento a estes erros comuns:<\/p><ul class=\"wp-block-list\">\n<li><strong>Superlota&ccedil;&atilde;o de &aacute;reas de widgets.<\/strong> Widgets demais criam polui&ccedil;&atilde;o visual e lentid&atilde;o no carregamento.<\/li>\n\n\n\n<li><strong>Pedido de widget ruim.<\/strong> Coloque os widgets mais importantes no topo. Usu&aacute;rios raramente rolam at&eacute; o final de uma barra lateral.<\/li>\n\n\n\n<li><strong>Negligenciar a responsividade m&oacute;vel.<\/strong> Sempre teste widgets em celulares e tablets, n&atilde;o apenas em telas de desktop.<\/li>\n\n\n\n<li><strong>Usando plugins desatualizados.<\/strong> Verifique a data da &uacute;ltima atualiza&ccedil;&atilde;o e o n&uacute;mero de instala&ccedil;&otilde;es ativas antes de instalar um plugin de widget.<\/li>\n\n\n\n<li><strong>Ignorando verifica&ccedil;&otilde;es de desempenho.<\/strong> Sempre avalie como novos widgets afetam o desempenho do site WordPress.<\/li>\n\n\n\n<li><strong>Cache mal configurado.<\/strong> Garanta que os widgets din&acirc;micos sejam devidamente exclu&iacute;dos do cache quando necess&aacute;rio.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-proximo-passo-criar-um-widget-personalizado-do-wordpress\">Pr&oacute;ximo passo: Criar um widget personalizado do WordPress<\/h2><p>Widgets padr&atilde;o e widgets baseados em plugins atendem &agrave; maioria das necessidades comuns. Mas quando voc&ecirc; precisa de algo mais personalizado para o seu site, criar um widget customizado permite adicionar exatamente a funcionalidade de que voc&ecirc; precisa.<\/p><p>Por exemplo, voc&ecirc; pode querer exibir o hor&aacute;rio de funcionamento, uma lista din&acirc;mica baseada em tipos de post personalizados ou uma chamada para a&ccedil;&atilde;o reutiliz&aacute;vel personalizada para a sua marca. Com um widget personalizado, voc&ecirc; controla totalmente a sa&iacute;da, o layout e o comportamento.<\/p><p>Criar um widget personalizado exige conhecimento pr&aacute;tico de PHP, j&aacute; que o WordPress &eacute; constru&iacute;do sobre ele. Voc&ecirc; tamb&eacute;m precisar&aacute; entender como a classe<strong> WP_Widget<\/strong> funciona, bem como HTML e CSS b&aacute;sicos para estruturar e estilizar a sa&iacute;da do widget.<\/p><p>A familiaridade com a forma como temas e plugins interagem no WordPress tornar&aacute; o processo mais fluido, mas voc&ecirc; n&atilde;o precisa ser um desenvolvedor avan&ccedil;ado para come&ccedil;ar.<\/p><p>Se voc&ecirc; tiver interesse em tentar criar um por conta pr&oacute;pria, siga nosso tutorial passo a passo sobre <a href=\"\/pt\/tutoriais\/como-criar-widget-wordpress\">como criar um widget personalizado no WordPress<\/a>.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/pt\/alojamento-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2024\/06\/BR-New-WP_in-text-banner.png\" alt=\"\" class=\"wp-image-44638\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2024\/06\/BR-New-WP_in-text-banner.png 1024w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2024\/06\/BR-New-WP_in-text-banner-300x88.png 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2024\/06\/BR-New-WP_in-text-banner-150x44.png 150w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2024\/06\/BR-New-WP_in-text-banner-768x225.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Os widgets do WordPress s&atilde;o elementos modulares e independentes &ndash; barras de pesquisa, listas de posts recentes, feeds de redes sociais &ndash; que voc&ecirc; pode inserir em &aacute;reas como barras laterais, rodap&eacute;s e cabe&ccedil;alhos sem escrever nenhum c&oacute;digo. O principal objetivo deles &eacute; adicionar e aprimorar a funcionalidade e o layout do site. Como os [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/pt\/tutoriais\/o-que-e-widget\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":356,"featured_media":49991,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"Widgets WordPress: o que s\u00e3o, como criar e personalizar","rank_math_description":"Aprenda o que s\u00e3o widgets WordPress, como us\u00e1-los, personaliz\u00e1-los e at\u00e9 criar os seus. Deixe seu site mais funcional sem precisar programar!","rank_math_focus_keyword":"widgets wordpress","footnotes":""},"categories":[4911],"tags":[6220],"class_list":["post-14063","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-widget-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/wordpress-widgets","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/o-que-e-widget\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/widget-wordpress","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/que-es-widget-wordpress","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/apa-itu-widget","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/wordpress-widgets","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/wordpress-widgets","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/wordpress-widgets","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/que-es-widget-wordpress","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/que-es-widget-wordpress","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/como-usar-tmux-21","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/o-que-e-widget\/","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/wordpress-widgets","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/wordpress-widgets","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/wordpress-widgets","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/wordpress-widgets","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/14063","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/users\/356"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/comments?post=14063"}],"version-history":[{"count":17,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/14063\/revisions"}],"predecessor-version":[{"id":49990,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/14063\/revisions\/49990"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/media\/49991"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/media?parent=14063"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/categories?post=14063"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/tags?post=14063"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}