Tutorial: Cree un Widget de Microdatos para su Negocio en WordPress

En este tutorial, aprenderemos cómo crear un widget personalizado que genere la información de su empresa, como su nombre oficial, dirección, número de teléfono y correo electrónico. Pero lo llevaremos un paso más allá al generarlo con microdatos o marcado de esquema, lo que permitirá que los motores de búsqueda comprendan su contenido.

Los widgets son bloques dinámicos que se pueden colocar en las áreas disponibles de su tema. Por lo general, su tema tendría como mínimo una barra lateral y una o más áreas en el pie de página. Tener la información de su negocio como un widget en el pie de página es común y bastante inteligente, ya que el pie de página aparece en todas las páginas de su sitio.

Los microdatos son atributos HTML adicionales que explican qué contiene una etiqueta HTML específica para que una máquina pueda entender qué son (por ejemplo, nombre comercial, número de teléfono, dirección comercial, dirección de correo electrónico comercial, etc.). Esto hace posible que los motores de búsqueda como Google extraigan información sobre su negocio de su HTML.

lo que vamos a crear

Nuestro widget generará información utilizando el esquema de microdatos LocalBusiness, que es perfecto para una organización o empresa. Depende completamente de usted qué 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ís pueden preferir otro tipo de información.

El widget de este tutorial generará la siguiente información opcional:

• Nombre de la empresa (Propiedad de microdatos: legalName)
• ID de IVA o número de organización (propiedad de microdatos: vatID)
• Dirección postal (Etiqueta de microdatos: PostalAddresscon propiedades para streetAddress, postalCodey addressLocality)
• Dirección de correo electrónico de la empresa (Propiedad de microdatos: email)
• Número de teléfono (Propiedad de microdatos: telephone)

Este tutorial no lo guiará a través del estilo del widget, ya que debería ser bastante sencillo. En la interfaz, nuestro widget se verá como un widget de texto normal. Pero, por supuesto, bajo el capó, tiene un marcado de esquema que ayuda a Google.

Los fundamentos de la creación de un widget personalizado

Puede poner su código en su tema functions.phpo crear un complemento personalizado. Solo recuerda que si lo mantienes en un complemento, perderás el widget al desactivar el complemento; y, de manera similar, mantenerlo en el tema hará que pierda el widget si cambia a otro tema. En este ejemplo, agregaré el código en el archivo functions.php.

La creación de un widget se realiza con código PHP orientado a objetos. Usted escribe una clase de PHP que extiende la clase de widget de WordPress y la inicializa llamando register_widget()y proporcionando el nombre de su clase. En este tutorial he nombrado mi clase de widget LocalBusiness.

Comencemos llamando register_widget()dentro de una función enganchada a la acción widgets_init.

add_action('widgets_init', function() {
    register_widget('LocalBusiness');
});

Veamos rápidamente el esqueleto de una clase de widget personalizado:

class LocalBusiness extends WP_Widget {
 
    // Initialize your widget in the class constructor
    public function __construct() { }
 
    // Responsible for outputting the widget in frontend
    public function widget($args, $instance) { }
 
    // Responsible for outputting the widget settings in admin
    public function form($instance) { }
 
    // Responsible for saving settings in admin
    public function update($new_instance, $old_instance) { }
}

Como puede ver desde arriba, necesitará cuatro funciones dentro de su clase. Repasemos cada función una por una y completemos.

Creación de un widget de microdatos de empresa local

El lugar más lógico para comenzar es en el constructor, que es responsable de configurar su widget.

La función __construir()

Dentro del constructor, debe configurar algunas variables, como el nombre del widget, y llamar a la función del constructor principal (la clase principal es la que extiende; WP_Widget). Lea más sobre las posibles opciones en el constructor aquí. Proporcionaré una identificación base, un título y una descripción, así:

Puede hacer más en __constructel método, como poner en cola scripts o definir más configuraciones de widgets. Pero lo anterior suele ser suficiente en la mayoría de los casos.

La función formulario()

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ón form()que le brinda un parámetro; una matriz que contiene todas las opciones de widgets posiblemente guardadas. Es importante que emita la configuración guardada correspondiente en todas sus entradas para que se conserven los datos. (Veremos cómo guardar la configuración en el siguiente paso).

Hay mucho para realizar un seguimiento en la función de formulario, así que solo agreguemos una entrada, para el nombre legal, primero y asegurémonos de entender lo que debemos hacer:

En primer lugar, el código 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.

