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

Cómo crear widgets personalizados de WordPress

by
Read Time:5 minsLanguages:

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

Construir widgets de WordPress es como construir un plugin, pero es más simple y directo. Todo lo que necesitas es tener un solo archivo en el cual va todo el PHP y es más fácil de codificar que un plugin que puede tener más de un archivo. Hay tres funciones principales de un widget que pueden desglosarse en widget, update y form.

  • function widget()
  • function update()
  • function form()

Estructura básica

El esquema básico de nuestro widget es muy simple y hay un puñado de funciones que necesitarás conocer. La estructura mínima de nuestro widget es algo así:


Paso 1

Antes de hacer todo eso, primero cargaremos nuestro widget cuando sea necesario mediante la función "widget_init". Este es un gancho de acción y puedes encontrar más sobre él en el codex de WordPress.

Lo siguiente que haremos es registrar nuestro widget en WordPress para que esté disponible en la sección de widgets.


Paso 2

Incluiremos nuestro widget en una clase. ¡El nombre de la clase es importante! Una cosa que debe tenerse en cuenta es que el nombre de la clase y el nombre de la función deben ser los mismos.

Ahora pasaremos algunos parámetros de ajuste a esta clase. Por ejemplo, podemos pasar esto por el ancho y la altura. También podemos dar a nuestro widget una pequeña descripción si queremos, lo cual es útil si lo unes a tu tema comercial.

Ahora que hemos completado los requisitos básicos de nuestro widget, centraremos nuestra atención en las tres funciones de las que hablamos antes, ¡que son las funciones importantes o los principales bloques de construcción de nuestro widget!


Paso 3 Function Widget()

La primera función está relacionada con la visualización de nuestro widget. Pasaremos un par de argumentos a nuestra función de widget. Pasaremos argumentos del tema, que pueden ser un título y otros valores específicos. A continuación pasamos la variable de instancia, que está relacionada con la clase de nuestra función.

Después de eso extraeremos los valores del argumento porque queremos que los valores estén disponibles localmente. ¡Si no sabes de qué se trata esta variable local, no te preocupes ahora mismo y simplemente añade este paso!

A continuación estableceremos el título y otros valores para nuestro widget, que pueden ser editados por el usuario en el menú de widgets. También incluimos las variables especiales como $before_widget, $after_widget. Estos valores se manejan por el tema.


Paso 4 Update Function()

Lo siguiente es la función de actualización. Esta función tomará los ajustes del usuario y los guardará. Solo actualizará los ajustes según el gusto del usuario.

Una cosa a tener en cuenta aquí es que estamos quitando los valores para que cualquier XHTML pueda ser eliminado del texto, lo que, en palabras simples, podría afectar el funcionamiento de nuestro widget.


Paso 5 Form Function()

El siguiente paso esbozará la creación de la forma que servirá como cuadro de entrada. Esto tomará los ajustes y valores definidos por el usuario. La función de formulario puede incluir casillas de verificación, casillas de entrada de texto, etc.

Antes de crear estos campos de entrada, tendremos que decidir qué mostrar cuando el usuario no seleccione nada del widget. Para ello le pasaremos algunos valores por defecto como el título, la descripción, etc.

Ahora crearemos el cuadro de texto de entrada. Incluiremos estas opciones en el párrafo que acompaña a la etiqueta.

Conclusión

Y eso es todo. Acabas de hacerte un widget muy bonito y sencillo que muestra el nombre del autor del blog. Además, da la opción al usuario de mostrarlo públicamente al público o no. Guarda el código en un archivo PHP y súbelo a tu directorio de temas. Llámalo en tus functions.php. Después de eso ve a tu panel de widgets y verás el widget recién creado.

Todo el código está incluido en el archivo de descarga para que sea más fácil de copiar y pegar. ¡Diviértete!

Advertisement
Did you find this post useful?
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.