Cómo crear un widget personalizado para WordPress (paso a paso)

¿Quieres crear tus propios widgets personalizados en WordPress?

Los widgets permiten añadir elementos ajenos al contenido en una barra lateral o en cualquier zona de su sitio web preparada para widgets. Puede utilizar widgets para añadir banners, anuncios, formularios de suscripción a boletines y otros elementos a su sitio web.

En este artículo, le mostraremos cómo crear un widget personalizado para WordPress, paso a paso.

Nota: Este tutorial es para los usuarios de WordPress DIY que están aprendiendo el desarrollo de WordPress y el código.

¿Qué es un widget de WordPress?

Los widgets de WordPress contienen fragmentos de código que puede añadir a las barras laterales de su sitio web o a las zonas preparadas para widgets.

Piense en ellos como módulos que puede utilizar para añadir diferentes elementos y características a su sitio.

Por defecto, WordPress viene con un conjunto estándar de widgets que puedes usar con cualquier tema de WordPress. Para más detalles, consulta nuestra guía para principiantes sobre cómo añadir y utilizar widgets en WordPress.

WordPress también permite a los desarrolladores crear sus propios widgets personalizados.

Muchos temas y plugins premium de WordPress vienen con sus propios widgets personalizados que puedes añadir a tus barras laterales.

Por ejemplo, puede añadir un formulario de contacto, un formulario de acceso personalizado, una galería de fotos, un formulario de suscripción a una lista de correo electrónico y mucho 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 programar con WordPress, necesitará un entorno de desarrollo local. Esto te da la libertad de aprender y probar cosas sin la preocupación de que tu sitio esté activo.

Puedes instalar WordPress localmente en Mac usando MAMP o en Windows usando WAMP.

Si ya tienes un sitio activo, puedes trasladarlo a un alojamiento local. Para obtener más información, consulta nuestra guía sobre cómo trasladar un sitio de WordPress activo a un servidor local.

Después de eso, hay varias maneras de añadir su código de widget personalizado en WordPress.

Lo ideal es crear un plugin específico para cada sitio y pegar allí el código del widget. Esto le permite añadir 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 puede utilizar es el plugin WPCode que le permite añadir fácilmente código personalizado a su sitio web WordPress.

En este tutorial, vamos a crear un widget simple que sólo da la bienvenida a los visitantes. El objetivo aquí es familiarizarse con la clase widget de WordPress.

¿Preparados? Primeros pasos.

Creación de un widget básico de WordPress

WordPress viene con una clase Widget de WordPress incorporada. Cada nuevo widget de WordPress extiende la clase widget de WordPress.

Hay 19 métodos mencionados en el manual del desarrollador de WordPress que se pueden utilizar con la clase WP Widget.

Sin embargo, para este tutorial, nos centraremos en los siguientes métodos.

• __construct() : Esta es la parte en la que 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 la administración / escritorio.
• actualización: Aquí es donde guardamos las opciones del widget en la base de datos.

Para crear un widget personalizado, puede copiar y pegar el siguiente fragmento de código en su archivo functions. php o en un plugin específico del sitio.

<?php

// 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', 'textdomain' ),

			// Widget description
			[
				'description' => __( 'Sample widget based on WPBeginner Tutorial', 'textdomain' ),
			]
		);
	}

	// 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!', 'textdomain' );
		echo $args['after_widget'];
	}

	// Widget Settings Form
	public function form( $instance ) {
		if ( isset( $instance['title'] ) ) {
			$title = $instance['title'];
		} else {
			$title = __( 'New title', 'textdomain' );
		}

		// Widget admin form
		?>
        <p>
            <label for="<?php echo $this->get_field_id( 'title' ); ?>">
				<?php _e( 'Title:', 'textdomain' ); ?>
            </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' );

Una manera más fácil de añadir código personalizado a su sitio de WordPress es mediante el uso de WPCode. Es el mejor plugin de fragmentos de código que ayuda a gestionar e insertar fragmentos de código en su sitio sin riesgo de romper nada.

Primero, necesitarás instalar y activar el plugin WPCode en tu sitio. Si necesitas ayuda, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Una vez activado, puede dirigirse a Fragmentos de código ” + Añadir fragmento desde el panel de administrador de WordPress. Desde aquí, seleccione la opción “Añadir su código personalizado (nuevo fragmento)”.

A continuación, puede pegar el código del widget personalizado en el área Vista previa del código.

También tendrá que hacer clic en el menú desplegable “Tipo de código” y seleccionar la opción “Fragmento de código PHP”.

A continuación, puede desplazarse hacia abajo y seleccionar el método de inserción de su código.

WPCode te permite elegir dónde ejecutar el código. Para este tutorial, puede utilizar las opciones por defecto y ejecutarlo en todas partes.

Una vez hecho esto, puedes volver a desplazarte hasta la parte superior para guardar el fragmento de código.

Para activar el fragmento de código, basta con hacer clic en el conmutador a Activo.

Para obtener más información, consulte nuestra guía sobre cómo añadir código personalizado al sitio de WordPress.

Después de añadir el código a WordPress, tienes que ir a la página Apariencia ” Widgets en tu panel de administrador de WordPress.

A continuación, haz clic en el icono de añadir bloque “Más”, busca “WPBeginner Widget” y selecciona el nuevo widget.

Este widget solo tiene un campo de formulario para rellenar.

Puede añadir su texto y hacer clic en el botón “Actualizar” para guardar los cambios.

Ahora, puede visitar su sitio web WordPress para ver el widget personalizado en acción.

Añadir widget personalizado en el editor clásico de WordPress

Si utilizas el editor de widgets clásico para añadir nuevos widgets a tu sitio, el proceso será similar.

Habrá un nuevo widget llamado ‘WPBeginner Widget’ en la lista de widgets disponibles. Tienes que arrastrar y soltar este widget en tu barra lateral.

A continuación, introduce un título y haz clic en “Guardar” para guardar los ajustes del widget.

Tu nuevo widget personalizado ya estará activo en tu sitio web.

Estudiemos de nuevo el código.

Primero, registramos el ‘wpb_widget’ y cargamos nuestro widget personalizado. Después, definimos qué hace ese widget y cómo mostrar la parte de atrás del widget.

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

Ahora bien, hay algunas cosas que quizá quieras preguntarte. Por ejemplo, ¿cuál es el propósito de textdomain?

WordPress utiliza ‘gettext’ para gestionar la traducción y localización. Este textdomain y _e le dice a ‘gettext’ que haga una cadena disponible para la traducción. Para obtener más información, consulte nuestra guía sobre cómo encontrar temas de WordPress listos para la traducción.

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

Como alternativa, puede utilizar un plugin de traducción de WordPress para traducir WordPress fácilmente y crear un sitio de WordPress multilingüe.

Esperamos que este artículo te haya ayudado a aprender cómo crear fácilmente un widget personalizado para WordPress. Puede que también quieras ver nuestra guía sobre la diferencia entre un nombre de dominio y el alojamiento web y nuestras selecciones de expertos sobre el mejor alojamiento de sitios web gratuito comparado.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.