Plantilla WordPress Your Way.

Tema ‘Your Way Theme’


Febrer 2014.

Desenvolupament d’una plantilla per a WordPress en una única pàgina adequada per projectes creatius on la part visual tingui gran rellevància. Aporta solucions originals a la presentació de grans quantitats de contingut en poc espai i diferents alternatives per la ubicació de fotografies i imatges en alta definició.

En els darrers anys hem vist com el format web en una sola pàgina dividida en seccions guanyava presència a Internet. La principal avantatge d’aquesta tècnica és que ofereix una navegació atractiva i molt directa: scroll vertical animat, evita carregar noves pàgines, permet representar visualment un fil narratiu… En contra, disposem de menys recursos a l’hora de treballar amb tècniques de SEO i ens planteja evidents limitacions de quantitat de contingut; l’scroll podrà ser infinit, però potser la paciència de l’usuari no!

La solució en aquest cas és la crida de posts i pàgines des dels anomenat lightboxes: superposicions a la pantalla principal subjectes a la navegació de l’usuari. Estèticament poden recordar el funcionament de les finestres emergents, però amb aquesta tècnica la interacció amb el navegador és molt més fluida ja que en realitat no es tracta d’una nova finestra, només la simulem per guanyar espai en un moment concret.

Plantilla WordPress frontend

El model de navegació que es proposa és un sistema de targetes, totalment configurable des del panell d’administració de WP, on l’usuari pot crear i vincular cada targeta amb el post o pàgina que desitgi, tal i com veiem en la següent imatge del backend.

Configuració backend WordPress Plantilla

Les quatre seccions de les quals es composa el tema ofereixen establir quatre imatges a pantalla completa per tal que actuin de fons. La primera secció consisteix en un missatge de benvinguda i el botó d’inici de desplaçament vertical. En aquesta primera secció, l’usuari pot configurar efectes d’animació creats en CSS per a la imatge de fons, a través de dues capes. Per exemple, podríem pujar a la capa estàtica la fotografia del cel, i a la capa animada amb translació horitzontal pujar núvols amb el fons amb transparència. D’aquesta forma aconseguiríem la simulació del moviment dels núvols sense tenir que animar tot el fons. Amb una mica de creativitat es poden fer combinacions molt atractives de presentació web utilitzant només dos imatges i aquest algoritme.

Animació CSS a pantalla completa

La segona secció és la vista anteriorment, on es presentava el sistema de navegació per targetes i des d’on s’accedeix als posts o pàgines creades. Els menús, que apareixen i desapareixen al clicar la corresponent etiqueta, estan animats amb Javascript. En la tercera secció es presenta una galeria d’imatges amb scroll horitzontal, efectes en CSS3 i mètode lightbox per veure cada imatge en pantalla completa.

Galeria d'imatges horitzontal

Per a la gestió interna de la galeria s’ha creat un plugin que permet pujar i ordenar cómodament les imatges des del panell d’administració, aprofitant de base el codi del propi gestor de mèdies de WordPress. A més s’inclou la funcionalitat d’arrossegar i deixar anar per ubicar les imatges en l’ordre dessitjat, així com la introducció de peus d’imatge i metadades que incideixen positivament en el SEO de la pàgina.

Gestor de galeria d'imatges per WordPress.

La quarta secció està destinada a un formulari de contacte, usant i personalitzant el popular plugin ‘Contact Form 7’. Com sempre, es tracta d’un tema 100% responsive, no només en l’adaptació del format als diversos dispositius sinó també en la càrrega d’elements condicionada a la pantalla en la que es mostra, per tal de fer més eficient i lleugera la navegació.

Formulari de contacte personalitzat.

Finalment, destacar que la barra de navegació està preparada per incloure enllaços a xarxes socials, paràmetre totalment configurable des del backend de la plantilla. Hi ha prou en accedir a l’apartat ‘Menú’ de WP i crear un de nou marcant la opció ‘Social Icons Menu’. Fet això, només caldrà afegir els enllaços a les nostres xarxes socials i automàticament es mostrarà al frontend la icona corresponent.

Afegir icones de xarxes socials.

 

Fes un ull a altres treballs:


»