Plantilla Spacious: espai per a la creativitat

Començant

Aquesta és la pàgina d’instruccions del tema o plantilla Spacious. Hem fet tot el possible per fer-ho el més senzill. Si penses que es pot fer encara més fàcil fes-nos-ho saber, estarem encantats de canviar-lo. Comencem!

Aquest tutorial és un extracte traduït del manual de Spacious en anglès, també podeu consultar el vídeo-tutorial per tenir una idea més clara de la configuració, també en anglès.

Activar el tema

No ens hem de preocupar per la instal·lació, aquest tema està disponible en els portals d’entitats com també en els blogs d’entitats! Només cal activar-ho i configurar-ho bé! I així ho expliquem aquí tot seguit!

Activar el tema

  • Anar a Aparença -> Temes al menú de WordPress
  • Passar el ratolí sobre la miniatura del tema i prémer el botó Activa

Informació addicional: Codex de WordPress – Ús de Temes

Menú personalitzat

En activar un tema, per defecte les Pàgines es convertiran en opcions dels menús, i hem de configurar de nou els nostres menús. Això vol dir que just després de l’activació del tema veuràs totes les pàgines actives com menús. Si vols menús selectius amb una combinació d’enllaços, pàgines, categories llavors un menú personalitzat és el que estàs buscant.

Configurar el menú personalitzat

  • Anar a Aparença -> Menús al menú de WordPress
  • Fer clic a Crea un nou enllaç del menú
  • Donar un nom al seu menú al nom del menú i feu clic al botó Crear menú
  • A continuació, seleccionar les pàgines, categories, enllaços personalitzats des del costat esquerre de la pantalla mitjançant la selecció de la casella de verificació i fer clic a Afegeix menú
  • Fer clic a Desa del menú després d’afegir les pàgines necessàries, les categories al menú

Informació addicional: si encara no ho tens tot clar dóna un cop d’ull aquí: Menú personalitzat de WordPress

Carrousel de la pàgina d’inici

Aquest tema és compatible amb el carrousel d’imatges de la pàgina d’inici. Per usar-lo, segueix els passos descrits a continuació.

  • Al panell de control, anar a Aparença-> Personalitzar.
  • Anar a la secció Slider.
  • Per activar el control de Slider, comprovar si la casella de verificació de control d’Slider està activada. Si no ho està, activar-la.
  • Pujar la imatge # 1 per al primer slide. De la mateixa manera, afegir el títol corresponent, la descripció i redirigir l’enllaç. Es pot enllaçar al mateix lloc web o fora d’ell.
  • Repetir el pas anterior per a les altres diapositives.
  • A continuació, fer clic a Desa els canvis. Això és tot, obrir la pàgina d’inici i hauria d’estar allà. 🙂

Afegir logotip personalitzat

Sí, aquest tema és compatible amb logotip personalitzat. Per usar-lo, fes el següent.

  • Al quadre de comandament, anar a Aparença-> Personalitzar-> Capçalera.
  • Pujar el logotip personalitzat.
  • A més, el logotip de la demostració només o mostrar tant casella necessiten ser revisats per mostrar el logotip a la capçalera.
  • Fer clic a Desa els canvis.

Imatge de capçalera

Per configurar la imatge de capçalera cal seguir els passos següents.

  • Al tauler cal anar a Aparença-> Capçalera.
  • Fer clic a Navega per afegir la seva imatge. A continuació, fer clic al botó Publicar.
  • Retallar la imatge al teu gust. L’amplada recomanada és de 1500px per la capçalera.
  • Fer clic a Desa els canvis.

Nota: Pots triar la imatge de capçalera que es mostra per sobre del text de l’encapçalament o sota d’ella.

  • Al tauler cal anar a Aparença-> Personalitzar-> Capçalera.
  • Desplaçar una mica més avall i comprovar la posició a l’opció Capçalera Posició de la imatge.
  • Fes clic a Desa els canvis.

Informació addicional: si encara no ho tens tot clar dóna un cop d’ull aquí – WordPress Header Image

Configuració de la plantilla Business

