Como añadir más zonas para ubicar widgets en WordPress

Como añadir más zonas para ubicar widgets en WordPress
4.8 (95%) 4 votos

En artículos anteriores hemos visto cómo crear custom post types, o cómo crear temas hijos (child themes)… y hoy vamos a seguir extendiendo y adaptando WordPress a nuestras necesidades. Estudiaremos cómo añadir más widgets, y no me refiero a más funcionalidades (que también podría ser motivo de otro tutorial), sino a cómo añadir más emplazamientos para ubicar nuestros widgets.

Hace ya bastante tiempo que no me asomo por mi blog para compartir contenidos con vosotros, por lo que voy a intentar que este retorno sea lo más interesante posible. Bien, vamos al grano. Ataros la cinta ninja alrededor de la cabeza, afilad vuestra katana sagrada de profanar código, y vamos allá…

¿Por qué añadir más espacios para widgets de WordPress?

Es probable que más de una y más de dos veces te has encontrado con tu plantilla perfecta: Sliders delirantes, una home impactante, plantillas para contenidos diversos deslumbrantes… la vas a liar parda. Pero seamos sinceros, siempre hay algún pequeño detalle que se escapa y no nos termina de convencer. WTF!!! ¿Qué hago? tiro el tema y busco otro… y así entras en una espiral de ilusión – decepción que solo tiene como beneficiario a los piratas de ThemeForest.

¡¡¡Quietor!!! tú mismo puedes hacer ciertos apaños que te salvarán el culete en más de una casión. Sigue leyendo, hombre de poca fé…

Por ejemplo, en el tema Sparkling de ColorLib, que en artículos anteriores estudiamos como mejorarlo a base de temas hijos (child themes), resulta que permite añadir hasta tres widgets diferentes en el footer. Veamos en la siguiente imagen la situación, mira donde pone “ESPACIO 1, ESPACIO 2, ESPACIO 3”, esos son los espacios, a los cuales en este caso, ya hemos asignado un widget:

como-crear-mas-zonas-para-widgets-en-wordpress-tutoriales-wordpress-widgets

¿Y si necesito meter más widgets, qué hago con este tema de WordPress…? ¿Lo tiro…?

Pero… ¿y si no es suficiente para nosotros, o peor aún, para el cliente? Seguro que no es la primera vez que has querido meter más widgets en el footer ó en el sidebar… Lo cierto es que tanto en un sitio como en otro, el procedimiento es el mismo, por lo que una vez visto como se hace en un lugar, es pan comido hacerlo en el otro.

Requisito imprescindible, crear un tema hijo ó child theme

Vale, no es la mejor forma de empezar poner condiciones, pero te explico porqué es más que recomendable. En WordPress hay dos formas de trastocar -personalizar- cualquier tema a fondo:

  • Modificando directamente los archivos del tema que estemos usando.
  • Crear un tema hijo.

El problema de la primera solución, es que no vamos a poder actualizar nunca más el tema que estemos usando, o al menos, sabed que si lo hacemos, nos vamos a cargar las personalizaciones para siempre jamás. Esto no parece la mejor solución, sin duda.

La segunda vía el “tema hijo”, es la más práctica, útil y segura de todas, ya que permite modificar a nuestro antojo, el tema al completo, tanto los .htm, .php, .css, javascript, etc, etc.  El resultado es un “arma” extremadamente potente para trabajar de forma más cómoda y profesional con proyectos de WordPress.

Recuerda que he redactado 5 artículos acerca de cómo montar un hijo para WordPress paso a paso  (te recomiendo que empieces por el primero), y no estaría nada mal que te pasaras por ahí si todavía no lo controlas este tema.

Ahora que ya tengo un tema hijo, ¿por dónde empiezo?

El artículo anterior era realmente complejo, este no es que sea fácil, pero lo veo más asequible. Lo primero es localizar los archivos que quiero tocar.

¿Qué archivos necesito? pues WordPress es muy fácil de entender en ocasiones, y si para este caso práctico queremos añadir un espacio para widgets más en el footer, pues en buena lógica deberíamos buscar el archivo footer.php. ¿Y donde lo encontramos? en la carpeta del tema padre, justo en la raíz:

como-crear-mas-zonas-para-widgets-en-wordpress-tutoriales-wordpress-widgets

El primer paso es copiar del tema padre el archivo footer.php

¿Chupao, no? bien, seguimos, una vez localizado, lo que vamos a hacer es copiarlo tal y como está y pegarlo en nuestra triste y cuasi vacía carpeta del tema hijo con el que estemos trabajando:

como-crear-mas-zonas-para-widgets-en-wordpress-tutoriales-wordpress-widgets-03

De momento, crear más espacios para poner widgets no resulta demasiado complicado.

Por ahora nuestra carpeta del tema hijo únicamente debe contener estos archivos:

como-crear-mas-zonas-para-widgets-en-wordpress-tutoriales-wordpress-widgets

De momento nuestro tema hijo tiene poquitos archivos…

