wordpress 101 – freelance day - 24 ottobre 2015

125
@wptorino 02/11/15 WordPress MeetUp Torino WordPress 101 Lo starter kit per farsi il sito

Upload: toolbox-coworking

Post on 23-Jan-2018

1.929 views

Category:

Business


0 download

TRANSCRIPT

Page 1: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

WordPress MeetUp Torino

WordPress 101Lo starter kit per farsi il sito

Page 2: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

Usare WordPress «perché lo usano tutti» è sbagliato

2

Page 3: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

Cos’è WordPress? Cosa non è?

«WordPress is web software you can use to create a beautiful website or blog»

WordPress non è Photoshop, Dreamweaver, Word, «una cosa drag & drop»

3

Page 4: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

A cosa serve WordPress?

WordPress non è la soluzione giusta per fare tutti i siti

Quello che può fare WordPress lo decidono il tema e i plugin

4

Page 5: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

WordPress è perfetto per:

•siti personali

•blog

•magazine

•siti di news

5

Page 6: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

Puoi usare WordPress per:

•ecommerce

•siti di prodotti

•cataloghi

6

Page 7: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

WordPress anche no:

•portfolio

•siti con pagine tutte diverse

•siti a pagina singola o molto semplici

7

Page 8: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

Cosa usare al posto di WordPress/1

E-Commerce

•Shopify

•Big Cartel

•Etsy

8

Page 9: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

Cosa usare al posto di WordPress/2

Portfolio

•Cargo

•Tumblr

•Squarespace (ottimo anche per i siti statici, «di pagine»)

9

Page 10: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

Cosa usare al posto di WordPress/3

Come/al posto di un blog

•Medium

•Tumblr

•Facebook

10

Page 11: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

WordPress è un CMS (Content Management System / Sistema di Gestione dei Contenuti) progettato per gestire, attraverso una interfaccia intuitiva, contenuti anche ricchi e complessi.

11

Page 12: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

WordPress.comIdeale per familiarizzare con gli strumenti di WordPress, senza acquistare

uno spazio web.

Registrandosi su WordPress.com si può iniziare subito a creare il proprio

sito o blog.

Senza dover acquistare nulla, senza dover installare nulla e senza doversi

preoccupare degli aggiornamenti della piattaforma.

COMODO NO?

12

Page 13: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

• Dominio di terzo livello (www.miosito.wordpress.com)

• Limitazione nell’uso dei temi

• Impossibile accedere al codice

• Impossibile installare plugin

• Nessun accesso all’hosting

WordPress.com – Limiti

13

Page 14: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

Page 15: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

Dopo l’accesso bisogna procedere alla creazione del

sito.

15

Page 16: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

1) Si sceglie il tema

16

Page 17: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

2) Si sceglie il dominio di terzo livello

(es. www.miosito.wordpress.com)

17

Page 18: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

3) Si sceglie il piano: gratuito o a pagamento

18

Page 19: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

Si accede al «dietro le quinte» del sito (back-end)

http://miosito.wordpress.com/wp-admin

19

Page 20: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

Articoli e pagine

ARTICOLO (post):✓ contenuti archiviati in ordine cronologico dal più recente (blog)✓ non hanno struttura gerarchica✓ possono essere organizzati con categorie e tag

PAGINA:✓ contenuti statici (es. About)✓ possono avere una struttura gerarchica con pagine e sotto-pagine✓ non prevedono categorie e tags

20

Page 21: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

Dal back-end è possibile scegliere,

nel menu verticale, se creare un

articolo o una pagina.

21

Page 22: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

Cliccando su «AGGIUNGI NUOVO» puoi iniziare a

creare il tuo primo articolo.

22

Page 23: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

Inserire il titolo dell’articolo

Area per inserire il contenuto dell’articolo

Per aggiungere immagini

23

Page 24: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

Nella barra a destra troviamo diverse funzioni:

✓ Salva bozza, anteprima, cestina e PUBBLICA

✓ Formato: all’articolo possiamo attribuire

diversi formati, il più utilizzato è standard

