Un dels grans avantatges d’utilitzar Genesis Framework és la facilitat de modelar-lo i adaptar-lo als nostres gustos i necessitats. Amb petits snippets de codi, pots afegir totes aquelles funcionalitats que et puguin fer falta en cada moment d’una forma ràpida i senzilla. Un cas ben típic és el de crear una Widget Area nova al nostre WordPress. I d’això precisament parlarem avui al blog.

Abans, però, deixa’m dir-te que, precisament, l’escalabilitat és una de les coses que més m’agrada d’aquest Framework, i una de les raons principals per les quals sempre el recomano i és la matèria prima amb la què creo les pàgines web 100% a mida per als meus clients, amb les què poden captar clients online des del primer dia.

Realment, és molt més òptim anar afegint allò que necessites de forma progressiva, i no haver de carregar per defecte amb un munt de funcionalitats. Això precisament, és el que passa amb els themes de Themeforest, dels què has de fugir-ne tan lluny com puguis.

Un dels casos més habituals a l’hora de modificar el disseny del nostre WordPress, és el de voler d’afegir widgets amb diferents continguts, ja siguin textos, imatges, vídeos, posts destacats, calendaris… ectètera.

Què és una Widget Area i per què ens pot servir?

Aquests widgets s’han de col·locar en algun lloc de la web, oi? Doncs precisament aquests “llocs” o ubicacions, són les Widget Areas. Aquestes ubicacions ens permeten insertar-hi els widgets que vulguem d’una forma molt senzilla i intuïtiva.

Habitualment, aquest procés el podem dur a terme de dues formes diferents:

• Des del backend del nostre WordPress, fent clic al menú Aparença > Ginys, i allà arrossegar el widget a l’àrea que vulguem.
• Des del personalitzador, fent clic al botó Personalitzar de la barra d’Administració > Ginys > sel·leccionant la widget area que ens interessi i afegint-hi dins els widgets que vulguem. (Cal tenir en compte que no se’ns mostraran totes les Widget Areas del nostre child theme com passa al backend, sinó només les que tinguem habilitades a la pàgina en la què ens trobem en aquell moment.

Per defecte, el theme de Genesis que utilitzis disposarà d’un número determinat de Widget Areas, ubicades en llocs concrets. Per exemple, te’n pots trobar:

• A la home de la teva web, sobretot si es tracta d’una pàgina d’inici personalitzable o widgetitzable (ja em perdonaràs el palabro).
• A la banda dreta del header, normalment usada per afegir un menú, una caixa de cerca o un CTA.
• A la barra lateral del blog, on s’hi acostuma a afegir un calendari de posts, les últimes entrades o els contactes socials. (Cal dir que les barres laterals estan perdent pes, deixant pas a blogs d’una sola columna, com és el cas del meu Blog de WordPress i Genesis).
• I allà on al desenvolupador se li hagi ocurregut.

Però, què passa si necessitem col·locar un widget en una zona concreta, però el nostre theme no incorpora una Widget Area precisament allà? Ens hem de resignar? Canviar de theme? Tancar la nostra web?

És clar que no! Amb Genesis sempre hi ha alternativa. I com ho podem aconseguir? Ben fàcil: amb un parell d’snippets de codi.

A més, com et vaig explicar en aquest post sobre Genesis, els seus snippets sempre funcionen, independentment del child theme que utilitzis. I ja no diguem si és un theme creat per tu mateix. És la grandesa d’aquest Framework, et facilita la feina fins a límits insospitats.

Així que, ja ens podem arremangar. Perquè ara mateix, tu i jo crearem una Widget Area per al teu WordPress d’una forma ràpida i senzilla. I sense fer servir cap plugin.

Creant una Widget Area sense fer servir cap plugin

En l’exemple que veurem, crearem i col·locarem una Widget Area després de cada post. És un cas típic i molt útil, per exemple, per mostrar un CTA o banner automàticament al final de cada article que escrivim, sense haver-nos de preocupar cada vegada de posar-lo manualment. Som-hi!

Registrant la Widget Area

El primer pas és registrar la Widget Area. Dit d’una altra manera, és la forma d’explicar-li al nostre child theme que, a partir d’ara, comptarà amb una zona especial nova on nosaltres hi podrem col·locar els widgets que vulguem.

Per aconseguir-ho, només has de copiar aquest snippet a l’arxiu functions.php del teu child theme.

En aquest moment, si mires a l’apartat Ginys del teu WordPress, veuràs que… màgia, màgia! Ha aparegut una Widget Area nova! Ara, si vols, pots arrossegar-hi el widget que vulguis. Per exemple, pots provar amb el de calendari, ja que és força visual i, important, ocupa el 100% de l’espai disponible.

Ja t’estic veient. Guardes els canvis, visites la teva web però… on és aquest calendari? Sí, hem creat la Widget Area i li hem col·locat un element, però… no el veiem pas! Què ha passat? He comès algun error? He trencat el meu WordPress? Calma.

Mostrant la Widget Area

Que no vegis la Widget Area és el més normal del món, Saps per què? Doncs perquè la Widget Area està creada, sí, però el child theme encara no sap on l’ha de mostrar. O dit d’una altra manera, encara no li hem dit en quina part de la web l’ha de col·locar.

Això, com sempre, ho solucionarem fàcilment amb un snippet col·locat a l’arxiu functions.php. En l’exemple que ens ocupa, com dèiem, la mostrarem després cada post.

Ara sí! Si mires al final de qualsevol dels teus posts, veuràs que hi apareix el calendari! És clar que pots substituir-lo pel Widget que vulguis. En el meu cas, hi tinc un widget d’HTML on hi he escrit un titular, un paràgraf i el CTA que apunta a la pàgina del meu servei de Disseny i Desenvolupament WordPress.

Evidentment, pots fer aparèixer la Widget Area allà on vulguis. Jo mateix, a la meva web, en tinc cinc:

• Welcome: situada a la part superior de la home, on es mostra la imatge principal, el titular, el paràgraf i el CTA.
• Home content: situada inmediatament després de l’anterior, per si necessito mostrar-hi algun contingut. Actualment està deshabilitada.
• After page: situada al final de cada pàgina. La faig servir per mostrar el formulari de contacte.
• After post: situada després de cada post del blog. És l’exemple que hem vist.
• After portfolio: situada després de cada projecte del Portfolio, on també s’hi mostra el formulari.

Detall important. Una bona pràctica de desenvolupament web és col·locar cada cosa al seu lloc. Per això, seria interessant que ubiquessis aquest snippet a l’arxiu corresponent del teu child theme:

• Si vols mostrar una Widget Area a la home, copia l’snippet a l’arxiu front-page.php.
• Si necessites que aparegui a una pàgina, enganxa’l a l’arxiu page.php.
• Si es tracta d’ubicar la Widget Area a un post, ja sigui un article del blog o un projecte de Portfolio, posa’l a l’arxiu single.php.

En efecte, si el col·loques al functions.php funcionarà. Però si aprenem a programar PHP, n’aprenem bé, oi? 🙂

Arribats a aquest punt, l’únic detall que et falta, és estilitzar una mica aquesta Widget Area i donar-li un disseny homogeni amb la resta de la teva web. Ho aconseguirem amb una mica de CSS.

Estilitzant la Widget Area

Per fer-ho efectiu, només has d’obrir l’style.css del teu child theme, i col·locar els atributs i valors CSS que vulguis a la classe .after-post. En el meu cas, són aquests:

Evidentment, pots modificar l’estil de la Widget Area i adaptar-la al teu gust.

Te n’adones de les possibilitats de les Widget Areas? Ja has vist que amb una mica de codi, podem col·locar l’element que vulguem allà on vulguem, sense límits. Imaginació al poder!

Aquí et deixo un videotutorial on t’ho explico en moviment 😉

I aquí l’arxiu de codi que hem treballat al vídeo. D’aquesta manera, el pots copiar i enganxar i no cometràs errors de sintaxi, tan habituals en php.

[clickToTweet tweet=”Creant una Widget Area a WordPress, pots col·locar el contingut que vulguis allà on vulguis, sense cap restricció!” quote=”Creant una Widget Area a WordPress, pots col·locar el contingut que vulguis allà on vulguis, sense cap restricció!” theme=”style1″]

En conclusió

En aquest article hem après que les Widget Areas son els espais del nostre child theme on podem col·locar-hi widgets diversos, en funció del contingut que vulguem mostrar.

És probable que el nostre theme n’incorpori per defecte, però si necessitem mostrar contingut en una zona on no n’hi ha, la podem crear ben fàcilment amb un parell d’snippets de codi.

En primer lloc, hem registrat la Widget Area, perquè el nostre child theme sàpiga que en té una més. Però, només amb això, no n’hi ha prou, perquè el theme no sap on l’ha de mostrar.

Per això, el segon pas ha estat col·locar-la en un punt determinat de la web, en aquest exemple, després de cada post. I ja tenim la Widget Area creada i ubicada.

I finalment, li hem donat estil amb una mica de CSS per tal d’adaptar-lo al disseny de la nostra web.

Així de simple és crear una Widget Area amb Genesis. De nou, hem constatat que si treballem amb aquest Framework, podem modificar la nostra web i adaptar-la fàcilment a les nostres necessitats amb quatre línies de codi ben senzilles d’aplicar.

I recorda que si vols aprendre WordPress i Genesis com un Pro, tens a la teva disposició 39 articles, 19 videotutorials i 9 episodis del podcast on comparteixo amb tu tot allò que sé perquè aprenguis a dominar el teu lloc web amb WordPress i que no et domini ell a tu 🙂