TecnologieWeb LABORATORIO a.a. 2015/2016 WordPress e InstantWP Progettazione e realizzazione di un sito web Goy - a.a. 2015/2016 Tecnologie Web 1 TecnologieWeb WordPress WordPress si può utilizzare in due modi: Online: da wordpress.com è possibile registrarsi e creare un blog o un sito il servizio è gratuito offre un dominio di terzo livello, sotto il dominio wordpress.com (es.: nomescelto.wordpress.com) non è possibile personalizzare il sito con plugin e temi aggiuntivi rispetto a quelli pre-installati (a meno di acquistare servizi aggiuntivi) In locale: da wordpress.org è possibile scaricare il CMS da installare sul proprio PC è necessario aver installato Apache, l'interprete PHP e MySQL Server (es. pacchetto XAMPP) questa modalità permette di utilizzare tutte le funzionalità di WordPress senza vincoli. Goy - a.a. 2015/2016 Tecnologie Web 2 1
TecnologieWeb InstantWP - I Instant WordPress [www.instantwp.com] Instant WordPress (4.4.2) is a complete standalone, portable WordPress development environment (NB It will even run from a USB key!) Components: Apache web server (2.2.15 - Win32) interprete PHP (5.4.36) MySQL Server (5.1.46-community-nt) Apache and MySQL Server are started and stopped automatically Instant WordPress can be installed as many times as you wish and deleted by simply removing the folder that it is running from NB: Instant WordPress is not suitable for live websites and should only be used for testing and development Goy - a.a. 2015/2016 Tecnologie Web 3 TecnologieWeb InstantWP - II http://127.0.0.1:4001/wordpress/ = URL con cui, da browser, potete accedere all'istanza (locale) di InstantWP (cioè del vostro sito web realizzato con InstantWP) 127.0.0.1 = indirizzo IP del localhost; 4001 = porta TCP su cui è in ascolto il Web Server Apache wordpress = sotto-cartella della document-root(*) di Apache, in cui si trovano i file che costituiscono il vostro sito (*) cartella in cui il Web Server va a cercare le risorse che gli vengono richieste Goy - a.a. 2015/2016 Tecnologie Web 4 2
TecnologieWeb InstantWP - III nella cartella di installazione di InstantWP c'è una cartella iwpserver, dentro la quale si trova la document root di Apache (cioè la cartella htdocs): il sito realizzato con InstantWP si trova nella sotto-cartella wordpress Goy - a.a. 2015/2016 Tecnologie Web 5 TecnologieWeb InstantWP - IV http://127.0.0.1:4001/phpmyadmin/ = URL con cui, da browser, potete accedere a PhpMyAdmin, l'applicazione (web-based, scritta in PHP!) per gestire i database (attraverso il DBMS MySQL Server, incluso in InstantWP) Quindi, nella document-root di Apache dovrei trovare una cartella phpmyadmin ("sorella" della cartella wordpress)... perché non c'è?!? La cartella phpmyadmin si trova sotto iwpserver\admin: E nel file di configurazione di Apache (iwpserver\server\apache\conf\httpd.conf) c'è scritto che quando il browser si connette a <local-server>/phpmyadmin Apache deve in realtà connettersi a:...\iwpserver\admin\phpmyadmin Goy - a.a. 2015/2016 Tecnologie Web 6 3
TecnologieWeb InstantWP - V Ricordiamoci che: InstantWP "is not suitable for live websites and should only be used for testing and development" dopo aver creato il nostro sito, occorre pubblicarlo online! cioè: registrare un dominio, trovare un hosting e trasferire il sito sul server del provider prescelto; in particolare dobbiamo: 1. copiare il contenuto della cartella wordpress nella cartella definita sull'host per il sito (**) 2. fare una copia dei dati nel database e caricarli nel DBMS offerto dall'host (***) 3. apportare le opportune modifiche di configurazione richieste dall'hosting provider (es. accesso al DB) Rif: www.instantwp.com/unleashed/ (in particolare i cap. 4 e 5) www.wpitaly.it/wiki/main/cambiareserver a.a. 2014/15 Tecnologie Web 7 TecnologieWeb InstantWP - VI (**) Per copiare il contenuto della cartella wordpress nella cartella definita sull'host per il sito abbiamo bisogno di un FTP Server (generalmente disponibile sull'host del provider) e di un FTP client (per es. FileZilla, incluso in XAMPP) FTP Server request response FTP client FTP client FTP client a.a. 2014/15 Tecnologie Web 8 4
TecnologieWeb InstantWP - VII (***) Per fare una copia dei dati nel database e caricarli nel DBMS offerto dall'host: 1. Connettetevi a PhpMyAdmin (http://127.0.0.1:4001/phpmyadmin/) p p p y ed entrate con username = root password vuota a.a. 2014/15 Tecnologie Web 9 TecnologieWeb InstantWP - VIII 2. Sulla sinistra, selezionate il database wordpress, poi cliccate su Esporta: 3. Senza modificare nulla cliccate in basso sul pulsante Esegui: 4. Il browser vi chiederà di salvare il file wordpress.sql: ditegli di sì! (si tratta di un file di testo che contiene la query SQL che vi permetterà di "ricostruire" altrove il vostro database) 5. Connettetevi al PhpMyAdmin sull'host e selezionate il database wordpress, sulla sinistra 6. cliccate su Importa: 7. Selezionate wordpress.sql: e cliccate in fondo su Esegui a.a. 2014/15 Tecnologie Web 10 5
TecnologieWeb X LAVORARE IN AULA Purtroppo in aula, quando uscite dal vostro account, le modifiche fatte con IMPORTANTE!! InstantWP vanno perdute! per poter continuare a lavorare, dobbiamo: 1. copiare il contenuto della cartella wordpress su una chiavetta (o su uno storage in rete) 2. esportare il database (salvando il file.sql sulla chiavetta o sullo storage) Quando torniamo in aula: 1. copiare la cartella wordpress dalla chiavetta 2. importare il database a.a. 2014/15 Tecnologie Web 11 TecnologieWeb InstantWP - IX Pannello di Controllo di InstantWP quando avviate InstantWP (doppio click su ) vi compare il Pannello di Controllo: WordPress Frontpage vi apre l'istanza locale di InstantWP (cioè il vostro sito web realizzato con InstantWP) Explorer se volete usare un altro browser, fate cut&paste dell'url del sito!! Goy - a.a. 2015/2016 Tecnologie Web 12 6
TecnologieWeb InstantWP - X WordPress Admin apre il backend di amministrazione dell'istanza locale di InstantWP [username = admin, password = password] apre la cartella dei plugin apre la cartella dei temi MySQL Admin apre PhpMyAdmin [username = root, no password] Goy - a.a. 2015/2016 Tecnologie Web 13 TecnologieWeb creare un sito - I Creare un sito con WordPress [una guida: premium.wpmudev.org/manuals/wordpress/] NB: Il frontend di WP è impostato di default come blog, ma può essere impostato anche come sito "normale" 1. scegliamo un progetto [*] 2. definiamo la struttura del sito, x es: 3. scegliamo il Tema [**] 4. costruiamo le pagine [***] [da: www.wppratico.com/ creare-un-sito-aziendale-con-wordpress] Goy - a.a. 2015/2016 Tecnologie Web 14 7
TecnologieWeb creare un sito - II [*] Scegliamo un progetto un progetto che vi interesssa personalmente (a vostra libera scelta, meglio se "reale"), oppure il sito di una negozio (una ferramenta, una profumeria, una libreria, un negozio di scarpe,...) il sito di una ONG locale (es. salvaguardia ambientale o difesa degli animali) il sito di un gruppo musicale o teatrale il sito di un agriturismo i Goy - a.a. 2015/2016 Tecnologie Web 15 TecnologieWeb creare un sito - III [**] Scegliamo il Tema da WordPress Admin > Appearance > Themes selezione del Tema (Activate) Goy - a.a. 2015/2016 Tecnologie Web 16 8
TecnologieWeb creare un sito - IV Cliccando sul tema attivato (Theme Details) si hanno a disposizione una serie di pulsanti (Customize, Widgets, Menus, Header, Backgound) che corrispondono alle voci di menu sotto Appearance Customize: dato il tema attivato, il menu a sinistra permette di personalizzare: titolo del sito e "motto" colore dello sfondo immagine dell'intestazione immagine di sfondo widgets scelta del tipo di home page: ultimi post o pagina statica (nel qual caso, vi chiede quale pagina usare e dove mettere i post...) Goy - a.a. 2015/2016 Tecnologie Web 17 TecnologieWeb creare un sito - V Widgets: dato il tema attivato, permette di gestire i widgets Widget = componente grafico di un'interfaccia utente; generalmente è un'applicazione con specifiche funzionalità nel tema di default di WP: - Primary/Secondary Widget Area: permettono di inserire/eliminare/ riordinare widgets (es. Search, Recent posts,...) nella barra laterale (dx) - Footer Widget Area(s): permettono di inserire/ eliminare/riordinare widgets nel footer Goy - a.a. 2015/2016 Tecnologie Web 18 9
TecnologieWeb creare un sito - VI Menus: dato il tema attivato, permette di gestire le voci di menu per posizionare il menu (in particolare, per selezionare quale menu usare come Primary Navigation) per creare e configurare il vostro menu Goy - a.a. 2015/2016 Tecnologie Web 19 TecnologieWeb creare un sito - VII Header: dato il tema attivato, permette di gestire l'immagine dell'intestazione (come da Customize...) Background: dato il tema attivato,,permette di gestire l'immagine di sfondo (come da Customize...) Editor dato il tema attivato, permette di modificare il codice dei fogli di stile CSS [usare con moltissima cautela!!] Una guida su temi e plugin: premium.wpmudev.org/manuals/wordpress-plugins-themes/#manualcontents Goy - a.a. 2015/2016 Tecnologie Web 20 10
TecnologieWeb creare un sito - VIII [***] Costruiamo le pagine da WordPress Admin > Pages > All pages permette di amministrare le pagine [prox slide] OnMuoseOver compare un menu contestuale che permette di modificare i contenuti (Edit) l'editor ha 2 tab: "visuale" e HTML x salvare Goy - a.a. 2015/2016 Tecnologie Web 21 TecnologieWeb creare un sito - IX Add new permette di aggiungere una nuova pagina permette di aggiungere immagini, video, ecc. pulsante Save Draft x salvare in bozza (la pagina viene salvata ma non pubblicata) pulsante Preview x visualizzare l'ultima bozza salvata modifica stato, modifica visibilità, pianifica pubblicazione pulsante per cestinare la pagina pulsante per pubblicare la pagina x posizionare la pagina in modo gerarchico rispetto ad un'altra pagina e per applicare alla pagina un template particolare Goy - a.a. 2015/2016 Tecnologie Web 22 11
TecnologieWeb creare un sito - X da WordPress Admin > Posts > All posts permette di amministrare i post Add new permette di aggiungere un nuovo post NB: l'interfaccia è uguale a quella per le pagine, con in più sulla dx: il box Format per scegliere il formato dell'articolo il box Categorie per selezionare la categoria dell'articolo (se non è presente si può creare cliccando su +Add New Category) il box Tags per aggiungere tag all'articolo Goy - a.a. 2015/2016 Tecnologie Web 23 TecnologieWeb creare un sito - XI Ci sono poi altre voci nel menu di sx (Media, Links, Comments), che potete scoprire da soli... Infine ci sono alcune voci nel menu di sx che permettono di gestire aspetti un po' più "avanzati" (e delicati): Plugins (permette di gestire i plugin installati - eliminandoli, disattivandoli o attivandoli - e di installare nuovi plugin) Users (permette di gestire gli utenti(*)) Tools (permettono di salvare o ripristinare i contenuti di un sito web WP online) Settings (permette di configurare varie proprietà del sito [usare con cautela!]) (*) In WP esistono vari tipi di utenti, con privilegi diversi (amministratore, editore, autore, collaboratore) Goy - a.a. 2015/2016 Tecnologie Web 24 12