✓ CATEGORIE

✓ TAG

✓ IMMAGINE IN EVIDENZA: necessaria per le

anteprime sul sito, è quella che appare

quando si condivide l’articolo sui Social.

24

Page 25: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

Categorie e TagSono delle tassonomie.Tag e categorie sono utili per classificare i contenuti di un sito, per guidare i lettori e per indicizzare il sito su Google. Ad ogni tag e categoria infatti corrisponde un URL che andrà a posizionarsi su Google.

25

Page 26: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

Categorie✓ sono dei macrodescrittori dell’argomento del post✓ un numero piuttosto limitato in un sito✓ sono gerarchiche (categorie e sottocategorie)✓ Ha senso creare una categoria se associata ad una buona quantità di post✓ la creazione di una categoria deve essere ragionata: prima di partire con un blog avere chiare almeno 3 categorie.

26

Page 27: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

Tag✓ classificazione trasversale del post✓ al massimo una trentina ✓ non sono gerarchici ✓ non devono mai coincidere con le categorieESEMPIO:

27

Categorie Tag

Primi piatti Ricette con pomodoro

Secondi piatti Ricette con il pesce

Page 28: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

ImmaginiLe immagini che carichiamo sul nostro sito sono molto importanti e devono essere:

1) OTTIMIZZATE PER WEB

2) OTTIMIZZATE PER I MOTORI DI RICERCA

28

Page 29: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

Ottimizzare le immagini per il web

ERRORE FREQUENTE: siti web con immagini pesantissime e quindi lentissimi.

- 72 dpi- 1200 px il lato maggiore- compressione: 70-80%

29

Page 30: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

Ottimizzare le immagini per i motori di ricerca

Indispensabile perché le foto possano essere trovate su Google

Riguarda tre elementi principali:- nome del file- attributo title- attributo alt

30

Page 31: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

Ottimizzare le immagini per i motori di ricerca

NOME DEL FILE:- deve contenere parole di senso compiuto- separate dal trattino alto- tutto scritto minuscolo- dev’essere univoco (non uguale per più foto)- descrittivo al massimo- coinciso (5 o 6 parole max)

31

Page 32: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

Ottimizzare le immagini per i motori di ricerca

ATTRIBUTI TITLE E ALTdanno informazioni sull’immagine

- testo alternativo quando l’immagine non carica- testo che appare passando col mouse- didascalia nelle gallery

32

Page 33: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

Ottimizzare le immagini per i motori di ricerca

IMPORTANTE:

ALT è l’attributo che viene letto dai programmi di sintesi vocale utilizzati dalle persone non vedenti.INSERIAMOLO SEMPRE!

33

Page 34: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

Ottimizzare le immagini per i motori di ricerca

•Title e Alt esprimono lo stesso concetto del nome del file ma devono essere scritti in modo discorsivo e rispettando le regole dell’ortografia.

•Possono essere uguali tra loro

34

Page 35: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15 35

Page 36: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15 36

Page 37: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15 37

Page 38: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15 38

Page 39: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

Scegliere il temaTEMA O TEMPLATE?

Page 40: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

Template

l 1) Un file HTML (di solito acquistato)

l

l 2) Un tema WordPress

l

l 3) Un file nella struttura gerarchica di WordPress

40

Page 41: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

Un file HTMLl Per chi semplicemente non riesce a

fare una «bella» grafica , i template HTML sono da sempre stati una salvezza.

l Sono spesso a pagamento, a volte gratuiti, ma riguardano una modalità statica di fare siti.

41

Page 42: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

l

Template di WordPressUN MODO DI CHIAMARE I TEMI DI WORDPRESS SOPRATTUTTO DA PARTE DI CHI NON È UNO SVILUPPATORE

42

Page 43: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

Template della struttura di WordPressParte integrante della struttura di ogni singolo temaSolo il file functions.php (e i file funzionali annessi), i file .js e .css non sono templateindex.php, single.php, archive.php, page.php sono template

43

Page 44: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

Tipologia principaleTemi a pagamento → assistenza, buona qualità

