¿Quieres crear tus propios widgets personalizados en WordPress? Los widgets le permiten agregar elementos que no son de contenido en una barra lateral o en cualquier área de su sitio web lista para widgets.
Puede usar widgets para agregar pancartas, anuncios, formularios de suscripción a boletines y otros elementos en su sitio web.
En este artículo, le mostraremos cómo crear un widget de WordPress personalizado, paso a paso.
Nota: Este tutorial es para usuarios DIY de WordPress que están aprendiendo desarrollo y codificación de WordPress.
¿Qué es un widget de WordPress?
Los widgets de WordPress contienen piezas de código que puede agregar a las barras laterales de su sitio web o áreas listas para widgets.
Piense en ellos como módulos que puede usar para agregar diferentes elementos y características a su sitio.
De forma predeterminada, WordPress viene con un conjunto estándar de widgets que puede usar con cualquier tema de WordPress. Para obtener más detalles, consulte 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 complementos premium 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, una galería de fotos, un formulario de registro de lista de correo electrónico y más, a una barra lateral sin escribir ningún código.
Dicho esto, veamos cómo puede crear fácilmente sus propios widgets personalizados en WordPress.
Antes de crear un widget personalizado en WordPress
Si está aprendiendo a codificar WordPress, necesitará un entorno de desarrollo local. Esto le da la libertad de aprender y probar cosas sin la preocupación de que su sitio esté activo.
Puede instalar WordPress localmente en Mac usando MAMP o Windows usando WAMP.
Si ya tiene un sitio en vivo, puede moverlo a un host local. Para obtener más detalles, consulte nuestra guía sobre cómo mover un sitio de WordPress en vivo a un servidor local.
Después de eso, hay varias formas de agregar su código de widget personalizado en WordPress.
Idealmente, puede crear un complemento específico del sitio y pegar el código de su widget allí. Esto le permite agregar código a WordPress que no depende de su tema de WordPress.
También puede pegar el código en el archivo functions.php de su tema. Sin embargo, solo estará disponible cuando ese tema en particular esté activo.
Otra herramienta que puedes utilizar es el Fragmentos de código complemento que le permite agregar fácilmente código personalizado a su sitio web de WordPress.
En este tutorial, crearemos un widget simple que solo saluda a los visitantes. El objetivo aquí es familiarizarse con la clase de widgets de WordPress.
¿Listo? Empecemos.
Crear un widget básico de WordPress
WordPress viene con una clase de widget de WordPress incorporada. Cada nuevo widget de WordPress amplía la clase de widget de WordPress.
Hay 18 métodos mencionados en el manual del desarrollador de WordPress que se pueden usar con el Clase de widget de WP.
Sin embargo, por el bien de este tutorial, nos centraremos en los siguientes métodos.
- __construct() : Esta es la parte donde creamos el ID, el título y la descripción del widget.
- widget: aquí es donde definimos la salida generada por el widget.
- formulario: esta parte del código es donde creamos el formulario con opciones de widget para backend.
- actualización: esta es la parte donde guardamos las opciones de widgets en la base de datos.
Estudiemos el siguiente código donde hemos usado estos cuatro métodos dentro de la clase WP_Widget.
// Creating the widget
class wpb_widget extends WP_Widget {
// The construct part
function __construct() {
}
// Creating widget front-end
public function widget( $args, $instance ) {
}
// Creating widget Backend
public function form( $instance ) {
}
// Updating widget replacing old instances with new
public function update( $new_instance, $old_instance ) {
}
// Class wpb_widget ends here
}
La parte final del código es donde registraremos el widget y lo cargaremos dentro de WordPress.
function wpb_load_widget() {
register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );
Ahora pongamos todo esto junto para crear un widget básico de WordPress.
Puede copiar y pegar el siguiente fragmento de código en su archivo functions.php, en un complemento específico del sitio o utilizando un complemento de fragmentos de código.
// 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
?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
</p>
<?php
}
// Updating widget replacing old instances with new
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
return $instance;
}
// Class wpb_widget ends here
}
// Register and load the widget
function wpb_load_widget() {
register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );
Después de agregar el código a WordPress, debe dirigirse a la Apariencia » Widgets página en su panel de administración de WordPress.
Luego, haga clic en el ícono de agregar bloque ‘Plus’ y busque ‘WPBeginner Widget’ y seleccione el nuevo widget.
Este widget solo tiene un campo de formulario para completar.
Puede agregar su texto y hacer clic en el botón ‘Actualizar’ para almacenar sus cambios.
Ahora, puede visitar su sitio web de WordPress para ver el widget personalizado en acción.
Agregar widget personalizado en el editor clásico de WordPress
Si está utilizando el editor de widgets clásico para agregar nuevos widgets a su sitio, el proceso será similar.
Habrá un nuevo widget llamado ‘WPBeginner Widget’ en la lista de widgets disponibles. Debe arrastrar y soltar este widget en su barra lateral.
Luego, ingrese un título y haga clic en ‘Guardar’ para guardar la configuración de su widget.
Su nuevo widget personalizado ahora estará activo en su sitio web.
Ahora, estudiemos el código de nuevo.
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 tal vez quieras preguntar. Por ejemplo, ¿cuál es el propósito de 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 una cadena disponible para traducir. Para obtener más información, consulte nuestra guía sobre cómo puede encontrar temas de WordPress listos para traducir.
Si está creando un widget personalizado para su tema, puede reemplazar wpb_text_domain con el dominio de texto de tu tema.
Alternativamente, puede usar un complemento de traducción de WordPress para traducir WordPress fácilmente y crear un sitio de WordPress multilingüe.
Esperamos que este artículo le haya ayudado a aprender cómo crear fácilmente un widget de WordPress personalizado. Es posible que también desee ver nuestra guía sobre la diferencia entre un nombre de dominio y un alojamiento web y nuestras selecciones de expertos sobre el mejor alojamiento web gratuito comparado.
.