Lezione 03. Questa è la schermata di accesso al back-end del sito. Ricordiamoci che vi si accede in questo modo : Tuosito.it/wp-admin.

Transcript

1 Lezione 03 Questa è la schermata di accesso al back-end del sito. Ricordiamoci che vi si accede in questo modo : Tuosito.it/wp-admin 1

2 Finalmente siamo entrati nel dietro le quinte, nel back-end del nostro sito. 2

3 Osserviamo subito il menù sulla colonna di sinistra. Contiene svariate voci, attraverso le quali avremo una gestione quasi totale del nostro sito. Risalta subito agli occhi il numero 1 accanto la voce aggiornamenti. Un consiglio : Non aggiornate mai appena vedete una notifica proporre un upgrade del nostro sito web. Ricordiamoci che stiamo utilizzando la versione 4.1.1, non è detto che aggiornando i plugin (per non parlare dei template) questi poi siano compatibili con una ipotetica versione 4.5.x del CMS. 3

4 I libri dedicati ai CMS solitamente consigliano di eliminare subito tutti i dati di esempio forniti con l'installazione. Cliccando su "Pagine" ci accorgiamo che effettivamente esiste una pagina di esempio. Lasciamola al suo posto, prendiamo però subito dimestichezza con questo strumento. 4

5 5

6 Questa schermata appare dopo aver cliccato su "Aggiungi nuovo", pulsante che compare nella slide numero 4. 6

7 E' intuitivo pensare di assegnare un titolo, ossia un "title" (per chi conosce l'hmtl) alla pagina che stiamo cominciando a creare. 7

8 Lo spazio bianco è quello dove andremo ad inserire testi, link ed immagini 8

9 Diamo un occhiata ai pulsanti. I comandi di formattazione sono quelli evidenziati dal cerchio rosso. Visuale/Testo, evidenziati in verde, sono molto importanti : La modalità visuale è adatta a coloro i quali non conoscono l'html. La modalità testo è indicata per coloro i quali hanno una discreta padronanza dell'html e sono quindi in grado di personalizzare ulteriormente i contenuti della pagina. 9

10 Come potete notare cliccando su "Testo" è cambiata anche la pulsantiera. I comandi fanno riferimento ad alcuni dei tag principali del linguaggio html. 10

11 Iniziamo a creare una pagina 11

12 Ovviamente i riferimenti al lago di Albano sono puramente a scopo di esempio. Il testo contenuto nell'area dell'editor è stato copia-incollato dall'enciclopedia Wikipedia. 12

13 Nelle slides non spiegheremo il singolo significato della maggior parte dei pulsanti. I comandi sono simili a quelli di editor di testo come ad esempio Microsoft Word. 13

14 Occhio però! Ci sono due pulsanti che inizialmente sono evidenziati in un grigio tenue. A cosa servono? Questi pulsanti consentono di creare collegamenti ipertestuali, ossia dei link, sia all'esterno del nostro sito, sia all'interno del sito stesso. 14

15 Selezionando la parola "Castelli Romani" i tasti si sono attivati! 15

16 16

17 17

18 18

19 Come vedete, è anche piuttosto semplice inserire link a pagine già esistenti all'interno del nostro sito, ossia "pagina di esempio" e "Ciao mondo" 19

20 Attenzione, se specificate la URL di destinazione, non create link a pagine interne al nostro sito. Vale anche il viceversa. 20

21 Il link è stato creato! 21

22 Anche questi due pulsanti sono importanti! Il primo consente di aggiungere un "Leggi altro" alla pagina Il secondo permette di visualizzare altri comandi di formattazione del testo, come ad esempio il rientro, i caratteri speciali o il colore del testo. 22

23 Dato che si tratta di un corso di WordPress e non di Html, i pulsanti della visualizzazione Testo non saranno spiegati in questa lezione. Nei prossimi incontri probabilmente saranno necessari alcuni brevi richiami all'html e sarà mia premura fornirvi alcune indicazioni di base. Perché questo? Perché sarà necessario nel momento in cui dovremo inserire mappe di Google o video tratti da Youtube e/o siti simili. 23

