Cómo crear un widget de WordPress personalizado

¿Quieres crear tus propios widgets personalizados en WordPress? Los widgets le permiten arrastrar y soltar elementos en cualquier barra lateral o área lista para widgets de su sitio web. En este artículo, le mostraremos cómo crear fácilmente un widget de WordPress personalizado.

¿Qué es un widget de WordPress?

Los widgets de WordPress contienen fragmentos de código que puedes añadir a las barras laterales de tu sitio web o a las áreas preparadas para widgets. Piense en ellos como módulos que puede utilizar para añadir diferentes elementos utilizando una simple interfaz de arrastrar y soltar.

Por defecto, WordPress viene con un conjunto estándar de widgets que puedes usar con cualquier tema de WordPress. Vea nuestra guía para principiantes sobre cómo agregar y usar widgets en WordPress.

WordPress también permite a los desarrolladores crear sus propios widgets personalizados. Muchos temas y plugins de WordPress vienen con sus propios widgets personalizados que puedes añadir a tus barras laterales.

Por ejemplo, puede agregar un formulario de contacto, un formulario de inicio de sesión personalizado o una galería de fotos a una barra lateral sin escribir ningún código.

Dicho esto, veamos cómo crear fácilmente tus propios widgets personalizados en WordPress.

Video Tutorial

Suscribirse a AprenderWP

Si no te gusta el video o necesitas más instrucciones, entonces continúa leyendo.

Creación de un widget personalizado en WordPress

Antes de empezar, lo mejor es que crees un plugin específico para el sitio donde pegarás el código del widget de este tutorial.

También puede pegar el código en el archivo functions.php de su tema. Sin embargo, sólo estará disponible cuando ese tema en particular esté activo.

En este tutorial, crearemos un widget simple que sólo saluda a los visitantes. Echa un vistazo a este código y pégalo en el plugin específico de tu sitio para verlo en acción.

1234567891011121314141516161718192021222324252526272829303132333435363738394041424344453444546474849505152535556565759606162// Registrar y cargar la función widgetwpb_load_widget() { register_widgetget( wpb_widget);addd_action( widgets_init, wpb_load_widget); // Crear el widget classwpb_widget extiendeWP_Widget { function__construct() {parent::__construct( // Base ID de su widgetwpb_widget, // El nombre del widget aparecerá en UI__(AprenderWP Widget, wpb_widget_domain), // Widget descriptionarray(description=> __( Sample widget based on AprenderWP Tutorial, wpb_widget_domain), );};} // Creación de widgets front-end publicfunctionwidget( $args, $instance) {$title= apply_filters( widget_title, $instance[title]); // antes y después de que los argumentos del widget sean definidos por themesecho$args[before_widget]; if(!empty( $title) )echo$args[before_title] . $title. $args[after_title]; // Aquí es donde se ejecuta el código y se muestra el outputecho__(Hello, World!, wpb_widget_domain);echo$args[after_widget];}         // Widget Backend publicfunctionform( $instance) {if( isset( $instance[ title] ) ) DIFUNDE LA PALABRA->get_field_id(title); ?>==$instance[title];}el resto{$title= __( `Nuevo título, `wp_widget_domain);}// Formulario de administración de widgets?>get_field_id(title); ?>">"> "name="get_field_name(title); ?>"type="text="value=""/><?php }}".     // Actualizando el widget reemplazando instancias antiguas con newpublicfunctionupdate( $new_instance, $old_instance) {$instance= array();$instance[title] = (!empty( $new_instance[title]) ) ? strip_tags( $new_instance[title]) : ;return$instance;}}. // La clase wpb_widget termina aquí

Después de añadir el código, debe dirigirse a la página Apariencia " Widgets . Notarás el nuevo Widget de AprenderWP en la lista de widgets disponibles. Necesitas arrastrar y soltar este widget a una barra lateral.

Ahora puede visitar su sitio web para verlo en acción.

Ahora vamos a estudiar el código otra vez.

Primero registramos elwpb_widget y cargamos nuestro widget personalizado. Después de eso definimos lo que hace ese widget, y cómo mostrar el back-end del widget.

Por último, definimos cómo manejar los cambios realizados en el widget.

Ahora hay algunas cosas que usted podría querer preguntar. Por ejemplo, ¿cuál es el propósito del dominio wpb_text_domain?

WordPress utiliza gettext para manejar la traducción y la localización. Este wpb_text_domain y __e le dice a gettext que ponga una cadena a disposición para su traducción. Vea cómo puede encontrar temas de WordPress listos para traducir.

Si está creando un widget personalizado para su tema, puede sustituir wpb_text_domain por el dominio de texto de su tema.

Esperamos que este artículo le haya ayudado a aprender a crear fácilmente un widget de WordPress personalizado. También puede ver nuestra lista de los widgets de WordPress más útiles para su sitio.

Si te ha gustado este artículo, suscríbete a nuestros tutoriales de vídeo de YouTube Channel for WordPress. También puede encontrarnos en Twitter y Facebook.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir