{"id":6171,"date":"2017-08-07T16:00:04","date_gmt":"2017-08-07T19:00:04","guid":{"rendered":"https:\/\/blog.hostinger.io\/br-tutoriais\/?p=6171"},"modified":"2025-04-09T04:35:24","modified_gmt":"2025-04-09T07:35:24","slug":"como-criar-widget-wordpress","status":"publish","type":"post","link":"\/br\/tutoriais\/como-criar-widget-wordpress","title":{"rendered":"Como criar um widget personalizado no WordPress"},"content":{"rendered":"<p><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><span style=\"font-weight: 400\">Neste <\/span><a href=\"https:\/\/www.hostinger.com\/br\/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\/53\/2022\/12\/WordPress-Cheat-Sheet-BR.png\/public\" alt=\"\" class=\"wp-image-30402\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/WordPress-Cheat-Sheet-BR.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/WordPress-Cheat-Sheet-BR.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/WordPress-Cheat-Sheet-BR.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/WordPress-Cheat-Sheet-BR.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/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><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><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><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><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><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><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:\/\/www.hostinger.com\/br\/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=\"https:\/\/www.hostinger.com\/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><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><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>\n\n\n<div><p class=\"important\"><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><\/p><\/div>\n\n\n\n<\/p><p><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><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><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><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><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><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><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><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><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><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><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><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><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><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:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/08\/como-php-widget-hostinger.png\/public\" alt=\"php widget hostinger\" class=\"wp-image-6186\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/08\/como-php-widget-hostinger.png\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/08\/como-php-widget-hostinger.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/08\/como-php-widget-hostinger.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/08\/como-php-widget-hostinger.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><p><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:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/08\/wordpress-criar-widget-customizado-hostinger.png\/public\" alt=\"criar widget customizado hostinger\" class=\"wp-image-6187\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/08\/wordpress-criar-widget-customizado-hostinger.png\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/08\/wordpress-criar-widget-customizado-hostinger.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/08\/wordpress-criar-widget-customizado-hostinger.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/08\/wordpress-criar-widget-customizado-hostinger.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><p><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><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:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/08\/wordpress-fronted-do-widget.png\/public\" alt=\"frontend-do-wordpress\" class=\"wp-image-6188\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/08\/wordpress-fronted-do-widget.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/08\/wordpress-fronted-do-widget.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/08\/wordpress-fronted-do-widget.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/08\/wordpress-fronted-do-widget.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/08\/wordpress-fronted-do-widget.png\/w=990,fit=scale-down 990w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/br\/hospedagem-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/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\/53\/2024\/06\/BR-New-WP_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/06\/BR-New-WP_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/06\/BR-New-WP_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/06\/BR-New-WP_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-conclusao\"><b>Conclus&atilde;o<\/b><\/h2><p><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><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=\"\/br\/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":0},{"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-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/how-to-create-custom-widget-in-wordpress","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/how-to-create-custom-widget-in-wordpress","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-create-custom-widget-in-wordpress","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":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/crear-widgets-wordpress-personalizados","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/como-criar-widget-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}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/6171","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/users\/74"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/comments?post=6171"}],"version-history":[{"count":24,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/6171\/revisions"}],"predecessor-version":[{"id":39475,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/6171\/revisions\/39475"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media?parent=6171"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/categories?post=6171"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/tags?post=6171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}