Tutorial para crear widgets en WordPress

Los widgets son especies de bloques en tu web que te permiten insertar sidebars a través de una interfaz de arrastre y soltar, es decir, te ayudan a personalizar la apariencia de tu sitio desde cualquier área, por lo tanto, en este post te enseñaremos como crear widgets en WordPress de forma sencilla y rápida.

También, a través de los widgets podrás insertar cualquier cantidad de funciones que mejoran tu sitio. Es decir, puedes añadir tus post más destacados, comentarios, categorías, redes sociales, formularios, mapas y más. Además, lo mejor es que todo estará ubicado dentro de cajas flotantes en la posición que desees.

Tal vez, en ocasiones los widgets que te ofrezcan las plantillas no cumplan tus requerimientos, por lo que será necesario contar con otros que añadan mayores funciones.

Por lo tanto, crear widgets a tu medida es la mejor opción que puedas implementar en tu sitio web. Ya que además optimiza la experiencia de navegación del usuario en la página.

Aunque en la actualidad existen plantillas y temas que te ofrecen los widgets pre instalado. Pero en esta oportunidad, te explicaremos como elaborarlo. Por tal razón, solo necesitarás tener acceso al administrador del escritorio de WordPress, también un editor de texto.

Pasos para crear widgets personalizados

En primer lugar, antes de comenzar a crear widgets para tu web, deberás definir si lo harás como plugin para que sea compatible con el resto de temas. O si solo como archivo functions.php para algo en específico.

Además, otro punto es indicar si el widgets será insertado sobre el sitio de forma directa o bajo prueba local. Luego podrás continuar con lo tarea.

Por lo tanto, para crear estos elementos debes emplear la clase WP_Widget estándar de la API. En tal sentido, esta clase incluye 20 funciones entre las cuales puedes elegir, pero hay otras 4 que deberás utilizar en cada elemento para que se ejecute.

1. __construct() – función constructora
2. widget() salida del widget
3. form() – indica configuración del widget en Escritorio
4. update() – actualiza configuración del widget
5. Crear widget con WP_Widget

Entonces, ya configurado los pasos anteriores, ahora es momento de comenzar con la creación, por lo tanto en esta oportunidad haremos un elemento muy sencillo para que sea fácil de comprender.

Por lo tanto, abre un editor de texto y genera una clase con la base WP_Widget y añade las 4 funciones mencionadas en el punto anterior. En la primera indica la función de construcción en la que se precisa el ID, es decir el nombre del widget:

1. function __construct() {
2. parent::__construct(
3. // widget ID
4. ‘my_widget’,
5. // widget name
6. __(‘My Sample Widget’, ‘ my_widget_domain’),
7. // widget description
8. array( ‘description’ => __( ‘My Widget Tutorial’, ‘my_widget_domain’ ), )
9. );
10. }

Luego se mostrará la apariencia, es decir como se visualizará en el front-end. Por lo tanto, emplea la función widget().

Ya en este punto se habrá configurado la salida del widget y podrá mostrar el “Hello World”.  Por lo tanto, luego se debe programar el back-end a través del modo form ():

1. public function form( $instance ) {
2. if ( isset( $instance[ ‘title’ ] ) )
3. $title = $instance[ ‘title’ ];
4. else
5. $title = __( ‘Default Title’, ‘my_widget_domain’ );
6. ?>

En este punto ya se ha creado la función llamada my_register_widget(), y tiene registrado el widget con el ID especificado en la función de constructor. En tal sentido el código debe verse de la siguiente manera:

1. function my_register_widget() {
2. register_widget( ‘my_widget’ );
3. }
4. add_action( ‘widgets_init’, ‘my_register_widget’ );
5. class my_widget extends WP_Widget {
6. function __construct() {parent::__construct(
7. // widget ID
8. ‘my_widget’,
9. // widget name
10. __(‘My Sample Widget’, ‘ my_widget_domain’),
11. // widget description
12. array( ‘description’ => __( ‘My Widget Tutorial’, ‘my_widget_domain’ ), )
13. );
14. }
15. public function widget( $args, $instance ) {
16. $title = apply_filters( ‘widget_title’, $instance[‘title’] );
17. echo $args[‘before_widget’];
18. //if title is present
19. if ( ! empty( $title ) )
20. echo $args[‘before_title’] . $title . $args[‘after_title’];
21. //output
22. echo __( ‘Hello, World from my.com’,
23. ‘my_widget_domain’ );
24. echo $args[‘after_widget’];
25. }
26. public function form( $instance ) {
27. if ( isset( $instance[ ‘title’ ] ) )
28. $title = $instance[ ‘title’ ];
29. else
30. $title = __( ‘Default Title’, ‘my_widget_domain’ );
31. ?>

Finalmente, ubica en el administrador de WordPress la pestaña apariencia y luego widgets. Además, aquí encontrarás el creado y ya estará disponible para añadir.

Entonces, como resultado de todos los pasos anteriores ya sabes como crear un widgets de forma sencilla. Además, podrás elaborar más avanzados del mismo modo, pero para ello requieres de mayores conocimientos.

Finalmente, aunque parezca difícil este proceso, recuerda que solo deberás prepararte y conocer sobre HTML y PHP.

También te puede interesar:

Tres plugins para reservar en tiendas con WordPress