{"id":6171,"date":"2017-08-07T16:00:04","date_gmt":"2017-08-07T19:00:04","guid":{"rendered":"https:\/\/blog.hostinger.io\/pt-tutoriais\/?p=6171"},"modified":"2026-03-10T13:02:04","modified_gmt":"2026-03-10T16:02:04","slug":"como-criar-widget-wordpress","status":"publish","type":"post","link":"\/pt\/tutoriais\/como-criar-widget-wordpress","title":{"rendered":"Como criar um widget personalizado no WordPress"},"content":{"rendered":"<p class=\"wp-block-paragraph\"><span style=\"font-weight: 400\">Voc&ecirc; sabia que voc&ecirc; pode criar seu pr&oacute;prio widget personalizado no WordPress?&nbsp;Embora existam toneladas de widgets adicionais que acompanham alguns temas e plugins, o WordPress tamb&eacute;m oferece a op&ccedil;&atilde;o de codificar manualmente, widgets personalizados para todos os usu&aacute;rios.&nbsp;<\/span><\/p><p class=\"wp-block-paragraph\"><span style=\"font-weight: 400\">Neste <\/span><a href=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/tutorial-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400\">tutorial do WordPress<\/span><\/a><span style=\"font-weight: 400\">, voc&ecirc; aprender&aacute; como implementar um widget no WordPress.&nbsp;Caso isso pare&ccedil;a dif&iacute;cil, vamos tranquiliz&aacute;-lo &ndash; os &uacute;nicos ingredientes que voc&ecirc; precisar&aacute; s&atilde;o: conhecimento b&aacute;sico do WordPress e do PHP.&nbsp;Ent&atilde;o, vamos come&ccedil;ar.<\/span><\/p><figure class=\"wp-block-image size-large\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/WordPress-Security-Checklist(pt-br).pdf\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" width=\"1024\" height=\"283\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2022\/12\/WordPress-Cheat-Sheet-BR.png\/w=1024,h=1024,fit=scale-down\" alt=\"\" class=\"wp-image-30402\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2022\/12\/WordPress-Cheat-Sheet-BR.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2022\/12\/WordPress-Cheat-Sheet-BR.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2022\/12\/WordPress-Cheat-Sheet-BR.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2022\/12\/WordPress-Cheat-Sheet-BR.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2022\/12\/WordPress-Cheat-Sheet-BR.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-o-que-voce-precisara\"><b>O Que Voc&ecirc; Precisar&aacute;<\/b><\/h2><p class=\"wp-block-paragraph\"><span style=\"font-weight: 400\">Antes de iniciar este tutorial, voc&ecirc; precisar&aacute; do seguinte:<\/span><\/p><ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400\">Acesso ao painel do administrador do WordPress<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400\">Qualquer editor de texto<\/span><\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-widget-no-wordpress-em-um-passo\"><b>Widget no WordPress em um Passo<\/b><\/h2><p class=\"wp-block-paragraph\"><span style=\"font-weight: 400\">Widgets no WordPress destinam-se a tornar mais f&aacute;cil para voc&ecirc; adicionar itens ao seu site atrav&eacute;s de uma forma de comando simples: arrastar e soltar.&nbsp;De forma pr&aacute;tica, o WordPress j&aacute; oferece v&aacute;rios widgets.&nbsp;Esses <\/span><i><span style=\"font-weight: 400\">widgets padr&atilde;o<\/span><\/i><span style=\"font-weight: 400\"> oferecem utilidades b&aacute;sicas e s&atilde;o compat&iacute;veis com cada tema do WordPress.&nbsp;Mas &agrave;s vezes, esses widgets simplesmente n&atilde;o facilitam.&nbsp;<\/span><\/p><p class=\"wp-block-paragraph\"><span style=\"font-weight: 400\">Nesses casos, sua melhor op&ccedil;&atilde;o &eacute; encontrar plugins que ofere&ccedil;am a funcionalidade que voc&ecirc; deseja.&nbsp;E, enquanto voc&ecirc; procura plugins para a maioria das tarefas t&iacute;picas, h&aacute; alguns cen&aacute;rios em que, mesmo os complementos adicionais, n&atilde;o atender&atilde;o aos seus requisitos.&nbsp;&Eacute; a&iacute; que os widgets personalizados s&atilde;o &uacute;teis.&nbsp;Os widgets personalizados devem ser criados a partir do zero.&nbsp;Isso proporciona aos usu&aacute;rios um controle completo.<\/span><\/p><h2 class=\"wp-block-heading\" id=\"h-preparando-o-palco\"><b>Preparando o Palco <\/b><\/h2><p class=\"wp-block-paragraph\"><span style=\"font-weight: 400\">Para come&ccedil;ar com uma cria&ccedil;&atilde;o de widget no WordPress, voc&ecirc; precisa decidir algumas coisas.&nbsp;Primeiro, voc&ecirc; pode escolher codificar o widget em um plugin personalizado.&nbsp;Isso permitir&aacute; que ele funcione com qualquer site usando esse plugin.&nbsp;<\/span><\/p><p class=\"wp-block-paragraph\"><span style=\"font-weight: 400\">Ou, voc&ecirc; pode simplesmente adicionar o widget ao&nbsp;arquivo&nbsp;<\/span><b>functions.php<\/b><span style=\"font-weight: 400\">&nbsp;de um tema espec&iacute;fico, o que o far&aacute; funcionar com apenas esse tema.&nbsp;<\/span><\/p><p class=\"wp-block-paragraph\"><span style=\"font-weight: 400\">Em segundo lugar, voc&ecirc; tem a op&ccedil;&atilde;o de adicionar o widget em um site ao vivo ou em um ambiente local.&nbsp;De acordo com as pr&aacute;ticas de desenvolvimento, recomendamos que voc&ecirc; primeiro implemente o widget em um ambiente local (<a href=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/como-instalar-wordpress-no-docker-windows-macos-e-linux\/\" target=\"_blank\" rel=\"noopener noreferrer\">veja o tutorial sobre <\/a>como&nbsp;executar o WordPress no ambiente Docker).&nbsp;Uma vez que voc&ecirc; tenha certeza de que est&aacute; funcionando bem, voc&ecirc; <a href=\"\/tutorials\/wordpress\/how-to-migrate-wordpress-from-localhost-to-server\/\" target=\"_blank\" rel=\"noopener noreferrer\">pode facilmente&nbsp;enviar para o seu site.<\/a><\/span><\/p><h2 class=\"wp-block-heading\" id=\"h-como-funcionam-os-widgets-personalizados-do-wordpress-widgets-api\"><b>Como Funcionam os Widgets Personalizados do WordPress: Widgets API<\/b><\/h2><p class=\"wp-block-paragraph\"><span style=\"font-weight: 400\">O WordPress permite a utiliza&ccedil;&atilde;o do seu c&oacute;digo de widgets personalizados atrav&eacute;s da&nbsp;<\/span><a href=\"https:\/\/codex.wordpress.org\/Widgets_API\" target=\"_blank\" rel=\"noopener nofollow noreferrer\"><span style=\"font-weight: 400\">API Widgets<\/span><\/a><span style=\"font-weight: 400\">.&nbsp;Para criar qualquer widget personalizado, voc&ecirc; deve usar a&nbsp;classe&nbsp;<\/span><a href=\"https:\/\/developer.wordpress.org\/reference\/classes\/wp_widget\/\" target=\"_blank\" rel=\"noopener nofollow noreferrer\"><span style=\"font-weight: 400\">WP_Widget<\/span><\/a><span style=\"font-weight: 400\">&nbsp;padr&atilde;o&nbsp;da API.&nbsp;Esta classe base oferece cerca de 20 fun&ccedil;&otilde;es com as quais voc&ecirc; pode criar.&nbsp;Fora disso, s&atilde;o quatro as fun&ccedil;&otilde;es de requisito m&iacute;nimo para qualquer widget funcionar.&nbsp;Estas quatro fun&ccedil;&otilde;es s&atilde;o:<\/span><\/p><ul class=\"wp-block-list\">\n<li><b>__construct ()<\/b><span style=\"font-weight: 400\">&nbsp;&ndash; fun&ccedil;&atilde;o do construtor<\/span><\/li>\n\n\n\n<li><b>Widget ()<\/b><span style=\"font-weight: 400\">&nbsp;o conte&uacute;do cont&eacute;m o widget<\/span><\/li>\n\n\n\n<li><b>Form ()<\/b><span style=\"font-weight: 400\">&nbsp;&ndash; determina as configura&ccedil;&otilde;es do widget no painel do WordPress<\/span><\/li>\n\n\n\n<li><b>Update ()<\/b><span style=\"font-weight: 400\">&nbsp;&ndash; atualiza&ccedil;&otilde;es de atualiza&ccedil;&otilde;es<\/span><\/li>\n<\/ul><p class=\"wp-block-paragraph\"><span style=\"font-weight: 400\">Claro, existem muitos outros m&eacute;todos que oferecem funcionalidades adicionais.&nbsp;Para mais informa&ccedil;&otilde;es sobre a&nbsp;classe&nbsp;<\/span><a href=\"https:\/\/developer.wordpress.org\/reference\/classes\/wp_widget\/\" target=\"_blank\" rel=\"noopener noffolow noreferrer\"><b>WP_Widget<\/b><\/a><span style=\"font-weight: 400\">&nbsp;, d&ecirc; uma olhada&nbsp;<\/span><span style=\"font-weight: 400\">nesta p&aacute;gina<\/span><span style=\"font-weight: 400\">.<\/span><\/p><h2 class=\"wp-block-heading\" id=\"h-criando-o-widget-personalizado-no-wordpress\"><b>Criando o Widget Personalizado no WordPress<\/b><\/h2><p><div class=\"announcement-block announcement-block--important\">\n            <span class=\"announcement-block__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                          d=\"M12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12C1.5 17.799 6.20101 22.5 12 22.5ZM13.637 7.65198C13.637 6.74791 12.9041 6.01501 12 6.01501C11.0959 6.01501 10.363 6.74791 10.363 7.65198C10.5335 9.53749 10.875 13.383 10.875 13.383C10.875 14.0043 11.3787 14.508 12 14.508C12.6213 14.508 13.125 14.0043 13.125 13.383V13.38L13.637 7.65198ZM11.9927 15.714C11.3714 15.714 10.8677 16.2177 10.8677 16.839C10.8677 17.4603 11.3714 17.964 11.9927 17.964H12.0073C12.6286 17.964 13.1323 17.4603 13.1323 16.839C13.1323 16.2177 12.6286 15.714 12.0073 15.714H11.9927Z\"\n                          fill=\"#FEA419\"\/>\n                <\/svg>\n                Important\n            <\/span>\n            <p class=\"announcement-block__content\">\n                <span style=\"font-weight: 400\">IMPORTANTE: &Eacute; altamente recomend&aacute;vel criar um backup completo de seu site do WordPress (clique no tutorial) antes de prosseguir. Al&eacute;m disso, voc&ecirc; tamb&eacute;m deve usar o tema b&aacute;sico do WordPress.<\/span>\n            <\/p><\/div>\n\n\n\n<\/p><p class=\"wp-block-paragraph\"><span style=\"font-weight: 400\">Agora que apresentamos a base conceitual para a nossa tarefa, vamos come&ccedil;ar a trabalhar em sua implementa&ccedil;&atilde;o.&nbsp;Para este tutorial, vamos criar um&nbsp;widget simples personalizado&nbsp;para o<\/span><b> HelloWorld<\/b><span style=\"font-weight: 400\">, apenas para que voc&ecirc; possa aprender as trilhas de cria&ccedil;&atilde;o de widgets no WordPress.&nbsp;Claro, voc&ecirc; pode passar a criar widgets mais complexos por conta pr&oacute;pria.<\/span><\/p><p class=\"wp-block-paragraph\"><span style=\"font-weight: 400\">Mais uma coisa: estamos escrevendo esse c&oacute;digo no&nbsp;arquivo&nbsp;<\/span><b>functions.php<\/b><span style=\"font-weight: 400\">&nbsp;do tema atualmente carregado, mas voc&ecirc; pode fazer em qualquer plugin personalizado.<\/span><\/p><p class=\"wp-block-paragraph\"><span style=\"font-weight: 400\">Agora abra qualquer editor de texto em seu computador e crie uma nova classe que estenda a&nbsp;classe&nbsp;base&nbsp;<\/span><b>WP_Widget<\/b><span style=\"font-weight: 400\">, assim:<\/span><\/p><pre class=\"wp-block-preformatted\">class hstngr_widget extends WP_Widget {\n\n\/\/Insert functions here\n\n}<\/pre><p class=\"wp-block-paragraph\"><span style=\"font-weight: 400\">Agora, vamos implementar as quatro fun&ccedil;&otilde;es mencionadas, uma a uma. O primeiro item da lista &eacute; o m&eacute;todo de constru&ccedil;&atilde;o, que n&oacute;s usamos pra determinar um ID, ent&atilde;o o nome do widget aparece no UI e a descri&ccedil;&atilde;o:<\/span><\/p><pre class=\"wp-block-preformatted\">function __construct() {\nparent::__construct(\n\/\/ widget ID\n'hstngr_widget',\n\/\/ widget name\n__('Hostinger Sample Widget', ' hstngr_widget_domain'),\n\/\/ widget description\narray( 'description' =&gt; __( 'Hostinger Widget Tutorial', 'hstngr_widget_domain' ), )\n);\n}<\/pre><p class=\"wp-block-paragraph\"><span style=\"font-weight: 400\">Em seguida, vamos configurar a forma do widget i.e. ou seja, como ser&aacute; a apar&ecirc;ncia do widget. Isso ser&aacute; feito atrav&eacute;s da fun&ccedil;&atilde;o <\/span><b>widget<\/b><span style=\"font-weight: 400\"> ():<\/span><\/p><pre class=\"wp-block-preformatted\">public function widget( $args, $instance ) {\n$title = apply_filters( 'widget_title', $instance['title'] );\necho $args['before_widget'];\n\/\/if title is present\nif ( ! empty( $title ) )\necho $args['before_title'] . $title . $args['after_title'];\n\/\/output\necho __( 'Hello, World from Hostinger.com', 'hstngr_widget_domain' );\necho $args['after_widget'];\n}<\/pre><p class=\"wp-block-paragraph\"><span style=\"font-weight: 400\">Aqui configuramos a sa&iacute;da do nosso widget para que ele exiba o termo &lsquo;Ol&aacute; Mundo!&rsquo;, E exiba o t&iacute;tulo do widget conforme especificado pelo usu&aacute;rio.<\/span><\/p><p class=\"wp-block-paragraph\"><span style=\"font-weight: 400\">Agora, temos que programar o back-end do widget usando o m&eacute;todo do&nbsp;<\/span><b>formul&aacute;rio ()<\/b><span style=\"font-weight: 400\">:<\/span><\/p><pre class=\"wp-block-preformatted\">public function form( $instance ) {\nif ( isset( $instance[ 'title' ] ) )\n$title = $instance[ 'title' ];\nelse\n$title = __( 'Default Title', 'hstngr_widget_domain' );\n?&gt;\n&lt;p&gt;\n&lt;label for=\"&lt;?php echo $this-&gt;get_field_id( 'title' ); ?&gt;\"&gt;&lt;?php _e( 'Title:' ); ?&gt;&lt;\/label&gt;\n&lt;input class=\"widefat\" id=\"&lt;?php echo $this-&gt;get_field_id( 'title' ); ?&gt;\" name=\"&lt;?php echo $this-&gt;get_field_name( 'title' ); ?&gt;\" type=\"text\" value=\"&lt;?php echo esc_attr( $title ); ?&gt;\" \/&gt;\n&lt;\/p&gt;\n&lt;?php\n}<\/pre><p class=\"wp-block-paragraph\"><span style=\"font-weight: 400\">Aqui voc&ecirc; pode ver como o widget personalizado foi configurado.&nbsp;Se o usu&aacute;rio fornece um t&iacute;tulo, esse t&iacute;tulo ser&aacute; inserido no formul&aacute;rio HTML que criamos.&nbsp;Caso contr&aacute;rio, definiremos o nome do t&iacute;tulo como&nbsp;<\/span><b>T&iacute;tulo Padr&atilde;o<\/b><span style=\"font-weight: 400\">.&nbsp;&Eacute; assim que o widget aparecer&aacute; na &aacute;rea de administra&ccedil;&atilde;o do WordPress.<\/span><\/p><p class=\"wp-block-paragraph\"><span style=\"font-weight: 400\">Por &uacute;ltimo, mas n&atilde;o menos importante, temos que implementar a fun&ccedil;&atilde;o de atualiza&ccedil;&atilde;o para atualizar o widget, sempre que as configura&ccedil;&otilde;es forem alteradas.<\/span><\/p><pre class=\"wp-block-preformatted\">public function update( $new_instance, $old_instance ) {\n$instance = array();\n$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';\nreturn $instance;\n}<\/pre><p class=\"wp-block-paragraph\"><span style=\"font-weight: 400\">Com tudo isso feito, utiliza-se o t&iacute;tulo atualizado, rec&eacute;m-criado, e todas as tags HTML\/PHP, passando para o t&iacute;tulo padr&atilde;o e retornando.<\/span><\/p><p class=\"wp-block-paragraph\"><span style=\"font-weight: 400\">H&aacute; mais uma coisa a fazer: voc&ecirc; precisa usar uma fun&ccedil;&atilde;o adicional para registrar o widget no WordPress:<\/span><\/p><pre class=\"wp-block-preformatted\">function hstngr_register_widget() {\nregister_widget( 'hstngr_widget' );\n}\nadd_action( 'widgets_init', 'hstngr_register_widget' );<\/pre><p class=\"wp-block-paragraph\"><span style=\"font-weight: 400\">Observe que as linhas acima devem ser colocadas fora da&nbsp;fun&ccedil;&atilde;o&nbsp;<\/span><b>hstngr_widget<\/b><span style=\"font-weight: 400\">.<\/span><\/p><p class=\"wp-block-paragraph\"><span style=\"font-weight: 400\">Definimos uma nova fun&ccedil;&atilde;o chamada&nbsp;<\/span><b>hstngr_register_widget ()<\/b><span style=\"font-weight: 400\">, que registra o widget utilizando a ID widget, especificada na&nbsp;<\/span><b>fun&ccedil;&atilde;o__construct ()<\/b><span style=\"font-weight: 400\">.&nbsp;Ent&atilde;o, n&oacute;s&nbsp;designamos&nbsp;esta fun&ccedil;&atilde;o usando&nbsp;<\/span><b>widgets_init<\/b><span style=\"font-weight: 400\">, que carrega esse widget no WordPress atrav&eacute;s do&nbsp;m&eacute;todo&nbsp;incorporado&nbsp;<\/span><b>add_action ()<\/b><span style=\"font-weight: 400\">.&nbsp;O seu c&oacute;digo de usu&aacute;rio final WordPress personalizado deve ser assim:<\/span><\/p><pre class=\"wp-block-preformatted\">function hstngr_register_widget() {\nregister_widget( 'hstngr_widget' );\n}\n\nadd_action( 'widgets_init', 'hstngr_register_widget' );\n\nclass hstngr_widget extends WP_Widget {\n\nfunction __construct() {\nparent::__construct(\n\/\/ widget ID\n'hstngr_widget',\n\/\/ widget name\n__('Hostinger Sample Widget', ' hstngr_widget_domain'),\n\/\/ widget description\narray( 'description' =&gt; __( 'Hostinger Widget Tutorial', 'hstngr_widget_domain' ), )\n);\n}\npublic function widget( $args, $instance ) {\n$title = apply_filters( 'widget_title', $instance['title'] );\necho $args['before_widget'];\n\/\/if title is present\nif ( ! empty( $title ) )\necho $args['before_title'] . $title . $args['after_title'];\n\/\/output\necho __( 'Hello, World from Hostinger.com', 'hstngr_widget_domain' );\necho $args['after_widget'];\n}\npublic function form( $instance ) {\nif ( isset( $instance[ 'title' ] ) )\n$title = $instance[ 'title' ];\nelse\n$title = __( 'Default Title', 'hstngr_widget_domain' );\n?&gt;\n&lt;p&gt;\n&lt;label for=\"&lt;?php echo $this-&gt;get_field_id( 'title' ); ?&gt;\"&gt;&lt;?php _e( 'Title:' ); ?&gt;&lt;\/label&gt;\n&lt;input class=\"widefat\" id=\"&lt;?php echo $this-&gt;get_field_id( 'title' ); ?&gt;\" name=\"&lt;?php echo $this-&gt;get_field_name( 'title' ); ?&gt;\" type=\"text\" value=\"&lt;?php echo esc_attr( $title ); ?&gt;\" \/&gt;\n&lt;\/p&gt;\n&lt;?php\n}\npublic function update( $new_instance, $old_instance ) {\n$instance = array();\n$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';\nreturn $instance;\n}\n\n}<\/pre><p class=\"wp-block-paragraph\"><span style=\"font-weight: 400\">Voc&ecirc; ainda pode usar o Gerenciador de Arquivos, o FTP Client ou o editor do WordPress, para adicionar este c&oacute;digo ao seu arquivo <\/span><b>.php<\/b><span style=\"font-weight: 400\">. e pressione o bot&atilde;o <\/span><b>Update File<\/b><span style=\"font-weight: 400\"> para salvar as mudan&ccedil;as.<\/span><\/p><figure class=\"wp-block-image\"><img decoding=\"async\" width=\"900\" height=\"253\" src=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2017\/08\/como-php-widget-hostinger.png\" alt=\"php widget hostinger\" class=\"wp-image-6186\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2017\/08\/como-php-widget-hostinger.png 900w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2017\/08\/como-php-widget-hostinger-150x42.png 150w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2017\/08\/como-php-widget-hostinger-300x84.png 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2017\/08\/como-php-widget-hostinger-768x216.png 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><p class=\"wp-block-paragraph\"><span style=\"font-weight: 400\">Agora, simplesmente v&aacute; ao seu WordPress <\/span><b>admin area<\/b><span style=\"font-weight: 400\">, and e navegue sobre a se&ccedil;&atilde;o&nbsp;<\/span><b>Appearance<\/b><span style=\"font-weight: 400\">&nbsp;<\/span><b>-&gt;Widgets<\/b><span style=\"font-weight: 400\">. Voc&ecirc; deve ver se o widget, denominado <\/span><b>Hostinger Sample Widget,<\/b><span style=\"font-weight: 400\">&nbsp;est&aacute; na lista de widgets atualizados.<\/span><\/p><figure class=\"wp-block-image\"><img decoding=\"async\" width=\"900\" height=\"238\" src=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2017\/08\/wordpress-criar-widget-customizado-hostinger.png\" alt=\"criar widget customizado hostinger\" class=\"wp-image-6187\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2017\/08\/wordpress-criar-widget-customizado-hostinger.png 900w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2017\/08\/wordpress-criar-widget-customizado-hostinger-150x40.png 150w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2017\/08\/wordpress-criar-widget-customizado-hostinger-300x79.png 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2017\/08\/wordpress-criar-widget-customizado-hostinger-768x203.png 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><p class=\"wp-block-paragraph\"><span style=\"font-weight: 400\">Daqui em diante, arraste o widget e coloque o widget na <\/span><b>Sidebar<\/b><span style=\"font-weight: 400\">&nbsp;no menu, ao lado direito da p&aacute;gina. Voc&ecirc; ser&aacute; capaz daqui pra frente de dar um t&iacute;tulo ao seu widget. Salve-o e ent&atilde;o visite o seu site. Voc&ecirc; ser&aacute; direcionado ao widget padr&atilde;o com um t&iacute;tulo a sua escolha, e preencher&aacute; com as palavras &lsquo;Hello World!&rsquo;.<\/span><\/p><p class=\"wp-block-paragraph\"><span style=\"font-weight: 400\">Parab&eacute;ns, voc&ecirc; criou com sucesso seu primeiro widget customizado no WordPress. Agora voc&ecirc; pode ver uma pr&eacute;via de seu widget.<\/span><\/p><figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"404\" src=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2017\/08\/wordpress-fronted-do-widget.png\" alt=\"frontend-do-wordpress\" class=\"wp-image-6188\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2017\/08\/wordpress-fronted-do-widget.png 1024w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2017\/08\/wordpress-fronted-do-widget-150x59.png 150w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2017\/08\/wordpress-fronted-do-widget-300x118.png 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2017\/08\/wordpress-fronted-do-widget-768x303.png 768w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2017\/08\/wordpress-fronted-do-widget-990x391.png 990w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><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:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2024\/06\/BR-New-WP_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-44638\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2024\/06\/BR-New-WP_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2024\/06\/BR-New-WP_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2024\/06\/BR-New-WP_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2024\/06\/BR-New-WP_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div><h2 class=\"wp-block-heading\" id=\"h-conclusao\"><b>Conclus&atilde;o<\/b><\/h2><p class=\"wp-block-paragraph\"><span style=\"font-weight: 400\">Ao criar um widget no WordPress personalizado a partir de um rascunho, pode a princ&iacute;pio ser como uma montanha a ser escalada. Na realidade, quase sempre, isso &eacute; algo extremamente acess&iacute;vel para todos que pretendem passar a um pr&oacute;ximo n&iacute;vel de cria&ccedil;&atilde;o em HTML e PHP. <\/span><\/p><p class=\"wp-block-paragraph\"><span style=\"font-weight: 400\">Nesse tutorial, n&oacute;s passamos a voc&ecirc; como criar widgets no WordPress com um n&uacute;mero m&iacute;nimo de passos. Daqui pra frente, voc&ecirc; pode criar mais widget no WordPress funcionais. Se voc&ecirc; achou que esse tutorial lhe ajudou, verifique outros em nosso Guia do WordPress.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Voc&ecirc; sabia que voc&ecirc; pode criar seu pr&oacute;prio widget personalizado no WordPress?&nbsp;Embora existam toneladas de widgets adicionais que acompanham alguns temas e plugins, o WordPress tamb&eacute;m oferece a op&ccedil;&atilde;o de codificar manualmente, widgets personalizados para todos os usu&aacute;rios.&nbsp; Neste tutorial do WordPress, voc&ecirc; aprender&aacute; como implementar um widget no WordPress.&nbsp;Caso isso pare&ccedil;a dif&iacute;cil, vamos tranquiliz&aacute;-lo [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/pt\/tutoriais\/como-criar-widget-wordpress\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":74,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"","rank_math_description":"Neste tutorial, voc\u00ea aprender\u00e1 como criar um widget no WordPress, de maneira personalizada, com passos r\u00e1pidos e simples.","rank_math_focus_keyword":"widget no Wordpress","footnotes":""},"categories":[4911],"tags":[4975,4969,4973,4972,4976,4918,4977,4971,4970,4798,4974],"class_list":["post-6171","post","type-post","status-publish","format-standard","hentry","category-wordpress","tag-como-adicionar-widgets-no-wordpress","tag-instalar-wordpress","tag-melhores-widgets-para-wordpress","tag-melhores-widgets-wordpress","tag-o-que-e-widgets-wordpress","tag-temas-wordpress","tag-widget-no-wordpress","tag-widgets-para-wordpress","tag-widgets-wordpress","tag-wordpress","tag-wordpress-widgets"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/how-to-create-custom-widget-in-wordpress\/","default":1},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/como-criar-widget-wordpress\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/creer-un-widget-wordpress\/","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/crear-widgets-wordpress-personalizados\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/create-wordpress-custom-widget\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/create-wordpress-custom-widget\/","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/how-to-create-custom-widget-in-wordpress\/","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/how-to-create-custom-widget-in-wordpress\/","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/how-to-create-custom-widget-in-wordpress\/","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/how-to-create-custom-widget-in-wordpress\/","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/how-to-create-custom-widget-in-wordpress\/","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/crear-widgets-wordpress-personalizados\/","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/crear-widgets-wordpress-personalizados\/","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/crear-widgets-wordpress-personalizados\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/como-criar-widget-wordpress\/","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/6171","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\/74"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/comments?post=6171"}],"version-history":[{"count":24,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/6171\/revisions"}],"predecessor-version":[{"id":39475,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/6171\/revisions\/39475"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/media?parent=6171"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/categories?post=6171"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/tags?post=6171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}