Saltar al contenido

Cómo crear un widget de WordPress personalizado

Creating a custom WordPress widget

¿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 personalizado de WordPress.

Crear un widget de WordPress personalizado

¿Qué es un widget de WordPress?

Los widgets de WordPress contienen fragmentos de código que puede agregar a las barras laterales de su sitio web o áreas preparadas para widgets. Piense en ellos como módulos que puede usar para agregar diferentes elementos mediante el uso de una interfaz simple de arrastrar y soltar.

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

Widgets de WordPress

WordPress también permite a los desarrolladores crear sus propios widgets personalizados. Muchos temas y complementos de WordPress vienen con sus propios widgets personalizados que puede agregar a sus 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 sus propios widgets personalizados en WordPress.

Video Tutorial

Suscríbase a WPBeginner

Si no le gusta el video o necesita más instrucciones, continúe leyendo.

Crear un widget personalizado en WordPress

Antes de comenzar, sería mejor si crea un complemento específico del sitio donde pegará el código del widget de este tutorial.

También puedes pegar el código en el archivo functions.php de tu tema. Sin embargo, solo estará disponible cuando ese tema en particular esté activo.

En este tutorial, crearemos un widget simple que simplemente reciba a los visitantes. Eche un vistazo a este código y luego péguelo en el complemento específico de su sitio para verlo en acción.


// Register and load the widget
function wpb_load_widget() {
	register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );

// Creating the widget 
class wpb_widget extends WP_Widget {

function __construct() {
parent::__construct(

// Base ID of your widget
'wpb_widget', 

// Widget name will appear in UI
__('WPBeginner Widget', 'wpb_widget_domain'), 

// Widget description
array( 'description' => __( 'Sample widget based on WPBeginner Tutorial', 'wpb_widget_domain' ), ) 
);
}

// Creating widget front-end

public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );

// before and after widget arguments are defined by themes
echo $args['before_widget'];
if ( ! empty( $title ) )
echo $args['before_title'] . $title . $args['after_title'];

// This is where you run the code and display the output
echo __( 'Hello, World!', 'wpb_widget_domain' );
echo $args['after_widget'];
}
		
// Widget Backend 
public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) ) {
$title = $instance[ 'title' ];
}
else {
$title = __( 'New title', 'wpb_widget_domain' );
}
// Widget admin form
?>

Después de agregar el código, debe dirigirse a Apariencia »Widgets página. Notará el nuevo WPBeginner Widget en la lista de widgets disponibles. Debe arrastrar y soltar este widget en una barra lateral.

Widget personalizado de WordPress agregado a una barra lateral

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

Vista previa de su widget personalizado

Ahora estudiemos el código nuevamente.

Primero registramos el "wpb_widget" y cargamos nuestro widget personalizado. Después de eso, definimos qué 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 es posible que desee preguntar. Por ejemplo, ¿para qué sirve wpb_text_domain?

WordPress usa gettext para manejar la traducción y localización. Este wpb_text_domain y __e le dice a gettext que haga que una cadena esté disponible para traducción. Vea cómo puede encontrar temas de WordPress listos para la traducción.

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

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

Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver videos tutoriales de WordPress. También nos puede encontrar en Twitter y Facebook.

.