¿Qué son los widgets de WordPress y cómo crearlos?

Los widgets de WordPress son objetos PHP que pueden ayudarte a añadir fácilmente contenido o funciones a tu sitio web sin codificar. 

Puedes utilizar widgets integrados, de terceros o personalizados para diversos fines, como integrar feeds de redes sociales, mostrar entradas recientes del blog o añadir un formulario de contacto.

En este artículo, veremos todo lo que necesitas saber sobre los widgets de WordPress, incluidos sus conceptos básicos y cómo encontrar widgets preinstalados. 

También te explicaremos cómo aplicarlos a tu sitio, crear nuevos widgets desde cero y personalizarlos para adaptarlos a tus necesidades específicas.

Descarga la hoja de trucos de WordPress definitiva

¿Dónde encontrar widgets en WordPress?

Si utilizas un tema clásico, sigue estos pasos para acceder al área de widgets de tu sitio web WordPress:

1. Accede a tu panel de control de WordPress.
2. Asegúrate de que el plugin Classic Widgets está instalado y activado.
3. Busca y haz clic en Apariencia en la barra lateral izquierda.
4. Selecciona Widgets.

Verás los Widgets disponibles en la parte izquierda de la pantalla. Estos son los widgets que puedes añadir directamente a tu sitio.

En el lado derecho, verás las áreas de widgets o barras laterales, que suelen incluir la barra lateral, el pie de página y la cabecera. 

Las áreas de widgets disponibles dependerán del tema clásico de WordPress que hayas elegido.

Si utilizas un tema de bloques, puedes encontrar widgets en el Editor de sitios, Páginas o Entradas. Simplemente despliega el insertador de bloques o el botón + en la esquina superior izquierda de la pantalla y desplázate hacia abajo para ver los widgets disponibles.

Cómo añadir un widget en WordPress

Hay muchos widgets listos para usar que puedes añadir a tu sitio de WordPress. Algunos están convenientemente integrados en el propio WordPress y otros puedes conseguirlos instalando plugins. Repasemos ambas opciones.

Añadir widgets integrados a tu sitio web

Si utilizas un tema clásico, sigue estos pasos para añadir cualquiera de los widgets preinstalados a tu sitio web WordPress:

1. Desde el panel de administración de WordPress, ve a Apariencia → Widgets.
2. Elige una opción de los Widgets disponibles y arrástrala a la zona preferida del lado derecho. Por ejemplo, añadiremos un widget de Entradas recientes a la Barra de pie de página 1.
3. Personaliza el widget introduciendo un Título y especificando el Número de entradas a mostrar. También tienes la opción de mostrar la fecha de publicación.
4. Cuando hayas terminado de personalizar, haz clic en Guardar.

Así es como se vería el widget en el sitio web.

Si utilizas un tema en bloque, sigue estos pasos para añadir cualquiera de los widgets preinstalados a tu sitio web WordPress:

1. Desde el panel de administración de WordPress, ve a Apariencia → Editor.
2. En la vista previa del sitio web, selecciona el área de widgets que prefieras. En este ejemplo, seleccionaremos el Pie de página.
3. Haz clic en el botón + y desplázate hacia abajo hasta que encuentres la categoría Widgets. Como ejemplo, seleccionaremos el widget Últimas entradas.
4. El widget aparecerá en el área de previsualización. Puedes personalizar su alineación y decidir si quieres que los enlaces se muestren en una vista de lista o de cuadrícula.
5. Cuando hayas terminado de personalizar, haz clic en Guardar.

Así es como se vería el widget en el sitio web.

Añadir widgets a tu sitio mediante plugins

También puedes añadir un widget a tu sitio instalando un plugin de terceros que lo ofrezca. 

Por ejemplo, utilizaremos el plugin RaraTheme Companion, que añade 23 widgets adicionales para ayudarte a personalizar aún más tu tema de WordPress. Sin embargo, ten en cuenta que algunos de estos plugins de widgets sólo son compatibles con temas clásicos.

Sigue estos pasos:

1. Asegúrate de que RaraTheme Companion está instalado y activado. 
2. Ve a Apariencia → Widgets. Verás más opciones en Widgets disponibles.