Bien, repetimos la operación pero ahora con el archivo functions.php, que encontraremos en la carpeta del tema padre, justo en la raíz. Y una vez copiado, lo llevamos a hacer compañía a los otros dos ficheros:

como-crear-mas-zonas-para-widgets-en-wordpress-tutoriales-wordpress-widgets

Un paso más para crear más espacios para widgets en WordPress.

Obviamente, estamos preparando el terreno, ahora viene lo bueno… ¡toca remangarse!.

Añadiendo más espacios para widgets en WordPress: Nos metemos con el código.

Si abrimos el archivo footer.php, lo cual parece algo lógico e intuitivo, fijaros lo que nos encontramos en la línea 17 (depende de la versión del tema que tengas puede variar):

como-crear-mas-zonas-para-widgets-en-wordpress-tutoriales-wordpress-widgets

En el código del footer, localizamos una llamada interesante.

Ni mas ni menos tienes un: get_sidebar(‘footer’); ¿qué quiere decir esto? pues resulta que es una función de nuestro querido-odiado WordPress, que lo que hace es que desde el footer se está llamando al core para que nos pase un sidebar en concreto: el del footer. 

Hay que aclarar que el lugar original de los widgets en WordPress es la barra lateral, de ahí que probablemente intuyo que sea el motivo por el cual, la función se llame get_sidebar. Fíjate que este tema en concreto, llama al sidebar que está registrado bajo el indicativo de “footer”.  Y fíjate también que esta función efectivamente está en el archivo footer.php, es decir, en el pié de página, con lo que parece lógico que nos está dando pistas de por donde debemos dar los siguientes pasos. Es lo que WordPress denomina en su documentación como specialised sidebar:

For the parameter, if the file is called “sidebar-special.php” then specify “special”.

Por tanto, si la función apunta al indicativo footer, tendrás que buscar un archivo que se llame sidebar-footer.php. Ten en cuenta que normalmente es al revés, cuando el desarrollador crea su tema y quiere registrar una nueva zona de widgets fuera del sidebar, lo que hace es crear una llamada con la función specialised sidebar que invoca al archivo sidebar-footer.php. Pero como nosotros estamos destripando el tema, tenemos que ir primero al archivo y luego deducir de donde viene.

En resumen, que volvemos a nuestro tema padre, y localizamos en la raíz el archivo sidebar-footer.php, tras lo cual, lo copiamos y pegamos en la raíz de nuestro tema hijo. Tras esto, lo abrimos con nuestro editor favorito:

como-crear-mas-zonas-para-widgets-en-wordpress-tutoriales-wordpress-widgets-07

Si no estás acostumbrado a desarrollar software o como mínimo, a tocarlo, puede parece confuso, pero mira en la siguiente imagen qué sencillo es comprenderlo:

como-crear-mas-zonas-para-widgets-en-wordpress-tutoriales-wordpress-widgets

Esto ya es otra cosa, parece obvio que lo que tenemos que hacer es añadir otra widget zone a nuestro archivo. Insisto, modifica solo el archivo que tienes en tu tema hijo, de lo contrario te puedes cargar el tema. Vamos a ello pues:

como-crear-mas-zonas-para-widgets-en-wordpress-tutoriales-wordpress-widgets

Fijaros que lo hemos llamado footer-widget-4. Bien, con esto hemos terminado de tunear” lo que serían las “vistas” de nuestro tema hijo. Efectivamente, nuestro footer ya tiene capacidad para meter 4 widgets ¡hurra!.

Pero amigo, si vas al backend de gestión (el panel de control vaya), resulta que ¡¡¡seguimos teniendo 3 widgets sólo!!!! A estas alturas, el facepalm es de campeonato…

como-crear-mas-zonas-para-widgets-en-wordpress-tutoriales-wordpress-widgets

WTF!!! que sucede aquí… tenemos 3 áreas para widgets en el footer, y yo he añadido la cuarta… ¿donde está?

Que no cunda el pánico, lo único que tenemos que hacer es seguir indagando y… tirar del codex de WordPress, como siempre.

Bendito – maldito functions.php por el que siempre has de pasar

Si nos ponemos serios con WordPress, no nos podemos andar con tonterias. Tunear CSS es para niños, esto ya se pone más duro. Os presento a functions.php, el archivo que te va a dar más de un quebradero de cabeza.

Para empezar, ya estás corriendo al directorio de tu tema padre, buscándolo, y moviéndolo al directorio de tu tema hijo. Con esto ya debes tener en tu flamante child theme ni más ni menos que:

  • style.css
  • footer.php
  • sidebar-footer.php
  • functions.php

Bien, pues abre el functions.php sin perder más tiempo, y… te cargas todo menos las etiquetas de apertura: <?php  y cierre: ?> de PHP. Bueno en realidad, te habría dado lo mismo creártelo desde cero ^^.

Seguimos, por tanto, con la definición de lo que hace este functions.php, según la definición oficial:

The functions file behaves like a WordPress Plugin, adding features and functionality to a WordPress site. You can use it to call functions, both PHP and built-in WordPress, and to define your own functions.