Hay dos funciones con las que debe familiarizarse; get_field_id()y get_field_name()ambos son funciones internas WP_Widget(es por eso que llama " $this->" al frente, mientras que $thisse 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 idy nameatributos. Es muy importante no olvide agregar un nameatributo en su entrada, de lo contrario, nunca obtendrá su valor al guardar.

Y finalmente, generamos el valor guardado actual en cuanto valuea nuestra entrada haciendo referencia al argumento pasado $instance. Sin hacer esto por su valor, la entrada nunca se completará con lo que esté guardado en la base de datos y aparecerá en blanco cada vez, lo que puede confundir a los usuarios.

Si desea diferentes entradas de formulario, como casillas de verificación o menús desplegables, debería poder agregarlas fácilmente siguiendo las reglas mencionadas anteriormente. Agreguemos el resto de la configuración de nuestros widgets. Todos son entradas de texto, por lo que es el mismo código que se repite arriba, excepto sus ID de campo. Nuestro form()método termina luciendo así:

Si agrega su widget a un área de widgets disponible, debería verse así:

La función actualizar()

La update()función es responsable de guardar realmente los valores ingresados ​​en admin. Desafortunadamente, WordPress no está haciendo esto automáticamente por ti. En esta función se proporcionan dos parámetros; generalmente nombrado $new_instancey $old_instance. Dentro del primer parámetro, $new_instanceencontrará todos los valores que se enviaron, y dentro del segundo, $old_instanceencontrará los valores que están actualmente guardados en la base de datos. Esto le permite hacer algunas comparaciones inteligentes si es necesario.

Por lo general, simplemente crearía una nueva matriz de todas las configuraciones de sus widgets y guardaría todo lo que está configurado dentro $new_instance. También nos encargamos de algunas higienizaciones. Finalmente, simplemente devolvemos esta matriz, que le dirá a WordPress qué guardar.

// Responsible for saving settings in admin
public function update($new_instance, $old_instance) {
    $instance = [];
    $instance['legal_name'] = (!empty($new_instance['legal_name']))? strip_tags($new_instance['legal_name']): '';
    $instance['vat_id'] = (!empty($new_instance['vat_id']))? strip_tags($new_instance['vat_id']): '';
    $instance['street_address'] = (!empty($new_instance['street_address']))? strip_tags($new_instance['street_address']): '';
    $instance['postal_code'] = (!empty($new_instance['postal_code']))? strip_tags($new_instance['postal_code']): '';
    $instance['postal_city'] = (!empty($new_instance['postal_city']))? strip_tags($new_instance['postal_city']): '';
    $instance['email_address'] = (!empty($new_instance['email_address']))? strip_tags($new_instance['email_address']): '';
    $instance['phone_number'] = (!empty($new_instance['phone_number']))? strip_tags($new_instance['phone_number']): '';
    return $instance;
}

Ahora puede probar su widget si lo desea y verificar que los valores ingresados ​​​​se están guardando. Y si recuerda establecer el valueatributo correctamente en form(), cuando guarde y presione actualizar, los valores deberían conservarse. ¡Excelente! Ahora pasemos al último paso, y sin duda el más divertido: generar el bit de interfaz.

La función widget()

La widget()función es responsable de generar su widget en la interfaz. Obtendremos dos argumentos para la función; en primer lugar, una matriz con información útil, como los contenedores de área de widget definidos del tema, y ​​en segundo lugar, los valores de configuración de widget guardados.

La salida de su widget siempre debe comenzar con un eco $args['before_widget']y siempre terminar con un eco $args['after_widget']. Esto asegura que su widget se envuelva en los mismos envoltorios HTML de widget adecuados según lo definido por el tema. A lo largo de las mismas pistas, puede hacer eco $args['before_title']y $args['after_title']generar envoltorios HTML correctos alrededor del título del widget. No tenemos un título de widget real per se, pero envolveremos el nombre legal de la empresa como un título de widget.

De lo contrario, obtiene sus valores guardados haciendo referencia al segundo argumento, $instance, por sus nombres clave establecidos en form()y update(). Es una buena práctica generar solo las configuraciones que se establecieron e ignorar las vacías.

Debido a que también generamos microdatos, debemos agregar las propiedades correspondientes siguiendo las reglas de schema.org.

Depende completamente de usted cómo desea generar su widget; probablemente podría considerar agregar más envoltorios HTML para facilitar el estilo.

¡Personalice la salida, agregue un poco de estilo y eso es todo!

FYI: su widget obtendrá el nombre de clase de envoltorio " widget_<base ID>" (la ID base es lo que proporcionó en el constructor). En nuestro caso, nuestro widget obtendrá la clase " widget_local_business". Esto podría ayudarlo a agregar un estilo específico.

Cierre y código final

En este tutorial, aprendimos cómo crear un widget personalizado y cómo generar una salida con formato de microdatos desde su configuración. ¡Debería poder crear sus propios widgets, siguiendo los conceptos básicos de una clase de widget!

Como referencia, aquí está el código completo, todos juntos.