WordPress

¿Cómo crear un widgets personalizado en WordPress?

Introducción

¿Sabías que puedes crear tus propios widgets WordPress? Aunque hay muchas plantillas que vienen ya con cientos de widgets pre-instaladados, WordPress te permite crear tu propio widget. En este tutorial de WordPress te vamos a mostrar cómo implementar un widget básico en WordPress. Sé que puede parecer intimidante, pero déjame decirte que lo único que vas a necesitar es un conocimiento básico de WordPress y PHP. Sin más que agregar, comencemos.

¿Qué necesitas?

Antes de comenzar con estes tutorial vas a necesitar:

  • Acceso como administrador al Escritorio de WordPress
  • Un editor de texto

Sobre los Widgets WordPress

La idea de los widgets en WordPress es hacernos la vida más sencilla la hora de agregar elementos utilizando una interfaz de arrastrar y soltar. Una simple instalación de WordPress ya cuenta con varios widgets los cuales son compatibles con todos los Temas de WordPress. Pero, hay ocasiones en las que estos widgets no ofrecen a funcionalidad que estamos buscando. Y aunque hoy en dia existen miles Plugins que nos ayudan, en ciertos momentos ni estos nos pueden ayudar. Ahí es cuando debemos crear widgets personalizados en WordPress.

Preparando las bases

Antes de crear un widget personalizado en WordPress debemos decidir si lo vamos a crear como plugin, para que funcione en todas las plantillas que lo tengan instalado o como simple widget agregado en el archivo functions.php para un tema en específico. Luego de estos deberás decidir si el widget será agregado directamente en el sitio web o en un ambiente de pruebas local. Es recomendable que se haga en un ambiente local. Una vez que esté funcionando correctamente lo puedes migrar al sitio web.

¿Cómo funcionan los widgets personalizados de WordPress?: API de Widget

WordPress te permite crear widgets personalizados proporcionando el API de Widgets. Deberás utilizar la clase WP_Widget estándar de la API para poder crear cualquier widget personalizado. Esta clase cuenta con alrededor de 20 funciones con las cuales podrás jugar. Fuera de esto, hay 4 funciones que debes utilizar en cada widget para que funcione. Estas funciones son:

  • __construct() – función constructora
  • widget() la salida contiene el widget
  • form() – determina la configuración del widget en el Escritorio de WordPress
  • update() – actualiza la configuración del widget

Claro que existen otros métodos para agregar otras funciones. Para más información de la clase WP_Widget visita esta página.

Creación de widget personalizado de WordPress

IMPORTANTE: Es muy recomendable realizar un respaldo de todo el sitio antes de continuar. Adicional a esto, debes utilizar un tema hijo de WordPress

Una vez tengamos implementada las bases es momento de comenzar a implementar. En este tutorial crearemos un widget personalizado muy sencillo, Hello World o Hola Mundo. Una vez entiendas como hacerlo podrás realizar widget más complejos por tu cuenta.
Algo más: estamos escribiendo estos código en el archivo functions.php que se encuentra en nuestra plantilla. Pero también se puede hacer en un plugin personalizado.
Es momento de abrir un editor de texto y crear una nueva clase con la base de WP_Widget:

Ahora implementaremos las 4 funciones mencionadas con anterioridad. La 1ra será la función constructora, con la cual determinaremos el ID, el nombre del widget como aparecerá en la UI y la descripción:

A continuación veremos la apariencia del widget. Como se verá en el front-end. Esto lo haremos con la función widget():

Aquí, hemos configurado la salida de nuestro widget para que muestre el término ‘Hello World!’, Y muestra el título del widgets wordpress según lo especificado por el usuario.

Ahora, tenemos que programar el back-end del widget usando el método form ():

Hay una cosa más que queda por hacer aquí: necesitas usar una función adicional para registrar el widget con WordPress:

Observe que las líneas anteriores tienen que colocarse fuera de la función hstngr_widget.

Hemos definido una nueva función llamada hstngr_register_widget(), que registra nuestro widget usando el ID del widget, especificado en la función the__construct(). Entonces, hemos atado esta función usando widgets_init, que carga este widget en WordPress a través del método add_action() incorporado. Su código personalizado de WordPress debería verse así:

Ahora, dirígete al área de administración de WordPress y ve a Apariencia ->Widgets. Podras ver un widget llamado Hostinger Sample Widget, el mismo estará disponible en la lista de widgets.
widgets wordpress

Desde aquí podrás arrastrar el widget a la Barra lateral. Una vez este todo salvado podrás ver el widgets wordpress funcionando en tu sitio web.
Así haz creado tu primer widget personalizad de WordPress.

Conclusión

Puede pensarse que el crear widgets wordpress personalizado es una tarea muy difícil, pero en realidad si tienes algo de conocimientos en HTML y PHP no es nada difícil. Cómo pudiste ver en este tutorial, con unos simples pasos pudimos crear nuestro widget.

Agrega un Comentario

Dale clic aquí para dejar un comentario

Únete a cientos de suscriptores en todo el mundo

y consigue increíbles tutoriales y descuentos en tu email

Please wait...

¡Gracias por registrarte!

Comienza a ahorrar hoy mismo!

Alojamientos con todo incluido y nombre de dominio po

AR$36
00
/mes