3. Elige el widget que quieras añadir y arrástralo a la zona de widgets que prefieras. Por ejemplo, vamos a añadir el widget Biografía del autor al Pie de página.
4. Personaliza el widget. Puedes añadir un título, el nombre del autor, una foto y muchas cosas más.

5. Haz clic en Guardar cuando hayas terminado.

¡Listo! El widget del plugin ya debería estar activo en tu sitio.

Cómo personalizar los widgets de WordPress con CSS

Dependiendo de tu tema, puedes personalizar los widgets a través del panel de control de WordPress o del Editor de Sitios. Sin embargo, el nivel de personalización puede ser limitado para algunos.

Si quieres un estilo más avanzado y te sientes cómodo con los conceptos básicos de HTML y CSS, puedes añadir CSS personalizado a WordPress. A continuación te explicamos cómo:

1. En el Editor, selecciona el widget al que quieras añadir CSS personalizado.
2. En la barra lateral derecha, cambia a la pestaña Bloque y desplázate hacia abajo hasta que encuentres Avanzado.

3. Especifica un nombre de clase CSS en la barra CLASE(S) CSS ADICIONAL(ES) y pulsa Actualizar. Utilizarás esta clase personalizada para especificar el nuevo CSS de tu widget.
4. Vuelve al panel de administración y ve a Apariencia → Personalizar → CSS adicional.
5. Aparecerá un cuadro de texto donde añadirás el estilo CSS. Por ejemplo, aquí se muestra cómo añadir un color de fondo para tu widget. Observa que el widget en el CSS de abajo significa la clase personalizada que definimos en el paso anterior.

6. Cuando hayas terminado, haz clic en Guardar.

Eso es todo lo que tienes que hacer. El CSS adicional se aplicará ahora a tu widget.

Cómo crear un nuevo widget en WordPress

Aunque hay muchos widgets listos para usar integrados en WordPress y en plugins de terceros, crear un nuevo widget personalizado puede ser útil si tienes una necesidad muy específica.

Los siguientes pasos te guiarán sobre cómo crear un widget en WordPress. Para ayudarte a visualizar mejor el proceso, crearemos un widget sencillo para añadir un bloque de contenido a la barra lateral o al área de widgets de tu sitio.

1. Crea el archivo del plugin del widget

Primero, crea un nuevo directorio llamado mi-widget-personalizado. Dentro del directorio, crea un nuevo archivo llamado mi-widget-personalizado.php. Este archivo contendrá el código de tu widget.

Ahora, abre el archivo en un editor de texto y copia y pega el código que aparece a continuación. 

Este código creará la cabecera del plugin, que proporciona metadatos sobre el plugin. Incluye el nombre del plugin, la descripción, la versión y el autor. 

También tiene una medida de seguridad que impide que el código del plugin se ejecute fuera de los sitios web de WordPress.

<?php

/*

Plugin Name: My Widget Personalizado

Description: Un widget simple de ejemplo

Version: 1.0

Author: Diego Vargas

*/

// Ensure this file is being included by WordPress.

defined('ABSPATH') or die('No script kiddies please!')

A continuación, crearemos la clase My_Custom_Widget. Esta clase define un widget personalizado de WordPress que extiende la clase WP_Widget. Estas son las funciones esenciales de este widget:

• __construct(): inicializa el widget de WordPress con un identificador único, un nombre y una descripción.
• widget(): muestra el contenido del widget en el front-end, incluyendo un título si lo has establecido en la configuración del widget. A continuación aparece un mensaje por defecto: “¡Hola, mundo!”.
• form(): genera el formulario de configuración del widget en el área de administración, permitiendo a los usuarios establecer un título personalizado para su widget. 
• update(): guarda la configuración del widget en la base de datos.

Las funciones __construct() y widget() son obligatorias para definir un plugin de widget.

Aunque técnicamente es posible omitir las funciones form() y update() si tu widget no tiene opciones, la mejor práctica es incluirlas, aunque se mantengan vacías.

Ahora, sigue adelante y copia y pega el siguiente código en el mismo archivo PHP.

