Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. WordPress
Webdesign

¿Qué son los widgets en Wordpress?

by
Length:LongLanguages:

Spanish (Español) translation by Gary López (you can also view the original English article)

Los widgets de WordPress son una forma estupenda de añadir contenido extra, noticias breves e interactuar en tu sitio web.

Los widgets van a transformar tu sitio web en algo más que un blog; ofrecen la flexibilidad de identificar el contenido que quieres mostrar en cada página de tu sitio web, y así, estar seguro de que tus lectores no se perderán de nada.

En este artículo, vas a aprender todo sobre los widgets en WordPress: cómo instalarlo en tus sitios web, dónde deben ir ubicados, y cómo sacarles el máximo provecho. Voy a enseñarte los aspectos más técnicos del widget; ayudarte a crear tus propias zonas de widgets y vas a iniciar tu propio plugin de widget.

Los mejores plugin de WordPress en CodeCanyon

Explora miles de los mejores plugins de WordPress jamás creados en CodeCanyon. Compra estos plugins de WordPress en alta calidad (a un bajo precio y pago único) y mejora la experiencia de tu sitio web para ti y tus visitantes.

¿Qué son los widgets de WordPress?

Comencemos por aclarar qué es un widget con exactitud.

En WordPress, los widgets son fragmentos de contenido que existen fuera del flujo de la página o del contenido de la publicación.

Los widgets de WordPress contienen navegación, información o elementos multimedia que son independientes de la publicación o de tu página. En la mayoría de los casos, cada widget se mostrará en cada página del sitio, pero también puedes editar zonas de widgets para páginas específicas, como por ejemplo, en la página de inicio.

Para añadir un widget a tu sitio web, instalas un widget en una de las zonas de widgets. Las zonas de widgets han sido creadas por el tema de tu página porque los widgets son parte del diseño y maquetación de tu sitio web.

La mayoría de los temas tienen zonas de widgets en la barra lateral y al pie de página. Aunque algunos temas pueden tener varias zonas de widgets en muchos lugares, como abajo o arriba del contenido o en el encabezado; o pueden tener varias zonas de widgets en la barra lateral y / o pie de página, lo que le da aún más flexibilidad.

La captura que vas a ver, la saqué de uno de mis sitios web, y te muestra los widgets en la barra lateral y al pie de página.

widget areas in my site

Cómo usar los widgets

Hay un montón de cosas para las que puedes utilizar widgets. De hecho, las opciones solo están limitadas a tu imaginación.

Pero aquí hay algunos usos habituales para los widgets que es posible que desees considerar para tu sitio ganado:

  • Añade un menú de navegación extra con el widget de menú de navegación preinstalado, útil en el pie de página para que las personas tengan un lugar a dónde ir cuando lleguen al final de tu publicación.
  • Añade un botón de llamada a la acción con un widget de texto o un widget HTML personalizado, ideal para animar a las personas a hacer algo específico.
  • Añade un bloque de redes sociales instalando un plugin que enlace a tus cuentas de redes sociales. Es común poner esto en el pie de página.
  • Añadir un carrito de compras, la mayoría de los plugins de comercio electrónico vienen con un widget de carrito de compras.
  • Añade tu imagen favorita con el widget de imagen.
  • Añade una lista de tus publicaciones más recientes con el widget de publicaciones recientes, uno de los widgets más populares para sitios web con un blog.

Existen muchas más opciones. Si vas al directorio del plugin de WordPress yendo a Plugins > Añadir Nuevo en tu sitio y luego buscas widget, encontrarás cientos de plugins que te dan widgets extras que puedes añadir a tu barra lateral, pie de página u otras zonas de widgets.

Widget plugin

Cómo añadir widgets a tu sitio web

WordPress viene con un conjunto de widgets preinstalados para que puedas usarlos sin tener que instalar ningún plugin ni escribir algún código. Pero también puedes añadir muchos más widgets instalando plugins o codificando los tuyos propios. Estos pueden cubrir una amplia gama de tipos de contenido, como medios de comunicación, fuentes de redes sociales, navegación, búsqueda, mapas y mucho más. Es muy poco probable que no encuentres un widget que no desees en tu sitio web. De hecho, el mayor desafío a menudo es elegir entre todas las opciones y no quedarse con todos.

Comencemos por ver cómo añadir los widgets preinstalados a tu sitio web.

