CURS WEB. COM FER UNA WEB A COST 0 I AMB 3 ELEMENTS. PART III

WORDPRESS (Segona part)

Els imprescindibles de la plantilla triada

Tipografia, colors i altres configuracions bàsiques

Els Ginys

Cinc plugins molt útils



Els imprescindibles de la plantilla triada

Un cop hem parlat del back-office que configura l’estructura general del nostre CMS, anem a parlar de la plantilla triada.

En primer lloc carregarem una plantilla. Per això cal clicar sobre “Aparença” i ens portarà a la següent pantalla per carregar i configurar la plantilla.

Back-office de la part de càrrega de les plantilles de WordPress.

Hi ha un buscador de plantilles. Pots fer la recerca segons l’ús que li vulguis donar o algunes característiques concretes.

Cal tenir molt en compte que malgrat que bona part de les estructures de WordPress es repeteixen, pel que fa a la plantilla pot arribar a ser molt diferent. Aquí parlarem de la plantilla OceanWP.

És gratuïta i molt completa. Aquí en tens l’enllaç a la web de WordPress on en pots veure les característiques i opinions dels usuaris.

Un cop carregada i activada anem directament a configurar-la. Per això cal que vagis a Temes > Personalitza i accediràs a la següent pantalla. No parlarem de tots els apartats però del dels més importants i començarem fent esment a l’apartat de sota de tot on hi ha els símbols d’una pantalla gran, una tauleta i un mòbil.

Cal que abans de res parlem d’un concepte: l’adaptabilitat. Resumidament és la capacitat de la teva web de poder-se veure correctament en qualsevol pantalla, tingui la mida que tingui. Això és importantíssim i afortunadament totes les plantilles de WordPress van preparades per adaptar-se tant a mòbils com pantalles de PC de sobretaula.

Més endavant seria interessant parlar dels media queries de CSS però us he promès que no tocaríem cap mena de codi, i així serà.

Per defecte totes aquelles modificacions que facis amb la pantalla gran afecten també al format tauleta i mòbil però si cliques l’opció de tauleta o mòbil, tots els canvis que facis llavors es faran només en el format que hagis triat. És més difícil d’explicar que de veure però en parlarem més quan fem Elementor. De moment cal que tinguis l’opció de la pantalla gran triada.

Back-office de la part de configuració de la plantilla que hem activat del WordPress.

Tipografia, colors i altres configuracions bàsiques

Aquestes són les parts de la web de les que parlarem. Recorda que estem treballant al back-office perquè es vegi al front-office (la part que veu el visitant de la web):

Noms de les zones d’una web estàndard.

Identitat del lloc web: Aquí pots configurar el nom i incloure-hi un eslògan. Si no tens una imatge característica o logotip, et recomano que usis aquesta part pel nom de la web a la capçalera i activis la casella de “mostra el títol del lloc i el seu lema”. Es mostrarà a l’extrem esquerre de dalt de la web (en aquesta plantilla).

Menús: Hauràs notat que això es pot configurar des de diferents llocs. La veritat és que al començament aquesta capacitat de WordPress de poder configurar una mateixa cosa des de diferents menús, pot atabalar una mica però en realitat és molt senzill.

Ginys: Aquest apartat et recomano que no el configuris des d’aquí, ja que té un espai propi. Ho veurem després però t’avanço que és un espai on podràs incloure seccions (petits talls de programes) pre-fetes a la teva web. S’assemblen als plugins però molt més senzills.

Paràmetres de portada: Aquesta pestanya és molt important, ja que és on podem configurar el que volem que es vegi a la pàgina d’inici. Tens dues opcions (que podràs canviar en qualsevol moment):

1. Entrades recents: Es veuran les entrades (no les pàgines) si tens pensat fer un blog o una web amb actualitzacions molt habituals (revista digital, botiga, cursos…) es recomana que activis aquesta opció. Perquè et facis una idea d’una opció o una altra, sàpigues que aquesta mateixa web funciona amb els darreres entrades.

2. Una pàgina estable (la més apropiada si fas una web informativa i penses fer-la amb Elementor): es veurà una pàgina que hagis configurat. Aquesta és l’opció que desenvoluparem amb Elementor.

Header: Si tens logotip o alguna imatge pròpia, aquí ho pots configurar. És la capçalera de la teva web.

No et recomano que facis això amb Elementor, és millor que el menú, nom de la web i/o isotip o imagotip, ho facis des de la plantilla de WordPress instal·lada.