Informació addicional: Vídeo-tutorial d’instal·lació de la Business Page

Primer pas

  • En el tauler afegim una nova pàgina.
  • En el quadre d’atributs de la pàgina triar la plantilla Business“.
  • Publicar la pàgina. Sí, això és tot pel primer pas.

Segon pas

La plantilla Business compta amb quatre àrees de ginys. Fes-te una idea de la distribució dels ginys amb aquesta imatge, fes clic a la imatge per a una millor visió.

20170412_captura_arees_spacious

  1. Business barra superior (Business Top Sidebar)
  2. Business barra central esquerra (Business Middle Left)
  3. Business barra central dreta  (Business Middle Right)
  4. Business barra inferior (Business Bottom Sidebar)

Només has d’afegir ginys en aquestes 4 zones de la portada per configurar la web amb la plantilla Business.

Tercer pas

Expliquem aquí ens ginys propis del tema:

  • TG:Serveis: afegeix aquest giny a les zones de la barra superior/barra inferior. En aquest giny pots triar qualsevol de les teves pàgines i destacar-les. Hi ha sis opcions en el desplegable. Es mostraran el títol, la descripció i la imatge destacada de la pàgina triada.
  • TG:Crida a l’acció (Call to action): afegeix aquest giny a les zones de la barra superior/barra inferior. El giny et permet configurar un títol en dos línies, el text del botó i l’enllaç.
  • TG:Testimonis: afegeix aquest giny a qualsevol de les 4 zones. El giny et permet configurar títol, nom, subtítol, i ja està.
  • TG:Pàgina destacada: afegeix aquest giny a la zona central, a la barra central esquerra o dreta. Aquest giny permet seleccionar qualsevol de les pàgines amb un desplegable. Es mostraran el títol, la descripció i la imatge destacada d’aquesta pàgina.
  • TG:Destacats giny: afegeix aquest giny a les zones de la barra superior/barra inferior. En aquest giny pots afegir títol  descripció i triar qualsevol pàgina de la web. Hi ha tres desplegables amb opcions, i la imatge destacada de la pàgina es mostrarà.

Nota: Per establir aquesta pàgina com la pàgina d’inici has de seguir aquestes instruccions:

  • Al tauler cal anar a Arranjament-> Lectura.
  • Activa l’opció ‘Pàgina estàtica’.
  • Tria la pàgina que acabes de crear amb la plantilla Business (la pàgina que has creat seguint les instruccions de més amunt) com la primera pàgina.
  • Guardar els canvis.

Vols veure una mostra de pàgina configurada amb la plantilla Business? Plantilla de Business de Spacious

Com limitar l’entradeta (el resum)
Ara bé, si vols modificar el nombre de paraules que apareixen en els ginys de serveis o semblants, ho pots fer fàcilment:

  • Anar a editar la pàgina o el post.
  • Just a principi de la pàgina, a sobre de l’editor, veuras el quadre de configuració del resum.
  • Si no veus el quadre d’extracte, desplega’l a la part superior i veuras les opcions de la pantalla a la cantonada a mà dreta.

20170412_limitar_extracte_text

Fes clic i selecciona la casella extracte. Ara hauríes de veure el quadre extracte a continuació l’editor

  • Ompla la caixa resum amb la quantitat desitjada de text que vols mostrar.

Com configurar la pàgina Blog (llistat de notícies per ordre crononològic)?
Podeu escollir mostrar el bloc de 4 formes diferents.

  • En primer lloc aneu a Opcions -> Lectura-> Primera plana pantalles> Una pàgina estàtica (seleccioni a continuació).
  • Ara, des de la pàgina Entrades: desplegable per seleccionar qualsevol secció on vulguis mostrar el blog.
  • Fes clic a Desa els canvis.
  • Ara, si vols més opcions ves a aparença-> Customitzar -> Disseny-> Entrades de bloc.
    1. Trieu Blog Image Large per la imatge gran amb el text extracte.
    2. Trieu Blog Image Medium per al mitjà d’imatges amb text extracte.
    3. Seleccioneu Blog Full Content complet per mostrar el contingut complet sense les imatges destacades i llegir més.
    4. Tria Blog Image Alternate Medium per al suport d’imatges amb el text extracte però les imatges apareixen en forma alternada dreta, esquerra.
  • Ara ves a Aparença-> Menú i seleccioneu la pàgina del bloc.

