Los widgets te permiten agregar elementos que no son de contenido a una barra lateral o cualquier área preparada para widgets en tu sitio de WordPress. Puedes usarlos para agregar banners, anuncios, formularios de suscripción a boletines y otros elementos a tu sitio web.
También puedes crear un widget personalizado para incrustar funciones únicas con un toque personalizado, como fuentes de redes sociales, publicaciones recientes o etiquetas HTML.
En WPBeginner, usamos widgets personalizados para mostrar diferentes tipos de contenido en la barra lateral de nuestro sitio web. Y en este artículo, te mostraremos cómo crear un widget personalizado de WordPress, paso a paso.
Nota: Este tutorial es para usuarios de WordPress que aprenden desarrollo y codificación de WordPress. están aprendiendo WordPress.
¿Qué es un widget de WordPress?
Los widgets de WordPress contienen fragmentos de código que puedes agregar a las barras laterales o áreas preparadas para widgets de tu sitio web.
Piénsalos como módulos que puedes usar para agregar diferentes elementos y funciones a tu 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 agregar y usar widgets en WordPress.
WordPress también permite a los desarrolladores crear sus propios widgets personalizados.
Muchos temas de WordPress y plugins premium vienen con sus propios widgets personalizados que puedes agregar a tus barras laterales.
Por ejemplo, puedes agregar un formulario de contacto, un formulario de inicio de sesión personalizado, una galería de fotos, un formulario de registro para lista de correo electrónico, y más a una barra lateral sin escribir ningún código.
Dicho esto, veamos cómo puedes crear fácilmente tus propios widgets personalizados en WordPress.
Antes de crear un widget personalizado en WordPress
Si estás aprendiendo a programar en WordPress, necesitarás un entorno de desarrollo local. Esto te da la libertad de aprender y probar cosas sin preocuparte de que tu sitio esté en línea.
Puedes instalar WordPress localmente en Mac usando MAMP o Windows usando WAMP.
Si ya tienes un sitio en vivo, puedes moverlo a un host local. Para más detalles, consulta nuestra guía sobre cómo mover un sitio de WordPress en vivo a un servidor local.
Después de eso, hay varias maneras de agregar tu código de widget personalizado en WordPress.
Idealmente, puedes crear un plugin específico del sitio y pegar tu código de widget allí. Esto te permite agregar código a WordPress que no depende de tu tema de WordPress.
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.
Otra herramienta que puedes usar es el plugin WPCode, que te permite agregar fácilmente código personalizado a tu sitio web.
En este tutorial, crearemos un widget simple que solo saluda a los visitantes. El objetivo aquí es familiarizarte con la clase de widgets de WordPress.
¿Listo? Empecemos.
Creación de un Widget Básico de WordPress
WordPress viene con una clase de Widget de WordPress incorporada. Cada nuevo widget de WordPress extiende la clase de widget de WordPress.
Hay 19 métodos mencionados en el manual del desarrollador de WordPress que se pueden usar con la clase WP Widget.
Sin embargo, para este tutorial, nos centraremos en los siguientes métodos.
- __construct() : Esta es la parte donde creamos el ID del widget, el título y la descripción.
- widget : Aquí es donde definimos la salida generada por el widget.
- form : Esta parte del código es donde creamos el formulario con las opciones del widget para el backend.
- update: Esta es la parte donde guardamos las opciones del widget en la base de datos.
Para crear un widget personalizado, puedes copiar y pegar el siguiente fragmento de código en tu archivo functions.php o en WPCode (recomendado):
<?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' );
La forma más fácil de agregar código personalizado a tu sitio de WordPress es usando WPCode. Es el mejor plugin de fragmentos de código que ayuda a administrar e insertar fragmentos de código en tu sitio sin arriesgarte a 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.
Tras la activación, puedes ir a Fragmentos de código » + Agregar fragmento desde el panel de administración de WordPress. Desde aquí, selecciona la opción ‘Agregar tu código personalizado (Nuevo fragmento)’.
Después de eso, puedes pegar el código del widget personalizado en el área de Vista previa del código.
También necesitarás hacer clic en el menú desplegable ‘Tipo de código’ y seleccionar la opción ‘Fragmento de PHP’.
A continuación, puedes desplazarte hacia abajo y seleccionar el método de inserción para tu código.
WPCode te permite elegir dónde ejecutar el código. Para este tutorial, puedes usar las opciones predeterminadas y ejecutarlo en todas partes.
Una vez hecho esto, puedes desplazarte hacia arriba para Guardar el fragmento.
Para activar el fragmento, simplemente haz clic en el interruptor a ‘Activo’.
Para obtener más información, consulta nuestra guía sobre cómo agregar código personalizado a tu sitio de WordPress.
Después de agregar el código a WordPress, debes dirigirte a la página Apariencia » Widgets en tu panel de administración de WordPress.
Luego, haz clic en el ícono de agregar bloque ‘Más’, busca ‘Widget de WPBeginner’ y selecciona el nuevo widget.
Este widget solo tiene un campo de formulario para completar.
Puedes agregar tu texto y hacer clic en el botón ‘Actualizar’ para guardar tus cambios.
Ahora, puedes visitar tu sitio web de WordPress para ver el widget personalizado en acción.
Aquí tienes un ejemplo de cómo se ve en nuestro sitio de demostración.
Agregar un widget personalizado en el editor clásico de WordPress
Si estás utilizando el editor de widgets clásico para agregar nuevos widgets a tu sitio, el proceso será similar.
Habrá un nuevo widget llamado ‘Widget de WPBeginner’ en la lista de widgets disponibles. Debes arrastrar y soltar este widget en tu barra lateral.
Luego, ingresa un título y haz clic en ‘Guardar’ para guardar la configuración de tu widget.
Tu nuevo widget personalizado ahora estará activo en tu sitio web.
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 panel de administración del widget.
Por último, definimos cómo manejar los cambios realizados en el widget.
Ahora, hay algunas cosas que podrías querer preguntar. Por ejemplo, ¿cuál es el propósito de textdomain?
WordPress usa 'gettext' para manejar la traducción y localización. Este textdomain y _e le dicen a 'gettext' que haga una cadena disponible para traducción. Para aprender más, consulta nuestra guía sobre cómo puedes encontrar temas de WordPress listos para traducción.
Si estás creando un widget personalizado para tu tema, entonces puedes reemplazar textdomain con el text domain de tu tema.
Alternativamente, puedes usar un plugin de traducción de WordPress para traducir WordPress fácilmente y crear un sitio de WordPress multilingüe.
Extra: Agrega estilos personalizados a tus widgets de WordPress
Una vez que hayas creado un widget de WordPress, también puedes agregarle estilos personalizados. Esto puede mejorar la apariencia de tu sitio web, mantener la consistencia y llamar la atención sobre información importante.
Para hacer esto, visita la página Apariencia » Widgets y agrega el widget que deseas personalizar. Ahora verás algunas opciones para cambiar sus colores y tipografía en el panel de bloques a la derecha.
Sin embargo, si el widget no muestra esa opción, entonces puedes personalizarlo agregando clases CSS después de expandir la pestaña 'Avanzado'.
Ahora, puedes agregar CSS personalizado a tu tema de WordPress apuntando a esa clase CSS en particular.
Para eso, dirígete a la página Apariencia » Personalizar y cambia a la pestaña CSS Adicional. Aquí, verás una vista previa de tu sitio web con un cuadro para agregar tus reglas CSS.
Ahora puedes usar CSS personalizado para personalizar la apariencia de tu widget. Para más detalles, consulta nuestro tutorial sobre cómo agregar estilos personalizados a tus widgets de WordPress.
Esperamos que este artículo te haya ayudado a aprender cómo crear fácilmente un widget personalizado de WordPress. También te puede interesar nuestra guía sobre cómo deshabilitar bloques de widgets en WordPress y nuestro tutorial sobre cómo eliminar widgets inactivos en WordPress.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Dan
La cadena 'wpb_text_domain' no se encuentra en el código de ejemplo. ¿Supongo que el código de ejemplo se actualizó y el texto del artículo no?
Además, para confirmar, ¿'wpb_text_domain' es en realidad 'web_widget_domain' del código de muestra?
Gracias de antemano por cualquier comentario.
Soporte de WPBeginner
Gracias por señalar esto, actualizaremos este artículo y lo aclararemos mejor.
Administrador
marwan
Hola,
¿puedo poner el código como una clase.php separada y no en functions.php?
Karel Hanton
Gracias por el gran tutorial. Agregué el código a mi plugin de prueba y funciona perfectamente como se describe: veo el Widget en la lista de Apariencia » Widgets y puedo agregarlo a la Barra lateral.
Pero no veo el nuevo Widget en la lista del editor de páginas. ¿Me falta algo, se necesita otro registro o configuración?
Gracias de nuevo por tu ayuda.
Aldo
Esto ahora se muestra como un "Widget heredado" en WordPress. ¿Hay una nueva forma de crear widgets?
JP
esto es genial, el ejemplo simple de copiar y pegar era exactamente lo que estaba buscando. ¡Gracias!
Soporte de WPBeginner
You’re welcome
Administrador
Banu
He creado un plugin CRUD y necesito usarlo en una página, ¿podrías guiarme sobre cómo usar ese plugin en la página?
Soporte de WPBeginner
Dependería de cómo configuraste el plugin. Para tenerlo en una página, podrías buscar usar un shortcode para la visualización en el front-end o buscar en la API de opciones si quisieras mostrarlo en el lado de administración de un sitio.
Administrador
Kishan
¿Cómo puedo crear más de 1 widget personalizado?
Y además, ¿cómo puedo configurar otros campos como radio, casilla de verificación, menú desplegable, texto en el widget?
Soporte de WPBeginner
Necesitarías reemplazar wpb_widget con el nombre que quieras para tu nuevo widget y luego el código dependería de lo que específicamente quieras agregar. Si echas un vistazo al codex de WordPress, puedes ver los diferentes códigos disponibles.
Administrador
Carmen
¡Hola!
Actualmente, estoy desarrollando un plugin y necesito crear un widget para que el usuario agregue una funcionalidad específica a su sitio.
Copie el código de su widget en un archivo y guardé el archivo en el directorio de mi plugin. Usé add_action y do_action en el archivo principal de mi plugin para cargarlo, pero aún no funciona. ¿Me puede ayudar, por favor?
¡Gracias!
Soporte de WPBeginner
Lamentablemente, eso dependería en gran medida de cómo esté configurado tu plugin, es posible que desees asegurarte de que ambas secciones de este código se estén cargando para que el widget se agregue y se muestre.
Administrador
Maximilian K.
Una pregunta corta, ¿qué pasa si quiero crear widgets en los que también pueda colocar otros widgets? Como columnas bootstrap vacías de 6-3-3, por ejemplo, y en cada columna puedo colocar widgets como imagen, texto, últimas publicaciones, etc.
¿Hay un comando / palabra clave para señalar que hay espacio para otros widgets en este widget…
porque estoy un poco confundido acerca de mi propio tema creado y cómo funciona WP… ves que soy un principiante ^^
Ya coloqué información general como el título de la página, creé áreas de widget en mi pie de página para poder colocar menús, enlaces relacionados, etc. en él. Funcionó.
Pero ahora estoy confundido sobre cómo puedo realizar mi contenido en WordPress como lo diseñé antes. Quizás algunas palabras clave sean útiles para leer más sobre ellas.
Soporte de WPBeginner
Eso requeriría más personalización de la que cubrimos en este artículo, es posible que necesites investigar cómo crear una barra lateral para código que puedas usar: https://www.wpbeginner.com/wp-themes/how-to-add-dynamic-widget-ready-sidebars-in-wordpress/
Administrador
Lars
¡Gran tutorial! Funcionó perfectamente.
Soporte de WPBeginner
Glad our tutorial could help
Administrador
Watson Anikwai
¿Cómo obtengo un campo de tipo de publicación personalizado de la base de datos de WP y uso un widget para mostrarlo en el front-end?
vicky
No puedo agregar dos widgets personalizados... el segundo widget no aparece...
¿qué debo hacer?... por favor, ayúdenme
Ahad Bhatti
Muy comprensible y útil. Gracias.
Belitza Gomez
hola, me gustaría saber dónde puedo encontrar en los widgets disponibles el “menú personalizado”. no aparece y no he podido agregar una página al pie de página a través de este widget.
¡¡¡¡¡Gracias por tu ayuda!
Samdoxer
Hola, ¿cómo mostraría un logo en lugar de texto? ¿Sería suficiente reemplazar la URL del logo con el texto?
Gracias de antemano.
Soporte de WPBeginner
Por favor, consulta la configuración de tu tema o visita la página Apariencia » Personalizador en el área de administración. Allí encontrarás una opción para subir la imagen de tu logo.
Administrador
Gary Foster
¿Qué fue primero, el widget o la app?
¿Un widget tiene que registrarse? Si es así, ¿cómo por favor?
¿Cómo proteges mejor tu idea de un widget o una app?
Gracias a todos
shelley
Estas instrucciones funcionaron maravillosamente para crear mi widget personalizado. Sin embargo, no puedo averiguar cómo cambiar el tamaño de la fuente a 60px. Logré agregar CSS a las opciones del tema de Divi que centraron el texto y agregaron un borde. Pero, ¿cómo cambio el estilo de la fuente, por favor? Agregar “font-size:60px” no funciona. Quiero que la fuente sea grande, como un lema que recorra la página. Gracias.
Ahmad Farhan
Very helpfull. tankyou
Eyad
Muchas gracias por tus tutoriales
Luigi Briganti
¡Hola! Espero que puedas ayudarme.
He creado un tipo de publicación personalizado que muestra el horario de una tienda. Por supuesto, puedes crear tantos horarios como quieras, pero mi necesidad es mostrar un horario determinado en la barra lateral del sitio web.
Para este propósito, hice un widget que recorre las publicaciones del horario mostrando solo 1 (es decir, la primera, ya que las ordené en orden ASC). Esta es una solución temporal, solo para ver si el widget funciona y, de hecho, lo hace.
Lo que realmente quiero hacer es mostrar en el backend una lista desplegable de todas las publicaciones que pertenecen al tipo de publicación “horario” para que pueda elegir la que necesito cuando la necesite y mostrarla en el frontend. ¿Cómo puedo hacer esto?
Gracias si puedes/quieres ayudar.
Anees Ijaz
Gracias, hombre, por ahorrarme tiempo ..
Kevin
¡Me encanta esta publicación, me ha ayudado mucho! ¡Gracias!