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

Introducción a la Creación de tu Primer Widget para Wordpress

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called Introduction to Creating Your First WordPress Widget.
Coding and Registering Your WordPress Widget

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

Para los no programadores de WordPress, los widgets son ideales. Te permiten añadir menus, listas, feeds, texto y mucho más a las áreas de widget que no se limitan sólo a la barra lateral. Muchos temas incluyen áreas de widget en el pié, y los grandes frameworks siempre tienen áreas de widget en varias ubicaciones como el encabezado además de antes y después del contenido.

En eta serie de cinco tutoriales te mostraré los pasos necesarios para crear tu primer widget. Veremos:

En esta parte te introduciré en los widget y en la Widgets API.

Creando Widgets

Para crear un widget tienes que extender la clase WP_Widget que incluye un número de funciones:

  • una función para procesar el widget
  • una función para mostrar un formulario para el widget en la pantalla de gestión de Widgets
  • una función que habilita la configuración del widget para que sea actualizada por los usuarios
  • una función para mostrar el widget en cualquier área de widget a que se añada.

Además de hacer esto, utilizarás la función register_widget() para registrar el widget que has creado.

Puedes poner bastantes cosas dentro de un widget - texto estático, la salida de una consulta a la base de datos, un feed de otro sitio web y más. Sin embargo es importante recordar que los usuarios esperan widget que encajen en un área definida de la página, por lo que la salida de tus widgets no debe ser muy grande.

WordPress ya viene con un array de widgets incorporados, por lo que antes de empezar a escribir código, comprueba que no existe en el core de WordPress.

En esta serie de tutoriales voy a crear un widget de un plugin que desarrollé para un tutorial anterior: creando una barra lateral de navegación contextual. En ese tutorial desarrollé una función en la que los usuario con algún conocimiento de programación pueden soltar en su tema o agregar a un hook, pero puede ser más fácil para los usuarios si pueden añadirlo a través de un widget.

La Widgets API

La Widgets API Incluye las funciones que necesitarás para crear tu widget. Vamos a ver cada una de ellas.

En primer lugar, hay cuatro funciones para widgets:

  • is_active_widget(): una etiqueta condicional que comprueba si un widget está activo. No te confundas con is_active_sidebar(), que comprueba si los widgets se han añadido a un área de widget específica.
  • the_widget(): una etiqueta de plantilla que muestra un widget fuera de las áreas de widget.
  • register_widget(): la función para registrar un widget, que usaré más adelante en esta serie de tutoriales.
  • unregister_widget(): anula el registro de un widget, lo que significa que no estará disponible para los usuario a través de la pantalla de Widgets.

También hay 5 funciones internas:

  • wp_register_widget_control(): Crea los controles en la pantalla de Widgets para que los usuarios puedan modificar la configuración del widget.
  • wp_unregister_widget_control(): registra el control del widget que ha sido registrado mediante wp_register_widget_control().
  • wp_convert_widget_settings(): convierte la configuración de un widget individual a múltiples widgets.
  • wp_get_widget_defaults(): función del core, no debe ser utilizada por los desarrolladores de plugins o temas.
  • wp_widget_description(): crea una descripción del widget que se mostrará en la pantalla de Widgets.

Para acceder a estas funciones internas, debes usar la clase WP_Widget. Esta es una clase constructora, que puedes extender para crear widgets adicionales.

Sumario

Espero que este tutorial de introducción haya despertado tu apetito para crear tus propios widgets. En el próximo tutorial te mostraré cómo codificar tu widget y registrarlo.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

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.