Añadir widgets precargados a tu sitio web

WordPress viene con algunos grandes widgets ya instalados:

pre-installed WordPress widgets
  • Archivos: enlace a archivos por mes, diseñado para blogs pero bastante anticuado ahora.
  • Audio: incrustar un podcast, una canción u otro audio.
  • Calendario: un calendario de tus publicaciones, de nuevo adecuado para blogs, especialmente si el tuyo es sensible al tiempo (pero no tan común en estos días).
  • Categorías: una lista de las categorías de tu blog, con enlaces a las páginas de archivo.
  • HTML personalizado: lo último en flexibilidad, añade el contenido que quieras escribiendo (o pegando) en el HTML. ¡Evite este si no se siente cómodo con la codificación!
  • Galería: más avanzado que el widget de imagen, mostrar una galería de imágenes.
  • Imagen: muestra una imagen de tu biblioteca multimedia.
  • Meta: metadatos como enlaces de inicio de sesión y fuentes RSS. Un rastro de los primeros días de WordPress y no muy útil ahora.
  • Menú de navegación: muestra el menú de navegación principal o uno independiente que creas en especial.
  • Páginas: muestra una lista de las páginas de tu sitio web con enlaces.
  • Comentarios recientes: una lista de comentarios recientes con enlaces a ellos.
  • Publicaciones recientes: muestra una lista de tus publicaciones más recientes para animar a las personas a leerlas.
  • Búsqueda: un simple cuadro de búsqueda.
  • Tag Cloud: una lista de etiquetas en formato cloud, con enlaces a los archivos relevantes.
  • Texto: cualquier texto que desees añadir, como información sobre el sitio web.
  • Video: inserta un video de un servicio de streaming como YouTube o Vimeo.

Puedes añadir widgets a tu sitio web desde uno de los dos lugares: el personalizador y la pantalla de Widgets.

  • El personalizador te permite obtener una vista previa de los cambios antes de guardarlos, lo que significa que puedes probar las cosas y ver cómo se ven.
  • La pantalla de Widgets añade funcionalidad adicional, como la capacidad de guardar widgets no utilizados que podría haber configurado y quieres guardar para más adelante. También hace que sea más fácil mover widgets entre zonas de widgets y tiene un modo de accesibilidad que puedes utilizar sin ayuda de un mouse.

Para acceder a los widgets en el personalizador, dirígete a Apariencia > Personalizar > Widgets. Seleccione la zona de widget con la que deseas trabajar.

widgets in the Customizer

A continuación, haz clic en el botón Añadir widget y selecciona el widget que deseas añadir. Se mostrará como una vista previa a la derecha, y puedes hacer ajustes a la configuración o probar diferentes widgets hasta que estés satisfecho. Una vez satisfecho, dale clic en el botón Publicar en la parte superior para guardar los cambios.

Nota: Si abandonas el personalizador sin hacer clic en Publicar, no se guardará ninguno de tus cambios. ¡No te olvides!

Para acceder a la pantalla Widgets, ve a Apariencia > Widgets. Aquí verás una lista de los widgets disponibles a la izquierda y las zonas de widgets a la derecha. Recuerda, las zonas de widgets son creadas por tu tema, por lo que si necesitas más, es posible que tengas que cambiar de tema.

Widgets screen

Lo único que debes hacer es arrastrar el widget que desees en la zona de widget que te parezca mejor. A continuación, puedes ajustar la configuración (si el widget tiene configuración) en el área del widget y mover los widgets con el mouse.

La pantalla Widgets también tiene un modo de accesibilidad. Para acceder a eso, haz clic en el vínculo Habilitar modo de accesibilidad en la parte superior derecha de la pantalla.

Widgets screen in accessibility mode

Para salir del modo de accesibilidad, haz clic en ese enlace de nuevo, que le permitirá salir del modo de accesibilidad.

Instalar y activar un widget plugin

Si deseas añadir widgets a tu sitio que van más allá de lo que WordPress proporciona fuera de la caja, puedes utilizar un plugin de WordPress.

Para añadir un plugin de widget gratuito a tu sitio web, ve a Plugins > Añadir nuevo y busca widget. Por otra parte, si deseas un widget que haga una tarea específica, busca dicha tarea. Hay un montón de plugins que incluyen widgets, pero no son solo plugins de widgets, tales como plugins de comercio electrónico con sus widgets de carrito de compras.