class My_Custom_Widget extends WP_Widget {

// Constructor

function __construct() {

  parent::__construct(

      'my_custom_widget', // Base ID

      __('My Custom Widget', 'text_domain'), // Name

      array('description' => __('A Custom Widget', 'text_domain'),) // Args

  );

}

// The widget() method to display the widget content on the front-end

public function widget($args, $instance) {

  echo $args['before_widget'];

  if (!empty($instance['title'])) {

      echo $args['before_title'] . apply_filters('widget_title', $instance['title']) . $args['after_title'];

  }

  echo __('Hola, mundo!', 'text_domain');

  echo $args['after_widget'];

}

// The form() method to create the widget settings form in the admin area

public function form($instance) {

  $title = !empty($instance['title']) ? $instance['title'] : __('New title', 'text_domain');

  ?>

  <p>

  <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label>

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

  </p>

  <?php

}

// The update() method to save the widget settings

public function update($new_instance, $old_instance) {

  $instance = array();

  $instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']) : '';

  return $instance;

}

}

Por último, añade el siguiente código a tu archivo. Este código se encarga de registrar el widget. Con esto, el archivo del plugin está completo.

// Register the widget

function register_my_custom_widget() {

register_widget('My_Custom_Widget');

}

add_action('widgets_init', 'register_my_custom_widget');

2. Crea un archivo y súbelo

Una vez que el archivo PHP de tu plugin esté listo, crea un archivo ZIP del directorio Mi-widget-personalizado.

A continuación, accede al panel de control de WordPress y ve a Plugins → Añadir nuevo plugin. Sube el archivo ZIP y espera hasta que se instale el plugin.

Por último, ve a Plugins → Plugins instalados, desplázate hacia abajo hasta que veas Mi widget personalizado en el área de widgets y haz clic en Activar.

3. Añade el widget a una barra lateral de WordPress

Para añadir el widget personalizado que acabas de hacer a una barra lateral, ve a Apariencia → Widgets.

A continuación, selecciona la barra lateral en la que quieres colocar el widget. Haz clic en el icono + y, a continuación, busca Mi widget personalizado en la barra de búsqueda. Cuando aparezca el widget, haz clic en él.

A continuación, puedes establecer el título del widget y la visibilidad preferida.

Por último, haz clic en Actualizar en la parte superior derecha de la pantalla. Eso es todo: el nuevo widget ya está instalado y puedes añadirlo a tu sitio de WordPress.

10 ejemplos de widgets populares en WordPress

WordPress ofrece cientos de widgets integrados y de terceros. En esta sección, hablaremos de diez opciones populares que pueden añadir funciones útiles a tu sitio web y mejorar su experiencia de usuario.

Últimas entradas

Por algo se considera uno de los widgets clásicos. Como su nombre indica, destaca las últimas entradas de tu blog, manteniendo a los visitantes informados sobre tu contenido más reciente y llevándoles potencialmente a explorar más tu sitio.

Lista de categorías

El widget Lista de categorías es otra opción integrada que enumera todas las categorías de tu blog. Ayuda a los visitantes a navegar rápidamente por el contenido que más les interesa.

Nube de etiquetas

El widget Nube de etiquetas muestra tus etiquetas más utilizadas en un formato de nube, facilitando a los visitantes ver sobre qué temas escribes con frecuencia. 

Cuanto más a menudo utilices una etiqueta, mayor será el tamaño de la fuente, lo que hará que destaque.

Iconos sociales

Este widget muestra iconos vinculados a tus perfiles en las redes sociales, ayudando a los visitantes a conectar fácilmente contigo en otras plataformas. 

Puedes personalizar los colores, el tamaño y la alineación de los iconos para adaptarlos a tu tema de WordPress.

HTML personalizado

Este widget integrado te permite añadir código HTML a tus áreas de widgets. 

Es ideal para desarrolladores y usuarios avanzados que quieran añadir funciones personalizadas o elementos de diseño a su sitio.

Archivos

El widget de archivos se puede utilizar para mostrar un archivo de fechas de tus entradas. Esta función permite a los visitantes navegar por contenidos antiguos de tu sitio.

Jetpack Search

Jetpack Search funciona con Elasticsearch, un potente motor de búsqueda. Incluye varias funciones útiles, como la indexación automática de todas las publicaciones y páginas públicas.

