{"id":233787,"date":"2023-02-23T18:57:00","date_gmt":"2023-02-23T15:57:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233787"},"modified":"2022-11-11T12:24:29","modified_gmt":"2022-11-11T09:24:29","slug":"tutorial-cree-un-widget-de-microdatos-para-su-negocio-en-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/tutorial-cree-un-widget-de-microdatos-para-su-negocio-en-wordpress\/","title":{"rendered":"Tutorial: Cree un Widget de Microdatos para su Negocio en WordPress"},"content":{"rendered":"\n<p>En este tutorial, aprenderemos c\u00f3mo crear un widget personalizado que genere la informaci\u00f3n de su empresa, como su nombre oficial, direcci\u00f3n, n\u00famero de tel\u00e9fono y correo electr\u00f3nico. Pero lo llevaremos un paso m\u00e1s all\u00e1 al generarlo con <a href=\"https:\/\/schema.org\/docs\/gs.html\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">microdatos<\/a> o marcado de esquema, lo que permitir\u00e1 que los motores de b\u00fasqueda comprendan su contenido.<\/p>\n<p>Los widgets son bloques din\u00e1micos que se pueden colocar en las \u00e1reas disponibles de su tema. Por lo general, su tema tendr\u00eda como m\u00ednimo una barra lateral y una o m\u00e1s \u00e1reas en el pie de p\u00e1gina. Tener la informaci\u00f3n de su negocio como un widget en el pie de p\u00e1gina es com\u00fan y bastante inteligente, ya que el pie de p\u00e1gina aparece en todas las p\u00e1ginas de su sitio.<\/p>\n<p>Los microdatos son atributos HTML adicionales que explican qu\u00e9 contiene una etiqueta HTML espec\u00edfica para que una m\u00e1quina pueda entender qu\u00e9 son (por ejemplo, nombre comercial, n\u00famero de tel\u00e9fono, direcci\u00f3n comercial, direcci\u00f3n de correo electr\u00f3nico comercial, etc.). Esto hace posible que los motores de b\u00fasqueda como Google extraigan informaci\u00f3n sobre su negocio de su HTML.<\/p>\n<h2>lo que vamos a crear<\/h2>\n<p>Nuestro widget generar\u00e1 informaci\u00f3n utilizando el esquema de microdatos <a href=\"https:\/\/schema.org\/LocalBusiness\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">LocalBusiness,<\/a> que es perfecto para una organizaci\u00f3n o empresa. Depende completamente de usted qu\u00e9 propiedades desea generar, simplemente haga clic en el enlace de arriba para leer todas las propiedades posibles dentro de LocalBusiness (incluidas las heredadas). Su empresa o su pa\u00eds pueden preferir otro tipo de informaci\u00f3n.<\/p>\n<p>El widget de este tutorial generar\u00e1 la siguiente informaci\u00f3n opcional:<\/p>\n<ul>\n<li>Nombre de la empresa (Propiedad de microdatos: <code>legalName<\/code>)<\/li>\n<li>ID de IVA o n\u00famero de organizaci\u00f3n (propiedad de microdatos: <code>vatID<\/code>)<\/li>\n<li>Direcci\u00f3n postal (Etiqueta de microdatos: <code>PostalAddress<\/code>con propiedades para <code>streetAddress<\/code>, <code>postalCode<\/code>y <code>addressLocality<\/code>)<\/li>\n<li>Direcci\u00f3n de correo electr\u00f3nico de la empresa (Propiedad de microdatos: <code>email<\/code>)<\/li>\n<li>N\u00famero de tel\u00e9fono (Propiedad de microdatos: <code>telephone<\/code>)<\/li>\n<\/ul>\n<p>Este tutorial no lo guiar\u00e1 a trav\u00e9s del estilo del widget, ya que deber\u00eda ser bastante sencillo. En la interfaz, nuestro widget se ver\u00e1 como un widget de texto normal. Pero, por supuesto, bajo el cap\u00f3, tiene un marcado de esquema que ayuda a Google.<\/p>\n<h2>Los fundamentos de la creaci\u00f3n de un widget personalizado<\/h2>\n<p>Puede poner su c\u00f3digo en su tema <code>functions.php<\/code>o crear un complemento personalizado. Solo recuerda que si lo mantienes en un complemento, perder\u00e1s el widget al desactivar el complemento; y, de manera similar, mantenerlo en el tema har\u00e1 que pierda el widget si cambia a otro tema. En este ejemplo, agregar\u00e9 el c\u00f3digo en el archivo <code>functions.php<\/code>.<\/p>\n<p>La creaci\u00f3n de un widget se realiza con c\u00f3digo PHP orientado a objetos. Usted escribe una clase de PHP que extiende la clase de widget de WordPress y la inicializa llamando <code>register_widget()<\/code>y proporcionando el nombre de su clase. En este tutorial he nombrado mi clase de widget <code>LocalBusiness<\/code>.<\/p>\n<p>Comencemos llamando <code>register_widget()<\/code>dentro de una funci\u00f3n enganchada a la acci\u00f3n <code>widgets_init<\/code>.<\/p>\n<pre><code>add_action('widgets_init', function() {\n    register_widget('LocalBusiness');\n});<\/code><\/pre>\n<p>Veamos r\u00e1pidamente el esqueleto de una clase de widget personalizado:<\/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 puede ver desde arriba, necesitar\u00e1 cuatro funciones dentro de su clase. Repasemos cada funci\u00f3n una por una y completemos.<\/p>\n<h2>Creaci\u00f3n de un widget de microdatos de empresa local<\/h2>\n<p>El lugar m\u00e1s l\u00f3gico para comenzar es en el constructor, que es responsable de configurar su widget.<\/p>\n<h3>La funci\u00f3n __construir()<\/h3>\n<p>Dentro del constructor, debe configurar algunas variables, como el nombre del widget, y llamar a la funci\u00f3n del constructor principal (la clase principal es la que extiende; <code>WP_Widget<\/code>). Lea m\u00e1s sobre <a href=\"https:\/\/developer.wordpress.org\/reference\/classes\/wp_widget\/__construct\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">las posibles opciones en el constructor aqu\u00ed<\/a>. Proporcionar\u00e9 una identificaci\u00f3n base, un t\u00edtulo y una descripci\u00f3n, as\u00ed:<\/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>Puede hacer m\u00e1s en <code>__construct<\/code>el m\u00e9todo, como poner en cola scripts o definir m\u00e1s configuraciones de widgets. Pero lo anterior suele ser suficiente en la mayor\u00eda de los casos.<\/p>\n<h3>La funci\u00f3n formulario()<\/h3>\n<p>El siguiente paso es crear todas las configuraciones y entradas que acepta su widget en el administrador. Para enviar configuraciones al administrador de widgets, usamos la funci\u00f3n <code>form()<\/code>que le brinda un par\u00e1metro; una matriz que contiene todas las opciones de widgets posiblemente guardadas. Es importante que emita la configuraci\u00f3n guardada correspondiente en todas sus entradas para que se conserven los datos. (Veremos c\u00f3mo guardar la configuraci\u00f3n en el siguiente paso).<\/p>\n<p>Hay mucho para realizar un seguimiento en la funci\u00f3n de formulario, as\u00ed que solo agreguemos una entrada, para el nombre legal, primero y asegur\u00e9monos de entender lo que debemos hacer:<\/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>En primer lugar, el c\u00f3digo anterior genera algunos envoltorios y clases HTML en la forma en que WordPress genera sus formularios de widgets; hacemos esto para que el formulario se vea bien.<\/p>\n<p>Hay dos funciones con las que debe familiarizarse; <code>get_field_id()<\/code>y <code>get_field_name()<\/code>ambos son funciones internas <code>WP_Widget<\/code>(es por eso que llama &quot; <code>$this-&gt;<\/code>&quot; al frente, mientras que <code>$this<\/code>se refiere a la instancia de la clase). Las funciones devuelven la ID y el nombre de un campo proporcionado, respectivamente, para usar en sus entradas <code>id<\/code>y <code>name<\/code>atributos. Es muy importante no olvide agregar un <code>name<\/code>atributo en su entrada, de lo contrario, nunca obtendr\u00e1 su valor al guardar.<\/p>\n<p>Y finalmente, generamos el valor guardado actual en cuanto <code>value<\/code>a nuestra entrada haciendo referencia al argumento pasado <code>$instance<\/code>. Sin hacer esto por su valor, la entrada nunca se completar\u00e1 con lo que est\u00e9 guardado en la base de datos y aparecer\u00e1 en blanco cada vez, lo que puede confundir a los usuarios.<\/p>\n<p>Si desea diferentes entradas de formulario, como casillas de verificaci\u00f3n o men\u00fas desplegables, deber\u00eda poder agregarlas f\u00e1cilmente siguiendo las reglas mencionadas anteriormente. Agreguemos el resto de la configuraci\u00f3n de nuestros widgets. Todos son entradas de texto, por lo que es el mismo c\u00f3digo que se repite arriba, excepto sus ID de campo. Nuestro <code>form()<\/code>m\u00e9todo termina luciendo as\u00ed:<\/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>Si agrega su widget a un \u00e1rea de widgets disponible, deber\u00eda verse as\u00ed:<\/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: Cree un Widget de Microdatos para su Negocio en WordPress\" ><\/a><\/p>\n<h3>La funci\u00f3n actualizar()<\/h3>\n<p>La <code>update()<\/code>funci\u00f3n es responsable de guardar realmente los valores ingresados \u200b\u200ben admin. Desafortunadamente, WordPress no est\u00e1 haciendo esto autom\u00e1ticamente por ti. En esta funci\u00f3n se proporcionan dos par\u00e1metros; generalmente nombrado <code>$new_instance<\/code>y <code>$old_instance<\/code>. Dentro del primer par\u00e1metro, <code>$new_instance<\/code>encontrar\u00e1 todos los valores que se enviaron, y dentro del segundo, <code>$old_instance<\/code>encontrar\u00e1 los valores que est\u00e1n actualmente guardados en la base de datos. Esto le permite hacer algunas comparaciones inteligentes si es necesario.<\/p>\n<p>Por lo general, simplemente crear\u00eda una nueva matriz de todas las configuraciones de sus widgets y guardar\u00eda todo lo que est\u00e1 configurado dentro <code>$new_instance<\/code>. Tambi\u00e9n nos encargamos de algunas higienizaciones. Finalmente, simplemente devolvemos esta matriz, que le dir\u00e1 a WordPress qu\u00e9 guardar.<\/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>Ahora puede probar su widget si lo desea y verificar que los valores ingresados \u200b\u200b\u200b\u200bse est\u00e1n guardando. Y si recuerda establecer el <code>value<\/code>atributo correctamente en <code>form()<\/code>, cuando guarde y presione actualizar, los valores deber\u00edan conservarse. \u00a1Excelente! Ahora pasemos al \u00faltimo paso, y sin duda el m\u00e1s divertido: generar el bit de interfaz.<\/p>\n<h3>La funci\u00f3n widget()<\/h3>\n<p>La <code>widget()<\/code>funci\u00f3n es responsable de generar su widget en la interfaz. Obtendremos dos argumentos para la funci\u00f3n; en primer lugar, una matriz con informaci\u00f3n \u00fatil, como los contenedores de \u00e1rea de widget definidos del tema, y \u200b\u200ben segundo lugar, los valores de configuraci\u00f3n de widget guardados.<\/p>\n<p>La salida de su widget siempre debe comenzar con un eco <code>$args['before_widget']<\/code>y siempre terminar con un eco <code>$args['after_widget']<\/code>. Esto asegura que su widget se envuelva en los mismos envoltorios HTML de widget adecuados seg\u00fan lo definido por el tema. A lo largo de las mismas pistas, puede hacer eco <code>$args['before_title']<\/code>y <code>$args['after_title']<\/code>generar envoltorios HTML correctos alrededor del t\u00edtulo del widget. No tenemos un t\u00edtulo de widget real per se, pero envolveremos el nombre legal de la empresa como un t\u00edtulo de widget.<\/p>\n<p>De lo contrario, obtiene sus valores guardados haciendo referencia al segundo argumento, <code>$instance<\/code>, por sus nombres clave establecidos en <code>form()<\/code>y <code>update()<\/code>. Es una buena pr\u00e1ctica generar solo las configuraciones que se establecieron e ignorar las vac\u00edas.<\/p>\n<p>Debido a que tambi\u00e9n generamos microdatos, debemos agregar las propiedades correspondientes siguiendo las reglas de schema.org.<\/p>\n<p>Depende completamente de usted c\u00f3mo desea generar su widget; probablemente podr\u00eda considerar agregar m\u00e1s envoltorios HTML para facilitar el 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>\u00a1Personalice la salida, agregue un poco de estilo y eso es todo!<\/p>\n<p>FYI: su widget obtendr\u00e1 el nombre de clase de envoltorio &quot; <code>widget_&lt;base ID&gt;<\/code>&quot; (la ID base es lo que proporcion\u00f3 en el constructor). En nuestro caso, nuestro widget obtendr\u00e1 la clase &quot; <code>widget_local_business<\/code>&quot;. Esto podr\u00eda ayudarlo a agregar un estilo espec\u00edfico.<\/p>\n<h2>Cierre y c\u00f3digo final<\/h2>\n<p>En este tutorial, aprendimos c\u00f3mo crear un widget personalizado y c\u00f3mo generar una salida con formato de microdatos desde su configuraci\u00f3n. \u00a1Deber\u00eda poder crear sus propios widgets, siguiendo los conceptos b\u00e1sicos de una clase de widget!<\/p>\n<p>Como referencia, aqu\u00ed est\u00e1 el c\u00f3digo completo, todos juntos.<\/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\">Fuente de grabaci\u00f3n:  <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 explica c\u00f3mo crear un widget personalizado que genere informaci\u00f3n comercial con marcado de esquema de microdatos 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":[924,892,892,716,716,986,831,992,992,1110,986,831,1003,1003,924,840,840,861,861],"tags":[1172],"class_list":["post-233787","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-asignaturas","category-codigo","category-desarrollador","category-negocio-es","category-guia-para-principiantes","category-marketing-de-contenidos","category-n-a","category-seo-3","category-tutoriales","category-wordpress-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/233787","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=233787"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/233787\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/223853"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=233787"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=233787"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=233787"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}