Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress Widgets
Code

Creando tus propios widgets usando varias API de WordPress: Introducción

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by Luis Chiabrera (you can also view the original English article)

Final product image
What You'll Be Creating

Los widgets son una forma ingeniosa de darles a los propietarios de sitios algún control sobre el aspecto (y algunas veces la funcionalidad) de sus sitios de WordPress. En esta serie, vamos a crear un puñado de widgets de WordPress combinando la API de widgets con otras API externas.

La serie constará de los siguientes tutoriales:

  1. Una introducción
  2. Widget de Publicaciones relacionadas
  3. Widget de inicio de sesión
  4. Widget de FAQ
  5. Widget de publicaciones más populares con la integración de Google Analytics
  6. Widget de dirección física con la integración de Google Maps
  7. Conclusión

En este tutorial, te presentaré la API de widgets de WordPress al (re) crear un widget de texto simple. Analizaremos y examinaremos las diferentes funciones que conforman el widget para comprender cómo funcionan los widgets de WordPress en general.

Este widget también servirá como una base sobre la cual construiremos al crear otros widgets en las siguientes partes de esta serie.

Widgets de WordPress

Los widgets de WordPress agregan contenido y características a sus barras laterales o áreas widgets de su tema. Los widgets están diseñados para proporcionar una forma simple y fácil de usar para dar diseño y control estructural del tema de WordPress al usuario sin necesidad de que sepan cómo codificar.

La mayoría de los widgets de WordPress ofrecen personalización y opciones tales como formularios para completar, imágenes opcionales y otras funciones de personalización.

Examinando la clase de widgets

La forma más fácil de crear un widget de WordPress es heredar la clase WP_Widget. De esta manera, puede utilizar las funciones integradas para actualizar el widget, mostrar el widget y crear una interfaz de administración para el widget.

Para comprender completamente cómo funcionan los widgets, crearemos y examinaremos un widget vacío. Luego, definiremos cada función que conforma el widget, de modo que veamos cómo funcionan juntos para crear un widget que funcione.

Nuestra definición de widget



Las funciones en detalle

Veamos cada función con más detalle:

__construct()

Esta función registra el widget con WordPress.

widget()

Esta función es responsable de la visualización frontal del widget. Da salida al contenido del widget.

update()

Procesa las opciones del widget en guardar. Utilice esta función para actualizar su widget (opción). Esta función tiene dos parámetros:

  1. $ new_instance - Valores recién enviados para ser guardados. Estos valores provendrán de la forma definida dentro del método form ()
  2. $ old_instance - Valores previamente guardados de la base de datos

Asegúrese de limpiar todos los valores enviados por el usuario aquí. Los valores enviados por el usuario siempre deben limpiarse antes de enviarse a la base de datos

form()

El método / función form () se utiliza para definir el formulario del widget de back-end, que se ve en el panel de widgets en el panel. Este formulario permite al usuario configurar el título y otras opciones para el widget.

Esta función toma los siguientes parámetros:

  • $ instance: valores guardados previamente de la base de datos

Creando nuestro Widget

Para crear nuestro widget, seguiremos los siguientes pasos:

  • Define lo que estamos creando.
  • Registre nuestro widget con WordPress
  • Construye la forma de back-end
  • Guardar valores en la base de datos
  • Definir la pantalla frontal
  • Registrar el widget

¿Qué estamos creando?

Como mencionamos anteriormente, estamos creando un widget de texto simple que permite al usuario ingresar un título y un texto arbitrario que luego se publicará en la parte delantera de su sitio web donde se coloca el widget.

Widget Constructor

El constructor nos permite inicializar nuestro widget sobrescribiendo la clase principal (clase WP_Widget estándar).



En el código anterior, llamamos a la función constructiva de la clase WP_Widget principal y le pasamos los argumentos de desacuerdo:

  • ID base: un identificador único para el widget. Debe estar en minúsculas. Si se deja vacío, se utilizará una parte del nombre de clase del widget.
  • Nombre: este es el nombre del widget que se muestra en la página de configuración (en el dashborad).
  • Y una matriz (opcional) que contiene un nombre de clase y una descripción. La descripción se muestra en la página de configuración (en el panel de WordPress).

Construyendo la forma de back-end

El formulario de fondo constará de dos campos: un campo de título y un campo de área de texto. Aquí hay una captura de pantalla del formulario que se verá en el panel de Widgets:

Our widgets back-end configuration form

Para generar el formulario anterior, comenzaríamos con HTML puro y luego reemplazaríamos algunos valores de atributo con algunas variables y expresiones de PHP. El siguiente es el código HTML para crear los dos campos:



Para pasar de esto a nuestro código final para la función form (), tendremos que hacer que algunos de los atributos anteriores sean dinámicos, a saber, nombre, id y la etiqueta para el atributo (que tiene que coincidir con el id del HTML que la etiqueta es para). También reemplazaremos el valor del campo de texto y el contenido del campo de área de texto con valores dinámicos de la base de datos si ya se han guardado.