El menú i la seva configuració: Això es mereix quasi un post propi, però intentaré fer un resum útil amb 3 subapartats:

On es troba?

A menú. No et recomano que hi accedeixis des de cap altre lloc tot i que veuràs que en diferents punts pots configurar els menús.

Clica a “creeu un menú nou” i es configura arrossegant els elements que teniu a la dreta (ara en parlarem amb detall) a l’espai central. Si ho disposeu tot en línia, les pestanyes estaran al mateix nivell però si una la poseu més entrada que l’altre cal que tingueu en compte que esteu dient que la de fins a la dreta, depengui de la que té a sobre i que sobresurt a l’esquerra. Potser ho voleu així mateix o potser no. A la imatge estan totes en un mateix nivell i són enllaços personalitzats, és a dir que vosaltres eu entrar l’adreça web que heu volgut. Si feu servir pàgines fetes, entrades o categories veureu que aquesta feina ja ve feta.

Crear un menú segons les categories creades dels posts (format blog) i les pàgines estàtiques

Recordaràs que hem dit diverses vegades que, malgrat que siguin molt semblants, les Pàgines s’usen per informació fixa i les entrades pels “posts” periòdics. Això és perquè serà recomanable que apartats com “Qui sóc?” o “A què ens dediquem” o altres per l’estil siguin pàgines. Així deixem les categories per les entrades. Les categories són els subtemes que tractes a la teva web: notícies, comentaris tipus blog, escrits habituals… Aquests poden ser usats com a pestanyes pel teu menú. Per exemple, aquesta mateixa web n’és un bon exemple: tots els posts publicats estan basats en les categories que pots veure a dalt a la dreta i que, en si mateix, formen un menú. És molt pràctic diferenciar així la informació que vulguis publicar.

Com es configura dins la web?

Si vas a la pestanya “gestiona ubicacions” veuràs els diferents espais que t’ofereix la plantilla i podràs triar els menús que hagis creat i guardat. Et recomano que l’ubiquis a Main. Pots fer proves amb els altres però el principal és el que t’he comentat.

En el cas que no vulguis optar per usar Elementor, et recomano que trastegis també les següents opcions de configuració:

General options: Aquí pots configurar els colors, les mides de les seccions, els botons… Et recomano que abans de remenar facis una còpia de pantalla o foto de la configuració per defecte, per si arriba a un punt que ho modifiques tot tant que perds el control i vols tornar enrere. Normalment totes les plantilles tenen l’opció de deixar-ho tot tal com venia de sèrie. Diverteix-te!

Typography: Pots configurar la tipografia però, com veuràs, hi ha alguns elements que apareixen anomenats segons el nom que reben en codi (HTML).

Si veus que parla de H1, H2, H3… has de saber que en realitat només està parlant de formats de títols. Pots veure més informació aquí.

A Body aquí fa referència als textos normals, els que no són títols o especials. El que en codi HTML s’anomenen amb <p> de paràgraf.

Pots carregar més tipografies però aquí no en parlarem i més ara que realment de sèrie i gràcies a google font hi ha moltíssimes opcions. Si no tens clar com combinar tipografia pots fer dues coses:

1. No tocar-ho i deixar-ho tot de sèrie. Confia en el criteri dels dissenyadors de plantilles. No em cansaré de repetir que és millor una web modesta amb un disseny correcte que una de MASSA creativa. És fàcil acabar creant un monstre.

2. Usar webs com FontPair on hi ha propostes de combinacions web que han estat votades com a estètiques.

Slidebar: és la barra lateral de les teves entrades (per les pàgines no és recomana. És molt útil per les entrades un blog). Pots configurar els contingurs des de ginys.

Footer Widgets: millor fes-ho des de la pantalla de ginys.

Footer Bottom: Són els crèdits web de baix de tot. Es poden modificar, si vols.

Com pots veure, aquesta plantilla és molt completa per si mateixa.

Parlem dels Ginys!

Els Ginys

Com hem anat dient, hi ha dos elements interessants que complementen amb “petits programes” la teva web: els plugins i els ginys. Els pluguins, com veuràs, són molt més complexos i serveixen per fer moltes més coses que amb els ginys, però és important saber on es troben, com es fan servir i què poden arribar a fer. Ho trobaràs a la pestanya Aparença > Ginys.

Fixa’t en els noms de la dreta: Left Sidebar, Footer 1, Footer 2… Són parts de la plantilla i des d’aquí podràs carregar allò que vulguis directament a la ubicació desitjada. Et recomano que facis proves a Left Sidebar (la columna de la dreta que pots tenir a les entrades tipus blog) i, sobretot, els footers que com la mateixa paraula diu, es refereix als “peus” de la web.

