Los widgets de WordPress son increíblemente útiles. Le permiten añadir todo tipo de contenido extra a su sitio web fuera del cuerpo del mensaje o de la página misma, animando a los usuarios a obtener información, seguir los enlaces o tomar medidas.

En este post, voy a mostrarles todo lo que necesitan saber sobre los widgets de WordPress. ¿Cómo añadirlos a su sitio, cómo crear áreas de widgets para colocarlos, cómo instalar plugins que le proporcionen más, cómo codificar sus propios widgets y mucho más?

Primero, empecemos por identificar qué son los widgets de WordPress.

¿Qué son los widgets de WordPress?

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

Los widgets contienen información, navegación o medios de comunicación que están separados de una entrada o página individual. En la mayoría de los casos, cada widget se mostrará en todas las páginas del sitio, pero también se pueden registrar áreas de widgets para páginas específicas, como la página de inicio.

Para añadir un widget a su sitio, debe agregarlo a un área de widgets. Los áreas de widgets son creadas por su tema porque se relacionan con el diseño y la disposición de su sitio y no con la funcionalidad.

La mayoría de los temas de WordPress tienen áreas de widgets en la barra lateral y en el pie de página, aunque algunos tendrán múltiples áreas de widgets en muchos lugares, como debajo o encima del contenido o en el encabezado.

La siguiente captura de pantalla, de uno de mis propios sitios, muestra los widgets en la barra lateral y el pie de página.

Áreas de widgets en mi sitio

Áreas de widgets en mi sitio

WordPress viene con un montón de widgets precargados para que pueda usarlos sin tener que instalar ningún plugin o escribir ningún código. Pero también puede añadir muchos más widgets instalando plugins o codificando los suyos.

Estos pueden abarcar una amplia gama de tipos de contenido, tales como medios de comunicación, fuentes de medios sociales, navegación, búsqueda, mapas y mucho más. Hay muy pocas cosas que quiera en su sitio web para las que no pueda encontrar un widget De hecho sin exagerar, el mayor desafío es a menudo elegir entre todas las opciones .

¿Cuándo usar los widgets de WordPress?

Debería usar un widget siempre que quiera añadir contenido extra a una o más páginas de su sitio (y cuando digo página, incluyo posts, archivos, etc.), pero eso no es parte del contenido de esa página. Son particularmente útiles para el contenido que quiere mostrar en cada página del sitio, como una lista de sus últimas publicaciones, un carrito de compras o un botón de llamada a la acción.

Piense en cuántos usuarios necesitarán acceder a cada widget y cuán importante es cuando decida dónde colocarlo. Los widgets en la barra lateral serán más prominentes que los del pie de página, que algunos usuarios pueden incluso no ver.

Por lo tanto, un widget de últimas publicaciones o un widget de llamada a la acción podría estar mejor en la barra lateral donde la gente tiene más posibilidades de interactuar con ellos, mientras que un feed de medios sociales podría ir en el pie de página.

Si su tema también tiene áreas de widgets especiales para la página de inicio, puede que quiera usarlas para navegar por los departamentos de su sitio, listas de contenido relevante o medios como un vídeo de bienvenida a la gente del sitio.

11 Ejemplos de widgets en WordPress

La mejor manera de entender las posibilidades que ofrecen los widgets de WordPress es mirando algunos ejemplos de ellos. Echemos un vistazo a los once tipos de widgets que verá con frecuencia en los sitios de WordPress.

1. Widget de mensajes recientes

El widget de Mensajes Recientes es posiblemente el más utilizado en los blogs.

Le permite mostrar una lista de sus publicaciones más recientes en la barra lateral o en el pie de cada página de su sitio, lo que aumenta la posibilidad de que la gente navegue por el sitio y lea una serie de publicaciones.

El widget Recent Posts viene preinstalado con WordPress. Le permite establecer cuántos mensajes quiere mostrar y qué encabezamiento quiere darle al widget.

Widget de mensajes recientes

Widget de mensajes recientes

Si quiere añadir una funcionalidad extra, puede instalar un plugin para un widget alternativo como WordPress Popular Posts, que muestra el contenido más popular. Alternativamente, el widget Advanced Random Posts se actualiza cada vez que el usuario visita una nueva pantalla.

2. Widget de Comentarios recientes

¿Quiere mostrar a los visitantes lo vibrante que es su sitio y lo mucho que su público se compromete con su contenido?

El widget Comentarios recientes muestra los últimos comentarios en su sitio, dando a los visitantes la oportunidad de navegar directamente a esos comentarios y unirse a la discusión.

