Curs wordpress set15
-
Upload
carles-verges -
Category
Internet
-
view
308 -
download
1
Transcript of Curs wordpress set15
CURS DE WORPRESS
1INTRODUCCIÓ A WORDPRESS• Coneixent WordPress • Instal·lació de WordPress • Configuració de WordPress
2GESTIÓ DE CONTINGUTS• Pàgines i menús • Entrades, categories, etiquetes i comentaris • Multimèdia i enllaços
3PERSONALITZACIÓ WORDPRESS• Widgets • Plugins
4COCREACIÓ• Veure projectes dels alumnes • Trucs i consells
CURS DE WORPRESS
1INTRODUCCIÓ A WORDPRESS• Coneixent WordPress • Instal·lació de WordPress • Configuració de WordPress
Què és WordPress?
WordPress és una plataforma de CMS (Content Management System) gestor de continguts de codi obert. Actualment la més utilitzada i popular per a la creació de portals i pàgines web.
Ofereix una total funcionalitat per fer qualsevol tipus de portal, ja sigui un propi blog com una botiga online, pàgines corporatives, webs personals, etc.
WordPress està pensat perquè usuaris sense experiència siguin capaços de mantenir i actualitzar una pàgina web sense necessitat de saber programació, i se centrin únicament en la gestió dels continguts.
CURS DE WORPRESS
CONEIXENT WORDPRESS
S'utilitza en més del 18 % de tots els llocs web del món; si es consideren només els llocs elaborats amb CMS, aquest percentatge ascendeix al 57%.i
WordPress està creat amb codi PHP i està pensat i desenvolupat per treballar en servidors Linux, a més és necessari disposar d'una base de dades per poder instal·lar-lo en un servidor (ja inclosa per defecte quan instal·lem des de CDmon).
CURS DE WORPRESS
CONEIXENT WORDPRESS
L’espai FTP es el “cos” de la web, es tracta dels fitxers, que generarà la pàgina web.
La base de dades és la “ment” de la web, es tracta dels continguts dins de cada pàgina i la relació entre ells.
En instal·lar WordPress manté una “connexió entre cos i ment” i fa possible veure articles de forma cronològica, classificats per categories, o buscar continguts per exemple.
CURS DE WORPRESS
CONEIXENT WORDPRESS
Web tipus pàgines
Des d'aquesta pàgina es poden veure alguns exemples de llocs web realitzats amb WordPress: https://wordpress.org/showcase/
Web tipus entrades
En WordPress podem trobar els continguts en dues formes principals:
• Tipus Pàgines (pages), web tipus corporativa: qui som, serveis, contacte…
• Tipus Entrades (posts), web tipus blog, noticies, magazine, articles…
1 2
CURS DE WORPRESS
BENEFICIS WORDPRESSDisseny flexible. Tens la possibilitat de triar entre milers de plantilles predissenyades per aconseguir la teva pàgina web que més t’agradi. Podràs trobar dissenys corporatius, moderns, colorits i de molts altres tipus.
Fàcil administració. El panell d'administració és molt senzill i amigable. Pots editar, afegir contingut en qüestió de segons i monitoritzar tot des del Dashboard principal.
Posicionament. WordPress i Google són com els millors amics. Si fas servir WordPress, els primers llocs de cercadors tocaran a la porta molt més fàcil i ràpid.
100% amigable. Per a qualsevol tipus d'usuari sense importar la seva experiència o coneixement. No necessitaràs lluitar amb HTML, programació o FTP.
Blog inclòs. Si crees una pàgina web estàtica amb informació, WordPress et dóna la possibilitat d'incloure un blog a part (secció notícies).
Mobilitat. No necessites estar sempre al teu ordinador per modificar el teu lloc. Es pot aconseguir des de qualsevol dispositiu i lloc, ja que WordPress està basat en la web i no en un programari que s'instal·la en un PC o Mac.
Fent funcionar WordPress
Hi ha dues formes d'utilitzar WordPress:
1. Mitjançant la plataforma de blogs wordpress.com https://elmeudomini.wordpress.com/ (poques opcions personalització)
2. Realitzant una instal·lació completa al nostre espai web contractat amb el nostre propi domini, exemple www.curswordpress.com
Instal·lació i configuració en pocs minuts.
Entrem al Panell de control de CDmon i comencem el procés per instal·lar-hi WordPress amb un sol clic.
CURS DE WORPRESS
INSTAL·LACIÓ DE WORDPRESS
http://www.nomdomini/wp-admin
http://www.nomdomini/wp-login.php
1.Introduir Nom usuari 2.Introduir Contrasenya
CURS DE WORPRESS
INSTAL·LACIÓ DE WORDPRESS
iUn cop entrem a WORDPRESS anem a para al backend i per visualitzar la web ho fem des del frontend > ver sitio
1 2
CURS DE WORPRESS
CONFIGURACIÓ WORDPRESSAbans de començar a jugar amb la teva web necessites configurar-la correctament per treure-li el màxim rendiment.
1. Generals: recorda canviar el títol, la descripció curta del lloc i l’idioma.
Exercici Pràctic (modificar títol i descripció)
CURS DE WORPRESS
CONFIGURACIÓ WORDPRESS2. Ajustaments d’escriptura: canvia la categoria per defecte per a les entrades.
3. Ajustaments de lectura: tria si vols que la pàgina d'inici del teu web mostri les últimes entrades del blog o una pàgina estàtica.
Veure diferències.
CURS DE WORPRESS
CONFIGURACIÓ WORDPRESS4. Configuració de comentaris: hi ha l’opció de permetre comentaris i notificacions pingbacks i trackbakcs (enllaços).
5. Enllaços permanents: fes la URL amigable, ajuda al SEO de la teva web.
Utilitza l'estructura "nom d'entrada”: % postname%.
CURS DE WORPRESS
CONFIGURACIÓ DEL PERFILPodrem modificar colors, afegir el nostre nom i cognom, escriure una petita biografia, canviar i modificar la nostra contrasenya, etc.
Exercici pràctic (modificar colors, afegir el nostre nom i cognom, escriure una petita biografia, canviar i modificar la nostra contrasenya, etc.)
Podrem accedir-hi:
Des de la barra lateral Cliquem a “Usuaris”, aquí ens apareixen els diferents usuaris associats a aquest compte, ens col·loquem a sobre de l'usuari que desitgem configurar i cliquem a “Edita". Des de la part superior dreta on apareix el nostre nom de perfil i cliquem a "Edita perfil“.
12
CURS DE WORPRESS
USUARISDins de WordPress hi poden haver diferents tipus d’usuaris, amb permisos diferents.
Mitjançant la nostra barra d'eines, i clicant a la pestanya "Usuaris", podem crear-ne i editar-los.
Exercici pràctic (crear nou usuari)
i Només els administradors poden tenir accés a totes les eines de gestió del compte WordPress, i són els únics que poden administrar els usuaris.
CURS DE WORPRESS
ESTRUCTURA INTERNAL’entorn de l’administrador de WordPress
Un disseny per a WordPress ja conté una estructura ben definida però ofereix la versatilitat de modificar-la fàcilment.
Estructura típica de WordPress
i Tenir noció de com és l’estructura de WordPress és molt important, ja que això t’ajuda a entendre com pots jugar amb elements dins el lloc web.
CURS DE WORPRESS
TEMES: ESTRUCTURA EXTERNALes plantilles per a WordPress són bàsicament el cor d'aquest CMS i són arxius que funcionen entre si per crear la presentació d'un lloc.
Ofereixen opcions per millorar l'experiència de l'usuari o per canviar l'aspecte visual del lloc de forma instantània.
Hi ha multitud de temes gratuïts i “premium” (de pagament) que ajuden a adaptar WordPress a qualsevol tipus de necessitat i tipus de pàgina web.
i Pots visitar https://wordpress.org/themes/ on t'ofereixen infinitat de temes.
CURS DE WORPRESS
TEMES: ESTRUCTURA EXTERNA
Abans d’instal·lar un tema important tenir en compte:
1. Si s’adapta el que necessitem, funcionalitats i objectius. 2. Revisar les qualificacions i opinions (rating). 3. Servei de support.
Veure el tema i revisar documentació
i URL valoracions del tema: https://wordpress.org/themes/spaciousURL creador del tema: http://themegrill.com/themes/spacious/
CURS DE WORPRESS
TEMES: ESTRUCTURA EXTERNAWordPress ja porta per defecte alguns temes instal·lats: Twenty fourteen, Twenty fifteen, etc. Exercici pràctic (instal·lar nou tema)
Veure opcions detall tema i personalització.
CURS DE WORPRESS
OPCIONS TEMAPer personalitzar el tema anar a Aparença >>Opcions del tema
Exercici pràctic (afegir enllaç al teu mail)
CURS DE WORPRESS
2GESTIÓ DE CONTINGUTS• Pàgines i menús • Entrades, categories, etiquetes i comentaris. • Multimèdia i enllaços
CURS DE WORPRESS
GESTIÓ DE CONTINGUTSEn WordPress podem trobar dues formes principals d'afegir contingut:
1. Entrades (posts) 2. Pàgines (pages)
Tot i que el procés per afegir és molt semblant, cadascuna té les seves característiques úniques amb diferències específiques.
Diferència entre entrades i pàgines en WordPress
Entrades (s’organitzen per categories i etiquetes) Si vas a crear un blog, llavors la majoria del teu contingut principal serà en forma d'entrades, les quals són cada article que es publica cronològicament. A mesura que vas escrivint entrades, aquestes es van arxivant d’acord al mes i any de publicació.
Pàgines (poden tenir jerarquies “subpàgines” i s’organitzen en menús) Es fan servir per crear diferents tipus de contingut més estàtic, entre els quals destaquen: pàgines essencials com “Contacte”, “Qui som”, “Serveis” ...
Tothom té clar? Ensenyar pissarra i exemples
CURS DE WORPRESS
PÀGINES Quan instal·les WordPress per defecte, ve amb una “Pàgina d'exemple”. Veure pàgina d'exemple
i Per crear nous elements: pàgines, entrades, plugins, etc., tens sempre 2 opcions: barra lateral a sota de l’element en qüestió o a dalt finestra principal.
Exercici pràctic (crear nova pàgina)
CURS DE WORPRESS
EDITOR WORDPRESS
Aquest símbol mostra o treu les opcions avançades en una altra linia.
En aquesta imatge triem diferents tipus de text.
Exercici pràctic: jugar amb l’editor
L'editor visual WordPress és una eina molt flexible a l'hora de crear els teus continguts. Pots donar format als textos.
CURS DE WORPRESS
EDITOR WORDPRESSContingut: és on anem a posar el nostre text que volem publicar. Tens les opcions bàsiques de qualsevol editor de text, com canviar l'estil i mida del text, afegir imatges o vídeos (fent clic a “Afegir objecte”).
Exercici pràctic: Afegir Imatge
CURS DE WORPRESS
CREANT I EDITANT PÀGINES
Una “Pàgina” és diferent d’una “Entrada”: • Una Pàgina no es pot col·locar sota una Categoria. Són objectes individuals. • Les Pàgines poden ser subpàgines i col·locades dins d'una Pàgina principal. • Les Pàgines són diferents de les “Entrades”, les quals són ordenades cronològicament. No es posen a la llista. Les Pàgines funcionen més per guardar detalls de contacte o per explicar als visitants el propòsit del lloc web, per a informació generalment estàtica.
Exercici pràctic (fer 4 pàgines: Inici, Qui som, Notícies, Contacte)
Explica els atributs de la pàgina, distribució i imatge destacada.
CURS DE WORPRESS
OPCIONS DE PUBLICACIÓ
A la part superior dreta tens l'opció de “Publicada”, “Pendent de revisió” i “Esborrany”
També hi ha l’opció de programar la teva “Pàgina”
Hi ha 3 tipus de visibilitat: “Pública”, “Protegida amb contrasenya” i “Privada”
També pots “Actualitzar” la pàgina o esborrar-la.
Explicar l’opció de revisions i com funciona.
Una de les característiques més útils que ofereix WordPress és “Revisions”. La data i hora en què fas l’entrada queden registrades pel sistema i tens l’opció de poder recuperar.i
CURS DE WORPRESS
CREAR MENÚEls menús permeten organitzar la navegació de la nostra web de forma fàcil. Exercici pràctic (crear menú) Perquè la teva nova pàgina creada es pugui veure, necessitaràs crear un enllaç des del menú principal. Per això, vés a la secció "Aparença" i fes clic a l'apartat.
Com pots observar en la imatge, veuràs una estructura de menú parcialment formada per WordPress. A “Nom del menú” escriu el nom que vulguis per al menú principal (per exemple Menú Principal). A “Estructura del Menú” tens 2 elements: Inici, i Pàgina d'exemple.
CURS DE WORPRESS
EDITAR MENÚUn cop creat el menú veuràs unes noves opcions: “Afegir pàgines automàticament”, la qual anirà afegint les pàgines al menú a mesura que les vagis creant a l'apartat “Pàgines” i “Ubicació del tema”, el qual has de seleccionar per indicar-li a WordPress que aquest és el menú principal de la plantilla que estàs utilitzant.
Exercici pràctic (editar menú)
CURS DE WORPRESS
ENTRADESQuè és una entrada o post?
L‘entrada o post és el contingut que diferencia un blog d'una pàgina web, ja que mentre les ”Pàgines” són estàtiques, les “Entrades” generalment tenen opció de publicar-se d'acord a un ordre cronològic.
Les “Entrades” es classifiquen i s’organitzen per Categories i Etiquetes.
Quan instal·les WordPress, per defecte ve amb una “Entrada d’exemple” anomenada “Hola Mundo”.
i Diferenciaràs les pàgines de les entrades per la seva diferent organització. Les entrades es classifiquen per “Categories” i les pàgines per “Menús”
CURS DE WORPRESS
ENTRADESExercici pràctic (afegir nova entrada) Per crear una entrada, et quedes en el mateix apartat de “Entrades” i fas clic a “Añadir nueva”, en el menú lateral o en la part central.
CURS DE WORPRESS
EDICIÓ D’ENTRADES
Títol: has d’escollir un que expressi a primera vista el que conté el post. Contingut: és on anem a posar el nostre text que volem publicar. Tens les opcions bàsiques de qualsevol editor de text, com canviar l'estil i mida del text, afegir imatges o vídeos (fent clic a “Afegir objecte”).
1
2
i Recorda les 2 formes de visualització del contingut , mode “visual” i mode “text” només si saps editar codi HTML, veure exemples.
CURS DE WORPRESS
CATEGORIESCategoria: tries a quina secció o tema pertany la teva entrada. Encara que també ho pots deixar “Sense categoria”, però no és recomanable, ja que la idea és tenir la teva informació ben ordenada.
Exercici pràctic (afegir categories) Existeixen 2 maneres d'establir les categories.
-Dins de la mateixa “Entrada” li afegeixes la categoria.
-Dins l'apartat “Categories” i vas a “Afegir nova categoria”, els camps de Títol de la categoria, i ja pots clicar a “Afegir nova categoria”.
CURS DE WORPRESS
ETIQUETESEtiquetes: són paraules clau que utilitzes per descriure el contingut de l'Entrada. És molt important que les escriguis perquè Google es fixa en elles per a les eines de cerca, per tal que les persones et trobin per contenir aquesta informació. SEO
Exercici pràctic (afegir etiquetes/tags a una entrada)
Per aquest exemple que parla de “WordPress”, podria ser: “WordPress”, “curs WordPress”, “fer web amb WordPress”.
i Separa les etiquetes amb comes. Exemple: WordPress, curs WordPress, web WordPress, etc.
CURS DE WORPRESS
COMENTARIS
i Algunes vegades aquesta opció no apareix per defecte, per habilitar-ho has d’anar a la part superior dreta on diu “Opcions de pantalla” i seleccionar.
Comentaris: apareixen a la part inferior. Es poden habilitar o deshabilitar.
Exercici pràctic: (habilitar i deshabilitar comentaris)
Recorda que també hi ha l’opció de deshabilitar els comentaris A tot arreu des de Ajusts >> Comentaris
CURS DE WORPRESS
MULTIMÈDIA I ENLLAÇOSAfegint imatges a les Entrades i Pàgines
Primer fem una nova pàgina, li posem de nom “servei1”, un cop dins cliquem “Afegir objecte”.
Exercici pràctic (fer nova pàgina, inserir imatges)
CURS DE WORPRESS
AFEGIR IMATGESExisteixen 3 llocs des d'on pots seleccionar la imatge que vols inserir:
-Des del teu ordinador: pots pujar una imatge des del teu ordinador o també es pot “arrossegar” directament. -Des de La Biblioteca de Multimèdia: pots inserir imatges que ja es trobin a la Biblioteca de Multimèdia. -Des d'una URL: si tens la URL de la imatge, pots inserir-la des d'allà sense haver de pujar-la a WordPress.
Exercici pràctic (inserir imatges de diferents formes)
213
i L’arxiu ha de tenir uns centenars de KB i una resolució al voltant de 800 x 600 píxels.
CURS DE WORPRESS
EDICIÓ D’IMATGESUn cop la imatge està carregada hauràs, d’editar-la en els camps respectius, el nom i descripció i el lloc on s'enllaça
Exercici pràctic (editar imatge)
CURS DE WORPRESS
AFEGIR VÍDEOSHi ha 2 maneres de fer-ho:
1. Afegint la URL directament amb mode visual Exemple: https://www.youtube.com/watch?v=l8d4d-cOI4Y
2. Afegint codi embed (pestanya text), exemple vídeo youtube
Copia el codi d’Embed (pestanya text) del vídeo de YouTube de la teva elecció. <iframe width="853" height="480" src="//www.youtube.com/embed/l8d4d-cOI4Y?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
Exercici pràctic (inserir vídeo de YouTube)
i Recomanem no posar el vídeo en el servidor de la web, millor que el vagi a buscar a YouTube, Vimeo, etc.
CURS DE WORPRESS
AFEGIR ENLLAÇPodem afegir enllaços interns (a la pròpia web) o externs. Exercici pràctic (afegir enllaç)
On surt “URL” posem l’enllaç que volem incloure. L'opció “Títol” la podem ignorar. Quan acabem, premem “Afegir Enllaç”.
Indiquem si l'enllaç s'obre a la mateixa finestra del navegador o a una finestra nova.
Les següents figures es fan servir per afegir enllaços al text. El primer serveix per crear i el segon per eliminar.
CURS DE WORPRESS
AFEGIR ENLLAÇ DE MAIL Exercici pràctic (afegir enllaç al teu email)
Anar a la pestanya “Text” i copia la línea de codi html <a href="mailto:[email protected]"> Text que vulguis posar per fer clic </a>
On posa "Text que vulguis posar .." escriu les paraules que veurà el visitant, tingues en compte que és on ha de fer clic per enviar-te el email.
Pots posar "envia’m un email", "Feu clic aquí” o simplement la pròpia adreça del teu e-mail.
CURS DE WORPRESS
WIDGETS / BARRA LATERALL'ús dels widgets ens permeten afegir continguts i enllaços en determinades zones.
Alguns Temes de WordPress són coneguts com a “widget ready” o que accepten “widgets”.
Una web habitualment té un format de 2 columnes. Una columna principal i una columna més estreta on es posen els “widgets” amb un propòsit específic.
CURS DE WORPRESS
WIDGETSAlguns dels objectes típics, anomenats widgets, i que venen per defecte són:
Exercici pràctic (inserir widget “Buscar” a la capçalera)
CURS DE WORPRESS
PLUGINSUn plugin és un tros de codi en forma de complement (petits programes) que es poden instal·lar a WordPress.
Els plugins són complements (programari) que augmenten les capacitats i possibilitats de WordPress fins a límits inimaginables.
Els plugins es fan servir per millorar WordPress en diferents àrees com màrqueting, xarxes socials, seguretat, SEO, disseny web, contingut, trànsit web, etc.
i Gràcies al fet que WP és una plataforma de codi obert, centenars de desenvolupadors web tenen la possibilitat de crear plugins per a la plataforma.
CURS DE WORPRESS
INSTAL·LAR PLUGIN
Exercici pràctic (configurar “contact form 7” i posar-lo a la pàgina contacte)
CURS DE WORPRESS
INSTAL·LAR PLUGINPlugin per afegir foto de perfil
Exercici pràctic (instal·lar plugin avatar i pujar imatge logo) Material curs: imatge logo empresa
Podrem accedir-hi des de la barra Lateral clicant a ”Plugins”, i clicant a “Afegir nou”. Un cop dins, introduïm dins el quadre de cerca “simple local avatars”, Aquest Plugin ens dóna la possibilitat d’afegir imatges en el nostre "avatar".
L’instal·lem i l’activem.
12
CURS DE WORPRESS
INSTAL·LAR PLUGINAra accedim a “Edita perfil”, ja explicat en “Configuració del perfil”.
Apareix aquesta nova opció d'edició, “Avatar“. Selecciones l'arxiu, tant des del teu propi ordinador, o algun que estigui pujat a la teva galeria de Wordpress, i cliquem “Actualitzar perfil”. Instantàniament ens apareix la imatge seleccionada com avatar del nostre perfil.
i Podem observar els canvis realitzats també a la part superior dreta del nostre backend.
CURS DE WORPRESS
GOOGLE ANALYTICS
Instal·lar codi Google Analytics
1. Copia i enganxar “script codi analytics” dins opcions “tema”, caixa “insertar codi”.
2. Manualment a l’arxiu header.php, enganxar el “script codi analytics” entre etiquetes <head> i </head> 3. Mitjançant un plugin: google analytics by yoast, google analytics for wordpress, google analytics dashboard for WP, ...
Exercici pràctic (instal·lar plugin “google analytics by yoast”
CURS DE WORPRESS
GOOGLE ANALYTICSPer instal·lar un plugin, tens dues opcions: 1.Des d’“Afegir plugins” busques per “paraula clau” i cliques “Instal·lar ara”. 2.Des d’FTP amb l'arxiu en .ZIP
12
i No instal·lis plugins dels quals no estàs segur, poden espatllar el teu lloc web. Com més plugins tinguis, més hauràs de revisar la teva pàgina.
Exercici pràctic (instal·lar plugin “google analytics by yoast”
CURS DE WORPRESS
1. Identifica i defineix el tipus de pàgina web que vols fer
Existeixen molts tipus de pàgina web. Pot ser una corporativa, una de negocis, una botiga virtual, etc. El primer pas després d'instal·lar WordPress és definir quin tipus de pàgina web necessites per després poder buscar temes i plugins compatibles.
2. Busca un tema que coincideixi amb el que necessites
Un dels avantatges més importants de WordPress és que hi ha una gran varietat de dissenys i temes per a tot tipus de necessitat. I si es requereix un una mica més avançat, es pot modificar mitjançant codi.
3. Utilitza plugins i temes acuradament
Instal·la només els plugins i temes que realment necessitis. Acudeix a la comunitat i assessora't per usuaris amb més experiència.
CONSELLS GENERALS
CURS DE WORPRESS
1. Actualitzar regularment plugins i tema És important mantenir la web actualitzada per evitar spam, malware, virus, etc..
2. Fer còpies de seguretat Web Recomanem plugin “backWPup”
3. Utilitzar algun plugin seguretat: Recomanem plugin “wordfence”
CONSELLS SEGURETAT
i Recomanem canviar el usuari que ve per defecte: moon, admin,...
CURS DE WORPRESS
Market places de temes WordPress: • Studiopress (Premium) • Woothemes (Premium) • Elegant Themes (Premium) • ThemeForest (Premium)
Plugins Recomanats: • Akismet (antispam) • Contact Form7 (formularis contacte) • Google analytics for wordpress (analytics) • Cookie Law Info (avis legal cookies) • Discus (per gestionar comentaris) • Shareaholic (compartició xarxes socials) • TinyMCE Advanced (editor)
Idiomes (amb plugins): Plugins gratis qtranslate i Plugin de pago wpml
RECURSOS
@CDmonFacebook.com/Its.CDmon [email protected]
Fem el que ens agrada www.cdmon.cat
b blog.cdmon.cat
@creativacioSMFacebook.com/creativacioSM [email protected]