{"id":1870,"date":"2024-08-03T08:51:14","date_gmt":"2024-08-03T06:51:14","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1870"},"modified":"2024-08-03T08:51:16","modified_gmt":"2024-08-03T06:51:16","slug":"19-widgets-wordpress","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/cmss-frameworks\/wordpress-2\/wordpress-avanzado\/19-widgets-wordpress\/","title":{"rendered":"19. Widgets WordPress"},"content":{"rendered":"\n<p>Un <strong>Widget<\/strong> Es un elemento que nos da <strong>WP,<\/strong> son peque\u00f1os <strong>componentes.<\/strong> Podemos ver todo sobre ellos en la siguiente p\u00e1gina:<\/p>\n\n\n\n<!--more-->\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/codex.wordpress.org\/Widgets_API\">https:\/\/codex.wordpress.org\/Widgets_API<\/a><\/li>\n<\/ul>\n\n\n\n<p>Para invocarlos necesitamos crear un <strong>Hook<\/strong> con el m\u00e9todo <strong><em>add_action,<\/em><\/strong> y el <strong>widget<\/strong> se llama <strong><em>widgets_init<\/em><\/strong> al que le podemos pasar una funci\u00f3n an\u00f3nima o preparar una funci\u00f3n.<\/p>\n\n\n\n<p>A\u00f1adiremos el c\u00f3digo siguiente a nuestro archivo <em>functions.php<\/em><\/p>\n\n\n\n<p><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">function widgets_activation(){\n\n};\n\nadd_action( 'widgets_init', 'widgets_activation');<\/pre>\n\n\n\n<p>Activaremos los <strong>widgets<\/strong> a trav\u00e9s de una funci\u00f3n denominada <strong><em>register_sidebar().<\/em><\/strong> Por cada <strong>widget<\/strong> que queramos, necesitamos ejecutar un <strong><em>register_sidebar(),<\/em><\/strong> el cual recibe argumentos, el nombre del <strong>widget,<\/strong> el <strong>id,<\/strong> la <strong>descripci\u00f3n,<\/strong> un t\u00edtulo\u2026 Todo guardado en un <strong>Array.<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Ejecuci\u00f3n de un <em>register_sidebar()<\/em><\/h2>\n\n\n\n<p>Existe otra funci\u00f3n que es&nbsp;<strong>register_sidebars()<\/strong> en plural. La barra lateral donde llevamos nuestros <strong>widgets<\/strong> es el equivalente a la barra lateral que tenemos en nuestro Home. Si ponemos dos <strong><em>register_sidebar()<\/em><\/strong> nos aparecer\u00e1 la opci\u00f3n de 2 barras laterales en nuestra administraci\u00f3n de <strong>widgets. <\/strong>Si quiero utilizar dos sidebars, no es necesario que ponga dos veces la funci\u00f3n <strong><em>register_sidebar(),<\/em><\/strong> si no que utilizo la siguiente sintaxis<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">register_sidebars(2);<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Mostrar los widgets<\/h2>\n\n\n\n<p>Para mostrar los <strong>widgets<\/strong> tenemos que utilizar la funci\u00f3n <strong><em>dynamic_sidebar()<\/em><\/strong> que lo que permite es que necesitamos pasarle el nombre del <strong>widget<\/strong> que queremos ejecutar. Tenemos que pasarle el <strong>id<\/strong> o el <strong>nombre. <\/strong>Los <strong>widgets,<\/strong> cada vez que hacemos un cambio en el archivo <em>functions.php<\/em> los podemos eliminar, as\u00ed que mucho cuidado a la hora de configurar los <strong>widgets.<\/strong> Los <strong>widgets<\/strong> son propios de los temas, as\u00ed que dependiendo de cada tema llevar\u00e1 unos <strong>widgets<\/strong> u otros. Lo que recomienda es utilizar la funci\u00f3n <strong><em>register_sidebar()<\/em><\/strong> en singular para definir cada uno de nuestros <strong>sidebars,<\/strong> o quitar los atributos de <strong>id<\/strong> y <strong>name.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Un Widget Es un elemento que nos da WP, son peque\u00f1os componentes. Podemos ver todo sobre ellos en la siguiente [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1809,"menu_order":18,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1870","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Un Widget Es un elemento que nos da WP, son peque\u00f1os componentes. Podemos ver todo sobre ellos en la siguiente [&hellip;]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1870","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1870"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1870\/revisions"}],"predecessor-version":[{"id":1872,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1870\/revisions\/1872"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1809"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1870"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}