Widget de comentarios recientes

Widget de comentarios recientes

El widget Comentarios recientes viene con WordPress. De nuevo, si quieres añadir funcionalidad extra puedes instalar un plugin de comentarios de terceros como el widget WP Social Comments que permite a la gente comentar usando su cuenta de Facebook: bueno para la participación en los medios sociales.

3. Widgets de llamada a la acción

Un gran uso de un widget es animar a la gente a actuar, y puede hacerlo con un widget de llamada a la acción.

Su widget puede ser un simple botón, o puede crear algo más personalizado usando un widget de texto o un widget de HTML, o incluso un widget de imagen, todos los cuales vienen preinstalados con WordPress.

En uno de mis propios sitios, he creado un widget de llamada a la acción que anima a la gente a inscribirse en mi lista de correo. Esto utiliza el widget HTML incorporado en el que he incluido una imagen, algo de texto y un botón que he codificado en HTML.

Widgets de Llamada a la Acción en mi sitio

Widgets de Llamada a la Acción en mi sitio

4. Widgets de navegación

También puede usar widgets para animar a la gente a navegar por su sitio.

Hay algunas opciones para esto: los widgets de Categorías o Nube de Etiquetas y el widget del Menú de Navegación.

El widget Menú de navegación le permite crear un menú de navegación personalizado, así como el menú de navegación principal de su sitio, y luego agregarlo a un área de widgets.

Incluso puede añadir su menú de navegación principal a un área de widgets, aunque esto sólo funcionará si tiene un menú de navegación pequeño.

Widget del menú de navegación

Widget del menú de navegación

Añadir un menú de navegación al pie de su sitio animará a la gente que llegue al final de un post a navegar por su sitio. Es particularmente útil para los usuarios de móviles que pueden tener que desplazarse mucho para volver al menú principal de navegación después de llegar al final de un mensaje.

Alternativamente, puede usar el widget incorporado de Categorías para mostrar una lista de las categorías de su sitio, o el widget de Nube de etiquetas para facilitar a la gente el acceso a los archivos de etiquetas.

5. Widgets de los medios de comunicación

Añadir medios de comunicación a su barra lateral o pie de página le dará vida a su sitio y proporcionará a los usuarios algo que ver o interactuar.

Puede usar el widget Imagen incorporado para mostrar cualquier imagen en la barra lateral o en el pie de página, y le permite convertir esa imagen en un enlace también.

Widget de imagen

Widget de imagen

Alternativamente, el widget de vídeo le permite transmitir vídeo de YouTube o Vimeo directamente en el área del widget de su sitio. Esto es particularmente útil si su sitio tiene áreas de widgets especiales para la página de inicio, pero también puede ser bueno en el pie de página como una forma de captar la atención de la gente cuando llega al final de un post.

6. Widgets de medios sociales

Si desea relacionarse con las personas que visitan su sitio web a través de los medios sociales, al agregar la alimentación de los medios sociales a la barra lateral o al pie de su sitio, mostrará a la gente que usted es activo en los medios sociales y los alentará a que le gusten o le sigan.

Una forma de acceder a los widgets de medios sociales para las plataformas más grandes (Facebook, Twitter, Instagram) es instalar el plugin Jetpack, que incluye todo esto y mucho más.

El plugin Jetpack

El plugin Jetpack

Alternativamente, todas las plataformas de medios sociales tienen sus propios plugins, disponibles gratuitamente a través del directorio de plugins. O puedes encontrar plugins de terceros que te permitirán personalizar la forma de mostrar tu feed de medios sociales.

7. Widget de la cesta de la compra

Si tiene una tienda de comercio electrónico en su sitio usando un plugin como WooCommerce, es una buena idea incluir un widget de carrito para que los usuarios puedan navegar fácilmente a su carrito dondequiera que estén en la tienda.

Widget de la cesta de la compra

Widget de la cesta de la compra

Podría poner esto en la barra lateral donde la gente pueda verlo fácilmente, o en el encabezado para una mayor visibilidad si su tema incluye un área de widgets allí.

Los plugins de comercio electrónico como WooCommerce incluyen widgets de carrito de compras y otros widgets de comercio electrónico como parte del plugin, por lo que una vez que haya añadido el comercio electrónico a su sitio, los encontrarás añadidos a su pantalla de Widgets.

8. Widget de formulario

Si quiere que la gente se ponga en contacto con usted, haga preguntas o se inscriba en una lista de correo, puede añadir un formulario a su barra lateral.

