Cómo usar un editor visual para crear widgets en WordPress

La edición visual ha transformado la forma en que creamos widgets.

Lo que antes requería código personalizado, ahora se puede hacer con solo unos pocos clics, haciendo que la creación de widgets sea accesible para todos.

El editor visual en WordPress se ha vuelto cada vez más potente, especialmente con las últimas actualizaciones del editor de bloques. Ya sea que esté personalizando su barra lateral, pie de página o cualquier área de widgets, ahora puede crear widgets hermosos y funcionales sin tocar una sola línea de código.

En esta guía, le mostraremos exactamente cómo usar el editor visual para crear widgets para su sitio de WordPress.

¿Por qué usar el editor visual para crear widgets en WordPress?

Los widgets le permiten agregar contenido enriquecido fuera del área principal de páginas y publicaciones. Cada tema de WordPress es diferente, pero normalmente puede agregar widgets a áreas como el pie de página, la cabecera y la barra lateral.

Muchos sitios web utilizan estas áreas para mostrar una sección "acerca de nosotros", mostrar sus publicaciones más populares, agregar un formulario de suscripción a un boletín por correo electrónico y más.

WordPress le permite agregar una amplia gama de bloques a cualquier área preparada para widgets, y muchos complementos de WordPress también agregan sus propios bloques.

Por ejemplo, si está utilizando Smash Balloon Twitter Feed, entonces puede incrustar tweets recientes en cualquier área preparada para widgets utilizando el bloque de feed de Twitter del complemento.

Sin embargo, a veces es posible que desees crear un widget personalizado que muestre contenido multimedia enriquecido a tus visitantes. Por ejemplo, es posible que desees cargar la foto de tu autor y luego usarla para crear un widget de biografía del autor, completo con enlaces a tus diferentes perfiles de redes sociales.

Dicho esto, veamos cómo puedes usar un editor visual para crear widgets personalizados en WordPress. Simplemente usa los enlaces a continuación para saltar al método adecuado para tu tema:

• Método 1: Usando el plugin Widget Options (Funciona con todos los temas de WordPress)
• Método 2: Usando el Editor de Sitio Completo (Funciona con temas de WordPress habilitados para bloques)
• Preguntas Frecuentes

Método 1: Usando el plugin Widget Options (Funciona con todos los temas de WordPress)

La forma más fácil de crear un widget personalizado es usando el plugin Widget Options.

Agrega muchas configuraciones adicionales al editor visual de widgets estándar de WordPress, incluida la capacidad de mostrar diferentes widgets según el rol del usuario, ocultar widgets de WordPress en dispositivos móviles y más.

También agrega un widget de Texto que puedes personalizar con tus propios enlaces, imágenes, formato y más. Esto te permite crear un widget personalizado sin tener que escribir ningún código.

Primero, necesitas instalar y activar el plugin Widget Options. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Después de la activación, ve a la página Apariencia » Widgets en tu panel de WordPress.

Ahora verá una lista de todas las áreas listas para widgets en su tema de WordPress. Las opciones que vea pueden variar según su tema.

También verá todos los widgets que puede agregar a su sitio. Usaremos el widget de Texto para esta guía, así que simplemente arrástrelo y suéltelo en cualquier área lista para widgets.

Ahora verá una pequeña ventana emergente.

Esta ventana emergente es esencialmente un editor de mini-página o publicación, por lo que debería resultarle familiar.

Para empezar, puede escribir un título, que aparecerá encima del widget.

Después de eso, puede escribir texto directamente en el pequeño editor, agregar enlaces e imágenes, cambiar el formato, agregar viñetas y listas numeradas, y más.

También puedes mostrar u ocultar widgets en páginas específicas de WordPress y agregar estilos personalizados al widget de WordPress.

Cuando estés satisfecho con la configuración del widget, haz clic en el enlace 'Listo' para guardar sus ajustes.

Ahora, si visitas tu sitio web, verás el nuevo widget de texto enriquecido en vivo.

Si lo prefieres, puedes crear un widget personalizado visualmente usando el Personalizador de WordPress.

Simplemente ve a Apariencia » Widgets, pero esta vez, haz clic en 'Administrar con vista previa en vivo'.

Esto abrirá el Personalizador con la configuración del widget ya seleccionada.

Ahora puedes hacer clic en el área donde deseas agregar el widget personalizado.

Después de eso, haz clic en 'Agregar un widget', lo que abrirá un panel que muestra todos los diferentes widgets.

Simplemente busca 'Texto' y haz clic en él para agregarlo a tu sitio web.

Esto abre un pequeño editor donde puedes agregar texto, enlaces, medios y más.

A medida que realices cambios en el editor, la vista previa en vivo se actualizará automáticamente.

Cuando estés satisfecho con la apariencia del widget, haz clic en el botón 'Publicar' para que aparezca en vivo en tu blog o sitio web de WordPress.

