¿Dónde encontrar widgets en WordPress?<\/h2>
Si utilizas un tema clásico<\/strong>, sigue estos pasos para acceder al área de widgets de tu sitio web WordPress:<\/p> Verás los Widgets disponibles <\/strong>en la parte izquierda de la pantalla. Estos son los widgets que puedes añadir directamente a tu sitio.<\/p> 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. <\/p> Las áreas de widgets disponibles dependerán del tema clásico de WordPress que hayas elegido.<\/p> Si utilizas un tema de bloques<\/strong>, puedes encontrar widgets en el Editor de sitios, Páginas o Entradas. Simplemente despliega el insertador de bloques <\/strong>o el botón + <\/strong>en la esquina superior izquierda de la pantalla y desplázate hacia abajo para ver los widgets disponibles.<\/p> 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<\/a>. Repasemos ambas opciones.<\/p> Si utilizas un tema clásico<\/strong>, sigue estos pasos para añadir cualquiera de los widgets preinstalados a tu sitio web WordPress:<\/p> Así es como se vería el widget en el sitio web.<\/p> Si utilizas un tema en bloque<\/strong>, sigue estos pasos para añadir cualquiera de los widgets preinstalados a tu sitio web WordPress:<\/p> Así es como se vería el widget en el sitio web.<\/p> También puedes añadir un widget a tu sitio instalando un plugin de terceros que lo ofrezca. <\/p> Por ejemplo, utilizaremos el plugin RaraTheme Companion<\/a>, 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.<\/p> Sigue estos pasos:<\/p> ¡Listo! El widget del plugin ya debería estar activo en tu sitio.<\/p> 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.<\/p> 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>. A continuación te explicamos cómo:<\/p> Eso es todo lo que tienes que hacer. El CSS adicional se aplicará ahora a tu widget.<\/p> 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.<\/p> Los siguientes pasos te guiarán sobre cómo crear un widget en WordPress<\/a>. 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.<\/p> Primero, crea un nuevo directorio llamado mi-widget-personalizado. <\/strong>Dentro del directorio, crea un nuevo archivo llamado mi-widget-personalizado.php. <\/strong>Este archivo contendrá el código de tu widget.<\/p> Ahora, abre el archivo en un editor de texto y copia y pega el código que aparece a continuación. <\/p> 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. <\/p> También tiene una medida de seguridad que impide que el código del plugin se ejecute fuera de los sitios web de WordPress.<\/p> A continuación, crearemos la clase My_Custom_Widget<\/strong>. Esta clase define un widget personalizado de WordPress que extiende la clase WP_Widget<\/strong>. Estas son las funciones esenciales de este widget:<\/p> Las funciones __construct() <\/strong>y widget() <\/strong>son obligatorias para definir un plugin de widget.<\/p> Aunque técnicamente es posible omitir las funciones form() <\/strong>y update() <\/strong>si tu widget no tiene opciones, la mejor práctica es incluirlas, aunque se mantengan vacías.<\/p> Ahora, sigue adelante y copia y pega el siguiente código en el mismo archivo PHP.<\/p> 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.<\/p> Una vez que el archivo PHP de tu plugin esté listo, crea un archivo ZIP del directorio Mi-widget-personalizado<\/strong>.<\/p> A continuación, accede al panel de control de WordPress y ve a Plugins → Añadir nuevo plugin. <\/strong>Sube el archivo ZIP y espera hasta que se instale el plugin.<\/p> Por último, ve a Plugins → Plugins instalados<\/strong>, desplázate hacia abajo hasta que veas Mi widget personalizado <\/strong>en el área de widgets y haz clic en Activar.<\/strong><\/p> Para añadir el widget personalizado que acabas de hacer a una barra lateral, ve a Apariencia → Widgets.<\/strong><\/p> A continuación, selecciona la barra lateral en la que quieres colocar el widget. Haz clic en el icono + <\/strong>y, a continuación, busca Mi widget personalizado <\/strong>en la barra de búsqueda. Cuando aparezca el widget, haz clic en él.<\/p> A continuación, puedes establecer el título del widget y la visibilidad preferida.<\/p> Por último, haz clic en Actualizar <\/strong>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.<\/p> 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.<\/p> 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.<\/p> 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.<\/p> 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. <\/p> Cuanto más a menudo utilices una etiqueta, mayor será el tamaño de la fuente, lo que hará que destaque.<\/p> Este widget muestra iconos vinculados a tus perfiles en las redes sociales, ayudando a los visitantes a conectar fácilmente contigo en otras plataformas. <\/p> Puedes personalizar los colores, el tamaño y la alineación de los iconos para adaptarlos a tu tema de WordPress.<\/p> Este widget integrado te permite añadir código HTML a tus áreas de widgets. <\/p> Es ideal para desarrolladores y usuarios avanzados que quieran añadir funciones personalizadas o elementos de diseño a su sitio.<\/p> 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.<\/p> Jetpack Search<\/a> 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.<\/p> Un widget de terceros ofrecido por RaraTheme Companion<\/a> que añade una sección de preguntas frecuentes a tu sitio. <\/p> Puedes especificar las preguntas y respuestas directamente desde el widget del formulario, así como personalizar la visibilidad y otros aspectos.<\/p> El widget WPForms<\/a> 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.<\/p>\n
![\"\"](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2024\/09\/widgets-wordpress-1024x630.png\")
<\/figure>![\"Editor](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2024\/09\/editor-bloques-wp.png\")
<\/figure>Cómo añadir un widget en WordPress<\/h2>
Añadir widgets integrados a tu sitio web<\/h3>
\n
![\"Widget](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2024\/09\/widget-entradas-recientes-300x266.png\")
<\/figure><\/div>![\"Ejemplo](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2024\/09\/image-102.png\")
<\/figure>\n
![\"Ejemplo](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2024\/09\/image-103.png\")
<\/figure>Añadir widgets a tu sitio mediante plugins<\/h3>
\n
![\"Ventana](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2024\/09\/widgets-raratheme-companion.png\")
<\/figure>\n
![\"Editar](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2024\/09\/editar-widget.png\")
<\/figure><\/div>\n
Cómo personalizar los widgets de WordPress con CSS<\/h2>
\n
![\"Opciones](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2024\/09\/opciones-de-bloque-en-wp-329x1024.png\")
<\/figure><\/div>\n
![\"Seccion](\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2024\/09\/personalizacion-css.png\")
<\/figure><\/div>\n
Cómo crear un nuevo widget en WordPress<\/h2>
1. Crea el archivo del plugin del widget<\/h3>
<?php\n\n\/*\n\nPlugin Name: My Widget Personalizado\n\nDescription: Un widget simple de ejemplo\n\nVersion: 1.0\n\nAuthor: Diego Vargas\n\n*\/\n\n\/\/ Ensure this file is being included by WordPress.\n\ndefined('ABSPATH') or die('No script kiddies please!')<\/pre>\n
class My_Custom_Widget extends WP_Widget {\n\n\/\/ Constructor\n\nfunction __construct() {\n\n parent::__construct(\n\n 'my_custom_widget', \/\/ Base ID\n\n __('My Custom Widget', 'text_domain'), \/\/ Name\n\n array('description' => __('A Custom Widget', 'text_domain'),) \/\/ Args\n\n );\n\n}\n\n\/\/ The widget() method to display the widget content on the front-end\n\npublic function widget($args, $instance) {\n\n echo $args['before_widget'];\n\n if (!empty($instance['title'])) {\n\n echo $args['before_title'] . apply_filters('widget_title', $instance['title']) . $args['after_title'];\n\n }\n\n echo __('Hola, mundo!', 'text_domain');\n\n echo $args['after_widget'];\n\n}\n\n\/\/ The form() method to create the widget settings form in the admin area\n\npublic function form($instance) {\n\n $title = !empty($instance['title']) ? $instance['title'] : __('New title', 'text_domain');\n\n ?>\n\n <p>\n\n <label for=\"<?php echo $this->get_field_id('title'); ?>\"><?php _e('Title:'); ?><\/label>\n\n <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); ?>\">\n\n <\/p>\n\n <?php\n\n}\n\n\/\/ The update() method to save the widget settings\n\npublic function update($new_instance, $old_instance) {\n\n $instance = array();\n\n $instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']) : '';\n\n return $instance;\n\n}\n\n}<\/pre>\/\/ Register the widget\n\nfunction register_my_custom_widget() {\n\nregister_widget('My_Custom_Widget');\n\n}\n\nadd_action('widgets_init', 'register_my_custom_widget');<\/pre>2. Crea un archivo y súbelo<\/h3>
3. Añade el widget a una barra lateral de WordPress<\/h3>
10 ejemplos de widgets populares en WordPress<\/h2>
Últimas entradas<\/h3>
Lista de categorías<\/h3>
Nube de etiquetas<\/h3>
Iconos sociales<\/h3>
HTML personalizado<\/h3>
Archivos<\/h3>
Jetpack Search<\/h3>
Preguntas frecuentes de RaraTheme Companion<\/h3>
WPForms<\/h3>
WP Go Maps<\/h3>
![\"\"](\"https:\/\/lh7-qw.googleusercontent.com\/docsz\/AD_4nXcdKKPIqK0QQQDwD2vFGjfIhwsjugC5XYc8m-_SD0Ed5YJ6e_8_OpWionfBcrHInl4--xtfUg6HdlkHcJK_4AlnIrC7HOmlPsan-_buxdBfErKB5hRacJAgaxOkRuu-BpzISoq8KI5TnUQtemc-FfQDpuTyIvYI7Uwci07hg2Rz5q_18KG8ew?key=3ufJC65WF8v7VhzJF9IfTQ\")
<\/figure>