No se incluye un widget de formulario con WordPress, pero puede añadir plugins para proporcionarlos, como el formulario de contacto 7 gratuito o los formularios de gravedad premium pero muy potentes.

9. Widget de Google Maps

Si su negocio está basado en un lugar físico y quiere que la gente pueda encontrarlo fácilmente, añadir un widget de mapa a su sitio le ayudará.

Hay varios plugins gratuitos de Google Maps que puede usar, como el plugin WP Google Maps.

Plugin de WP Google Maps

Plugin de WP Google Maps

Alternativamente, si no quiere instalar un plugin, puede tomar el código de incrustación de Google Maps y añadirlo a un widget HTML.

10. Widget de acceso

Si tiene un sitio de miembros, un widget de inicio de sesión facilitará a la gente el acceso a su sitio sin tener que ir a una página de inicio de sesión separada.

El Meta widget que viene con WordPress incluye un enlace de acceso pero también incluye otras cosas que puede que no quiera, así que le recomendaría usar un plugin separado para esto del directorio de plugins.

El widget Iniciar sesión con el widget de Ajax le da un formulario de inicio de sesión en su widget, lo que significa que la gente puede iniciar sesión en su sitio desde cualquier página.

Iniciar sesión con el plugin de widgets de Ajax

Iniciar sesión con el plugin de widgets de Ajax

11. Widget de búsqueda

Un widget muy simple pero increíblemente útil es el widget de Búsqueda, que viene precargado con WordPress.

Widget de búsqueda

Widget de búsqueda

Añada esto a su barra lateral o al encabezado y facilitará que la gente encuentre cosas en su sitio.

Si quiere aumentar la potencia de su widget de búsqueda, puede instalar el widget gratuito WP Google Search, que utiliza la búsqueda de Google.

¿Cómo añadir widgets a su sitio de WordPress?

Una vez que haya decidido qué tipo de widgets necesita para su sitio de WordPress, es hora de instalarlos.

No esté tentado de añadir demasiados. Cuantos más haya, menos probable es que los usuarios los noten. En su lugar, enfóquese en dos o tres widgets clave para la barra lateral. Puede añadir más al pie de página, donde son menos importantes de todos modos.

Y si tiene algún área extra de widgets en su tema, decida qué widgets poner en ella. Asegúrese de que encajan con la disposición y el diseño de su sitio.

Hay tres formas de añadir widgets:

Encontrar Widgets para su sitio de WordPress

Hay una gran variedad de widgets disponibles, por lo que puede ser difícil elegir cuál instalar. Echemos un vistazo a las opciones y luego examinemos cómo podría elegir la mejor para usted.

Los widgets que vienen con WordPress

Si uno de los widgets preinstalados es lo que usted necesita, entonces use eso. Le ahorrará tiempo y significará menos código ejecutándose en su sitio.

Widgets preinstalados de WordPress

Widgets preinstalados de WordPress

Los widgets preinstalados son:

Añadir Widgets con un Plugin

El directorio de plugins de WordPress tiene miles de plugins de widgets gratuitos que le permitirán elegir entre más widgets.

Además de eso, muchos otros plugins también incluyen widgets, como un plugin de comercio electrónico que le da un widget de carrito y más.

Si el directorio de plugins no tiene el plugin que necesita, puede decidir añadir un plugin premium. A veces estos ofrecerán más funciones o una interfaz más intuitiva. Pero a veces encontrará las mismas características en un plugin gratuito, así que haga una buena búsqueda en el directorio de plugins antes de pagar por ellos.

¿Cómo encontrar el widget adecuado para su sitio?

Para encontrar el widget de WordPress adecuado, sigua estos consejos:

  1. Identifique exactamente lo que necesita del widget. ¿Qué funcionalidad necesita tener y cómo quiere que se vea? ¿Necesita enlazar con alguna API de terceros?
  2. Revis los widgets incorporados para ver si hay alguno que se ajuste a sus necesidades. Pruebe las que sean relevantes, si encuentra una adecuada, eso es genial. Si no…
  3. Revise el directorio de plugins, al que puede acceder a través de Plugins > Add New. Intente buscar más de un término para encontrar el plugin adecuado, y busque con y sin la palabra ‘widget’. A veces un plugin que no se centra en los widgets incluirá un widget como parte de un conjunto más amplio de características.
  4. Si no encuentra nada adecuado entre los plugins gratuitos, busque un premium plugin. Pídale a otros usuarios de WordPress recomendaciones y mire las reseñas antes de elegir una.

