Añadir un widget en una página de WordPress

Por alguna razón es posible que necesites añadir un widgets en una página de WordPress de las que tienes creadas en WordPress, la “portada” (home) o por ejemplo la página de “Servicios” y que este widget se muestre en el bloque central de texto de la página y no en la barra lateral (izquierda o derecha, según tu Tema en uso) “sidebar” como se hace tradicionalmente.

Te presentamos Arkibot,
nuestra nueva herramienta de chatbot.

Pruébala por 9,90€ + impuestos al mes y automatiza el trabajo aburrido.

Ahorra tiempo y dinero aquí

En este artículo aprenderás lo fácil que es añadir widget a Página en WordPress para mostrar uno o varios (instancias) en la misma página llamándolos mediante códigos cortos.

WordPress por defecto no incluye ninguna funcionalidad que permita añadir widgets directamente en Páginas, y tampoco mecanismos mediante shortcodes para que hacerlo sea una tarea sencilla para el usuario.

Por suerte existen los plugins, que están ahí para hacernos la vida con este CMS más fácil y llevadera, sin depender de programadores o tener que formarte en desarrollo con PHP u otros lenguajes.

  Añadir un widget a una página de WordPress con un plugin

Para estos casos puedes recurrir a un plugin, si no controlas el tema de WordPress hooks y tienes que hacerlo de forma sencilla para tí.

El plugin amr shortcode any widget puede ayudarte en este tipo de cuestiones, permitiéndote insertar uno o varios widgets en tus páginas utilizando un código corto (shortcode de WordPress).

Este plugin utiliza la configuración de los widgets para tener acceso total a personalizar el widget con tu configuración.

  Instalación y configuración del plugin

Desde el dashboard de WordPress, vete a Plugins > Añadir nuevo > buscar el plugin amr shortcode any widget y hacer clic en el botón Instalar y después en Activar.

Luego vete a Apariencia > Widgets y arrastra los plugins a Widgets for Shortcodes.

  Cómo añadir el Widget en una Página en WordPress

Para poder insertar widgets (uno o varios) en páginas que previamente tengas creadas en WordPress tienes que utilizar el código corto siguiente para mostrar el widget en la posición de la página donde lo añadas.

[do_widget Buscar]

El resultado final será el siguiente:

Para identificar un widget en el shortcode, utiliza el “nombre” o el ID. El ID es la forma en que WordPress identifica la instancia del widget, siendo visible en la parte inferior del cuadro de configuración del widget.

  Otros ejemplos de uso de “do_widget”

[do_widget nombre_del_widget]

Ejemplo: [do_widget calendar]

[do_widget "nombre_del_widget"]

Ejemplo: [do_widget “nube_etiquetas”]

[do_widget id=widgetid]

Ejemplo: [do_widget id=tag-cloud-1]

[do_widget_area]

Utilizará el área de widgets “en shortcodes” / sidebar

do_widget_area sidebarname]

También se puede usar [do_widget_area widget_area=sidebarname] Para otra barra lateral o área de widgets. Para maximizar la probabilidad de que se aplique el css de los widgets de su tema.

  ¿Qué parámetros maneja do_widget

Parámetros:

• nameofwidget or name=”nameofwidget”: Es el nombre que se ve en la página del menú de widgets incluso cuando no está asignado a una barra lateral. Para los usuarios existentes, también puede utilizarse sólo el nombre del widget sin name=.
• id=wordpress: Asigna el ID del widget. Ejemplos: id=meta-1, id=tag-cloud-1…
• title=false: Oculta el título de los widgets o para anular la configuración HTML de la primera barra lateral de tu tema para los títulos de los widgets, usa title=htmltag donde htmltag es H1,h2,h3,h4,h5,header,strong,em.
• wrap=htmltag: Donde htmltag es div,p,main,aside,section. Esto anulará el primer HTML que envuelve el widget de la barra lateral de tu tema.
• widget_classes=none: Elimina la clase “widget” del HTML envolvente y la clase “widget_title” del HTML del título. Suficiente para eliminar cualquier CSS no deseado causado por el tema.
• class=tunombredeclase: Por defecto el plugin añade una clase amr-widget al HTML que lo envuelve. Puedes usarlo para añadir cualquier CSS personalizado.
• sidebar=”nombre_sidebar”: Es la barra lateral widgets_for_shortcode. Úsalo si quieres reutilizar un widget que ya está siendo utilizado en otra barra lateral. Esto depende del tema y dejará de funcionar si cambias de tema. Es más seguro usar el widget_id.

  ¿Qué parámetros maneja do_widget_area

Parámetros:

• widget_area=tuwidgetarea: Por defecto es widgets_for_shortcodes si no pones nada.
• widget_area_class=none: Para eliminar el estilo del tema eliminando la clase widget_area del HTML de la barra lateral.
• widget_classes=none: Para eliminar la clase del widget de la envoltura del widgethtml.
• class=tunombredeclase: Afecta al área del widget pero no a los widgets individuales.

Si usas un widget más de una vez, es posible que tengas que utilizar el ID del widget para aislar qué instancia del widget y su configuración se va a utilizar. Si sólo utilizas el nombre, se mostrarán todos los widgets en la barra lateral del shortcode con ese nombre (todas las instancias).

  Vídeo de cómo añadir un Widget en WordPress

En el siguiente vídeo te muestro cómo funciona el plugin amr shortcode any widget en WordPress para mostrar widgets en publicaciones de tu sitio web.

  Conclusiones

Una forma de utilizar este plugin es por ejemplo para insertar una nube de etiquetas en WordPress en una página específica de tu sitio web, o el calendario de publicaciones de tu blog, aunque estoy seguro que a ti se te van a ocurrir mejores ejemplos de cómo sacarle rendimiento a esta funcionalidad no nativa, añadida en tu web con un plugin.

El plugin ha sido probado con la mayoría de los widgets estándar de WordPress como RSS/Feeds, nube de etiquetas, páginas, meta, búsquedas y los de Calendario, aunque debería funcionarte sin problemas con la mayoría de widgets que utilices en tu sitio WordPress.

El plugin también funciona con los Widgets en el editor de bloques Gutenberg de WordPress.

También puedes encontrar más plugins para Widgets en WordPress en este artículo.