Widgets en WordPress

Los聽plugins para 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
    Agrega un encabezado para comenzar a generar la tabla de contenidos

    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
    Astra Theme

    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, sitios web corporativos 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:

    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.

    https://es.wordpress.org/plugins/astra-widgets/

    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.

    https://es.wordpress.org/plugins/sidebar-manager/

    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 entrada y compartirla en tus redes sociales. De esta manera me animas a continuar trabajando en este proyecto y ayudas a otras personas que desean aprender.

    (16 votos, promedio: 4.9 de 5)

    Facebook
    Twitter
    WhatsApp
    Telegram
    Email

    驴Me invitas un caf茅?

    Todo el contenido que puedes encontrar en este sitio web es gratis y siempre lo ser谩 pero, mantenerlo, requiere de muchos caf茅s y muuuuchas horas . Si te gusta mi trabajo y te est谩 ayudando, considera invitarme un caf茅 para apoyarme y apoyar este proyecto. 隆Te invito 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.

    2 Comentarios
    Inline Feedbacks
    Ver todos los comentarios

    Hola Gian, en el tema ASTRA como se a帽aden las paginas de Pol铆tica de Privacidad, Pol铆tica de Cookies,etc para que queden posicionadas en la parte inferior de la web como por ejemplo est谩n situadas en tu web de este curso.
    Gracias y un saludo.

    Hola Jes煤s, lo puedes encontrar en el punto 5 de esta entrada: https://cursowordpress.com/wordpress/crear-pagina-con-wordpress/, el campo Orden. Un saludo!

    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@cursowordpress.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.

    Tratamiento de datos personales

    • Responsable: MARIA ANTONIETA BEAUTY CONCEPT, S.L.
    • Finalidad: Moderar y responder comentarios de usuarios.
    • Derechos: Podr谩s ejercer tus derechos de acceso, rectificaci贸n, limitaci贸n y suprimir los datos en legal@cursowordpress.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.
    2
    0
    驴Dejas un comentario? Gracias!x
    Resumen de privacidad
    Curso de WordPress

    Utilizamos cookies propias y de terceros para fines anal铆ticos y para mostrarte publicidad personalizada o a partir de tus h谩bitos de navegaci贸n. Puedes cambiar la configuraci贸n u obtener m谩s informaci贸n consultando la聽pol铆tica de cookies.

    La informaci贸n de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qu茅 secciones de la web encuentras m谩s interesantes y 煤tiles.

    Cookies estrictamente necesarias

    Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

    Cookies de terceros

    Esta web utiliza Google Analytics para recopilar informaci贸n an贸nima tal como el n煤mero de visitantes del sitio, o las p谩ginas m谩s populares.

    Dejar esta cookie activa nos permite mejorar nuestra web.