Sea cual sea el widget que elija, tendrá que probarlo para comprobar que funciona como usted quiera. Si está comprando plugins premium, le recomiendo que compre uno con garantía de devolución de dinero o un periodo de prueba gratuito en caso de que no sea el adecuado.

¿Cómo añadir widgets a la barra lateral y al pie de página en WordPress?

Ahora que ha elegido su widget, es hora de añadirlo a su sitio.

Puede añadir widgets a cualquier área de widgets activa proporcionada por su tema. Si su tema no tiene un área de widgets en el lugar donde quiere, intente buscar un tema alternativo.

Más tarde en este post le mostraré cómo codificar su propio área de widgets.

Hay dos formas de añadir widgets a su sitio:

Widgets en el Personalizador

Widgets en el Personalizador

Le mostraré cómo usar ambos métodos en breve, pero primero echemos un vistazo a las áreas de los widgets y por qué hace los que hace con Su tema.

Los widgets no son sólo para la barra lateral

Dependiendo del tema de WordPress, puede que tenga áreas de widgets en varios lugares.

La mayoría de los temas tienen áreas de widgets en la barra lateral y en el pie de página. Pero algunos también los tienen en otros lugares, como debajo o encima del contenido o en el encabezado.

Si va a la pantalla de configuración de los widgets en el administrador de WordPress, podrá ver todas las áreas de los widgets de su tema.

Utilizo un tema con múltiples áreas de widgets en muchos lugares. En la captura de pantalla que aparece a continuación se puede ver que hay áreas de widgets por encima y por debajo del contenido, en el encabezado, debajo del pie de página principal.

Pantalla de configuración de widgets, áreas de widgets

Pantalla de configuración de widgets, áreas de widgets

Si quiere añadir widgets a otros lugares de su sitio, tiene sentido encontrar un tema que tenga varias áreas de widgets. La mejor manera de hacerlo es utilizar un tema marco.

Un buen ejemplo de un widget en un lugar de su tema que no es la barra lateral o el pie de página es añadir una barra de búsqueda en el encabezado como la que tengo en uno de mis sitios web.

Barra de búsqueda en la cabecera

Barra de búsqueda en la cabecera

Áreas y temas de los widgets

Las áreas de los widgets se codifican en los archivos de plantillas de temas, así como en el archivo de funciones de temas.

Aquí puede ver el código que he usado en mi archivo de funciones temáticas para añadir un área de widgets que irá en el encabezado.

register_sidebar( array(
 'name' => __( 'In Header Widget Area', 'rmccollin' ),
 'id' => 'in-header-widget-area',
 'description' => __( 'A widget area located to the right hand side of the header, next to the site title and description.', 'rmccollin' ),
 'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
 'after_widget' => '</div>',
 'before_title' => '<h3 class="widget-title">',
 'after_title' => '</h3>',
) );

Y aquí está el código en mi archivo header.php que añade esa área de widgets en el lugar correcto del tema.

if ( is_active_sidebar( 'in-header-widget-area' ) ) { ?>

 <aside class="in-header widget-area right" role="complementary">
  <?php dynamic_sidebar( 'in-header-widget-area' ); ?>
 </aside>

<?php }

Si quiere añadir áreas de widgets adicionales en su tema, necesita añadir el mismo tipo de código. Le mostraré cómo hacer esto más tarde en este post.

No olvide que si su tema no tiene tantas áreas de widgets como le gustaría, siempre puede hacer una de dos cosas:

Una vez que tenga áreas de widgets en todos los lugares de su tema, puede empezar a añadirles widgets.

¿Cómo usar la pantalla de Widgets para añadir Widgets?

Hay dos maneras de añadir widgets a su sitio de WordPress. La primera es usar la pantalla de Widgets en el administrador de WordPress.

Haga clic en Apariencia > Widgets. Esto hace que aparezca la pantalla de widgets.

Pantalla de widgets

Pantalla de widgets

Para añadir un widget puede hacer una de dos cosas:

Seleccionar un área y un widget

Seleccionar un área y un widget

Es posible que tenga que editar la posición del widget dentro del área del mismo.

Puede añadir tantos widgets como quiera a cada área de widgets, pero no se pase de la raya. Puede arrastrarlos dentro del área del widget para ponerlos en el orden correcto. También puede arrastrarlos de un área de widgets a otra si decide que no le gusta su aspecto.

También puede usar el teclado para añadir widgets mediante la pantalla de Widgets, de modo que si no tiene acceso a un ratón, puede seguir añadiendo widgets.