Si no puedes encontrar el personalizador de temas en tu panel de WordPress, consulta nuestra guía sobre cómo solucionar la falta del personalizador de temas en el administrador de WordPress.

Método 2: Usando el Editor de Sitio Completo (Funciona con temas de WordPress habilitados para bloques)

Si estás utilizando un tema de WordPress con bloques habilitados, puedes agregar bloques a cualquier área lista para widgets usando el editor de sitio completo.

De esta manera, puedes crear widgets personalizados organizando los bloques de WordPress estándar en un área lista para widgets, como la barra lateral. Tampoco necesitas instalar un plugin de WordPress por separado.

También es una forma de agregar widgets a áreas que no puedes editar usando el editor de widgets estándar de WordPress o el personalizador. Por ejemplo, puedes agregar widgets a tu plantilla de página 404.

Para empezar, dirígete a Apariencia » Editor en el panel de WordPress.

Por defecto, el editor de sitio completo muestra la plantilla de inicio de tu tema, pero puedes agregar widgets y bloques a cualquier área.

Para ver todas las opciones disponibles, simplemente selecciona 'Plantillas' o 'Partes de Plantilla'.

Ahora puedes hacer clic en la plantilla o parte de plantilla que deseas editar.

WordPress ahora mostrará una vista previa del diseño. Para continuar y editar esta plantilla, haz clic en el pequeño ícono del lápiz.

Una vez hecho esto, haz clic en el ícono azul '+' y luego busca el primer bloque que deseas usar en tu widget personalizado.

Puedes usar cualquier combinación de bloques que desees, pero si planeas usar una imagen y texto, te recomendamos comenzar con el bloque 'Medios y Texto'.

Esto te permite organizar fácilmente una imagen junto a algo de texto en un diseño agradable. Teniendo esto en cuenta, el bloque 'Medios y Texto' es perfecto para crear un cuadro de información del autor, como puedes ver en la siguiente imagen.

Después de seleccionar el bloque que deseas usar, simplemente arrástralo y suéltalo en un área lista para widgets, como la barra lateral y el pie de página.

El editor de sitio completo te da acceso al conjunto completo de herramientas y configuraciones de WordPress. Esto significa que puedes agregar un botón de llamada a la acción, texto, enlaces, imágenes y otro contenido a una gama más amplia de bloques.

Dicho esto, deberías poder crear exactamente el widget que tenías en mente. Simplemente agrega más bloques y contenido al área lista para widgets hasta que estés satisfecho con su apariencia.

Para más ideas sobre cómo usar las áreas listas para widgets de tu tema, consulta nuestra lista de cosas para agregar al pie de página de tu sitio WordPress.

Cuando estés satisfecho con los cambios que has realizado, haz clic en 'Guardar'.

Ahora, si visitas tu sitio web de WordPress, verás el nuevo widget personalizado en vivo.

Preguntas Frecuentes

Aquí hay algunas preguntas que nuestros lectores hacen frecuentemente sobre la creación de widgets usando el editor visual:

¿Necesito instalar un plugin para crear widgets visualmente?

No siempre. Si estás usando un tema de bloques, puedes agregar widgets usando el Editor de Sitio Completo sin plugins adicionales.

Sin embargo, si tu tema no es compatible con el editor de sitio completo, usar un plugin como Widget Options te da más control sobre dónde y cómo aparecen tus widgets.

¿Por qué no veo los cambios en mi widget de inmediato?

Si tu widget no se actualiza al instante, intenta limpiar la caché de tu sitio y la caché del navegador. Algunos plugins de caché o CDNs pueden retrasar los cambios.

Usar la opción de Vista Previa en Vivo es una buena manera de confirmar que tus widgets se actualizan antes de publicarlos.

¿Puedo agregar bloques personalizados de plugins (como Smash Balloon o WPForms) dentro de un área de widgets?

Absolutamente. La mayoría de los plugins modernos, como Smash Balloon, WPForms o MonsterInsights, incluyen sus propios bloques que se pueden colocar en cualquier área lista para widgets.

Puedes arrastrar estos bloques a tu barra lateral, pie de página o encabezado como cualquier otro bloque.

¿Cuál es la diferencia entre usar el plugin Widget Options y el Editor de Sitio Completo?

El plugin Widget Options funciona con todos los temas, incluidos los más antiguos que no son compatibles con FSE.

El Editor de Sitio Completo solo funciona con temas habilitados para bloques y ofrece una mayor flexibilidad de diseño, ya que puedes editar encabezados, pies de página y plantillas visualmente.

Esperamos que este artículo te haya ayudado a aprender cómo usar fácilmente el editor visual para los widgets de WordPress. También es posible que desees consultar nuestra guía sobre consejos para dominar el editor de contenido de WordPress y cómo crear una página de destino con 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.