{"id":38455,"date":"2017-07-07T09:14:37","date_gmt":"2017-07-07T14:14:37","guid":{"rendered":"http:\/\/webirix.com\/?p=38455"},"modified":"2017-07-07T09:29:23","modified_gmt":"2017-07-07T14:29:23","slug":"anadir-una-nueva-zona-widgets-wordpress","status":"publish","type":"post","link":"https:\/\/webirix.com\/en\/anadir-una-nueva-zona-widgets-wordpress\/","title":{"rendered":"Add a new widget zone in WordPress"},"content":{"rendered":"<header class=\"article-header\">\n<p class=\"entry-meta\">By\u00a0<span class=\"author\"><a title=\"Posts by H\u00e9ctor Pe\u00f1a\" href=\"http:\/\/develop.ibox.mx\/author\/hector-pena\/\" rel=\"author\">Hector Pe\u00f1a<\/a><\/span>\u00a0In\u00a0<a href=\"http:\/\/develop.ibox.mx\/category\/desarrollo\/cms\/\" rel=\"category tag\">CMS<\/a>,\u00a0<a href=\"http:\/\/develop.ibox.mx\/category\/desarrollo\/\" rel=\"category tag\">Web development<\/a>,\u00a0<a href=\"http:\/\/develop.ibox.mx\/category\/desarrollo\/cms\/wordpress\/\" rel=\"category tag\">WordPress<\/a>\u00a0Posted\u00a0<time class=\"updated\" datetime=\"2016-04-9\">9 abril, 2016<\/time><\/p>\n<\/header>\n<div class=\"article-featured\"><\/div>\n<div class=\"article-featured\"><\/div>\n<div class=\"entry-content clearfix\">\n<p>Vamos a ver en este post c\u00f3mo\u00a0<strong>a\u00f1adir o crear una nueva zona de widgets en WordPress<\/strong>.<\/p>\n<p>Por diversas razones puede que nuestros theme de\u00a0<a title=\"Widgets y plugins WordPress\" href=\"http:\/\/www.anerbarrena.com\/programacion\/recursos\/wordpress\/\">WorPress<\/a>\u00a0 no tenga una zona de widgets donde necesitamos.<\/p>\n<p>Siguiendo la\u00a0<a href=\"http:\/\/codex.wordpress.org\/Widgetizing_Themes\" target=\"_blank\" rel=\"noopener noreferrer\">documentaci\u00f3n oficial<\/a>\u00a0os explico las diferentes opciones.<\/p>\n<p>El primer paso es\u00a0<strong>a\u00f1adir la nueva zona de widgets al archivo functions.php<\/strong>, este archivo se puede editar accediendo de 2 maneras:<\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>Editando el fichero desde\u00a0<strong>WordPress<\/strong>\u00a0en la secci\u00f3n del menu Apariencia &gt; Editor<\/li>\n<li>Baj\u00e1ndote el fichero de esta ruta del FTP: \/wp-content\/themes\/NOMBRE DE TU THEME\/functions.php<\/li>\n<li>Revisamos si en el functions.php existe una funci\u00f3n con este nombre: \u2018<strong>register_sidebar<\/strong>\u2018.<\/li>\n<li>Si existe, a\u00f1adimos este c\u00f3digo despu\u00e9s de dicha funci\u00f3n, una debajo de otra.<\/li>\n<li>En caso contrario pegamos el c\u00f3digo al principio del\u00a0<strong>functions.php<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<pre class=\"lang:php decode:true\">register_sidebar( array(\r\n\t\t'name'          =&gt; __( 'Widget del Footer' ),\r\n\t\t'id'            =&gt; 'sidebar-footer',\r\n\t\t'description'   =&gt; __( 'Este widget es para el footer' ),\r\n\t\t'before_widget' =&gt; '<\/pre>\n<aside id=\"%1$s\" class=\"widget %2$s\">&#8216;, &#8216;after_widget&#8217; =&gt; &#8216;<\/aside>\n<pre class=\"lang:php decode:true\">',\r\n\t\t'before_title'  =&gt; '<\/pre>\n<h3 class=\"widget-title\">&#8216;, &#8216;after_title&#8217; =&gt; &#8216;<\/h3>\n<pre class=\"lang:php decode:true\">',\r\n) );\r\n<\/pre>\n<p>Os explico cada valor del array:<\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li><strong>yam<\/strong>: Nombre del widget, despu\u00e9s lo usaremos en la llamada del\u00a0<strong>footer.php<\/strong>.<\/li>\n<li><strong>id<\/strong>: Id que tendr\u00e1 la zona nueva nueva.<\/li>\n<li><strong>description<\/strong>: Descripci\u00f3n del widget, saldr\u00e1 en la zona de arrastre de los widget.<\/li>\n<li><strong>before_widget<\/strong>: Apertura de c\u00f3digo HTML que contendr\u00e1n todos los widget arrastrados en la nueva zona de widgets.<\/li>\n<li><strong>aftet_widget<\/strong>: Cerramos el c\u00f3digo HTML abierto en el punto anterior.<\/li>\n<li><strong>before_title<\/strong>: Apertua de c\u00f3digo HTML para el t\u00edtulo de cada widget arrastrado.<\/li>\n<li><strong>after_title<\/strong>: Cierre del c\u00f3digo HTML del t\u00edtulo del widget arrastrado en la zona.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Tras esta inserci\u00f3n del c\u00f3digo en el\u00a0<strong>functions.php<\/strong>\u00a0nos tendr\u00e1 que salir el\u00a0<strong>widget<\/strong>\u00a0por encima del\u00a0<strong>sidebar<\/strong>. Os pongo una imagen de ejemplo:<\/p>\n<\/div>\n<p>&nbsp;<\/p>\n<div class=\"entry-content clearfix\">\n<p><a href=\"http:\/\/www.anerbarrena.com\/wp-content\/uploads\/2013\/10\/nueva-zona-de-widget-wordpress.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2817 aligncenter\" src=\"http:\/\/www.anerbarrena.com\/wp-content\/uploads\/2013\/10\/nueva-zona-de-widget-wordpress.png\" alt=\"Nueva zona de widgets en WordPress\" width=\"304\" height=\"555\" \/><\/a><\/p>\n<\/div>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<div class=\"entry-content clearfix\">\n<p>Ahora nos queda colocar en el\u00a0<strong>footer.php<\/strong>\u00a0la llamada\u00a0<a title=\"Programaci\u00f3n PHP\" href=\"http:\/\/www.anerbarrena.com\/programacion\/php\/\">PHP<\/a>\u00a0para mostrar nuestra<strong>\u00a0nueva zona de widgets<\/strong>, el archivo est\u00e1 en la misma ruta que el functions.php.<\/p>\n<pre class=\"lang:php decode:true\">&lt;?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Widget del Footer')) : ?&gt;\r\n&lt;?php endif; ?&gt;\r\n<\/pre>\n<p>En el c\u00f3digo superior ver\u00e9is<strong>\u00a0!dynamic_sidebar(\u2018Widget del Footer\u2019)<\/strong>, es ah\u00ed donde he puesto el nombre de nuestro widget \u2018Widget del Footer\u2019.<\/p>\n<p>Con esto ya estar\u00eda lista la nueva zona. Es conveniente revisar la css del theme para integrar correctamente los elementos que arrastremos en el widget.<\/p>\n<p>Con estos pasos podemos a\u00f1adir una\u00a0<strong>nueva \u00e1rea de widgets en WordPress<\/strong>, dependiendo la ubicaci\u00f3n del widget tendremos que modificar:<\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>index.php<\/li>\n<li>search.php<\/li>\n<li>content.php<\/li>\n<li>Y archivos similares\u2026<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/div>\n<p>&nbsp;<\/p>","protected":false},"excerpt":{"rendered":"<p>By H\u00e9ctor Pe\u00f1a In CMS, Web Development, WordPress Posted April 9, 2016 We are going to see in this post how to add or create a new widget area in WordPress. For various reasons our WordPress theme may not have a widget area where we need it. Following the official documentation I explain the different options. The first step is to add the new widget area to the file ...<\/p>","protected":false},"author":24,"featured_media":38471,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2023],"tags":[],"class_list":["post-38455","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"jetpack_featured_media_url":"https:\/\/webirix.com\/wp-content\/uploads\/2017\/07\/wordpress-facebook-widgets.jpg","_links":{"self":[{"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/posts\/38455","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/comments?post=38455"}],"version-history":[{"count":1,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/posts\/38455\/revisions"}],"predecessor-version":[{"id":38456,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/posts\/38455\/revisions\/38456"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/media\/38471"}],"wp:attachment":[{"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/media?parent=38455"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/categories?post=38455"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/tags?post=38455"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}