Añadir y editar widgets en modo de accesibilidad

Si no puede usar un ratón, puede usar la pantalla de Widgets con un teclado.

En primer lugar, ponga la pantalla en modo de accesibilidad haciendo clic en (o pulsando y seleccionando) el enlace Activar el modo de accesibilidad en la parte superior derecha de la pantalla.

Enlace del modo de accesibilidad

Enlace del modo de accesibilidad

La pantalla cambiará entonces para reflejar el hecho de que estás en modo de accesibilidad.

Modo de accesibilidad de la pantalla de widgets

Modo de accesibilidad de la pantalla de widgets

A continuación, puede navegar entre los elementos de la pantalla utilizando la tecla Tab del teclado y pulsar Intro para seleccionar un elemento y actuar sobre él. Puede  tabular a un widget, pulsar Return en el enlace Añadir y luego elegir dónde quiere añadirlo, o bien tabular al área del widget y pulsar Return en el enlace Editar.

¿Cómo usar el personalizador de WordPress para añadir widgets?

El uso del Personalizador para agregar widgets en lugar de la pantalla de widgets significa que puede ver sus widgets a medida que los agrega. Esto hace que sea más fácil ver cómo se verán sus widgets y moverlos entre las áreas de los mismos si quiere.

En el menú de administración, haga clic en Apariencia > Personalizar. Alternativamente, desde la barra de administración en la parte superior de la pantalla del sitio en vivo (suponiendo que estés conectado), sólo tiene que hacer clic en Personalizar. Esto abrirá el Personalizador.

Barra de administración de WordPress

Barra de administración de WordPress

Ahora haga clic en la opción Widgets y verá una lista de todas las áreas de widgets de su tema. Haga clic en el área de la aplicación en la que desea añadir un widget y haga clic en el botón Añadir un widget.

Esto le da una lista de todos los widgets disponibles para su sitio. Eso incluye todos los widgets incorporados que vienen con WordPress más cualquier widget que haya añadido mediante plugins.

Agregar un botón de widget

Agregar un botón de widget

Elija el widget que quiera añadir a esa zona de widgets y lo verá en la pantalla de vista previa del lado derecho.

Puede reordenar los widgets arrastrándolos hacia arriba y hacia abajo en el lado izquierdo o haciendo clic en el enlace Reordenar debajo de la lista de widgets y luego haciendo clic en las flechas para moverlos hacia arriba y hacia abajo.

Edición de widgets en el Personalizador

Edición de widgets en el Personalizador

Una vez que haya terminado de añadir widgets a través del Personalizador, no olvide de hacer clic en el botón Publicar en la parte superior izquierda para que se guarden los cambios. Si deja el Personalizador sin hacer esto, ninguno de sus cambios se reflejará en el sitio en vivo.

Una vez que haya añadido sus widgets, por favor, écheles un vistazo y compruebe cómo encajan en el diseño de su página. Si ha añadido demasiadas áreas de widgets, las cosas pueden parecer un poco desordenadas. Necesitará quitar algunos de ellos o puedes moverlos de un área de los widgets a otra.

Es muy fácil hacerlo en la pantalla de Widgets, donde puede arrastrar los widgets entre las áreas de los mismos.

¿Cómo añadir un widget a una página específica?

Algunos temas incluyen áreas de widgets que son sólo para páginas específicas, como la página de inicio. ¿Pero qué pasa si quiere añadir un widget a una sola página de su sitio?

Puede hacer esto en el editor de publicaciones y páginas de Gutenberg.

Añada un nuevo bloque de la forma habitual y luego seleccione el tipo de bloque Widgets.

Tipo de bloque de widget

Tipo de bloque de widget

A continuación, puede elegir entre muchos de los widgets que has habilitado para su sitio y añadirlos al contenido de su publicación o página. Es realmente útil si quiere añadir un widget de formulario, un widget de llamada a la acción o una lista de sus últimas publicaciones.

¿Cómo editar los widgets?

Una vez que haya añadido los widgets a su sitio, puede hacer cambios en ellos. Los widgets individuales tendrán ajustes a los que podrá acceder a través de la pantalla de Widgets o del Personalizador (no importa cuál de ellos hayas usado para añadir el widget).

Algunos widgets no incluyen ninguna configuración, pero otros tienen ajustes para el título del widget, por ejemplo, o el número de mensajes que se muestran. Algunos son más complicados y requieren que configures el widget en una página de configuración separada. Revise la documentación del desarrollador de su plugin.

Las opciones que tiene para editar los plugins de los widgets incluyen:

Para editar la configuración del widget, encuentre ese widget en la pantalla de widgets o en el personalizador, y simplemente edita cualquier opción que se le ofrezca.

¿Necesita un alojamiento rápido, seguro y fácil de desarrollar para los sitios de sus clientes? Kinsta está construido teniendo en cuenta a los desarrolladores de WordPress y proporciona muchas herramientas y un poderoso panel de control. Echa un vistazo a nuestros planes

Editar las opciones de los widgets

Editar las opciones de los widgets

Para mover el widget de un área a otra, abra la pantalla de widgets y arrástrelo de un área de widgets a otra. En el modo de accesibilidad, navega hasta la flecha a la derecha del widget y selecciona una de las opciones.

Borrar Widgets

Para eliminar un widget en la pantalla de Widgets, busque ese widget y haga clic en el enlace de eliminación que se encuentra en la parte inferior izquierda del cuadro de configuración del widget.

Borrar un widget en la pantalla de widgets

Borrar un widget en la pantalla de widgets

Para eliminar un widget en el Personalizador, encuentre el widget en su área de widgets. Haga clic en la flecha que aparece a la derecha del nombre del widget y, a continuación, haga clic en el enlace Eliminar que aparece en la parte inferior izquierda de la configuración del widget.

Eliminar un widget en el Personalizador

Eliminar un widget en el Personalizador

También puede eliminar un widget de un área de widgets pero aún así ponerlo a disposición para su uso posterior a través de la pantalla de Widgets.

Desplácese hacia abajo al área de Widgets Inactivos hacia la parte inferior de la pantalla. Arrastre los widgets a esta área para eliminarlos del área de los mismos pero mantengalos como borradores con su configuración actual. Siempre puede arrastrarlos de nuevo a un área de widgets si quiere en el futuro.

Si cambia de tema y el nuevo tema tiene áreas de widgets diferentes, cualquier widget que no encaje en las áreas de widgets del nuevo tema se moverá automáticamente a la lista de Widgets Inactivos de WordPress.

¿Cómo añadir una nueva área de widgets a su tema?

Si su tema no tiene áreas de widgets donde quiere, siempre puede añadir las suyas propias. Lo hace añadiendo dos piezas de código.

Añadamos un área de widgets debajo del contenido.

Creación del área de widgets en el archivo de funciones temáticas

El primer paso es configurar el área de los widgets con la función register_widget().

Si utiliza un tema de WordPress de terceros (aquí tiene una selección de los mejores), necesita crear un tema hijo para hacerlo. La razón es que si actualiza el tema en el futuro, todos sus cambios se perderán.

Si está trabajando con su propio tema, puede simplemente editar el tema.

Empiece abriendo el archivo functions.php de su tema. En la parte inferior del archivo, agregue este código.

function kinsta_register_widgets() {
 
 register_sidebar( array(
  'name' => __( 'After Content Widget Area', 'kinsta' ),
  'id' => 'after-content-widget-area',
  'description' => __( 'Widget area after the content', 'kinsta' ),
  'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
  'after_widget' => '</div>',
  'before_title' => '<h3 class="widget-title">',
  'after_title' => '</h3>',

 ) );

}

add_action( 'widgets_init', 'kinsta_register_widgets' );

Ahora guarde su archivo functions.php. Si va a la pantalla de Widgets o al Personalizador, encontrará la nueva área de widgets disponible para que pueda añadirlos.

Pero si hace esto, no aparecerán en la página. Esto se debe a que necesitas añadir algo de código a su archivo de plantilla de temas.

Agregar el widget a un archivo de plantilla de temas

Lo primero es averiguar qué archivo de plantilla de temas necesita usar.

Una vez que haya identificado el archivo de plantilla que necesita editar y exactamente donde necesita tener el código para el área del widget, añada el siguiente código. En el caso de un área de widgets después del contenido, lo añadimos al archivo post.php y page.php de nuestro tema:

if ( is_active_sidebar( 'after-content-widget-area' ) ) { ?>

 aside class="after-content widget-area full-width" role="complementary">
  <?php dynamic_sidebar( 'after-content-widget-area' ); ?>
 </aside>

<?php }

Ahora guarde su(s) archivo(s) de plantilla.

Tenga en cuenta que su código será diferente del mío dependiendo de cómo haya llamado a su área de widgets y de los elementos en los que quieras colocarlo. Generalmente utilizo un elemento aparte porque a mi juicio están diseñados para las barras laterales y las áreas de los widgets.

