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

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

    (6 votos, promedio: 5 de 5)

    Share on facebook
    Facebook
    Share on twitter
    Twitter
    Share on whatsapp
    WhatsApp
    Share on telegram
    Telegram
    Share on email
    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.

    guest
    2 Comentarios
    Inline Feedbacks
    Ver todos los comentarios
    Jes√ļs

    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.

    Gian Oliveira

    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!

    2
    0
    ¬ŅDejas un comentario? Gracias!x
    ()
    x
    Search
    Generic filters

    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.