Lección 05

Widgets en WordPress

Los plugins WordPress son aplicaciones desarrolladas para cumplir una función específica en un sitio web. Son independientes, no vienen por defecto y hay que instalarlos según sea necesario.

Por otro lado, algunos widgets suelen venir por defecto en una instalación de WordPress. Suelen ser dependientes, tanto del tema como de los plugins y, a diferencia de los plugins, estos no se instalan.

Es muy importante que comprendas la diferencia entre los plugins y los widgets. Son dos conceptos completamente diferentes y, algunos widgets, dependen de los plugins pero no al contrario.

Índice del contenido
    Add a header to begin generating the table of contents

    1. ¿Qué son los widgets?

    Básicamente un widget en WordPress es una caja con contenido que se ubica en algunas áreas especificas de un sitio web y nos permiten personalizar la apariencia con información adicional.

    Ejemplo de widgets en WordPress
    Ejemplo de widgets en WordPress

    WordPress incluye una serie de widgets predeterminados llamados Widgets disponibles. Estos widgets se encuentran en el apartado Apariencia >> Widgets.

    Los más utilizados son:

    1.1 Widgets de uso general

    • Buscar. Agrega una caja de búsqueda en el sitio web.
    • HTML personalizado.Añade cualquier tipo de contenido en formato HTML.
    • Imagen. Añade una imagen en cualquier parte del sitio web.
    • Menú de navegación. Crea un menú secundario para añadirlo a la barra lateral o pié de página del sitio web
    • Texto. Añade todo tipo de texto. Éste bloque es muy útil para los shortcodes que ofrecen algunos plugins.

    1.2 Widgets para el blog (y pié de página)

    • Entradas recientes. Añade una lista de las últimas entradas del blog.
    • Comentarios recientes. Añade una lista de los últimos comentarios en el blog.
    • Categorías. Crea una lista, en formato menú, de las categorías del blog. Solo se mostrarán las categorías que estén asignadas a entradas.
    • Nube de etiquetas. Añade un listado de todas las etiquetas creadas en el blog. Solo se mostrarán las etiquetas que se encuentren en uso.
    Widgets disponibles en WordPress
    Widgets disponibles en WordPress

    Anuncio publicitario

    2. ¿Dónde se añaden los widgets en WordPress?

    Al igual que sucede con los menús, los temas son los que establecen la cantidad y espacios disponibles para añadir widgets en nuestro sitio web.

    Astra, el tema que estamos utilizando en este curso de WordPress, permite añadir widgets en 1 sidebar, 1 cabecera y 6 espacios en el footer:

    • Barra lateral principal es el sidebar que ofrece el tema.
    • Cabecera es un espacio que ofrece el tema para personalizar la cabecera del sitio web con widgets.
    • Barra del pie de página (1 y 2) son los espacios para añadir widgets en la barra del pié de página.
    • Área de widgets del pie de página (1 al 4) son los espacios disponibles en el pie de página.
    Espacio para widgets en Astra
    Espacio para widgets en Astra
    Curso de WordPress

    Uno de los mejores temas que puedes instalar para comenzar a crear un proyecto profesional con WordPress, es Astra. Este tema ofrece una versión gratuita, que puedes instalar desde WordPress y, una de pago, con excelentes opciones de diseño.

    Este tema Multipurpose (múltiples propósitos) es ideal para crear blogs, páginas y tiendas online en una misma instalación.

    3. Añadir widgets en un sitio web

    Para añadir un widget en nuestro sitio web, basta con seleccionar el widget que queremos añadir y arrastrarlo hacia uno de los bloques de widgets.

    Por ejemplo, vamos a añadir el widget Entradas recientes en la barra lateral principal.

    Configuración de un widget en WordPress
    Configuración de un widget en WordPress

    Las opciones que ofrece el widget son:

    • Título. Es el título que se mostrará en el sitio web. Si lo dejamos en blanco, se mostrará por defecto el nombre del widget.
    • Número de entradas a mostrar. Es el número máximo de entradas que se mostrarán.
    • ¿Mostrar la fecha de la entrada? Se mostrará la fecha de publicación de la entrada.

    Una vez configures el widget, haz clic en Guardar.

    Dirígete a cualquier página o entrada de tu sitio web donde esté activa la barra lateral principal.

    Vista previa de un widget en el sitio web
    Vista previa de un widget en el sitio web

    Puedes añadir todos los widgets que desees en las barras laterales y el pié de página de tu sitio web. Asegúrate de añadir los widgets que puedan mostrar información.

    Por ejemplo, si aún no tienes comentarios en las entradas de tu blog, no tiene sentido añadir el widget Comentarios recientes ya que no se mostrará nada.

    Continuando con el ejemplo de lecciones anteriores, donde hemos creado categorías y etiquetas, entradas y comentarios para nuestro blog de deportes, podemos añadir todos los widgets que compondrán nuestro sitio web.

    Nos quedaría algo así:

    Widgets en nuestro blog de deportes
    Widgets en nuestro blog de deportes

    4. Personalizar widgets con Astra

    Astra, al igual que muchos temas WordPress, permite elegir en qué tipo de contenido podemos añadir widgets. Ya sea en las páginas, entradas del blog o productos de una tienda online, podemos elegir dónde añadir los widgets que consideremos oportunos.

    4.1 Desde las opciones del tema

    I. Cabecera

    A diferencia de otros temas, Astra ofrece la posibilidad de añadir un widget en la cabecera como elemento del menú.

    Dirígete al apartado Apariencia >> Personalizar >> Cabecera >> Menú primario.

    En el selector Último elemento en el menú podemos seleccionar Widget y se añadirá el contenido que hemos añadido en el bloque Cabecera del apartado Apariencia >> Widgets (punto 2).

    Configuración del widget de cabecera en Astra
    Configuración del widget de cabecera en Astra

    II. Barra lateral

    Dirígete al apartado Apariencia >> Personalizar >> Barra lateral.

    En este apartado podemos configurar la posición y en que tipos de contenido queremos mostrar la barra lateral (páginas, entradas o archivos) además del ancho.

    Configuración de la barra lateral en Astra
    Configuración de la barra lateral en Astra

    Por lo general la barra lateral se suele utilizar en el blog y en tiendas online. No suele ser de mucha utilidad en las páginas aunque esto dependerá del tipo de sitio web que tengamos.

    III. Widgets del pié de página

    Astra ofrece un formato de 4 espacios para añadir widgets en el pie de página y coinciden con los bloques Área de widgets del pié de página del apartado Apariencia >> Widgets (punto 2).

    Además podemos configurar el tamaño y color del borde, los colores del fondo y del contenido.

    Configuración de los widgets del pie de página en Astra
    Configuración de los widgets del pie de página en Astra

    IV. Barra del pié de página

    Aunque este apartado se suele utilizar para mostrar el Copyright del sitio web y el menú de pie de página podemos añadir widgets y coinciden con los bloques Barra del pié de página del apartado Apariencia >> Widgets (punto 2).

    Además podemos configurar el tamaño y color del borde, los colores del fondo y del contenido.

    Configuración de los widgets de la barra del pie de página en Astra
    Configuración de los widgets de la barra del pie de página en Astra

    4.2 Desde cada página (o entrada) individual

    Dirígete al apartado Páginas (o Entradas) y accede a cualquiera de ellas.

    En cada página (y entrada) existe una pestaña llamada Ajustes de Astra donde podemos personalizar las opciones de cada página o entrada individualmente.

    Estas opciones tendrán prioridad sobre las opciones generales que hayamos configurado en Apariencia >> Personalizar.

    Ajustes de Astra en una página/entrada individual
    Ajustes de Astra en una página/entrada individual

    Las opciones que ofrece este bloque, para habilitar o deshabilitar los widgets, son:

    • Barra lateral
      Podemos seleccionar si mostrar o no mostrar la barra lateral y la posición (izquierda o derecha).
    • Desactivar widgets del pie de página
      Podemos activar o desactivar los widgets de pié de página solo en esta página (o entrada).
    • Desactivar barra del pie de página
      Podemos activar o desactivar la barra del pié de página solo en esta página (o entrada).

    5. Widgets inactivos

    Cuando cambiamos de tema en nuestro sitio web, por lo general, algunos widgets que se encontraban configurados con el tema anterior, desaparecen o se visualizan en otras ubicaciones ya que, normalmente la arquitectura de los temas, suele variar.

    En el apartado Apariencia >> Widgets existe un espacio llamado Widgets inactivos que es donde se alojarán todos los widgets que hayan desaparecido pero manteniendo la configuración original.

    De esta manera, lo único que tenemos que hacer es seleccionarlos y arrastrarlos a la nueva ubicación, del nuevo tema, sin tener que configurarlos nuevamente. Esto es algo muy valioso que tiene WordPress para ahorrar tiempo y dolores de cabeza.

    Widgets inactivos en WordPress
    Widgets inactivos en WordPress

    Otra de las ventajas que ofrecen los Widgets inactivos es que, con el mismo tema, podemos "guardar" los widgets que no estemos utilizando para luegos reutilizarlos en caso que sean necesarios.

    Esto es muy útil para añadir un widget tipo imagen con una promoción por tiempo limitado (para navidad por ejemplo).

    Lo seleccionas y lo arrastras al espacio Widgets inactivos. Desaparece de tu sitio web pero no de WordPress.

    6. Widgets adicionales en un sitio web

    Cuando usamos el tema Astra, existe un plugin creado para este tema, con el que podemos añadir 3 widgets adicionales: dirección, redes sociales y listado con iconos en cualquier lugar de nuestro sitio web.

    Estos widgets pueden ser muy útiles para integrarlos en la cabecera o pié de página.

    Para instalar el plugin:

    1. Dirígete al apartado Plugins >> Añadir nuevo.
    2. En el campo de búsqueda escribe Astra Widgets.
    3. Haz clic en Instalar ahora y seguidamente en Activar.

    Al activar el plugin, en el apartado Apariencia >> Widgets, aparecerán los 3 widgets adicionales.

    Widgets adicionales con el plugin Astra Widgets
    Widgets adicionales con el plugin Astra Widgets

    Este plugin funciona con cualquier tema aunque dependerá de los espacios para widgets asignados por el tema. Se recomienda su uso, mayormente, con el tema Astra.

    7. Sidebars infinitos en nuestro sitio web

    Como hemos visto en el punto 2, Astra solo ofrece una barra lateral donde añadir widgets en nuestro sitio web.

    Imaginate que, además de un blog, también queremos integrar una tienda online en nuestro sitio web. Las tiendas online también usan barras laterales para añadir widgets: filtros, productos recientes y buscador de productos entre otros.

    No tendría sentido que la misma barra lateral utilizada para el blog (entradas recientes, categorías y etiquetas) apareciera en nuestra tienda online, ¿o si?

    Como Astra por si solo no puede ayudarnos con esta situación, Brainstorm Force, los creadores de Astra, han desarrollado un fantástico plugin con el cual añadir barras laterales infinitas en nuestro sitio web.

    Sidebar Manager es un plugin con el cual podemos crear todas las barras laterales que queramos para nuestro sitio web, asignar los tipos de contenido donde queremos que aparezca e incluso asignar el tipo de usuario al que queremos que se muestren.

    Para instalar el plugin:

    1. Dirígete al apartado Plugins >> Añadir nuevo.
    2. En el campo de búsqueda escribe Sidebar Manager.
    3. Haz clic en Instalar ahora y seguidamente en Activar.

    Al activar el plugin, se creará el apartado Apariencia >> Sidebars, donde se podrán crear todos los sidebars que sean necesarios.

    Barras laterales infinitas con el plugin Sidebar Manager
    Barras laterales infinitas con el plugin Sidebar Manager

    Este plugin funciona con cualquier tema siempre y cuando esté desarrollado respetando las normas de WordPress.

    Anuncio publicitario

    8. Conclusión

    Los widgets son recursos que nos permitirán mejorar la estética y usabilidad de nuestro sitio web. Recuerda que los widgets no realizan un trabajo; lo hacen los plugins y, algunos plugins, no añaden widgets.

    Y sobretodo y muy importante...

    ¿Te ha gustado?

    Te estaría muy agradecido si pudieras valorar esta lección y compartirla en las redes sociales. De esta manera me animas a continuar trabajando en este curso de WordPress y ayudas a otras personas que desean aprender.

    1 estrella2 estrellas3 estrellas4 estrellas5 estrellas
    (4 votos, promedio: 5,00 de 5)

    Cargando…
    Share on facebook
    Facebook
    Share on twitter
    Twitter
    Share on linkedin
    LinkedIn
    Share on telegram
    Telegram
    Share on whatsapp
    WhatsApp
    Share on email
    Email

    Este curso es gratis y siempre lo será pero, mantenerlo, requiere de mucho tiempo y esfuerzo. Si te gusta el curso y te ha ayudado, considera invitarme un café haciendo un pequeño donativo a este proyecto que he creado con el para ti y muchas personas que desean aprender. Las donaciones me ayudan a seguir trabajando en este fantástico curso gratuito. ¿Me invitas un café?.

    Suscríbete y aprende WordPress desde cero.

    No me gusta el SPAM y se que a ti tampoco. Sólo recibirás información útil sobre WordPress.

    Al enviar, confirmas que has leído y aceptas la política de privacidad. Conoce nuestro compromiso con tu privacidad.

    Comparte tu experiencia

    Deja un comentario si tienes alguna duda o cuéntanos cómo ha sido tu experiencia.

    guest
    0 Comentarios
    Inline Feedbacks
    Ver todos los comentarios
    0
    ¿Dejas un comentario? Gracias!x
    ()
    x
    Ir arriba

    Tratamiento de datos personales

    • Responsable: MARIA ANTONIETA BEAUTY CONCEPT, S.L.
    • Finalidad: Suscribirte a la lista de correos electrónicos.
    • Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en legal@gianoliveira.com, así como el derecho a presentar una reclamación ante una autoridad de control.
    • Destinatarios: Los datos no se cederán a terceros salvo en los casos en que exista una obligación legal.
    • Información adicional: En mi política de privacidad encontrarás información adicional sobre la recopilación y el uso de su información personal incluida información sobre acceso, conservación, rectificación, eliminación, seguridad y otros temas.