{"id":15933,"date":"2016-06-21T14:11:04","date_gmt":"2016-06-21T17:11:04","guid":{"rendered":"https:\/\/www.yogh.com.br\/?p=15933"},"modified":"2025-04-14T11:52:29","modified_gmt":"2025-04-14T14:52:29","slug":"como-adicionar-e-usar-widgets-wordpress","status":"publish","type":"post","link":"https:\/\/www.yogh.com.br\/blog\/como-adicionar-e-usar-widgets-wordpress\/","title":{"rendered":"Como adicionar e usar Widgets no WordPress"},"content":{"rendered":"<p>\t\t\t\tUsu\u00e1rios que est\u00e3o come\u00e7ando no universo do WordPress podem n\u00e3o saber ao certo o que s\u00e3o widgets e como se pode us\u00e1-las. <strong>Widgets permitem que voc\u00ea adicione diferentes funcionalidades na barra lateral de seu WordPress sem precisar escrever qualquer c\u00f3digo<\/strong>. Neste artigo, n\u00f3s vamos mostrar como adicionar e usar widgets no WordPress. Voc\u00ea est\u00e1 preparado?<\/p>\n<h2><span class=\"ez-toc-section\" id=\"O_que_sao_widgets_Por_que_e_necessario_usar_widgets_no_WordPress\"><\/span>O que s\u00e3o widgets? Por que \u00e9 necess\u00e1rio usar widgets no WordPress?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>Widgets s\u00e3o blocos pequenos com funcionalidades espec\u00edficas<\/strong> que voc\u00ea pode<strong> dispor nas barras laterais de seu site WordPress<\/strong> (tamb\u00e9m conhecidas como \u00e1reas para widgets). Para iniciantes esta \u00e9 uma forma f\u00e1cil de adicionar elementos como galerias, cita\u00e7\u00f5es, post mais populares, curtidas do Facebook e outros itens din\u00e2micos em seu site.<\/p>\n<p>\u00c9 poss\u00edvel achar as widgets na p\u00e1gina <em>Apar\u00eancia&gt; Widgets\u00a0<\/em>no painel do administrador.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-15936 size-full\" title=\"Widgets no WordPress - Como achar as widgets no WordPress\" src=\"https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2016\/06\/Widgets-no-WordPress-Como-achar-as-widgets-no-WordPress.png\" alt=\"Widgets no WordPress - Como achar as widgets no WordPress\" width=\"520\" height=\"305\" srcset=\"https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2016\/06\/Widgets-no-WordPress-Como-achar-as-widgets-no-WordPress.png 520w, https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2016\/06\/Widgets-no-WordPress-Como-achar-as-widgets-no-WordPress-300x176.png 300w\" sizes=\"(max-width: 520px) 100vw, 520px\" \/><\/p>\n<p>Voc\u00ea poder\u00e1 visualizar as widgets que poder\u00e1 adicionar na lista de widgets dispon\u00edveis. Voc\u00ea tamb\u00e9m poder\u00e1 encontrar as \u00e1reas designadas em seu site WordPress que voc\u00ea pode colocar estas widgets. Estas \u00e1reas s\u00e3o definidas pelo seu tema. Tamb\u00e9m conhecidas como barra lateral ou \u00e1reas para widgets.<\/p>\n<p>Se voc\u00ea n\u00e3o achar a widget espec\u00edfica que procura, voc\u00ea provavelmente poder\u00e1 achar por meio de um plugin.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Como_adicionar_uma_widget_na_barra_lateral_do_WordPress\"><\/span>Como adicionar uma widget na barra lateral do WordPress<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Existem muitas formas dispon\u00edveis para adicionar widgets nas barras laterais no seu tema WordPress. N\u00f3s vamos mostrar abaixo algumas maneiras para que voc\u00ea possa adicionar as widgets que deseja. Confira:<\/p>\n<h3><span class=\"ez-toc-section\" id=\"1_Adicionar_widget_com_drag_and_drop\"><\/span>1.\u00a0Adicionar widget com drag and drop<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>A<strong> forma mais f\u00e1cil<\/strong> \u00e9 simplesmente <strong>arrastar e soltar as widgets na barra lateral<\/strong>. Veja abaixo uma demonstra\u00e7\u00e3o:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-15937 size-full\" title=\"Widgets no WordPress - Como adicionar widgets no WordPress\" src=\"https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2016\/06\/Widgets-no-WordPress-Como-adicionar-widgets-no-WordPRESS.gif\" alt=\"Widgets no WordPress - Como adicionar widgets no WordPress\" width=\"520\" height=\"293\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"2_Adicionar_widget_por_lista\"><\/span>2.\u00a0Adicionar widget por lista<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Voc\u00ea tamb\u00e9m pode <strong>clicar no t\u00edtulo da widget da lista de widgets dispon\u00edveis<\/strong>. O WordPress vai mostrar a lista da barra lateral onde voc\u00ea pode adicionar a widget. Apenas selecione a barra lateral aonde voc\u00ea quer adicionar a widget e depois clique no bot\u00e3o de <strong>Adicionar Widget<\/strong> para incluir a widget selecionada.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-15938 size-full\" title=\"Widgets no WordPress - Como adicionar widget\" src=\"https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2016\/06\/Widgets-no-WordPress-Como-adicionar-widget.png\" alt=\"Widgets no WordPress - Como adicionar widget\" width=\"520\" height=\"307\" srcset=\"https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2016\/06\/Widgets-no-WordPress-Como-adicionar-widget.png 520w, https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2016\/06\/Widgets-no-WordPress-Como-adicionar-widget-300x177.png 300w\" sizes=\"(max-width: 520px) 100vw, 520px\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"3_Adicionar_widget_pelo_modo_de_acessibilidade\"><\/span>3. Adicionar widget pelo modo de acessibilidade<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><strong>Existe tamb\u00e9m o modo de acessibilidade<\/strong>. Para permitir o modo de acessibilidade voc\u00ea precisa clicar em <strong>Op\u00e7\u00f5es de Tela<\/strong> na parte superior direita da tela.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-15939 size-full\" title=\"Widgets no WordPress - Como adicionar Widgets modo acessbilidade\" src=\"https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2016\/06\/Widgets-no-WordPress-Como-adicionar-Widgets-modo-acessbilidade.png\" alt=\"Widgets no WordPress - Como adicionar Widgets modo acessbilidade\" width=\"520\" height=\"190\" srcset=\"https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2016\/06\/Widgets-no-WordPress-Como-adicionar-Widgets-modo-acessbilidade.png 520w, https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2016\/06\/Widgets-no-WordPress-Como-adicionar-Widgets-modo-acessbilidade-300x110.png 300w\" sizes=\"(max-width: 520px) 100vw, 520px\" \/><\/p>\n<p>Voc\u00ea ter\u00e1 a exibi\u00e7\u00e3o de um menu suspenso com um link para ativar o modo de acessibilidade para a tela de widgets. Clicando sobre ele ir\u00e1 alterar a interface do usu\u00e1rio da tela de widgets. Cada widget dispon\u00edvel ter\u00e1 um bot\u00e3o simples de adicionar. Clicando neste bot\u00e3o voc\u00ea ser\u00e1 levado a uma tela acess\u00edvel onde poder\u00e1 facilmente selecionar a barra lateral.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-15940 size-full\" title=\"Widgets no WordPress - Como adicionar widget no modo acessibilidade parte 2\" src=\"https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2016\/06\/Widgets-no-WordPress-Como-adicionar-widget-no-modo-acessibilidade-parte-2.png\" alt=\"Widgets no WordPress - Como adicionar widget no modo acessibilidade parte 2\" width=\"520\" height=\"347\" srcset=\"https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2016\/06\/Widgets-no-WordPress-Como-adicionar-widget-no-modo-acessibilidade-parte-2.png 520w, https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2016\/06\/Widgets-no-WordPress-Como-adicionar-widget-no-modo-acessibilidade-parte-2-300x200.png 300w\" sizes=\"(max-width: 520px) 100vw, 520px\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"4_Adicionar_widget_pela_live_preview\"><\/span>4. Adicionar widget pela live preview<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>A p\u00e1gina de widget n\u00e3o \u00e9 a \u00fanica forma de adicionar widgets ao seu site WordPress. Voc\u00ea tamb\u00e9m pode fazer isto <strong>usando a live preview<\/strong> indo em <em>Apar\u00eancia&gt; Customizar<\/em>.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-15941 size-full\" title=\"Widgets no WordPress - Adicionar widgets pela live preview\" src=\"https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2016\/06\/Widgets-no-WordPress-Adicionar-widgets-pela-live-preview.gif\" alt=\"Widgets no WordPress - Adicionar widgets pela live preview\" width=\"520\" height=\"263\" \/><\/p>\n<p>Vale lembrar que nem todas as \u00e1reas para widgets e barras laterais v\u00e3o aparacer no customizer. \u00c9 por isso que \u00e9 mais recomendado ir em <em>Apar\u00eancia&gt; Widget<\/em> para adicionar widgets em seu site WordPress.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Como_remover_uma_widget_do_WordPress\"><\/span>Como remover uma widget do WordPress<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Remover uma widget no WordPress \u00e9 t\u00e3o simples quanto adicionar uma. D\u00ea uma olhada na p\u00e1gina<em> Apar\u00eancia&gt; Widget.\u00a0<\/em>L\u00e1 identifique a widget que voc\u00ea deseja remover da sua barra lateral e clique no t\u00edtulo da widget para expandir.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-15943 size-full\" title=\"Widgets no WordPress - Remover widget\" src=\"https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2016\/06\/Widgets-no-WordPress-Remover-widget.png\" alt=\"Widgets no WordPress - Remover widget\" width=\"520\" height=\"341\" srcset=\"https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2016\/06\/Widgets-no-WordPress-Remover-widget.png 520w, https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2016\/06\/Widgets-no-WordPress-Remover-widget-300x197.png 300w\" sizes=\"(max-width: 520px) 100vw, 520px\" \/><\/p>\n<p>Embaixo das configura\u00e7\u00f5es da widget, voc\u00ea achar\u00e1 o link para deletar a widget. Ao deletar, ela ser\u00e1 removida da sua barra lateral e tamb\u00e9m ser\u00e1 deletada das configura\u00e7\u00f5es de widget como t\u00edtulo ou outras op\u00e7\u00f5es que voc\u00ea tenha selecionado.<\/p>\n<p>Algumas widgets s\u00e3o bem simples e n\u00e3o possuem tantas op\u00e7\u00f5es em suas configura\u00e7\u00f5es. H\u00e1 outras que s\u00e3o o oposto: muitas op\u00e7\u00f5es e configura\u00e7\u00f5es. Se voc\u00ea desejar remover a widget sem perder as configura\u00e7\u00f5es, ent\u00e3o voc\u00ea precisa arrastar e soltar a widget para a se\u00e7\u00e3o de <strong>widgets desativadas<\/strong>. Veja abaixo:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-15944 size-full\" title=\"Widgets no WordPress - Remover widget para widget inativas\" src=\"https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2016\/06\/Widgets-no-WordPress-Remover-widget-para-widget-inativas.gif\" alt=\"Widgets no WordPress - Remover widget para widget inativas\" width=\"520\" height=\"293\" \/><\/p>\n<p>Deletar ou colocar a widget na \u00e1rea desativada n\u00e3o remove da lista de widgets dispon\u00edveis. Voc\u00ea sempre poder\u00e1 adicionar a widget novamente da lista dispon\u00edvel ou da se\u00e7\u00e3o inativa.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Quais_sao_os_tipos_de_widgets_que_estao_disponiveis_no_WordPress\"><\/span>Quais s\u00e3o os tipos de widgets que est\u00e3o dispon\u00edveis no WordPress?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>A instala\u00e7\u00e3o <strong>padr\u00e3o do WordPress<\/strong> vem com algumas<strong> widgets incorporadas<\/strong> como: posts recentes, coment\u00e1rios recentes, arquivos, busca, etc. Muitos dos temas e plugins do WordPress vem com suas pr\u00f3prias widgets.<\/p>\n<p>Incont\u00e1veis temas e plugins adicionam widgets para que seus usu\u00e1rios possam adicionar fun\u00e7\u00f5es em seu site WordPress sem precisar escrever c\u00f3digo ou HTML. Existem centenas de plugins que adicionam widgets para voc\u00ea utilizar na barra lateral de seu site. Veja uma <a href=\"http:\/\/www.wpbeginner.com\/showcase\/25-most-useful-wordpress-widgets-for-your-site\/\" target=\"_blank\" rel=\"noopener\">lista de 25 widgets mais usadas para seu site<\/a>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"O_que_mais_e_possivel_fazer_com_as_widgets_do_WordPress\"><\/span>O que mais \u00e9 poss\u00edvel fazer com as widgets do WordPress?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Widgets s\u00e3o ferramentas incr\u00edveis e flex\u00edveis no WordPress. Desenvolvedores que trabalham com WordPress tem usado widgets de formas inovadoras. Se voc\u00ea tem um site em WordPresss, voc\u00ea pode tirar proveito disto e adicionar tudo que for imagin\u00e1vel em seu site.<\/p>\n<p>Falando nisso, voc\u00ea pode conferir alguns destes artigos para aprimorar seu site WordPress:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.yogh.com.br\/blog\/plugins-wordpress-10-plugins-para-iniciantes-wordpress\/\" target=\"_blank\" rel=\"noopener\">10 plugins para iniciantes WordPress<\/a>;<\/li>\n<li><a href=\"https:\/\/www.yogh.com.br\/blog\/como-escolher-o-tema-certo-para-seu-site-wordpress\/\" target=\"_blank\" rel=\"noopener\">Como escolher o tema certo para seu site WordPress<\/a>;<\/li>\n<li><a href=\"https:\/\/www.yogh.com.br\/blog\/ferramentas-para-medir-a-performance-de-seu-site-wordpress\/\" target=\"_blank\" rel=\"noopener\">Ferramentas para medir a performance de seu site WordPress<\/a>;<\/li>\n<li><a href=\"https:\/\/www.yogh.com.br\/blog\/guia-wordpress-10-links-uteis-para-criar-e-desenvolver-com-wordpress\/\" target=\"_blank\" rel=\"noopener\">10 links \u00fateis para criar e desenvolver com WordPress<\/a>.<\/li>\n<\/ul>\n<p>Esperamos que este artigo tenha ajudado voc\u00ea a aprender como adicionar e usar widgets em seu site WordPress!<\/p>\n<p><strong>Texto traduzido e modificado:\u00a0<\/strong><a href=\"http:\/\/www.wpbeginner.com\/beginners-guide\/how-to-add-and-use-widgets-in-wordpress\/\" target=\"_blank\" rel=\"noopener\">How to add and use widgets in WordPress<\/a>\t\t<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.yogh.com.br\/blog\/como-adicionar-e-usar-widgets-wordpress\/#O_que_sao_widgets_Por_que_e_necessario_usar_widgets_no_WordPress\" >O que s\u00e3o widgets? Por que \u00e9 necess\u00e1rio usar widgets no WordPress?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.yogh.com.br\/blog\/como-adicionar-e-usar-widgets-wordpress\/#Como_adicionar_uma_widget_na_barra_lateral_do_WordPress\" >Como adicionar uma widget na barra lateral do WordPress<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.yogh.com.br\/blog\/como-adicionar-e-usar-widgets-wordpress\/#1_Adicionar_widget_com_drag_and_drop\" >1.\u00a0Adicionar widget com drag and drop<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.yogh.com.br\/blog\/como-adicionar-e-usar-widgets-wordpress\/#2_Adicionar_widget_por_lista\" >2.\u00a0Adicionar widget por lista<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.yogh.com.br\/blog\/como-adicionar-e-usar-widgets-wordpress\/#3_Adicionar_widget_pelo_modo_de_acessibilidade\" >3. Adicionar widget pelo modo de acessibilidade<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.yogh.com.br\/blog\/como-adicionar-e-usar-widgets-wordpress\/#4_Adicionar_widget_pela_live_preview\" >4. Adicionar widget pela live preview<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.yogh.com.br\/blog\/como-adicionar-e-usar-widgets-wordpress\/#Como_remover_uma_widget_do_WordPress\" >Como remover uma widget do WordPress<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.yogh.com.br\/blog\/como-adicionar-e-usar-widgets-wordpress\/#Quais_sao_os_tipos_de_widgets_que_estao_disponiveis_no_WordPress\" >Quais s\u00e3o os tipos de widgets que est\u00e3o dispon\u00edveis no WordPress?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.yogh.com.br\/blog\/como-adicionar-e-usar-widgets-wordpress\/#O_que_mais_e_possivel_fazer_com_as_widgets_do_WordPress\" >O que mais \u00e9 poss\u00edvel fazer com as widgets do WordPress?<\/a><\/li><\/ul><\/nav><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\t\t\t\tVoc\u00ea com certeza j\u00e1 deve ter ouvido falar de widgets, certo? Hoje nosso blog traz um artigo sobre como adicionar e utilizar da melhor maneira as widgets de seu site WordPress. \t\t<\/p>\n","protected":false},"author":2,"featured_media":16207,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"kk_blocks_editor_width":"","_kiokenblocks_attr":"","_kiokenblocks_dimensions":"","footnotes":""},"categories":[44],"tags":[],"class_list":["post-15933","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutoriais"],"acf":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/posts\/15933","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/comments?post=15933"}],"version-history":[{"count":1,"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/posts\/15933\/revisions"}],"predecessor-version":[{"id":38950,"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/posts\/15933\/revisions\/38950"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/media\/16207"}],"wp:attachment":[{"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/media?parent=15933"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/categories?post=15933"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/tags?post=15933"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}