Que más o menos viene a significar traducido que este fichero se comporta como si fuera un plugin de WordPress (que conveniente…) añadiendo características y funcionalidades a un sitio de WordPress, y lo puedes usar para llamar a funciones ya sean en PHP o bien incluidas en el core de WordPress, y para definir, cómo no, tus propias funciones.

En resumen… casi cualquier cosa que crees por las vistas de WordPress, vas a tener que registrarla en el functions.php, o de lo contrario, no se va a enterar el pobrecito. Algo así como “no functions, no fun”.

Registrando el espacio adicional para el cuarto widget

Para que luego digáis que no os lo pongo fácil, aquí va el código para registrar en el functions.php nuestro cuarto espacio para widgets del footer. Fijaros que mona queda la cabecera con esos comentarios “superpro” 😛

¡¡¡No te tengo miedo, functions.php!!! Registrando nuestro espacio adicional para widgets

¡¡¡No te tengo miedo, functions.php!!! Registrando nuestro espacio adicional para widgets

Vale, os he facilitado, la vida, pero, ¿qué demonios estoy haciendo? Al final como casi siempre, toda la info la tienes en el Códex de WordPress, y en esta ocasión no iba a ser menos.

Básicamente, lo que nos dice es que utilicemos la función register_sidebar (pa’ que WordPress se entere de lo que hemos trastocado por ahí) y le pasemos una serie de valores a modo de configuración y opciones varias. Esta serie de opciones y valores, los meteremos en un array, que es como una forma educada de agruparlos y tenerlos controlados 😉  En el siguiente punto haremos una breve definición de estos términos.

Vamos a darlo masticado, veamos el código en detalle:

register_sidebar (array ( claves y valores ));

Estamos utilizando la función register_sidebar de WordPress para comunicarle que hemos creado un nuevo sidebar (recuerda, donde metemos las zonas para widgets…), y montamos un array donde posteriormente vamos a meter la parametrización en forma de claves y valores.

Ahora vamos con el siguiente punto:

'id' => 'footer-widget-4',

Como tenemos espacios para widgets desparramados por todo el tema, está claro que tenemos que identificar claramente por el identificador a nuestra modificación, en este caso footer-widget-4. ¿Te suena? ¿no? te lo pongo más fácil, búscalo en el código del sidebar-footer.php que hemos trasteado con antelación… ahí está ‘footer-widget-4’:

como-crear-mas-zonas-para-widgets-en-wordpress-tutoriales-wordpress-widgets

Tiene lógica que al registrar en WordPress a través del functions.php un nuevo espacio para widget, le digamos como se llama, para cuando se lo cruce en el sidebar-footer.php sepa de qué va la cosa.

Y seguimos viendo valores:

'name' =>  __( 'Footer Widget 4', 'sparkling' ),

Esto es bastante obvio y molón, lo que pongamos aquí aparecerá como nombre en el panel de control de WordPress:

como-crear-mas-zonas-para-widgets-en-wordpress-tutoriales-wordpress-widgets

Lo conseguimos… mola ¿que no? espacios adicionales para widgets a mi antojo en WordPress

Y bueno, aún nos queda tela por ver en cuanto a esta función, pero os lo he dejado fácil, fácil:

 'description' => __( 'Used for footer widget area', 'sparkling' ),
 'before_widget' => '<div id="%1$s" class="widget %2$s">',
 'after_widget' => '</div>',
 'before_title' => '<h3 class="widgettitle">',
 'after_title' => '</h3>',

No hace falta leerse el Códex para deducir que estos parámetros son bastante obvios… ¡dadle caña mendrugos!

Variables, Arrays, Funciones

Seamos serios, y demos algunas definiciones menos chuscas de las que he ido dando hasta ahora.

  • Una función es un conjunto de instrucciones que permiten procesar las variables para obtener un resultado.
  • Un array es en realidad un mapa ordenado. Un mapa es un tipo de datos que asocia valores con claves. Es decir, si tenemos varios elementos, por ejemplo etiquetas, las meteremos dentro de un array. 
  • Una variable es como un contenedor en el que metemos información, para invocar a través de esa variable toda la información cuando lo necesitemos. Las variables se indican precedidas por el signo $.

Aquí tenemos nuestro array, vacío de claves y valores, dentro de nuestra variable $labels:

$labels = array ( );

Conclusión

Si has conseguido llegar hasta el final, seguro que habrás notado que se sale levantarle las faldas al WordPress y meterte en fregados mayores. ¿El resultado final? El de la imagen:

como-crear-mas-zonas-para-widgets-en-wordpress-tutoriales-wordpress-widgets

Lo conseguimos, 4 zonas para widgets en WordPress…

Este método de trabajo, aunque es muy muy concreto, realmente para casi cualquier cosa que quieras añadir a un tema, tendrás que seguir esta operativa.

Y nada más, agradeceros la atención prestada si es que la habéis prestado 😉 y a ver si el próximo artículo tardo menos en subirlo. Si os ha gustado ¡comentad, y compartirlo como locos en vuestras redes!

4 Comentarios

  1. Javier Terrero
  2. Javier Terrero

Deja un comentario