Consejo ninja: Si mueve el final del elemento contenedor del contenido al principio de la barra lateral y/o al pie de página, entonces puedes añadirlo allí y sólo necesitas añadirlo una vez.

Ahora, si echa un vistazo a su sitio, verá que cualquier widget que haya añadido a sus áreas de widgets se mostrará en el lugar correcto. Si no están en el lugar correcto, vuelva y edita sus archivos de plantillas, asegurándose de que el código está en el lugar donde lo quiere. También puede que tenga que editar su CSS para que se vea como lo quiere.

Widget en el sitio en vivo

Widget en el sitio en vivo

¿Cómo codificar widgets usando la API de widgets?

Así que ahora sabe cómo elegir los widgets para su sitio, cómo añadirlos a su sitio y cómo registrar nuevas barras laterales o áreas de widgets. El siguiente paso es aprender a crear un widget de WordPress.

A veces, puede que descubra que no hay un plugin disponible para crear el widget exacto que quiere. Eso significa que tendrá que codificarlo.

En este ejemplo, voy a mostrarte cómo codificar un simple widget de llamada a la acción.

Resumen de la API de Widgets

La API de Widgets en WordPress incluye todo el código que necesita para registrar, crear y codificar widgets. La API de Widgets incluye:

Aquí usaremos una clase para construir un widget. El primer paso es crear un plugin que contenga el widget.

Crear un plugin para su widget de WordPress

Para crear su propio widget, necesitará codificar un plugin. No añada el código de un nuevo widget a su tema, porque los widgets tienen que ver con la funcionalidad y no con la visualización. Si cambia de tema en el futuro, querrá seguir teniendo acceso a ese widget.

Empiece por crear un plugin vacío. Cree una carpeta de plugins en su directorio wp-content/plugins y añada un archivo vacío a eso. Dele un nombre apropiado. Abra ese archivo y añada este código.

<?php
/**
 * Plugin Name: Kinsta Call to Action Widget
 * Plugin URI: https://rachelmccollin.com
 * Description: A simple call to action widget.
 * Version: 1.0
 * Author: Rachel McCollin
 * Author URI: https://rachelmccollin.co.uk
 */

Tendrá que editar la URI del autor y conectar la URI a la suya. Eso creará un plugin para usted que puede activar a través de la pantalla Plugins.

Pantalla de plugins de widgets

Pantalla de plugins de widgets

Pero si lo activa, no pasará nada. Va a tener que añadir algún código a su plugin.

Crear una clase para el Widget

El código del widget va dentro de una clase. Así que añada eso a continuación.

class kinsta_Cta_Widget extends WP_Widget {

}

Crear la función de constructor

Lo primero que hay que hacer dentro de la clase es la función de constructor para crear el widget. Añada esto dentro de los aparatos de la clase.

//widget constructor function

function __construct() {

 $widget_options = array (
  'classname' => 'kinsta_cta_widget',
  'description' => 'Add a call to action box with your own text and link.'
 );

 parent::__construct( 'kinsta_cta_widget', 'Call to Action', $widget_options );

}

Esto comienza a construir el widget.

Crear el formulario para dar salida al Widget

A continuación, necesitamos un formulario que será utilizado por la pantalla de Widgets y el Personalizador para crear el widget. Añada esto, todavía dentro de los frenos.

//function to output the widget form

function form( $instance ) {

 $title = ! empty( $instance['title'] ) ? $instance['title'] : '';
 $link = ! empty( $instance['link'] ) ? $instance['link'] : 'Your link here';
 $text = ! empty( $instance['text'] ) ? $instance['text'] : 'Your text here';
?>

<p>
 <label for="<?php echo $this->get_field_id( 'title'); ?>">Title:</label>
 <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo esc_attr( $title ); ?>" /></p>

<p>
 <label for="<?php echo $this->get_field_id( 'text'); ?>">Text in the call to action box:</label>
 <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'text' ); ?>" name="<?php echo $this->get_field_name( 'text' ); ?>" value="<?php echo esc_attr( $text ); ?>" /></p>

<p>
 <label for="<?php echo $this->get_field_id( 'link'); ?>">Your link:</label>
 <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'link' ); ?>" name="<?php echo $this->get_field_name( 'link' ); ?>" value="<?php echo esc_attr( $link ); ?>" /></p>

<?php }

Esto le da a los usuarios un formulario que pueden usar para agregar texto y un enlace al cuadro de llamada a la acción.

Crear la función para guardar el widget

Ahora tiene que guardar todo lo que se introduzca en ese formulario. Añada esto.

//function to define the data saved by the widget