Preguntas frecuentes de RaraTheme Companion

Un widget de terceros ofrecido por RaraTheme Companion que añade una sección de preguntas frecuentes a tu sitio. 

Puedes especificar las preguntas y respuestas directamente desde el widget del formulario, así como personalizar la visibilidad y otros aspectos.

WPForms

El widget WPForms es una opción de terceros que te permite añadir fácilmente formularios de contacto, encuestas, formularios de pago o formularios de registro a tu barra lateral o a otras áreas de widgets.

WP Go Maps

El widget WP Go Maps viene con el popular plugin de mapas. Ofrece a los visitantes de tu sitio web un cómodo acceso a una ubicación específica en Google Maps. 

Puedes personalizar la apariencia del mapa, establecer una ubicación predeterminada, añadir varios pines, crear marcadores utilizando texto e imágenes, y muchas cosas más.

Consejos para gestionar los widgets de WordPress

Los widgets son una forma fantástica de añadir características y funcionalidades a tu sitio web. Sin embargo, cada función que añades tiene un coste para los tiempos de carga de la página, la capacidad de respuesta y la simplicidad visual de la interfaz de usuario de tu sitio web.

Estos costes pueden parecer minúsculos si se consideran individualmente. Por ejemplo, puede que tu nuevo widget de redes sociales sólo añada un milisegundo a los tiempos de carga de tu página. Pero cuantos más widgets añadas, más pueden entorpecer el rendimiento de tu sitio.

Aunque no hay un límite estricto para el número de widgets que puedes ejecutar, sólo debes añadir los widgets que realmente necesites para mantener el rendimiento de tu sitio web y la experiencia del usuario. 

Normalmente, hasta cinco widgets son suficientes para la mayoría de los sitios web.

Ten en cuenta que hay otros factores importantes que afectan al rendimiento de tu sitio web, como tu proveedor de alojamiento. Puesto que el alojamiento web es la base de tu sitio, es importante elegir un proveedor que esté bien optimizado para WordPress.

Recomendados por WordPress.org, los planes de alojamiento WordPress Gestionado de Hostinger ofrecen un conjunto de funciones de optimización para garantizar el máximo rendimiento de tu sitio web.

Aquí tienes otras buenas prácticas para mantener tu sitio web lo más limpio e intuitivo posible mientras utilizas widgets.

• Organiza tus widgets: utiliza varias áreas de widgets e intenta mantenerlos organizados de forma lógica. Por ejemplo, utiliza la barra lateral para la navegación y el pie de página para la información adicional.
• Previsualiza tus cambios: antes de publicar los widgets en tu sitio, utiliza la opción de previsualización en vivo del personalizador para asegurarte de que tienen el aspecto y funcionan como esperas.
• Actualiza regularmente los plugins: los widgets son una clase especial de plugins en el entorno WordPress. Debes mantener siempre actualizados tus plugins para garantizar la compatibilidad y seguridad de tus widgets. 

Conclusión

Los widgets de WordPress son una forma estupenda de personalizar el diseño y la funcionalidad de tu sitio. 

Desde mostrar entradas recientes del blog e iconos de redes sociales hasta integrar formularios de contacto y mostrar testimonios, puedes hacerlo todo con los widgets de WordPress.

En esta guía, has aprendido dónde encontrar widgets de WordPress, así como a añadirlos a tu sitio web y personalizarlos. 

También hemos examinado algunos de los widgets de WordPress más populares del mercado, incluidas las opciones integradas en WordPress y las de terceros, como RaraTheme Companion y Jetpack Search.

Si te sientes creativo, puedes probar a crear tu propio widget. Todo lo que hace falta es un poco de conocimiento de CSS y la guía paso a paso que hemos descrito.

Esperamos que las ideas compartidas en esta guía te permitan experimentar con diferentes widgets y hacer que tu sitio sea dinámico y atractivo, sin dejar de ser fácil de usar.

Widgets de WordPress – Preguntas frecuentes 

Esta sección cubre algunas de las preguntas más comunes sobre los widgets de WordPress. 

All of the tutorial content on this website is subject to Hostinger's rigorous editorial standards and values.