24 Non è finita qui 24

25 25

26 26

27 Questa sezione è molto importante. E' da qui che possiamo salvare ciò che abbiamo appena creato. Per il momento è opportuno concentrarci solo sulla prima parte, tra l'altro evidenziata in figura. 27

28 Partiamo dalle nozioni più semplici. I triangolini servono per contrarre l'area di editing 28

29 Il contenuto andrà pubblicato subito? Si potrà pubblicare in un secondo momento? Come compare il tutto all'interno del nostro sito? 29

30 Cliccando su Anteprima si aprirà nel nostro browser la pagina relativa all'articolo che stiamo creando. Corrisponde all'anteprima di stampa disponibile su Word 30

31 31

32 Cliccando su Bozza/Modifica potremo decidere se lasciare l'articolo come una bozza, oppure in attesa di revisione. In ambedue i casi l'articolo non sarà visibile all'utente finale del nostro sito. Lo stato di bozza è attivato in automatico, da quando iniziamo a creare i contenuti sino alla pubblicazione che decidremo in seguito. 32

33 Abbiamo poi cliccato su "Pubblica". Guardate come è cambiato l'aspetto del tutto. La pagina è adesso online, il pulsante blu con scritto "Pubblica" è diventato "Aggiorna". 33

34 La pagina tra l'altro ora compare nell'elenco di tutte le pagine presenti sul nostro sito. 34

35 Abbiamo detto però che finchè non siamo convinti del contenuto editato all'interno della pagina, questa non dovrà essere visibile agli utenti finali del sito. 35

36 Riprendiamo la nostra pagina e clicchiamo su modifica. 36

37 1 2 Impostiamo su privato, clicchiamo ok e quindi su aggiorna

38 Possiamo anche modificare la data di creazione dell'articolo, ad esempio con il fine di comunicare a WordPress quando rendere l'articolo disponibile. Potrebbe essere utile per il lancio di una nuova offerta o per la pubblicazione di un articolo di giornale da fornire ai lettori in un determinato giorno. 38

39 Inseriamo anche un immagine Torniamo all'area di testo. Al nostro articolo manca un immagine. 39

40 40

41 La schermata che si apre dovrebbe essere abbastanza intuitiva. Possiamo caricare (ossia trasporare in "remoto) immagini già presenti sul nostro pc (quindi in locale) 41

42 E' possibile inserire immagini presenti sul nostro pc oppure caricare immagini presenti su siti esterni. 42

43 43

44 E' consigliabile riempire questi campi ai fini del SEO. L'inserimento dell'immagine si conclude dopo averla selezionata (tramite opportuno segno di spunto) e dopo aver cliccato su "Inserisci nella pagina" 44

45 L'immagine è ora presente all'interno dell'articolo 45

46 Ma le modifiche sono state salvate? Per salvare le modifiche ricordatevi il tasto "Aggiorna"! 46

47 Distinzione tra pagine ed articoli La maggior parte dei siti Web sono caratterizzati da alcune pagine che non variano nel tempo, a meno di piccolissime modifiche. Proprio per la loro natura inattiva queste pagine vengono apostrofate con il termine di statiche. Esempi esaustivi sono la pagina del Chi siamo, la pagina sulla Privacy, la pagina del Cosa facciamo e così via. Si tratta quindi di pagine, i cui contenuti variano difficilmente nel corso del tempo, ma devono comunque occupare un ruolo di primo piano all interno del sito Web. È per questo motivo che generalmente queste tipologie di pagine vengono ad essere associate al menu principale del sito. 47

48 WordPress, a tal proposito, effettua una netta distinzione tra le pagine statiche e gli articoli. Mentre quest ultimi vengono caricati frequentemente, dando vita ad un turn over continuo, le pagine statiche, come già detto, non variano mai. Inoltre gli articoli possono essere associati a delle Categorie, mentre le pagine no. L ulteriore differenza risiede nell URL, in particolare gli articoli possono contenere nel proprio URL variabili come la categoria e la data, mentre le pagine contengono solo ed esclusivamente il titolo della pagina. 48