function update( $new_instance, $old_instance ) {
 $instance = $old_instance;
 $instance['title'] = strip_tags( $new_instance['title'] );
 $instance['text'] = strip_tags( $new_instance['text'] );
 $instance['link'] = strip_tags( $new_instance['link'] );
 return $instance;          

}

Esto guardará los datos introducidos por los usuarios en la configuración del widget.

Crear la función para dar salida al Widget

Ahora tiene que añadir el código que mostrará el widget en el sitio. De nuevo, agregue esto dentro de los frenos:

//function to display the widget in the site

function widget( $args, $instance ) {
 //define variables
 $title = apply_filters( 'widget_title', $instance['title'] );
 $text = $instance['text'];
 $link = $instance['link'];

 //output code
 echo $args['before_widget'];
 ?>

 <div class="cta">
  <?php if ( ! empty( $title ) ) {
   echo $before_title . $title . $after_title;
  };
  echo '<a href="' . $link . '">' . $text . '</a>';
  ?>
 </div>

 <?php
 echo $args['after_widget'];

}

Registrar el Widget

Ahora que tiene su clase escrita, es hora de registrar el widget de WordPress para que funcione. Añada este código fuera de la clase.

//function to register the widget
function kinsta_register_cta_widget() {

 register_widget( 'kinsta_Cta_Widget' );
  
}
add_action( 'widgets_init', 'kinsta_register_cta_widget' );

Ahora guarde el archivo del plugin. Vaya a la pantalla de Widgets y verá el widget para usar.

Nuevo widget en la pantalla de widgets

Nuevo widget en la pantalla de widgets

Si lo agrega a un área de widgets y añade texto y un enlace a él, se emitirá en el sitio en vivo.

Nuevo widget en el sitio en vivo

Nuevo widget en el sitio en vivo

Puede que no se vea tan bien ahora mismo. Necesita añadir algo de CSS para darle estilo.

Añadiendo CSS al Widget

Para añadir CSS a su plugin, tiene que crear una hoja de estilos y ponerla en cola en su plugin. Añada esto a su archivo de plugins antes de la clase.

function kinsta_widget_enqueue_styles() {

 wp_register_style( 'widget_cta_css', plugins_url( 'css/style.css', __FILE__ ) );
 wp_enqueue_style( 'widget_cta_css' );

}
add_action( 'wp_enqueue_scripts', 'kinsta_widget_enqueue_styles' );

Ahora necesita añadir un archivo style.css dentro de la carpeta del plugin y añadir cualquier estilo a eso. ¡Se lo dejo a usted!

Ahora tiene un simple botón de llamada a la acción que puede añadir a cualquier área de widgets en su sitio. Si lo añade a su barra lateral, por ejemplo, la gente podrá usarlo para llegar a su página de registro desde cualquier lugar del sitio.

Puedes crear widgets más complejos con ajustes y opciones adicionales, pero esto te da una idea de cómo empezar a crear tu propio widget.

Si quiere ver mi código para este plugin, incluyendo el estilo, puedes encontrarlo en Github. Si está empezando con el código, aquí tiene una guía detallada sobre git vs GitHub y cómo empezar con ambos.

¡Los widgets son una de las mejores características de WordPress! Pueden literalmente cambiar su sitio de 'meh' a 'yes!' 🤔😻 ¡Aprenda qué son, cómo usarlos y cómo codificar sus propios widgets con esta guía en profundidad!Click to Tweet

Resumen

Los widgets son una de mis características favoritas de WordPress. Pueden darle vida a su sitio web y ayudarle a conseguir más registros o convertir más visitantes en clientes. Puede añadir widgets de WordPress a cualquier área de widgets existente en su tema, o puede añadir áreas de widgets adicionales para poder añadir más widgets en más lugares.

También hay muchos lugares para encontrar widgets. WordPress viene con varios de ellos preinstalados, y también puede instalar más de ellos a través de plugins. Pero eso no es todo, si se siente cómodo, también puede codificar sus propios widgets usando la API de Widgets.

Ahora le toca: ¿cómo usa los widgets de WordPress en su sitio? ¿Cuántos está usando?


Si le ha gustado este artículo, entonces le encantará la plataforma de Kinsta WordPress hosting. Acelere su sitio y reciba soporte 24/7 de nuestro equipo de WordPress veterano. Nuestra infraestructura potenciada por Google Cloud se centra en escalamiento automático, rendimiento y seguridad. ¡Déjenos mostrarle la diferencia con Kinsta! Conozca nuestros planes