Veure tota demostració del bloc aquí Demo

També has de carregar imatges destacades per a cada post o pàgina per mostrar les imatges a la pàgina del bloc.

(Traducció de la pàgina themegrill.com)

Nou plugin RSS Image Feed

El plugin ens permetrà carregar la imatge destacada en els nostres RSS de notícies. Per defecte en WordPress el feed RSS no inclou imatges i perquè això sigui possible és necessari utilitzar plugins.

Si volem que els nostres RSS incloguin la imatge destacada, haurem d’activar el plugin ‘RSS Image Feed’. Un cop activat, entrem a extensions i en RSS Image Feed’ per configurar-ho. En la captura de pantalla està la configuració ràpida del plugin.

Rss_settings2

En la configuració ràpida només introduirem en ‘Image Size’ en tamany màxim de les fotos. Tenir en compte que aquest tamany ho farà en totes les fotos del RSS

Totes les opcions de la configuració del plugin RSS Image Feed
Image size: Triem el costat més ample de la imatge, per reduir la proporció de la fotografia.
Make size relative: Fem la imatge relativa i no estàtica.
Image number: Podem usar una imatge per defecte com a miniatura ficant un número.
Add the “mitjana:content” tag: Afegim botó per descarregar fotografia (amb marc)
Add the “enclosure” tag: Afegim enllaç per descarregar fotografia (sense marc)
Don’t show content: No vam mostrar contingut (Descripció)
Force Excerpt: Limita el contingut de cada publicació a un resum.
Limit Excerpt: Limita el contingut a un nombre de frases.
Empty Cache (3 entries): Permet esborrar la caché si no carreguen bé les fotografies.

rss

Incrustar un àlbum de Flickr!

Flickr.com és una eina molt potent per gestionar i publicar fotografies.

Aquí expliquem com generar el codi que permet incrustar una àlbum amb 4 passos!

  1. Obrir Flickr.com i allà entrar a la pàgina de l’àlbum que volem incrustar.
  2. Modo presentació: mirem la URL, perquè hem d’afegir /show al final,Screenshot from 2016-02-11 09:57:46 per així obrir el modo presentació del nostre àlbum. En clicar intro obrim el modo presentació, amb la barra superior de configuració i la barra inferior que mostra les fotografies. Screenshot from 2016-02-11 09:54:02
  3. A la barra superior a la dreta es troba el botó Compartir, que permet configurar l’embed. D’aqui podem copiar el codi agafant-lo de Seleccionar el codigo HTML.Screenshot from 2016-02-11 09:48:58
  4. Copiem aquest codi al nostre blog, a l’entrada o pàgina o barra lateral on voldriem fer sortir l’àlbum!

Millorem el directori d’entitats!

Descripció de les entitats al directori!

Incorporem el camp descripció de la fitxa d’entitat en el llistat d’entitats. D’aquesta manera enriquim el llistat, afegint informació pràctica i útil.

Aquest camp ara és un text més llarg, que s’afegeix a la configuració pròpia del bloc de l’entitat i per tant pot ser modificat per l’entitat de forma autònoma.

Fitxa d’entitat amb més funcionalitats!

La fitxa d’entitat, el formulari on registrem les dades de l’entitat, comença a ser configurable amb PageBuilder. Afegim elements per facilitar la navegació per als continguts d’una entitat, veure notícies o serveis en aquesta mateixa fitxa.

La configuració per defecte, que obviament cada portal d’entitats podrà modificar amb el PageBuilder, mostrar aquestes dades:

  • Informació de l’entitat: dades de contacte, mapa de localització i altres dades
  • Darreres notícies compartides de l’entitat
  • Propers actes organitzats per l’entitat
  • Serveis oferts per aquesta entitat

Ampliem detall de serveis al portal d’entitats

