{"id":233850,"date":"2023-02-23T19:43:00","date_gmt":"2023-02-23T16:43:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233850"},"modified":"2022-11-11T12:47:44","modified_gmt":"2022-11-11T09:47:44","slug":"tutorial-crie-um-widget-de-microdados-para-sua-empresa-no-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/tutorial-crie-um-widget-de-microdados-para-sua-empresa-no-wordpress\/","title":{"rendered":"Tutorial: Crie um widget de microdados para sua empresa no WordPress"},"content":{"rendered":"\n<p>Neste tutorial, aprenderemos como criar um widget personalizado que gera as informa\u00e7\u00f5es da sua empresa, como nome oficial, endere\u00e7o, n\u00famero de telefone e e-mail. Mas daremos um passo adiante, exibindo-o com <a href=\"https:\/\/schema.org\/docs\/gs.html\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">microdados<\/a> ou marca\u00e7\u00e3o de esquema, o que permitir\u00e1 que os mecanismos de pesquisa entendam seu conte\u00fado.<\/p>\n<p>Widgets s\u00e3o blocos din\u00e2micos que podem ser colocados em \u00e1reas dispon\u00edveis em seu tema. Normalmente seu tema teria no m\u00ednimo uma barra lateral e uma ou mais \u00e1reas no rodap\u00e9. Ter as informa\u00e7\u00f5es do seu neg\u00f3cio como um widget no rodap\u00e9 \u00e9 comum e bastante inteligente \u2013 j\u00e1 que o rodap\u00e9 aparece em todas as p\u00e1ginas do seu site.<\/p>\n<p>Microdados s\u00e3o atributos HTML adicionais que explicam o que a tag HTML espec\u00edfica cont\u00e9m para que uma m\u00e1quina possa entender o que s\u00e3o (por exemplo, nome comercial, n\u00famero de telefone, endere\u00e7o comercial, endere\u00e7o de e-mail comercial etc.). Isso possibilita que mecanismos de pesquisa, como o Google, extraiam informa\u00e7\u00f5es sobre sua empresa de seu HTML.<\/p>\n<h2>O que vamos criar<\/h2>\n<p>Nosso widget produzir\u00e1 informa\u00e7\u00f5es usando o esquema de microdados <a href=\"https:\/\/schema.org\/LocalBusiness\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">LocalBusiness,<\/a> que \u00e9 perfeito para uma organiza\u00e7\u00e3o ou neg\u00f3cio. Cabe a voc\u00ea decidir quais propriedades voc\u00ea deseja produzir, basta clicar no link acima para ler todas as propriedades poss\u00edveis no LocalBusiness (incluindo herdadas). Sua empresa ou seu pa\u00eds podem preferir tipos diferentes de informa\u00e7\u00f5es.<\/p>\n<p>O widget deste tutorial produzir\u00e1 as seguintes informa\u00e7\u00f5es opcionais:<\/p>\n<ul>\n<li>Nome da empresa (propriedade de microdados: <code>legalName<\/code>)<\/li>\n<li>ID do IVA ou n\u00famero da organiza\u00e7\u00e3o (propriedade Microdata: <code>vatID<\/code>)<\/li>\n<li>Endere\u00e7o postal (tag Microdata: <code>PostalAddress<\/code>com propriedades para <code>streetAddress<\/code>, <code>postalCode<\/code>e <code>addressLocality<\/code>)<\/li>\n<li>Endere\u00e7o de e-mail da empresa (propriedade Microdata: <code>email<\/code>)<\/li>\n<li>N\u00famero de telefone (propriedade de microdados: <code>telephone<\/code>)<\/li>\n<\/ul>\n<p>Este tutorial n\u00e3o o guiar\u00e1 pelo estilo do widget, pois isso deve ser bastante simples. No frontend nosso widget se parecer\u00e1 com um widget de texto normal. Mas \u00e9 claro que, sob o cap\u00f4, ele possui marca\u00e7\u00e3o de esquema que ajuda o Google.<\/p>\n<h2>No\u00e7\u00f5es b\u00e1sicas de cria\u00e7\u00e3o de um widget personalizado<\/h2>\n<p>Voc\u00ea pode colocar seu c\u00f3digo no seu tema <code>functions.php<\/code>ou criar um plugin personalizado. Apenas lembre-se que se voc\u00ea mant\u00ea-lo em um plugin, voc\u00ea perder\u00e1 o widget ao desativ\u00e1-lo; e, da mesma forma, mant\u00ea-lo no tema far\u00e1 com que voc\u00ea perca o widget se alternar para outro tema. Neste exemplo, adicionarei o c\u00f3digo no arquivo <code>functions.php<\/code>.<\/p>\n<p>A cria\u00e7\u00e3o de um widget \u00e9 feita com c\u00f3digo PHP orientado a objetos. Voc\u00ea escreve uma classe PHP que estende a classe de widget do WordPress e a inicializa chamando <code>register_widget()<\/code>e fornecendo o nome da sua classe. Neste tutorial eu nomeei minha classe de widget <code>LocalBusiness<\/code>.<\/p>\n<p>Vamos come\u00e7ar chamando <code>register_widget()<\/code>dentro de uma fun\u00e7\u00e3o ligada \u00e0 a\u00e7\u00e3o <code>widgets_init<\/code>.<\/p>\n<pre><code>add_action('widgets_init', function() {\n    register_widget('LocalBusiness');\n});<\/code><\/pre>\n<p>Vamos examinar rapidamente o esqueleto de uma classe de widget personalizada:<\/p>\n<pre><code>class LocalBusiness extends WP_Widget {\n\u00a0\n    \/\/ Initialize your widget in the class constructor\n    public function __construct() { }\n\u00a0\n    \/\/ Responsible for outputting the widget in frontend\n    public function widget($args, $instance) { }\n\u00a0\n    \/\/ Responsible for outputting the widget settings in admin\n    public function form($instance) { }\n\u00a0\n    \/\/ Responsible for saving settings in admin\n    public function update($new_instance, $old_instance) { }\n}<\/code><\/pre>\n<p>Como voc\u00ea pode ver acima, voc\u00ea precisar\u00e1 de quatro fun\u00e7\u00f5es dentro de sua classe. Vamos passar por cada fun\u00e7\u00e3o uma por uma e preench\u00ea-las.<\/p>\n<h2>Criando um widget de microdados do LocalBusiness<\/h2>\n<p>O lugar mais l\u00f3gico para come\u00e7ar \u00e9 no construtor, que \u00e9 respons\u00e1vel por configurar seu widget.<\/p>\n<h3>A fun\u00e7\u00e3o __construct()<\/h3>\n<p>Dentro do construtor voc\u00ea precisa configurar algumas vari\u00e1veis, como o nome do widget, e chamar a fun\u00e7\u00e3o construtora do pai (a classe pai \u00e9 aquela que voc\u00ea estende; <code>WP_Widget<\/code>). Leia mais sobre <a href=\"https:\/\/developer.wordpress.org\/reference\/classes\/wp_widget\/__construct\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">as op\u00e7\u00f5es poss\u00edveis no construtor aqui<\/a>. Vou fornecer um ID base, um t\u00edtulo e uma descri\u00e7\u00e3o, assim:<\/p>\n<pre><code>\/\/ Initialize your widget in the class constructor\npublic function __construct() {\n    $widget_ops = [\n        'description' =&gt; __('Outputs business information with Microdata', 'txtdomain')\n    ];\n    parent::__construct('local_business', __('Local Business Information', 'txtdomain'), $widget_ops);\n}<\/code><\/pre>\n<p>Voc\u00ea pode fazer mais no <code>__construct<\/code>m\u00e9todo, como enfileirar scripts ou definir mais configura\u00e7\u00f5es de widget. Mas o acima geralmente \u00e9 suficiente na maioria dos casos.<\/p>\n<h3>A fun\u00e7\u00e3o form()<\/h3>\n<p>O pr\u00f3ximo passo \u00e9 construir todas as configura\u00e7\u00f5es e entradas que seu widget aceita no admin. Para as configura\u00e7\u00f5es de sa\u00edda para o administrador do Widget, usamos a fun\u00e7\u00e3o <code>form()<\/code>que fornece um par\u00e2metro; uma matriz que cont\u00e9m todas as suas op\u00e7\u00f5es de widget possivelmente salvas. \u00c9 importante que voc\u00ea emita a configura\u00e7\u00e3o salva correspondente em todas as suas entradas para que os dados sejam retidos. (Veremos como salvar as configura\u00e7\u00f5es na pr\u00f3xima etapa).<\/p>\n<p>H\u00e1 muito para acompanhar na fun\u00e7\u00e3o de formul\u00e1rio, ent\u00e3o vamos apenas adicionar uma entrada, para o nome legal, primeiro e ter certeza de que entendemos o que precisamos fazer:<\/p>\n<pre><code>\/\/ Responsible for outputting the widget settings in admin\npublic function form($instance) { \n    ?&gt;\n    &lt;p&gt;\n        &lt;label for=\"&lt;?php echo $this-&gt;get_field_id('legal_name'); ?&gt;\"&gt;&lt;?php _e('Legal name:', 'txtdomain'); ?&gt;&lt;\/label&gt;\n        &lt;input \n            type=\"text\" \n            class=\"widefat\" \n            id=\"&lt;?php echo esc_attr($this-&gt;get_field_id('legal_name')); ?&gt;\"\n            name=\"&lt;?php echo esc_attr($this-&gt;get_field_name('legal_name')); ?&gt;\"\n            value=\"&lt;?php echo esc_attr($instance['legal_name']); ?&gt;\"\n        \/&gt;\n    &lt;\/p&gt;\n    &lt;?php\n}<\/code><\/pre>\n<p>Em primeiro lugar, o c\u00f3digo acima gera alguns wrappers e classes HTML na forma em que o WordPress gera seus formul\u00e1rios de widget \u2013 fazemos isso para que o formul\u00e1rio pare\u00e7a bom.<\/p>\n<p>Existem duas fun\u00e7\u00f5es com as quais voc\u00ea precisa se familiarizar; <code>get_field_id()<\/code>e <code>get_field_name()<\/code>ambos s\u00e3o fun\u00e7\u00f5es dentro <code>WP_Widget<\/code>(e \u00e9 por isso que voc\u00ea chama &#8221; <code>$this-&gt;<\/code>&quot; na frente \u2013 enquanto <code>$this<\/code>se refere \u00e0 inst\u00e2ncia da classe). As fun\u00e7\u00f5es retornam o ID e o nome de um campo fornecido, respectivamente, para uso em suas entradas <code>id<\/code>e <code>name<\/code>atributos. \u00c9 muito importante para n\u00e3o esquecer de adicionar um <code>name<\/code>atributo em sua entrada, caso contr\u00e1rio, voc\u00ea nunca obter\u00e1 seu valor ao salvar.<\/p>\n<p>E finalmente n\u00f3s produzimos o valor salvo atual como <code>value<\/code>nossa entrada referenciando o argumento passado <code>$instance<\/code>. Sem fazer isso para o seu valor, a entrada nunca ser\u00e1 preenchida com o que est\u00e1 salvo no banco de dados e aparecer\u00e1 em branco todas as vezes, o que pode confundir os usu\u00e1rios.<\/p>\n<p>Se voc\u00ea quiser entradas de formul\u00e1rio diferentes, como caixas de sele\u00e7\u00e3o ou menus suspensos, poder\u00e1 adicion\u00e1-los facilmente seguindo as regras mencionadas acima. Vamos adicionar o restante de nossas configura\u00e7\u00f5es de widget. Eles s\u00e3o todos entradas de texto, ent\u00e3o \u00e9 o mesmo c\u00f3digo acima repetido, exceto seus IDs de campo. Nosso <code>form()<\/code>m\u00e9todo acaba ficando assim:<\/p>\n<pre><code>\/\/ Responsible for outputting the widget settings in admin\npublic function form($instance) { \n    ?&gt;\n    &lt;p&gt;\n        &lt;label for=\"&lt;?php echo $this-&gt;get_field_id('legal_name'); ?&gt;\"&gt;&lt;?php _e('Legal name:', 'txtdomain'); ?&gt;&lt;\/label&gt;\n        &lt;input type=\"text\" class=\"widefat\" id=\"&lt;?php echo esc_attr($this-&gt;get_field_id('legal_name')); ?&gt;\" name=\"&lt;?php echo esc_attr($this-&gt;get_field_name('legal_name')); ?&gt;\" value=\"&lt;?php echo esc_attr($instance['legal_name']); ?&gt;\" \/&gt;\n    &lt;\/p&gt;\n    &lt;p&gt;\n        &lt;label for=\"&lt;?php echo $this-&gt;get_field_id('vat_id'); ?&gt;\"&gt;&lt;?php _e('Vat ID\/Organization number:', 'txtdomain'); ?&gt;&lt;\/label&gt;\n        &lt;input type=\"text\" class=\"widefat\" id=\"&lt;?php echo esc_attr($this-&gt;get_field_id('vat_id')); ?&gt;\" name=\"&lt;?php echo esc_attr($this-&gt;get_field_name('vat_id')); ?&gt;\" value=\"&lt;?php echo esc_attr($instance['vat_id']); ?&gt;\" \/&gt;\n    &lt;\/p&gt;\n    &lt;p&gt;\n        &lt;label for=\"&lt;?php echo $this-&gt;get_field_id('street_address'); ?&gt;\"&gt;&lt;?php _e('Street address:', 'txtdomain'); ?&gt;&lt;\/label&gt;\n        &lt;input type=\"text\" class=\"widefat\" id=\"&lt;?php echo esc_attr($this-&gt;get_field_id('street_address')); ?&gt;\" name=\"&lt;?php echo esc_attr($this-&gt;get_field_name('street_address')); ?&gt;\" value=\"&lt;?php echo esc_attr($instance['street_address']); ?&gt;\" \/&gt;\n    &lt;\/p&gt;\n    &lt;p&gt;\n        &lt;label for=\"&lt;?php echo $this-&gt;get_field_id('postal_code'); ?&gt;\"&gt;&lt;?php _e('Postal code:', 'txtdomain'); ?&gt;&lt;\/label&gt;\n        &lt;input type=\"text\" class=\"widefat\" id=\"&lt;?php echo esc_attr($this-&gt;get_field_id('postal_code')); ?&gt;\" name=\"&lt;?php echo esc_attr($this-&gt;get_field_name('postal_code')); ?&gt;\" value=\"&lt;?php echo esc_attr($instance['postal_code']); ?&gt;\" \/&gt;\n    &lt;\/p&gt;\n    &lt;p&gt;\n        &lt;label for=\"&lt;?php echo $this-&gt;get_field_id('postal_city'); ?&gt;\"&gt;&lt;?php _e('City:', 'txtdomain'); ?&gt;&lt;\/label&gt;\n        &lt;input type=\"text\" class=\"widefat\" id=\"&lt;?php echo esc_attr($this-&gt;get_field_id('postal_city')); ?&gt;\" name=\"&lt;?php echo esc_attr($this-&gt;get_field_name('postal_city')); ?&gt;\" value=\"&lt;?php echo esc_attr($instance['postal_city']); ?&gt;\" \/&gt;\n    &lt;\/p&gt;\n    &lt;p&gt;\n        &lt;label for=\"&lt;?php echo $this-&gt;get_field_id('email_address'); ?&gt;\"&gt;&lt;?php _e('E-mail address:', 'txtdomain'); ?&gt;&lt;\/label&gt;\n        &lt;input type=\"text\" class=\"widefat\" id=\"&lt;?php echo esc_attr($this-&gt;get_field_id('email_address')); ?&gt;\" name=\"&lt;?php echo esc_attr($this-&gt;get_field_name('email_address')); ?&gt;\" value=\"&lt;?php echo esc_attr($instance['email_address']); ?&gt;\" \/&gt;\n    &lt;\/p&gt;\n    &lt;p&gt;\n        &lt;label for=\"&lt;?php echo $this-&gt;get_field_id('phone_number'); ?&gt;\"&gt;&lt;?php _e('Phone number:', 'txtdomain'); ?&gt;&lt;\/label&gt;\n        &lt;input type=\"text\" class=\"widefat\" id=\"&lt;?php echo esc_attr($this-&gt;get_field_id('phone_number')); ?&gt;\" name=\"&lt;?php echo esc_attr($this-&gt;get_field_name('phone_number')); ?&gt;\" value=\"&lt;?php echo esc_attr($instance['phone_number']); ?&gt;\" \/&gt;\n    &lt;\/p&gt;\n    &lt;?php\n}<\/code><\/pre>\n<p>Se voc\u00ea adicionar seu widget em uma \u00e1rea de widget dispon\u00edvel, ele dever\u00e1 ficar assim:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152019-61e4d2d64b664.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152019-61e4d2d64b664.png\" alt=\"Tutorial: Crie um widget de microdados para sua empresa no WordPress\" ><\/a><\/p>\n<h3>A fun\u00e7\u00e3o atualizar()<\/h3>\n<p>A <code>update()<\/code>fun\u00e7\u00e3o \u00e9 respons\u00e1vel por realmente salvar seus valores inseridos em admin. Infelizmente o WordPress n\u00e3o est\u00e1 fazendo isso automaticamente para voc\u00ea. S\u00e3o fornecidos nesta fun\u00e7\u00e3o dois par\u00e2metros; geralmente chamado <code>$new_instance<\/code>e <code>$old_instance<\/code>. Dentro do primeiro par\u00e2metro, <code>$new_instance<\/code>, voc\u00ea encontrar\u00e1 todos os valores que foram enviados e, no segundo, <code>$old_instance<\/code>, voc\u00ea encontrar\u00e1 os valores que est\u00e3o atualmente salvos no banco de dados. Isso permite que voc\u00ea fa\u00e7a algumas compara\u00e7\u00f5es inteligentes, se necess\u00e1rio.<\/p>\n<p>Normalmente, voc\u00ea simplesmente faria uma nova matriz de todas as configura\u00e7\u00f5es do seu widget e salvaria tudo o que est\u00e1 definido dentro do arquivo <code>$new_instance<\/code>. Tamb\u00e9m cuidamos de algumas higieniza\u00e7\u00e3o. Por fim, simplesmente retornamos este array, que informar\u00e1 ao WordPress o que salvar.<\/p>\n<pre><code>\/\/ Responsible for saving settings in admin\npublic function update($new_instance, $old_instance) {\n    $instance = [];\n    $instance['legal_name'] = (!empty($new_instance['legal_name']))? strip_tags($new_instance['legal_name']): '';\n    $instance['vat_id'] = (!empty($new_instance['vat_id']))? strip_tags($new_instance['vat_id']): '';\n    $instance['street_address'] = (!empty($new_instance['street_address']))? strip_tags($new_instance['street_address']): '';\n    $instance['postal_code'] = (!empty($new_instance['postal_code']))? strip_tags($new_instance['postal_code']): '';\n    $instance['postal_city'] = (!empty($new_instance['postal_city']))? strip_tags($new_instance['postal_city']): '';\n    $instance['email_address'] = (!empty($new_instance['email_address']))? strip_tags($new_instance['email_address']): '';\n    $instance['phone_number'] = (!empty($new_instance['phone_number']))? strip_tags($new_instance['phone_number']): '';\n    return $instance;\n}<\/code><\/pre>\n<p>Agora voc\u00ea pode testar seu widget, se quiser, e verificar se os valores inseridos est\u00e3o sendo salvos. E se voc\u00ea se lembrar de definir o <code>value<\/code>atributo corretamente em <code>form()<\/code>, ao salvar e clicar em atualizar, os valores devem ser mantidos. Excelente! Agora vamos para o \u00faltimo, e reconhecidamente mais divertido, passo \u2013 a sa\u00edda do bit de front-end.<\/p>\n<h3>A fun\u00e7\u00e3o widget()<\/h3>\n<p>A <code>widget()<\/code>fun\u00e7\u00e3o \u00e9 respons\u00e1vel pela sa\u00edda do seu widget no frontend. Obteremos dois argumentos para a fun\u00e7\u00e3o; em primeiro lugar, um array com algumas informa\u00e7\u00f5es \u00fateis, como os wrappers de \u00e1rea de widget definidos pelo tema e, em segundo lugar, seus valores de configura\u00e7\u00e3o de widget salvos.<\/p>\n<p>A sa\u00edda do seu widget deve sempre come\u00e7ar com echoing <code>$args['before_widget']<\/code>e sempre terminar com echoing <code>$args['after_widget']<\/code>. Isso garante que seu widget seja encapsulado nos mesmos wrappers HTML de widget apropriados, conforme definido pelo tema. Ao longo das mesmas faixas, voc\u00ea pode ecoar <code>$args['before_title']<\/code>e <code>$args['after_title']<\/code>gerar wrappers HTML corretos em torno do t\u00edtulo do widget. N\u00e3o temos um t\u00edtulo de widget real em si, mas agruparemos o nome legal da empresa como um t\u00edtulo de widget.<\/p>\n<p>Caso contr\u00e1rio, voc\u00ea obt\u00e9m seus valores salvos referenciando o segundo argumento, <code>$instance<\/code>, por seus nomes de chave definidos em <code>form()<\/code>e <code>update()<\/code>. \u00c9 uma boa pr\u00e1tica produzir apenas as configura\u00e7\u00f5es que foram definidas \u2013 e ignorar as vazias.<\/p>\n<p>Como tamb\u00e9m estamos gerando microdados, precisamos adicionar as propriedades correspondentes seguindo as regras do schema.org.<\/p>\n<p>Voc\u00ea decide como deseja gerar o seu widget; voc\u00ea provavelmente pode considerar adicionar mais wrappers HTML para facilitar o estilo.<\/p>\n<pre><code>\/\/ Responsible for outputting the widget in frontend\npublic function widget($args, $instance) {\n    echo $args['before_widget'];\n\u00a0\n    ?&gt;&lt;div itemscope itemtype=\"https:\/\/schema.org\/LocalBusiness\"&gt;&lt;?php\n\u00a0\n    if (!empty($instance['legal_name'])) {\n        echo $args['before_title'];\n        ?&gt;&lt;span itemprop=\"legalName\"&gt;&lt;?php echo $instance['legal_name']; ?&gt;&lt;\/span&gt;&lt;?php\n\u00a0\n        echo $args['after_title'];\n    }\n\u00a0\n    if (!empty($instance['vat_id'])) {\n        ?&gt;&lt;span itemprop=\"vatID\" class=\"business-vatid\"&gt;&lt;?php printf(__('Vat: %s', 'txtdomain'), $instance['vat_id']); ?&gt;&lt;\/span&gt;&lt;?php\n    }\n\u00a0\n    if (!empty($instance['street_address'])) {\n        ?&gt;&lt;div itemprop=\"address\" itemscope itemtype=\"https:\/\/schema.org\/PostalAddress\" class=\"business-address\"&gt;&lt;?php\n\u00a0\n            ?&gt;&lt;span itemprop=\"streetAddress\"&gt;&lt;?php echo $instance['street_address']; ?&gt;&lt;\/span&gt;&lt;?php\n\u00a0\n            if (!empty($instance['postal_code'])) {\n                ?&gt;&lt;span itemprop=\"postalCode\"&gt;&lt;?php echo $instance['postal_code']; ?&gt;&lt;\/span&gt;&lt;?php\n            }\n            if (!empty($instance['postal_city'])) {\n                ?&gt;&lt;span itemprop=\"addressLocality\"&gt;&lt;?php echo $instance['postal_city']; ?&gt;&lt;\/span&gt;&lt;?php\n            }               \n\u00a0\n        ?&gt;&lt;\/div&gt;&lt;?php\n    }\n\u00a0\n    if (!empty($instance['email_address'])) {\n        ?&gt;&lt;a href=\"mailto:&lt;?php echo $instance['email_address']; ?&gt;\" title=\"&lt;?php _e('Send email', 'txtdomain'); ?&gt;\" class=\"business-email\"&gt;\n            &lt;span itemprop=\"email\"&gt;&lt;?php echo $instance['email_address']; ?&gt;&lt;\/span&gt;\n        &lt;\/a&gt;&lt;?php\n    }\n\u00a0\n    if (!empty($instance['phone_number'])) {\n        ?&gt;&lt;a href=\"tel:&lt;?php echo $instance['phone_number']; ?&gt;\" title=\"&lt;?php _e('Call us', 'txtdomain'); ?&gt;\" class=\"business-phone\"&gt;\n            &lt;span itemprop=\"telephone\"&gt;&lt;?php echo $instance['phone_number']; ?&gt;&lt;\/span&gt;\n        &lt;\/a&gt;&lt;?php\n    }\n\u00a0\n    ?&gt;&lt;\/div&gt;&lt;?php\n\u00a0\n    echo $args['after_widget'];\n}<\/code><\/pre>\n<p>Personalize a sa\u00edda, adicione algum estilo e pronto!<\/p>\n<p>FYI: Seu widget receber\u00e1 o nome da classe de encapsulamento &#8221; <code>widget_&lt;base ID&gt;<\/code>&quot; (ID base \u00e9 o que voc\u00ea forneceu no construtor). No nosso caso, nosso widget receber\u00e1 a classe &#8221; <code>widget_local_business<\/code>&#8220;. Isso pode ajud\u00e1-lo a adicionar algum estilo direcionado.<\/p>\n<h2>Encerrando e c\u00f3digo final<\/h2>\n<p>Neste tutorial, aprendemos como criar um widget personalizado e como renderizar uma sa\u00edda formatada de microdados a partir de suas configura\u00e7\u00f5es. Voc\u00ea deve ser capaz de criar seus pr\u00f3prios widgets, seguindo o b\u00e1sico de uma classe de widgets!<\/p>\n<p>Para refer\u00eancia, aqui est\u00e1 o c\u00f3digo completo, tudo junto.<\/p>\n<pre><code>add_action('widgets_init', function() {\n    register_widget('LocalBusiness');\n});\n\u00a0\nclass LocalBusiness extends WP_Widget {\n\u00a0\n    \/\/ Initialize your widget in the class constructor\n    public function __construct() {\n        $widget_ops = [\n            'description' =&gt; __('Outputs business information with Microdata', 'txtdomain')\n        ];\n        parent::__construct('local_business', __('Local Business Information', 'txtdomain'), $widget_ops);\n    }\n\u00a0\n    \/\/ Responsible for outputting the widget in frontend\n    public function widget($args, $instance) {\n        echo $args['before_widget'];\n\u00a0\n        ?&gt;&lt;div itemscope itemtype=\"https:\/\/schema.org\/LocalBusiness\"&gt;&lt;?php\n\u00a0\n        if (!empty($instance['legal_name'])) {\n            echo $args['before_title'];\n            ?&gt;&lt;span itemprop=\"legalName\"&gt;&lt;?php echo $instance['legal_name']; ?&gt;&lt;\/span&gt;&lt;?php\n\u00a0\n            echo $args['after_title'];\n        }\n\u00a0\n        if (!empty($instance['vat_id'])) {\n            ?&gt;&lt;span itemprop=\"vatID\" class=\"business-vatid\"&gt;&lt;?php printf(__('Vat: %s', 'txtdomain'), $instance['vat_id']); ?&gt;&lt;\/span&gt;&lt;?php\n        }\n\u00a0\n        if (!empty($instance['street_address'])) {\n            ?&gt;&lt;div itemprop=\"address\" itemscope itemtype=\"https:\/\/schema.org\/PostalAddress\" class=\"business-address\"&gt;&lt;?php\n\u00a0\n                ?&gt;&lt;span itemprop=\"streetAddress\"&gt;&lt;?php echo $instance['street_address']; ?&gt;&lt;\/span&gt;&lt;?php\n\u00a0\n                if (!empty($instance['postal_code'])) {\n                    ?&gt;&lt;span itemprop=\"postalCode\"&gt;&lt;?php echo $instance['postal_code']; ?&gt;&lt;\/span&gt;&lt;?php\n                }\n                if (!empty($instance['postal_city'])) {\n                    ?&gt;&lt;span itemprop=\"addressLocality\"&gt;&lt;?php echo $instance['postal_city']; ?&gt;&lt;\/span&gt;&lt;?php\n                }               \n\u00a0\n            ?&gt;&lt;\/div&gt;&lt;?php\n        }\n\u00a0\n        if (!empty($instance['email_address'])) {\n            ?&gt;&lt;a href=\"mailto:&lt;?php echo $instance['email_address']; ?&gt;\" title=\"&lt;?php _e('Send email', 'txtdomain'); ?&gt;\" class=\"business-email\"&gt;\n                &lt;span itemprop=\"email\"&gt;&lt;?php echo $instance['email_address']; ?&gt;&lt;\/span&gt;\n            &lt;\/a&gt;&lt;?php\n        }\n\u00a0\n        if (!empty($instance['phone_number'])) {\n            ?&gt;&lt;a href=\"tel:&lt;?php echo $instance['phone_number']; ?&gt;\" title=\"&lt;?php _e('Call us', 'txtdomain'); ?&gt;\" class=\"business-phone\"&gt;\n                &lt;span itemprop=\"telephone\"&gt;&lt;?php echo $instance['phone_number']; ?&gt;&lt;\/span&gt;\n            &lt;\/a&gt;&lt;?php\n        }\n        ?&gt;&lt;\/div&gt;&lt;?php\n\u00a0\n        echo $args['after_widget'];\n    }\n\u00a0\n    \/\/ Responsible for outputting the widget settings in admin\n    public function form($instance) { \n        ?&gt;\n        &lt;p&gt;\n            &lt;label for=\"&lt;?php echo $this-&gt;get_field_id('legal_name'); ?&gt;\"&gt;&lt;?php _e('Legal name:', 'txtdomain'); ?&gt;&lt;\/label&gt;\n            &lt;input type=\"text\" class=\"widefat\" id=\"&lt;?php echo esc_attr($this-&gt;get_field_id('legal_name')); ?&gt;\" name=\"&lt;?php echo esc_attr($this-&gt;get_field_name('legal_name')); ?&gt;\" value=\"&lt;?php echo esc_attr($instance['legal_name']); ?&gt;\" \/&gt;\n        &lt;\/p&gt;\n        &lt;p&gt;\n            &lt;label for=\"&lt;?php echo $this-&gt;get_field_id('vat_id'); ?&gt;\"&gt;&lt;?php _e('Vat ID\/Organization number:', 'txtdomain'); ?&gt;&lt;\/label&gt;\n            &lt;input type=\"text\" class=\"widefat\" id=\"&lt;?php echo esc_attr($this-&gt;get_field_id('vat_id')); ?&gt;\" name=\"&lt;?php echo esc_attr($this-&gt;get_field_name('vat_id')); ?&gt;\" value=\"&lt;?php echo esc_attr($instance['vat_id']); ?&gt;\" \/&gt;\n        &lt;\/p&gt;\n        &lt;p&gt;\n            &lt;label for=\"&lt;?php echo $this-&gt;get_field_id('street_address'); ?&gt;\"&gt;&lt;?php _e('Street address:', 'txtdomain'); ?&gt;&lt;\/label&gt;\n            &lt;input type=\"text\" class=\"widefat\" id=\"&lt;?php echo esc_attr($this-&gt;get_field_id('street_address')); ?&gt;\" name=\"&lt;?php echo esc_attr($this-&gt;get_field_name('street_address')); ?&gt;\" value=\"&lt;?php echo esc_attr($instance['street_address']); ?&gt;\" \/&gt;\n        &lt;\/p&gt;\n        &lt;p&gt;\n            &lt;label for=\"&lt;?php echo $this-&gt;get_field_id('postal_code'); ?&gt;\"&gt;&lt;?php _e('Postal code:', 'txtdomain'); ?&gt;&lt;\/label&gt;\n            &lt;input type=\"text\" class=\"widefat\" id=\"&lt;?php echo esc_attr($this-&gt;get_field_id('postal_code')); ?&gt;\" name=\"&lt;?php echo esc_attr($this-&gt;get_field_name('postal_code')); ?&gt;\" value=\"&lt;?php echo esc_attr($instance['postal_code']); ?&gt;\" \/&gt;\n        &lt;\/p&gt;\n        &lt;p&gt;\n            &lt;label for=\"&lt;?php echo $this-&gt;get_field_id('postal_city'); ?&gt;\"&gt;&lt;?php _e('City:', 'txtdomain'); ?&gt;&lt;\/label&gt;\n            &lt;input type=\"text\" class=\"widefat\" id=\"&lt;?php echo esc_attr($this-&gt;get_field_id('postal_city')); ?&gt;\" name=\"&lt;?php echo esc_attr($this-&gt;get_field_name('postal_city')); ?&gt;\" value=\"&lt;?php echo esc_attr($instance['postal_city']); ?&gt;\" \/&gt;\n        &lt;\/p&gt;\n        &lt;p&gt;\n            &lt;label for=\"&lt;?php echo $this-&gt;get_field_id('email_address'); ?&gt;\"&gt;&lt;?php _e('E-mail address:', 'txtdomain'); ?&gt;&lt;\/label&gt;\n            &lt;input type=\"text\" class=\"widefat\" id=\"&lt;?php echo esc_attr($this-&gt;get_field_id('email_address')); ?&gt;\" name=\"&lt;?php echo esc_attr($this-&gt;get_field_name('email_address')); ?&gt;\" value=\"&lt;?php echo esc_attr($instance['email_address']); ?&gt;\" \/&gt;\n        &lt;\/p&gt;\n        &lt;p&gt;\n            &lt;label for=\"&lt;?php echo $this-&gt;get_field_id('phone_number'); ?&gt;\"&gt;&lt;?php _e('Phone number:', 'txtdomain'); ?&gt;&lt;\/label&gt;\n            &lt;input type=\"text\" class=\"widefat\" id=\"&lt;?php echo esc_attr($this-&gt;get_field_id('phone_number')); ?&gt;\" name=\"&lt;?php echo esc_attr($this-&gt;get_field_name('phone_number')); ?&gt;\" value=\"&lt;?php echo esc_attr($instance['phone_number']); ?&gt;\" \/&gt;\n        &lt;\/p&gt;\n        &lt;?php\n    }\n\u00a0\n    \/\/ Responsible for saving settings in admin\n    public function update($new_instance, $old_instance) {\n        $instance = [];\n        $instance['legal_name'] = (!empty($new_instance['legal_name']))? strip_tags($new_instance['legal_name']): '';\n        $instance['vat_id'] = (!empty($new_instance['vat_id']))? strip_tags($new_instance['vat_id']): '';\n        $instance['street_address'] = (!empty($new_instance['street_address']))? strip_tags($new_instance['street_address']): '';\n        $instance['postal_code'] = (!empty($new_instance['postal_code']))? strip_tags($new_instance['postal_code']): '';\n        $instance['postal_city'] = (!empty($new_instance['postal_city']))? strip_tags($new_instance['postal_city']): '';\n        $instance['email_address'] = (!empty($new_instance['email_address']))? strip_tags($new_instance['email_address']): '';\n        $instance['phone_number'] = (!empty($new_instance['phone_number']))? strip_tags($new_instance['phone_number']): '';\n        return $instance;\n    }\n}<\/code><\/pre>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte de grava\u00e7\u00e3o:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/awhitepixel.com\" class=\"external external_icon\">awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Este tutorial mostra como criar um widget customizado que gera informa\u00e7\u00f5es de neg\u00f3cios com marca\u00e7\u00e3o de esquema de microdados para LocalBusiness.<\/p>\n","protected":false},"author":1,"featured_media":223853,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[930,898,898,722,722,985,837,998,998,1110,985,837,1009,1009,930,846,846,867,867],"tags":[1170],"class_list":["post-233850","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-assuntos","category-codigo-2","category-desenvolvedor","category-negocio-pt-pt","category-guia-para-iniciantes","category-marketing-de-conteudo","category-n-a","category-seo-9","category-tutoriais","category-wordpress-8","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/233850","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=233850"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/233850\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/223853"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=233850"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=233850"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=233850"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}