{"id":5354,"date":"2017-08-02T22:06:38","date_gmt":"2017-08-02T20:06:38","guid":{"rendered":"https:\/\/blog.hostinger.io\/es-tutoriales\/?p=5354"},"modified":"2025-02-12T09:07:38","modified_gmt":"2025-02-12T08:07:38","slug":"crear-widgets-wordpress-personalizados","status":"publish","type":"post","link":"\/es\/tutoriales\/crear-widgets-wordpress-personalizados\/","title":{"rendered":"\u00bfC\u00f3mo crear un widget personalizado en WordPress?"},"content":{"rendered":"<p class=\"wp-block-paragraph\">&iquest;Sab&iacute;as que puedes crear tu propio widget personalizado para <a href=\"\/es\/tutoriales\/que-es-wordpress\/\">WordPress<\/a>? Aunque hay montones de widgets adicionales que vienen junto con temas y plugins, WordPress ofrece a sus usuarios la opci&oacute;n de codificar widgets personalizados manualmente.<\/p><p class=\"wp-block-paragraph\">No es un proceso complicado ya que s&oacute;lo necesitas conocimientos b&aacute;sicos de WordPress y PHP. As&iacute; que, sin m&aacute;s pre&aacute;mbulos, &iexcl;Comencemos!<\/p><h2 class=\"wp-block-heading\" id=\"h-que-son-los-widgets-de-wordpress\">&iquest;Qu&eacute; son los widgets de WordPress?<\/h2><p class=\"wp-block-paragraph\">Los widgets de WordPress te facilitan la adici&oacute;n de funciones adicionales a tu sitio web, mediante una sencilla interfaz de arrastrar y soltar. Por defecto, WordPress incluye varios widgets. Estos proporcionan funciones b&aacute;sicas y son compatibles con todos los temas de WordPress.<\/p><p class=\"wp-block-paragraph\">Sin embargo, a veces, esos widgets est&aacute;ndar no pueden realizar las tareas que necesitas. Tu mejor opci&oacute;n es buscar plugins que te ofrezcan la funci&oacute;n que deseas. Por desgracia, puede que incluso los plugins de terceros no cumplan tus requisitos.<\/p><p class=\"wp-block-paragraph\">Por suerte, puedes crear un widget personalizado para WordPress. Solo tienes que tener en cuenta que debe crearse desde cero para que puedas adaptarlo personalmente a tus necesidades.<\/p><h2 class=\"wp-block-heading\" id=\"h-por-donde-empezar-a-crear-un-widget-personalizado\">&iquest;Por d&oacute;nde empezar a crear un widget personalizado?<\/h2><p class=\"wp-block-paragraph\">En primer lugar, tienes que elegir si quieres crear el widget utilizando un plugin o editando el archivo <strong>functions.php<\/strong>. Un plugin permitir&aacute; que el widget personalizado funcione en cualquier sitio a&ntilde;adiendo c&oacute;digo a <strong>functions.php<\/strong>. De esta forma, hace que el widget funcione junto con un tema espec&iacute;fico.<\/p><p class=\"wp-block-paragraph\">En segundo lugar, tienes la opci&oacute;n de a&ntilde;adir el widget en un sitio activo o en un entorno local. Sin embargo, te recomendamos encarecidamente que primero implementes el widget en un entorno local para probarlo. Puedes hacerlo f&aacute;cilmente siguiendo nuestra gu&iacute;a sobre c&oacute;mo ejecutar WordPress en Docker.<\/p><p class=\"wp-block-paragraph\">Una vez que la herramienta funcione correctamente, es hora de trasladarla a tu sitio web.<\/p><h2 class=\"wp-block-heading\" id=\"h-como-funcionan-los-widgets-personalizados-de-wordpress\">&iquest;C&oacute;mo funcionan los widgets personalizados de WordPress?<\/h2><p class=\"wp-block-paragraph\">En WordPress, tienes que crear un widget personalizado utilizando la clase est&aacute;ndar WP Widget de la <a href=\"https:\/\/codex.wordpress.org\/Widgets_API\" target=\"_blank\" rel=\"noreferrer noopener\">API de Widgets<\/a>. Hay alrededor de 20 funciones con las que puedes experimentar. De estas, <strong>cuatro <\/strong>son el requisito m&iacute;nimo para que cualquier widget funcione:<\/p><ul class=\"wp-block-list\">\n<li><strong>__construct():<\/strong> funci&oacute;n constructora donde puedes definir los par&aacute;metros de tu widget.<\/li>\n\n\n\n<li><strong>widget(): <\/strong>contiene la salida del widget.<\/li>\n\n\n\n<li><strong>form(): <\/strong>determina la configuraci&oacute;n del widget en el panel de control de WordPress.<\/li>\n\n\n\n<li><strong>update():<\/strong> actualiza la configuraci&oacute;n del widget.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Por supuesto, tienes muchas otras opciones que proporcionan funciones adicionales. Para m&aacute;s informaci&oacute;n sobre la clase <strong>WP_Widget<\/strong>, echa un vistazo a la <a href=\"https:\/\/developer.wordpress.org\/reference\/classes\/wp_widget\/\" target=\"_blank\" rel=\"noopener\">p&aacute;gina para de<\/a><a href=\"https:\/\/developer.wordpress.org\/reference\/classes\/wp_widget\/\" target=\"_blank\" rel=\"noreferrer noopener\">s<\/a><a href=\"https:\/\/developer.wordpress.org\/reference\/classes\/wp_widget\/\" target=\"_blank\" rel=\"noopener\">arrolladores<\/a> de WordPress.<\/p><h2 class=\"wp-block-heading\" id=\"h-crear-un-widget-personalizado-de-wordpress\">Crear un widget personalizado de WordPress<\/h2><p class=\"wp-block-paragraph\">En este tutorial, crearemos un sencillo widget personalizado <strong>&ldquo;&iexcl;Saludos de Hostinger.es!&rdquo;<\/strong>,<strong> <\/strong>para que puedas aprender los conceptos b&aacute;sicos de la creaci&oacute;n de widgets en WordPress. Una vez hecho esto, puedes pasar a crear widgets m&aacute;s complejos por tu cuenta.<\/p><p class=\"wp-block-paragraph\">Una cosa m&aacute;s a tener en cuenta es que estamos escribiendo este c&oacute;digo en el archivo <strong>functions.php <\/strong>para el <a href=\"https:\/\/www.hostinger.com\/es\/tutoriales\/cambiar-tema-wordpress\/\">tema<\/a> cargado actualmente. Dicho esto, puedes utilizar el mismo c&oacute;digo para cualquier plugin personalizado.<\/p><p class=\"wp-block-paragraph\"><div class=\"announcement-block announcement-block--important\">\n            <span class=\"announcement-block__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                          d=\"M12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12C1.5 17.799 6.20101 22.5 12 22.5ZM13.637 7.65198C13.637 6.74791 12.9041 6.01501 12 6.01501C11.0959 6.01501 10.363 6.74791 10.363 7.65198C10.5335 9.53749 10.875 13.383 10.875 13.383C10.875 14.0043 11.3787 14.508 12 14.508C12.6213 14.508 13.125 14.0043 13.125 13.383V13.38L13.637 7.65198ZM11.9927 15.714C11.3714 15.714 10.8677 16.2177 10.8677 16.839C10.8677 17.4603 11.3714 17.964 11.9927 17.964H12.0073C12.6286 17.964 13.1323 17.4603 13.1323 16.839C13.1323 16.2177 12.6286 15.714 12.0073 15.714H11.9927Z\"\n                          fill=\"#FEA419\"\/>\n                <\/svg>\n                Important\n            <\/span>\n            <p class=\"announcement-block__content\">\n                <strong>&iexcl;Importante! <\/strong>Te recomendamos enf&aacute;ticamente crear una <a href=\"\/es\/tutoriales\/una-copia-seguridad-sitio-wordpress\/\">copia de seguridad del sitio web<\/a> antes de continuar. Adem&aacute;s, deber&iacute;as utilizar un <a href=\"\/es\/tutoriales\/utilizar-child-theme\/\">tema hijo de WordPress<\/a> para evitar que cualquier problema afecte a tu tema principal.\n            <\/p><\/div><\/p><h3 class=\"wp-block-heading\" id=\"h-1-extender-la-clase-wp-widget\">1. Extender la clase WP_Widget<\/h3><p class=\"wp-block-paragraph\">Lo primero que tienes que hacer es abrir cualquier editor de texto en tu ordenador y crear una nueva clase que extienda la clase base <strong>WP_Widget<\/strong>, como esta:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">class hstngr_widget extends WP_Widget {\n\/\/Insert functions here\n}<\/pre><h3 class=\"wp-block-heading\" id=\"h-2-anadir-construct\">2. A&ntilde;adir __construct()<\/h3><p class=\"wp-block-paragraph\">A continuaci&oacute;n, empezamos a implementar las cuatro funciones est&aacute;ndar una a una. La primera es el m&eacute;todo constructor, que determinar&aacute; el ID, el nombre y la descripci&oacute;n del widget personalizado.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">function __construct() {\nparent::__construct(\n\/\/ widget ID\n'hstngr_widget',\n\/\/ widget name\n__('Ejemplo Widget Hostinger', 'hstngr_widget_domain'),\n\/\/ widget description\narray ( 'description' =&gt; __( 'Hostinger Widget Tutorial', 'hstngr_widget_domain' ), )\n);\n}<\/pre><h3 class=\"wp-block-heading\" id=\"h-3-anadir-widget\">3. A&ntilde;adir widget()<\/h3><p class=\"wp-block-paragraph\">Ahora, centr&eacute;monos en la funci&oacute;n <strong>widget()<\/strong>. Esta define el aspecto de tu widget personalizado de WordPress en el front-end.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public function widget( $args, $instance ) {\n$title = apply_filters( 'widget_title', $instance['title'] );\necho $args['before widget'];\n\/\/if title is present\nIf ( ! empty ( $title ) )\nEcho $args['before_title'] . $title . $args['after_title'];\n\/\/output\necho __( '&iexcl;Saludos de Hostinger.es!', 'hstngr_widget_domain' );\necho $args['after_widget'];\n}<\/pre><p class=\"wp-block-paragraph\">Con esto, hemos configurado la salida de nuestro widget para que muestre la frase <strong>&ldquo;&iexcl;Saludos de Hostinger.es!&rdquo; <\/strong>y el t&iacute;tulo del widget especificado por el usuario.<\/p><h3 class=\"wp-block-heading\" id=\"h-4-anadir-form\">4. A&ntilde;adir form()<\/h3><p class=\"wp-block-paragraph\">Ahora, tenemos que programar el back-end del widget usando el m&eacute;todo <strong>form()<\/strong>. Puedes ver el resultado cuando quieras a&ntilde;adir el widget desde el Dashboard de WordPress.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public function form( $instance ) {\nif ( isset( $instance[ 'title' ] ) )\n$title = $instance[ 'title' ];\nelse\n$title = __( 'Default Title', 'hstngr_widget_domain' );\n?&gt;\n&lt;p&gt;\n&lt;label for=\"&lt;?php echo $this-&gt;get_field_id( 'title' ); ?&gt;\"&gt;&lt;?php _e( 'Title:' ); ?&gt;&lt;\/label&gt;\n&lt;input class=\"widefat\" id=\"&lt;?php echo $this-&gt;get_field_id( 'title' ); ?&gt;\" name=\"&lt;?php echo $this-&gt;get_field_name( 'title' ); ?&gt;\" type=\"text\" value=\"&lt;?php echo esc_attr( $title ); ?&gt;\" \/&gt;\n&lt;\/p&gt;\n&lt;?php\n}<\/pre><p class=\"wp-block-paragraph\">Aqu&iacute; puedes ver c&oacute;mo se ha configurado un widget personalizado. Si un usuario aplica un t&iacute;tulo, entonces ese t&iacute;tulo se insertar&aacute; en el formulario HTML que hemos creado. En este ejemplo, estableceremos el nombre del t&iacute;tulo como <strong>T&iacute;tulo predeterminado<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"401\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-5.png\/w=1024,h=1024,fit=scale-down\" alt=\"Establecer nombre del t&iacute;tulo de un widget personalizado WordPress\" class=\"wp-image-26503\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-5.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-5.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-5.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-5.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-5.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><h3 class=\"wp-block-heading\" id=\"h-5-anadir-update\">5. A&ntilde;adir update()<\/h3><p class=\"wp-block-paragraph\">Una vez hecho esto, tenemos que implementar <strong>update()<\/strong>, que refrescar&aacute; el widget cada vez que cambies la configuraci&oacute;n.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public function update( $new_instance, $old_instance ) {\n$instance = array();\n$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';\nreturn $instance;\n}<\/pre><p class=\"wp-block-paragraph\">Estamos tomando el t&iacute;tulo actual de la instancia reci&eacute;n creada, eliminando cualquier etiqueta HTML\/PHP. A continuaci&oacute;n, pasamos el t&iacute;tulo a la instancia y lo devolvemos.<\/p><h3 class=\"wp-block-heading\" id=\"h-6-registro-del-widget-personalizado-de-wordpress\">6. Registro del widget personalizado de WordPress<\/h3><p class=\"wp-block-paragraph\">Finalmente, tenemos que registrar el nuevo widget personalizado usando la funci&oacute;n <strong>add_action()<\/strong>. Ten en cuenta que debes colocar el siguiente c&oacute;digo en la parte superior, antes de extender la clase <strong>WP_Widget<\/strong>.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">function hstngr_register_widget() {\nregister_widget( 'hstngr_widget' );\n}\nadd_action( 'widgets_init', 'hstngr_register_widget' );<\/pre><h2 class=\"wp-block-heading\" id=\"h-anadir-el-codigo-al-archivo-functions-php\">A&ntilde;adir el c&oacute;digo al archivo functions.php<\/h2><p class=\"wp-block-paragraph\">As&iacute;, hemos definido una nueva funci&oacute;n llamada <strong>hstngr_register_widget()<\/strong>. Esta registra nuestro widget utilizando el ID del widget, que se especifica en la funci&oacute;n <strong>__construct()<\/strong>.<\/p><p class=\"wp-block-paragraph\">A continuaci&oacute;n, hemos vinculado esta funci&oacute;n utilizando <strong>widgets_init<\/strong>, que carga el widget en WordPress a trav&eacute;s del m&eacute;todo <strong>add_action() <\/strong>incorporado. El c&oacute;digo final del widget personalizado de WordPress deber&iacute;a tener este aspecto:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">function hstngr_register_widget() {\nregister_widget( 'hstngr_widget' );\n}\nadd_action( 'widgets_init', 'hstngr_register_widget' );\nclass hstngr_widget extends WP_Widget {\nfunction __construct() {\nparent::__construct(\n\/\/ widget ID\n'hstngr_widget',\n\/\/ widget name\n__('Ejemplo Widget Hostinger', ' hstngr_widget_domain'),\n\/\/ widget description\narray( 'description' =&gt; __( 'Tutorial Widget Hostinger', 'hstngr_widget_domain' ), )\n);\n}\npublic function widget( $args, $instance ) {\n$title = apply_filters( 'widget_title', $instance['title'] );\necho $args['before_widget'];\n\/\/if title is present\nif ( ! empty( $title ) )\necho $args['before_title'] . $title . $args['after_title'];\n\/\/output\necho __( '&iexcl;Saludos de Hostinger.es!', 'hstngr_widget_domain' );\necho $args['after_widget'];\n}\npublic function form( $instance ) {\nif ( isset( $instance[ 'title' ] ) )\n$title = $instance[ 'title' ];\nelse\n$title = __( 'Default Title', 'hstngr_widget_domain' );\n?&gt;\n&lt;p&gt;\n&lt;label for=\"&lt;?php echo $this-&gt;get_field_id( 'title' ); ?&gt;\"&gt;&lt;?php _e( 'Title:' ); ?&gt;&lt;\/label&gt;\n&lt;input class=\"widefat\" id=\"&lt;?php echo $this-&gt;get_field_id( 'title' ); ?&gt;\" name=\"&lt;?php echo $this-&gt;get_field_name( 'title' ); ?&gt;\" type=\"text\" value=\"&lt;?php echo esc_attr( $title ); ?&gt;\" \/&gt;\n&lt;\/p&gt;\n&lt;?php\n}\npublic function update( $new_instance, $old_instance ) {\n$instance = array();\n$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';\nreturn $instance;\n}\n}<\/pre><p class=\"wp-block-paragraph\">Por &uacute;ltimo, es hora de insertar el c&oacute;digo en tu archivo <strong>functions.php<\/strong>.<\/p><ol class=\"wp-block-list\">\n<li>Inicia sesi&oacute;n en el &aacute;rea de administraci&oacute;n de WordPress. A continuaci&oacute;n, ve a <strong>Apariencia <\/strong>-&gt; <strong>Editor de temas <\/strong>-&gt; <strong>Funciones del tema<\/strong>.<\/li>\n\n\n\n<li>Pega el c&oacute;digo de tu editor de texto en la parte inferior del archivo <strong>functions.php<\/strong>. Haz clic en <strong>Actualizar archivo <\/strong>para guardar los cambios.<\/li>\n<\/ol><figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2024\/01\/Secci%C3%B3n-Functions.php-en-apariencia-de-WordPress.png\/public\" alt=\"Secci&oacute;n Functions.php en apariencia de WordPress\" class=\"wp-image-37465\"><\/figure><h2 class=\"wp-block-heading\" id=\"h-uso-del-widget-personalizado-de-wordpress\">Uso del widget personalizado de WordPress<\/h2><p class=\"wp-block-paragraph\">Ya puedes utilizar tu widget reci&eacute;n instalado.<\/p><ol class=\"wp-block-list\">\n<li>Ve al men&uacute; <strong>Apariencia <\/strong>y selecciona <strong>Widgets<\/strong>. Deber&iacute;as ver un widget llamado <strong>Ejemplo Widget Hostinger <\/strong>en la lista de <strong>Widgets disponibles<\/strong>.<\/li>\n\n\n\n<li>A continuaci&oacute;n, arrastra el widget y su&eacute;ltalo en la secci&oacute;n de la parte derecha.&nbsp;<\/li>\n<\/ol><figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2024\/01\/Secci%C3%B3n-de-Widgets-de-WordPress.png\/public\" alt=\"Secci&oacute;n de Widgets de WordPress\" class=\"wp-image-37467\"><\/figure><ol class=\"wp-block-list\" start=\"3\">\n<li>Guarda los cambios y visita tu sitio web. En la parte inferior de la p&aacute;gina principal encontrar&aacute;s <strong>&ldquo;&iexcl;Saludos de Hostinger.es!&rdquo;<\/strong>.<\/li>\n<\/ol><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"290\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2024\/01\/Ejemplo-de-widget-personalizado-en-WordPress.png\/public\" alt=\"Ejemplo de widget personalizado en WordPress\" class=\"wp-image-37468\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2024\/01\/Ejemplo-de-widget-personalizado-en-WordPress.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2024\/01\/Ejemplo-de-widget-personalizado-en-WordPress.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2024\/01\/Ejemplo-de-widget-personalizado-en-WordPress.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2024\/01\/Ejemplo-de-widget-personalizado-en-WordPress.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p class=\"wp-block-paragraph\">Enhorabuena, has creado con &eacute;xito tu primer widget personalizado para WordPress.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/es\/hosting-wordpress\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2024\/06\/ES-New-WP_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-40615\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2024\/06\/ES-New-WP_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2024\/06\/ES-New-WP_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2024\/06\/ES-New-WP_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2024\/06\/ES-New-WP_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusi&oacute;n<\/h2><p class=\"wp-block-paragraph\">El widget personalizado de WordPress te permite a&ntilde;adir una funci&oacute;n espec&iacute;fica a tu sitio web en funci&oacute;n de tus necesidades. Es una gran soluci&oacute;n cuando no puedes encontrar nada en particular que cumpla tus necesidades espec&iacute;ficas o cuando te est&aacute;s <a href=\"\/es\/tutoriales\/convertirte-desarrollador-wordpress\/\">convirtiendo en un desarrollador de WordPress<\/a> y deseas desarrollar tu sitio web.<\/p><p class=\"wp-block-paragraph\">Para resumir, veamos una vez m&aacute;s los pasos para crear tu propio widget personalizado para WordPress:<\/p><ol class=\"wp-block-list\">\n<li>Crea una nueva clase que extienda <strong>WP_Widget<\/strong>.<\/li>\n\n\n\n<li>Comienza con <strong>__construct() <\/strong>para determinar los par&aacute;metros del widget.<\/li>\n\n\n\n<li>Utiliza <strong>widget() <\/strong>para definir la apariencia del widget en el front-end.<\/li>\n\n\n\n<li>A&ntilde;ade <strong>form() <\/strong>para configurar el aspecto del widget.<\/li>\n\n\n\n<li>No olvides a&ntilde;adir <strong>update() <\/strong>para actualizar el widget cada vez que lo modifiques.<\/li>\n\n\n\n<li>Registra el nuevo widget personalizado de WordPress mediante la funci&oacute;n <strong>add_action()<\/strong>.<\/li>\n\n\n\n<li>Copia y pega todo el c&oacute;digo en la parte inferior del archivo <strong>functions.php <\/strong>y haz clic en <strong>Actualizar archivo<\/strong>.<\/li>\n\n\n\n<li>Ve al men&uacute; <strong>Widgets <\/strong>y mueve el widget al lugar deseado.<\/li>\n<\/ol><p class=\"wp-block-paragraph\">&iexcl;Buena suerte!<\/p><p class=\"wp-block-paragraph\">        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Aprende qu&eacute; m&aacute;s puedes hacer con WordPress                <\/p>\n            <\/div>\n            <p class=\"protip__content\"><a href=\"\/es\/tutoriales\/jerarquia-de-plantillas-de-wordpress\/\">Jerarqu&iacute;a de plantillas de WordPress<\/a><\/p><p class=\"wp-block-paragraph\"><a href=\"\/es\/tutoriales\/custom-post-types-wordpress\/\">C&oacute;mo crear tipos de entrada personalizados en WordPress<\/a><\/p><p class=\"wp-block-paragraph\"><a href=\"\/es\/tutoriales\/como-configurar-wordpress-cron-job\/\">C&oacute;mo configurar y gestionar Cron Jobs en WordPress<\/a><\/p>\n                    <\/div>\n        <\/p>\n","protected":false},"excerpt":{"rendered":"<p>&iquest;Sab&iacute;as que puedes crear tu propio widget personalizado para WordPress? Aunque hay montones de widgets adicionales que vienen junto con temas y plugins, WordPress ofrece a sus usuarios la opci&oacute;n de codificar widgets personalizados manualmente. No es un proceso complicado ya que s&oacute;lo necesitas conocimientos b&aacute;sicos de WordPress y PHP. As&iacute; que, sin m&aacute;s pre&aacute;mbulos, [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/es\/tutoriales\/crear-widgets-wordpress-personalizados\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":138,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"C\u00f3mo crear un widget personalizado en WordPress","rank_math_description":"Hay ocasiones en las que necesitamos crear widgets personalizados para WordPress. En nuestro tutorial te daremos paso a paso como hacerlo.","rank_math_focus_keyword":"crear widget wordpress","footnotes":""},"categories":[4747,14348],"tags":[5974,6360],"class_list":["post-5354","post","type-post","status-publish","format-standard","hentry","category-wordpress","category-experto","tag-personalizacion-wordpress","tag-widget-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/how-to-create-custom-widget-in-wordpress\/","default":1},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/como-criar-widget-wordpress\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/creer-un-widget-wordpress\/","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/crear-widgets-wordpress-personalizados\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/create-wordpress-custom-widget\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/create-wordpress-custom-widget\/","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/how-to-create-custom-widget-in-wordpress\/","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/how-to-create-custom-widget-in-wordpress\/","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/how-to-create-custom-widget-in-wordpress\/","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/how-to-create-custom-widget-in-wordpress\/","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/how-to-create-custom-widget-in-wordpress\/","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/crear-widgets-wordpress-personalizados\/","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/crear-widgets-wordpress-personalizados\/","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/crear-widgets-wordpress-personalizados\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/como-criar-widget-wordpress\/","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/posts\/5354","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/users\/138"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/comments?post=5354"}],"version-history":[{"count":14,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/posts\/5354\/revisions"}],"predecessor-version":[{"id":37469,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/posts\/5354\/revisions\/37469"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/media?parent=5354"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/categories?post=5354"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/tags?post=5354"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}