{"id":2214,"date":"2012-03-07T19:51:52","date_gmt":"2012-03-07T19:51:52","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=2214"},"modified":"2018-01-24T04:19:29","modified_gmt":"2018-01-24T04:19:29","slug":"crear-un-widget-personalizado-para-tu-blog-wordpress","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/crear-un-widget-personalizado-para-tu-blog-wordpress\/","title":{"rendered":"Crear un Widget personalizado para tu blog WordPress"},"content":{"rendered":"<p>Los plugins son parte del \u00e9xito de WordPress, esas peque\u00f1as piezas de c\u00f3digo hacen que crear un sitio web con WordPress y a\u00f1adirle funcionalidades sea algo trivial. Ahora bien, no siempre vas a depender de los dem\u00e1s, sobre todo porque es posible, a pesar de los mas de 18 mil que hay, que no exista uno que haga exactamente lo que tu necesitas.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-6345\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/plugins-wordpress.jpg\" alt=\"plugins-wordpress\" width=\"720\" height=\"323\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/plugins-wordpress.jpg 720w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/plugins-wordpress-300x134.jpg 300w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p>En este tutorial veremos como crear un Widget para WordPress.<\/p>\n<p>Comenzamos creando un directorio con el nombre de nuestro Widget en el directorio \u00abwp-content\/plugins\/\u00bb. Aqu\u00ed es donde WordPress almacena los plugins. Recomiendo crear un directorio siempre que se crea un Widget, aunque \u00e9ste contenga s\u00f3lo un archivo, ya que m\u00e1s tarde podr\u00edas incorporarle m\u00e1s archivos y te ver\u00edas obligado a tocar porciones del c\u00f3digo del Widget. En nuestro caso vamos a crear el directorio \u00abprueba\u00bb y dentro de \u00e9l un archivo llamado \u00abprueba.php\u00bb. En este nuevo archivo deberemos rellenarlo con lo siguiente:<\/p>\n<pre>\/*\r\nPlugin Name: Primer Plugin\r\nPlugin URI: https:\/\/www.jose-aguilar.com\/blog\/wordpress\r\nDescription: Se trata de un plugin de muestra\r\nVersion: 1.0\r\nAuthor: Jose Aguilar\r\nAuthor URI: https:\/\/www.jose-aguilar.com\/\r\n*\/<\/pre>\n<p>Toda esta informaci\u00f3n se utilizar\u00e1 para identificar nuestro Widget en la administraci\u00f3n de plugins para WordPress, como podemos ver en la siguiente imagen.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/plugin1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2216\" title=\"plugin\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/plugin1.png\" alt=\"\" width=\"730\" height=\"50\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/plugin1.png 730w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/plugin1-300x20.png 300w\" sizes=\"auto, (max-width: 730px) 100vw, 730px\" \/><\/a>En el mismo archivo debemos seguir rellen\u00e1ndolo con la siguiente clase y funciones:<\/p>\n<pre>\/\/ Cuando se inicializa el widget llamaremos al metodo register de la clase Prueba que creamos a continuaci\u00f3n\r\nadd_action( \"widgets_init\", array( \"Prueba\", \"register\" ) );\r\n\r\nclass Prueba\r\n{\r\n\u00a0\u00a0\u00a0 \/\/ Panel de control que se mostrara abajo de nuestro Widget en el panel de configuraci\u00f3n de Widgets\r\n\u00a0\u00a0\u00a0 function control()\r\n\u00a0\u00a0\u00a0 {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 echo \"Hola, soy el panel de control.\";\r\n\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0 \/\/ Metodo que se llamara cuando se visualize el Widget en pantalla\r\n\u00a0\u00a0\u00a0 function widget($args)\r\n\u00a0\u00a0\u00a0 {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 echo $args[\"before_widget\"];\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 echo $args[\"before_title\"] . \"Titular en portada\" . $args[\"after_title\"];\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 echo \"Hola soy tu Widget\";\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 echo $args[\"after_widget\"];\r\n\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0 \/\/ Meotodo que se llamara cuando se inicialice el Widget\r\n\u00a0\u00a0\u00a0 function register()\r\n\u00a0\u00a0\u00a0 {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ Incluimos el widget en el panel control de Widgets\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 register_sidebar_widget( \"Widget de prueba\", array( \"Prueba\", \"widget\" ) );\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ Formulario para editar las propiedades de nuestro Widget\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 register_widget_control( \"Widget de prueba\", array( \"Prueba\", \"control\" ) );\r\n\u00a0\u00a0\u00a0 }\r\n}<\/pre>\n<p>Una vez guardado nos dirigiremos al Panel de Control de plugins y lo activaremos. Una vez activado, vamos a las opciones de los Widgets, dentro del submen\u00fa apariencia, y lo a\u00f1adiremos a nuestro sidebar. En nuestro template aparecer\u00e1 nuestro Widget.<\/p>\n<p><a href=\"http:\/\/codex.wordpress.org\/es:Escribiendo_un_Plugin\" target=\"_blank\" rel=\"noopener\">\u00a0Ver m\u00e1s informaci\u00f3n<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Los plugins son parte del \u00e9xito de WordPress, esas peque\u00f1as piezas de c\u00f3digo hacen que crear un sitio web con WordPress y a\u00f1adirle funcionalidades sea algo trivial. Ahora bien, no siempre vas a depender de los dem\u00e1s, sobre todo porque es posible, a pesar de los mas de 18 mil que hay, que no exista [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4712,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[32],"tags":[],"class_list":["post-2214","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Crear un Widget personalizado para tu blog Wordpress - Jose Aguilar Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Crear un Widget personalizado para tu blog Wordpress - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Los plugins son parte del \u00e9xito de WordPress, esas peque\u00f1as piezas de c\u00f3digo hacen que crear un sitio web con WordPress y a\u00f1adirle funcionalidades sea algo trivial. Ahora bien, no siempre vas a depender de los dem\u00e1s, sobre todo porque es posible, a pesar de los mas de 18 mil que hay, que no exista [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/crear-un-widget-personalizado-para-tu-blog-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2012-03-07T19:51:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-24T04:19:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/wordpress.png\" \/>\n\t<meta property=\"og:image:width\" content=\"320\" \/>\n\t<meta property=\"og:image:height\" content=\"320\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/crear-un-widget-personalizado-para-tu-blog-wordpress\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/crear-un-widget-personalizado-para-tu-blog-wordpress\/\",\"name\":\"Crear un Widget personalizado para tu blog Wordpress - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/crear-un-widget-personalizado-para-tu-blog-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/crear-un-widget-personalizado-para-tu-blog-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/wordpress.png\",\"datePublished\":\"2012-03-07T19:51:52+00:00\",\"dateModified\":\"2018-01-24T04:19:29+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/crear-un-widget-personalizado-para-tu-blog-wordpress\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/crear-un-widget-personalizado-para-tu-blog-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/crear-un-widget-personalizado-para-tu-blog-wordpress\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/wordpress.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/wordpress.png\",\"width\":320,\"height\":320},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/crear-un-widget-personalizado-para-tu-blog-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Crear un Widget personalizado para tu blog WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Crear un Widget personalizado para tu blog Wordpress - Jose Aguilar Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Crear un Widget personalizado para tu blog Wordpress - Jose Aguilar Blog","og_description":"Los plugins son parte del \u00e9xito de WordPress, esas peque\u00f1as piezas de c\u00f3digo hacen que crear un sitio web con WordPress y a\u00f1adirle funcionalidades sea algo trivial. Ahora bien, no siempre vas a depender de los dem\u00e1s, sobre todo porque es posible, a pesar de los mas de 18 mil que hay, que no exista [&hellip;]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/crear-un-widget-personalizado-para-tu-blog-wordpress\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2012-03-07T19:51:52+00:00","article_modified_time":"2018-01-24T04:19:29+00:00","og_image":[{"width":320,"height":320,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/wordpress.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/crear-un-widget-personalizado-para-tu-blog-wordpress\/","url":"https:\/\/www.jose-aguilar.com\/blog\/crear-un-widget-personalizado-para-tu-blog-wordpress\/","name":"Crear un Widget personalizado para tu blog Wordpress - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/crear-un-widget-personalizado-para-tu-blog-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/crear-un-widget-personalizado-para-tu-blog-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/wordpress.png","datePublished":"2012-03-07T19:51:52+00:00","dateModified":"2018-01-24T04:19:29+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/crear-un-widget-personalizado-para-tu-blog-wordpress\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/crear-un-widget-personalizado-para-tu-blog-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/crear-un-widget-personalizado-para-tu-blog-wordpress\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/wordpress.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/wordpress.png","width":320,"height":320},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/crear-un-widget-personalizado-para-tu-blog-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Crear un Widget personalizado para tu blog WordPress"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/2214","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=2214"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/2214\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/4712"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=2214"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=2214"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=2214"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}