Què hi pots posar? El que tu vulguis però normalment el footer es reserva per crèdits, xarxes socials, buscador, mapa de localització, adreça si en tens i algun menú. A la columna de la dreta hi pots posar calendaris (en el cas que el necessitis), núvols d’etiquetes, subíndex per data, categoria o etiqueta i comentaris recents.

Fes proves perquè és francament fàcil usar-les. Només has d’anar al giny que vulguis i clicar sobre per entrar en el menú on directament pots dir on ho vols col·locar. S’esborra fàcilment anant a l’apartat, accedint al giny instal·lat i clicant sobre “eliminar”.

Cinc plugins molt útils

Abans de res és imprescindible que sàpigues que poden ser incompatibles amb Elementor (que és un altre pluguin) o entre si mateixos. Dependrà de cada un d’ells i serà bo que fàcil alguna prova.

Els pluguins funcionen semblant a les plantilles. Cal anar a la finestra de l’instal·lador, fer la recerca, carregar-lo i activar-lo. Per això cal que vagis a Extencions i que triïs si vols veure els que ja tens instalats o si vols carregar-ne de nous.

1. Contact Form 7: és un formulari de contacte. Et recomano aquest perquè és senzill d’utilitzar, funciona bé i sobretot: pots fer que els correus t’arribin al teu correu personal. Això pot semblar una obvietat però molts formularis tenen aquesta opció de pagament. Contact Form 7, avui dia, és gratuït. Esperem que no canviï.

2. Polylang: L’opció multilingüe per la teva web. Des d’un començament pot semblar que pot ser millor la correcció automàtica però si vols tenir una traducció sense sorpreses que puguin donar joc a mals entesos, fes servir aquest pluguin. Veuràs que és un facilitador per multiplicar en tantes llengües vulguis, el contingut de la teva web d’una forma ordenada i neta. No és un traductor automàtic.

Polylang

3. WooCommerce: la botiga en línia! Val a dir que, si des d’un començament tens clar que vols muntar una botiga en línia, et recomano que usis Prestashop i no WordPress. El pluguin de WooCommerce és força més limitat que Prestashop, però pot ser útil si el que vols fer és una petita botiga o secció de venda dins la teva web. Cal que sàpigues que hi ha una normativa sobre els negocis en línia i impostos a pagar igual que hi ha amb les botigues físiques. Et recomano que si vols fer alguna cosa que vagi més enllà de vendre alguna petita artesania o producte puntual, et miris aquesta normativa.

Pots gestionar cobraments optant per un pluguin de plataforma de pagament que els principals bancs tenen de forma gratuïta. Et recomano que llegeixis bé les indicacions perquè hi ha normativa amb relació a les bases de dades, el cobrament amb targeta, els servidors i la seguretat. És molt probable que si ho trobes com a pluguin a WordPress, ho puguis instal·lar sense problemes. El que no et recomano és que surtis dels circuits oficials per descarregar coses.

També pots usar aquest pluguin per gestionar descarregues gratuïtes de material teu. En aquest sentit no crec que arribis a tenir cap problema.

WooCommerce

4. Yoast SEO: El pluguin que t’ajuda a posicionar el millor possible la teva web. És molt fàcil d’usar perquè automàticament et dóna recomanacions de millora o el comunica conflictes que puguis tenir. Només cal que facis cas a les recomanacions que et va indicant.

5. Google Analytics: Té una certa dificultat per instal·lar-lo però du un tutorial que pas a pas et va guiant. Serveix per saber el nombre de visites que reps, des de quins països i a quines hores. És molt útil per tenir una percepció realista de com estan anant les coses i per poder planificar possibles ofertes, temàtiques o prendre decisions com incloure llengües, ofertes pròpies d’altres països….

I fins aquí arriba la introducció molt general a WordPress, els següents posts ja comencem a parlar d’Elementor i tindrem en compte més coses sobre el disseny i la creativitat a la web. I més endavant probablement tornarem a parlar de WordPress però de forma més detallada.


Accedeix a les altres entrades del curs aquí:

CURS WEB. COM FER UNA WEB A COST 0 I AMB 3 ELEMENTS. PART II: WORDPRESS (Primera part)

CURS WEB. COM FER UNA WEB A COST 0 I AMB 3 ELEMENTS. PART I: EL HOST

Comments are closed, but trackbacks and pingbacks are open.