Aquí está el código que terminamos con:



El código anterior accede y asigna valores guardados previamente de la base de datos a dos variables: $title y $message. Luego utilizamos el esc_attr () para codificar los valores devueltos y para evitar romper nuestro código. Luego hacemos eco del atributo $ title en el atributo de valor del campo de texto y echo $ message como el contenido del campo de área de texto.

En el código anterior, notará dos métodos que probablemente sean nuevos para usted: get_field_id () y get_field_name ().

  • get_field_id (): toma el nombre del campo como un argumento y construye atributos de identificación para usar en los campos form (). Asegura que el ID de campo devuelto es único.
  • get_field_name (): toma el nombre de campo como un argumento y construye atributos de nombre para usarlos en los campos de formulario (). Asegura que el nombre del campo devuelto es único.

El atributo de Las etiquetas de clasificación for esta codificado para hacer eco del valor de identificación de los elementos que etiquetan.

La clase widefat se utiliza para garantizar que los campos de tu widget tengan el mismo aspecto que otros campos en todo el panel de WordPress.


Actualizando nuestro Widget (Opciones)

Para actualizar nuestro widget, escribiremos el código apropiado en el método de actualización. Aquí está nuestro código:


La función anterior toma dos parámetros: $ new_instance y $ old_instance

  • $ new_instance es una matriz que contiene la nueva configuración (de esta instancia del widget) que el usuario acaba de ingresar a través del formulario backend que definimos en la función form ().
  • $ old_settings es una matriz que contiene configuraciones antiguas. Estos son los valores que actualmente están almacenados en la base de datos.

La función update () devuelve una serie de configuraciones para guardar o falso para cancelar guardar.

En el código anterior, asignamos $ old_instance a la variable $ instance y reemplazamos sus claves de título y mensaje con valores de $ new_instance. Al devolver la matriz nueva y actualizada, actualizamos efectivamente nuestra configuración de widgets.

La función strip_tags () elimina las etiquetas HTML y PHP de una cadena que se le pasa. Incluimos esta función para evitar una situación en la que los usuarios de su tema no puedan cerrar las etiquetas ingresadas a través del formulario de back-end, lo que provocará que su sitio se rompa (no se renderice correctamente).

Definiendo el front-end

La función widget () es responsable de la visualización del front-end del widget. Se necesitan dos parámetros: $ args y $ instance.

$ args es una matriz que se pasa a la función register_sidebar () cuando se define el área de la barra lateral / widgetizada en la que se coloca el widget. Esto se encuentra en su archivo functions.php. A continuación se muestra un ejemplo de una declaración register_sidebar ():

Sample register_widget declaration

La matriz contiene definiciones de las etiquetas de apertura y cierre para el widget en sí y para el título del widget.

$ instance es una matriz que contiene la configuración para la instancia particular del widget. Estas configuraciones se habrán recuperado de la base de datos.

Hacemos uso de las etiquetas mencionadas anteriormente en el código del widget final a continuación:


En el código anterior, finalmente podemos codificar la interfaz de nuestro widget. Nuestro widget simplemente genera un título y un mensaje arbitrario (texto). El código hace exactamente eso y envuelve el widget en sí mismo y el título del widget dentro de las etiquetas de apertura y cierre definidas en functions.php para el área específica del widget (barra lateral) donde se coloca el widget.

Introducimos la función de extracción () con la que algunos pueden no estar familiarizados. Esta función toma una matriz asociativa y devuelve sus claves como variables. Nos permite hacer eco de $ before_widget en lugar de $ args ['before_widget'], simplificando un poco nuestro código.

La salida final en un sitio web real se verá así:

Our text widget on an actual site

Registro del Widget

El widget debe registrarse con WordPress una vez que se haya definido para que esté disponible en el panel de widgets de nuestro panel de WordPress.

El código final

Para simplificar las cosas para los usuarios finales de nuestros widgets, vamos a envolver nuestro código de widget en un complemento de WordPress para que sea fácil de instalar.

Esto también nos permitirá mantener todo el código que crearemos a lo largo de la serie en un solo archivo.

Aquí está el código final:


Conclusión

En este tutorial, presentamos la serie: Creación de sus propios widgets de WordPress mediante varias API. Echamos un vistazo más profundo a lo que son, cómo funcionan y cómo crear uno.

El propósito de este tutorial fue proporcionar una introducción completa a la API de widgets y proporcionar un widget base a partir del cual se pueden crear los otros widgets de esta serie.

En la siguiente parte de la serie, vamos a crear un widget de publicaciones relacionadas. Mientras tanto, siéntase libre de dejar cualquier pregunta o comentario en el siguiente formulario.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.