Temi Free → risparmio, buona/discreta qualità

Temi versione Light → primo passo verso acquisto

44

Page 45: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

Marketplace di temi a pagamento – WordPress.org

45

Page 46: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

Framework: Genesis by StudioPress . WordPress.org

46

Page 47: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

Temi su WordPress.com

47

Page 48: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

Cercare Twenty Fifteen

48

Page 49: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15 49

Page 50: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

Cliccando il tasto «More»

50

Page 51: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

Cercare Lovecraft tra i temi

51

Page 52: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15 52

Page 53: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

Dove trovare immagini per fare sito e modificare il tema?•Pexels http://pexels.com •Flickr CC http://www.flickr.com/creativecommons/ •Wikimedia Commons http://commons.wikimedia.org/wiki/Category:Images•The Stocks http://thestocks.im/ •Unsplash http://unsplash.com/ •Gratisography http://www.gratisography.com/•Stock Up http://www.sitebuilderreport.com/stock-up•Designers Pics http://www.designerspics.com/

53

Page 54: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

Per chi usa WordPress.orgChild Theme• IL MANTRA: Sempre meglio creare Child

Theme in modo che si evitino guai con gli aggiornamenti (sovrascrittura)

• Tutte le personalizzazioni si fanno nel file style.css e nel file functions.php

54

Page 55: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

WordPress Plugin OverviewHOW TO

55

Page 56: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15 56

Page 57: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15 57

Page 58: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15 58

Page 59: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15 59

Page 60: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15 60

Page 61: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

Less is moreLIFE SAVERS

61

Page 62: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 62

Page 63: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 63

Page 64: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 64

Page 65: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 65

Page 66: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 66

Page 67: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 67

Page 68: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

SEO and Tuning

02/11/15 68

Page 69: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 69

Page 70: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 70

Page 71: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 71

Page 72: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 72

Page 73: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 73

Page 74: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 74

Page 75: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 75

Page 76: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 76

Page 77: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

E-Commerce

Page 78: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 78

Page 79: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 79

Page 80: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

Security

02/11/15 80

Page 81: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 81

Page 82: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 82

Page 83: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 83

Page 84: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 84

Page 85: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 85

Page 86: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

Social

02/11/15 86

Page 87: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 87

Page 88: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 88

Page 89: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 89

Page 90: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

Cookies

02/11/15 90

Page 91: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 91

Page 92: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 92

Page 93: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

A little bit of everything

02/11/15 93

Page 94: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 94

Page 95: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 95

Page 96: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 96

Page 97: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 97

Page 98: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 98

Page 99: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 99

Page 100: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 100

Page 101: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 101

Page 102: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 102

Page 103: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 103

Page 104: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 104

Page 105: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 105

Page 106: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 106

Page 107: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 107

Page 108: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 108

Page 109: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 109

Page 110: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 110

Page 111: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 111

Page 112: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 112

Page 113: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 113

Page 114: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

Premium Plugins

02/11/15 114

Page 115: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 115

Page 116: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 116

Page 117: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 117

Page 118: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 118

Page 119: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 119

Page 120: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 120

Page 121: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/1502/11/15 121

Page 122: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

Per approfondire

02/11/15 122

Page 123: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

Bookmarks

▪http://www.wpmayor.com/

▪http://www.wpsolver.com/

▪http://www.wpbeginner.com/

▪http://wpshout.com/

▪http://wptavern.com/

02/11/15 123

Page 124: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

?

124

Page 125: WordPress 101 – Freelance Day - 24 ottobre 2015

@wptorino02/11/15

About UsWordPress Meetup Torino

• http://www.meetup.com/WordPress-Meetup-Torino/

• http://wptorino.it

• https://twitter.com/wptorino

• https://www.facebook.com/wptorino

• Cristiano Zanca – http://zanca.it

• Francesca Marano – http://francescamarano.com

• Ivan Rachieli – http://iscarlets.it

• Ljuba Daviè – http://ljuba.it

• Maurizio Pelizzone - http://www.mavida.com

• Oleg Belousov - http://olegs.be/

125