Si naveguem per un servei concret d’una entitat, hi trobarem automàticament incorporat el llistat d’altres serveis que ofereix la mateixa entitat. A més a més, s’hi incorporen les darreres notícies i les properes agendes d’aquesta entitat.

Ampliem detall d’actes al portal d’entitats

En qualsevol acte compartit amb el portal d’entitats, afegim automàticament el llistat de properes actes organitzades per la mateixa entitat. A més a més, s’hi incorporen les darreres notíceis i serveis d’aquesta entitat.

Amb aquesta navegació creuada enriquim el portal d’entitats, enfortim la xarxa d’entitats al seu voltant, millorem la visualització i seguim teixint!

Més ginys de PageBuilder per als portals d’entitats

Amb nous ginys per al portal d’entitats ja podem mostrar qualsevol informació del blog a les pàgines fetes i configurades amb l’extensió PageBuilder.

Llibreria DIBA Widgets

Ampliem les funcionalitats de PageBuilder, incorporem la nostra llibreria DIBA Widgets amb  una serie de ginys adaptats per al portal d’entitats! Concretament,

  1. Diba Entitat
    Mostrar informació d’una entitat (agafada del Custom Post Type Entitats), dividida en dos seccions, dades de contacte i altres dades.
  2. Diba Entitat Taxonomy
    Mostrar el tipus i la categoria d’una entitat concreta.
  3. Diba Noticies
    Mostra les darreres noticies en la visualització de la fitxa d’entitat. Amb això podem veure en la fitxa descriptiva d’una entitat les seves notícies compartides amb el portal.
  4. Diba Serveis
    Semblant a Diba Noticies, mostra els serveis compartits per les entitats.
  5. Diba Map
    Mostrar un mapa amb Google Maps de l’adreça especificada. Aplicat en el content d’un CPT Entitat, agafa l’adreça de la entitat automàticament.

A més a més, hem ampliat el giny Diba Calendar que ara incorpora la funcionalitat de filtrar els actes per una entitat concreta, sempre que l’utilitzem en el context d’una entitat (CPT Entitat).

Properament explicarem aquí amb una nova entrada exemples i com fer servir aquests ginys amb PageBuilder!

Errada en crear nous recursos en el portal d’entitats

En alguns portals d’entitats hem trobat una errada causada per la configuració de WPML.

En crear un nou recurs i publicar-lo, no surt al directori de recursos del portal d’entitats. En clicar a la categoria del recurs, no mostra el contingut nou. I si aquest és l’únic recurs de la categoria, surt l’avís “no s’ha trobat res”.

Solució: canviar configuració WPML

La solució passa per una petita configuració de l’extensió multiidioma WPML.

  1. Entrem a la tauler a WPML i a l’apartat Suport, i cliquem a l’enllaç TROUBLESHOOTING en la frase “For advanced access or to completely uninstall WPML and remove all language information, use the troubleshooting page.”
  2. En l’apartat Clean up hem de clicar dos botons i així restaurar la configuració, com veieu en aquesta imatge
    a) Set language information
    b) Fix term countscreenshot-www entitatsmontornes cat 2015-12-10 16-44-36

Amb aquests 2 canvis ja surt correctament el nou recurs al llistat!

 

Configuració multiidioma WPML als nous blogs

Hem millorat el sistema de creació de nous blogs, els anomentats blog templates que defineixen la configuració per defecte d’un nou blog en qualsevol portal.

Concretament afecta la configuració del plugin WPML.

En els nous blogs creats a partir d’ara, per defecte es configurarà els idiomes català i castellà. D’aquesta manera les entitats es troben amb una configuració correcte i funcionant per fer un blog amb els 2 idiomes.

L’entitat que vulgui utilitzar només un idioma, podrà desactivar l’altre de forma molt fàcil, en 2 passos

  1. entrar al Tauler a WPML i clicar a Add/remove languages screenshot-prova formacio ppe entitats diba cat 2015-12-10 17-19-07
  2. desactivar l’idioma castellà screenshot-prova formacio ppe entitats diba cat 2015-12-10 17-21-13i guardar el canvi.

Amb aquests dos passos ja hem canviat el blog a un sol idioma!