{"id":341,"date":"2016-04-09T08:17:10","date_gmt":"2016-04-09T14:17:10","guid":{"rendered":"http:\/\/develop.ibox.mx\/?p=341"},"modified":"2016-08-02T13:19:58","modified_gmt":"2016-08-02T18:19:58","slug":"anadir-una-nueva-zona-de-widgets-en-wordpress","status":"publish","type":"post","link":"https:\/\/webirix.com\/en\/anadir-una-nueva-zona-de-widgets-en-wordpress\/","title":{"rendered":"Add a new widget zone in WordPress"},"content":{"rendered":"<p>Vamos a ver en este post c\u00f3mo <strong>a\u00f1adir o crear una nueva zona de widgets en WordPress<\/strong>.<\/p>\n<p>Por diversas razones puede que nuestros theme de <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 <a href=\"http:\/\/codex.wordpress.org\/Widgetizing_Themes\" target=\"_blank\">documentaci\u00f3n oficial<\/a> os explico las diferentes opciones.<\/p>\n<h2><\/h2>\n<p>El primer paso es <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<ul>\n<li>Editando el fichero desde <strong>WordPress<\/strong> en 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 <strong>functions.php<\/strong><\/li>\n<\/ul>\n<\/ul>\n<p><!--more--><\/p>\n<pre class=\"lang:php decode:true\">register_sidebar( array(\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0'name'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 =&gt; __( 'Widget del Footer' ),\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0'id'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 =&gt; 'sidebar-footer',\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0'description'\u00a0\u00a0 =&gt; __( 'Este widget es para el footer' ),\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0'before_widget' =&gt; '',\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 'after_widget' =&gt;'',\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 'before_widget' =&gt;'',\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 'after_title' =&gt; '',\r\n));<\/pre>\n<aside id=\"%1$s\" class=\"widget %2$s\">&#8216;, &#8216;after_widget&#8217; =&gt; &#8216;<\/aside>\n<p>&#8216;, &#8216;before_title&#8217; =&gt; &#8216;<\/p>\n<h3 class=\"widget-title\">&#8216;, &#8216;after_title&#8217; =&gt; &#8216;<\/h3>\n<p>&#8216;, ) );<\/p>\n<p>Os explico cada valor del array:<\/p>\n<ul>\n<ul>\n<ul>\n<li><strong>yam<\/strong>: Nombre del widget, despu\u00e9s lo usaremos en la llamada del <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<\/ul>\n<\/ul>\n<p>Tras esta inserci\u00f3n del c\u00f3digo en el <strong>functions.php<\/strong> nos tendr\u00e1 que salir el <strong>widget<\/strong> por encima del <strong>sidebar<\/strong>. Os pongo una imagen de ejemplo:<\/p>\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<p>Ahora nos queda colocar en el <strong>footer.php<\/strong> la llamada <a title=\"Programaci\u00f3n PHP\" href=\"http:\/\/www.anerbarrena.com\/programacion\/php\/\">PHP<\/a> para mostrar nuestra<strong> nueva 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> !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 <strong>nueva \u00e1rea de widgets en WordPress<\/strong>, dependiendo la ubicaci\u00f3n del widget tendremos que modificar:<\/p>\n<ul>\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<\/ul>","protected":false},"excerpt":{"rendered":"<p>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":21,"featured_media":37819,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2185,2013,2166,2023],"tags":[2186,2187],"class_list":["post-341","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cms","category-disenoweb","category-desarrollo","category-wordpress","tag-widgets","tag-wordpress"],"jetpack_featured_media_url":"https:\/\/webirix.com\/wp-content\/uploads\/2016\/04\/widgetsthumb.jpg","_links":{"self":[{"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/posts\/341","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\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/comments?post=341"}],"version-history":[{"count":4,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/posts\/341\/revisions"}],"predecessor-version":[{"id":37889,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/posts\/341\/revisions\/37889"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/media\/37819"}],"wp:attachment":[{"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/media?parent=341"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/categories?post=341"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/tags?post=341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}