Una vez que has encontrado el plugin que deseas, haz clic en el botón Instalar. Después de un momento, esto cambiará a el botón Activar. Dale clic allí para activar el plugin.

Ahora, cuando vayas al Personalizador o a la pantalla de Widgets, podrás añadir el widget proporcionado por el plugin a una zona de widgets en tu tema.

Si has comprado un plugin de widget de un proveedor externo como CodeCanyon, tendrás que subir el plugin a tu sitio web. Puedes hacerlo directamente desde las pantallas de administración.

Ve a Plugins > añadir nuevo. Haz clic en el botón descargar extensión.

uploading a plugin

Carga el archivo zip para el plugin (no cargues archivos sin comprimir, solo los archivos zip van a funcionar).

Haz clic en el botón Instalar ahora y, luego, activa la extensión.

El widget estará disponible cuando vayas a la pantalla de Personalizador o la de Widgets.

Cómo añadir zonas de widgets extras a tu tema.

Si tu tema no tiene las zonas de widgets que te gustaría, la solución más fácil es encontrar un tema que lo haga. Pero, ¿qué pasa si estás contento con el diseño de tu tema, pero solo quieres añadir una o más zonas de widgets extra?

WordPress te permite crear tus propias zonas de widgets utilizando la función register_sidebar(). Esto consta de dos pasos:

  • Registrar el área del widget con una función en el archivo functions.php.
  • Añadir la zona de widget a una ubicación importante en tu tema.

Si estás trabajando con un tema de terceros (es decir, uno que descargaste del directorio de temas o compraste en algún lugar como el CodeCanyon), entonces no debes editar tu tema directamente. En lugar de eso, crea un tema hijo y añade tu nuevo código a este.

Registro de la zona de widgets

Para registrar la zona de widget, escribe una función como está en tu archivo functions.php.

Guarda el archivo y te vas a dar cuenta que la zona de widget aparece en la pantalla Widgets y en el Personalizador. Pero no saldrá nada al sitio web, todavía.

Visualizar la zona de widgets en tu sitio web

Para que la zona de widget aparezca en tu sitio web, debes añadir el código al archivo de plantilla relevante en tu tema. Para la barra lateral, esto será sidebar.php y para el pie de página será footer.php. Pero si deseas añadir una zona de widget extra en un lugar diferente, tendrás que identificar el archivo de plantilla correcto.

  • Para añadir una zona de widget arriba o abajo del contenido, añádelo a tu archivo single.php, archivo page.php o cualquier otro archivo que genere publicaciones o páginas individuales.
  • Para añadir una zona de widget a un archivo específico como la página de inicio, cree un archivo llamado front-page.php, copie el contenido de tu archivo index.php o page.php a eso y luego añade el código para la zona de widget.
  • Para añadir una zona de widget a las publicaciones de un tipo de publicación específico, añade el código a single-posttype.php, donde posttype es el nombre del tipo de publicación.

Todavía hay más opciones, el mejor recurso para averiguar qué archivo usar es la jerarquía de plantillas de WordPress.

Para la zona de widget de contenido posterior que registré arriba, añadiría este código después del contenido en mis archivos de plantilla:

Luego de haber añadido eso, los widgets que incorpores a esa zona de widgets aparecerán en el lugar correcto en el sitio web.

Codificar tus propios widgets

Existen cientos de widgets disponibles para que pongas en tu sitio web, pero ¿qué pasa si deseas codificar el tuyo propio?

Codificar un plugin de widget es más avanzado que registrar una zona de widget, pero puedes hacerlo siguiendo nuestra serie: escribir un plugin de widget. Los detalles de tu propio plugin dependerán de lo que desees que haga el widget.

Pero antes de empezar a codificar tu propio widget, comprueba que aún no está disponible. Podrías ahorrarte mucho trabajo.

Los mejores temas y plugins de WordPress en Envato Market

Explora miles de los mejores temas de WordPress jamás creados en ThemeForest y los principales plugins de WordPress en CodeCanyon. Compra estos temas y plugins de alta calidad de WordPress y mejora tu experiencia en el sitio web para ti y tus visitantes.

Estos son algunos de los temas y plugins de WordPress más vendidos y prometedores disponibles en 2020.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.