TUTORIAL: creare un sito web semplice, da zero con WordPress (tutti i passaggi spiegati)

Introduzione: cosa andremo a fare

In questo tutorial mostreremo come realizzare un semplice sito web utilizzando WordPress, da zero fino alla pubblicazione. Partiremo con la spiegazione di cosa sono il dominio e l’hosting, e di come acquistarli; di come installare WordPress utilizzando i semplici strumenti messi a disposizione dal servizio di hosting acquistato. Spiegheremo bene le differenze fra WordPress, i suoi temi (theme) e i plugin; le pagine, gli articoli e di come questi elementi interagiscono fra di loro. Capiremo perché un sito web di presentazione di un’attività (un biglietto da visita su internet) è molto più semplice di un e-commerce. Mostreremo infine le funzioni base del pannello di amministrazione di WordPress (il /wp-admin). Vedremo brevemente le diverse possibilità a disposizione per dare un’estetica e una struttura al sito web: si può utilizzare un tema preinstallato in WordPress, installarne uno gratuito dal catalogo di WordPress o acquistarne su siti di settore (come themeforest.com).

Il nostro obiettivo è creare un risultato semplice (vedi un possibile risultato finale del tutorial https://sitowebdazero.com/esempi/studioarchitettura/) quindi utilizzeremo un tema gratuito e pre-installato in WordPress. Con chi vuole provare a scrivere un po’ di codice, vedremo anche come modificare i famosi CSS per cambiare alcuni dettagli estetici.

Chi vorrà, potrà anche andare più in profondità con il tutorial avanzato per arrivare a capire quali sono gli elementi tecnici che costituiscono un tema già fatto, e come realizzare un tema da zero scrivendo il codice PHP, Javascript, CSS e HTML. Anche seguendo il tutorial avanzato, l’obiettivo sarà comunque raggiungere lo stesso risultato acquisendo però le competenze che permettono di realizzare qualsiasi grafica e funzionalità necessaria.

Possibili esempi di risultato di questo tutorial

Elementi per iniziare

Per iniziare a creare il nostro sito web, abbiamo bisogno di un dominio e di un hosting. Possiamo pensare al dominio come all’indirizzo di un appartamento mentre all’hosting come lo spazio fisico all’interno dell’appartamento. Quello che vediamo quando navighiamo in un sito web, è ciò che è contenuto nell’appartamento: le stanze potrebbero essere viste come le categorie e l’arredamento come i testi e le immagini.

Siti web che vendono online (come nel caso degli e-commerce) o che devono sostenere molte connessioni, cioè molte persone che si connettono contemporaneamente al sito web, devono utilizzare soluzioni più complesse e più costose, ma un sito web di presentazione aziendale come quello che andremo a creare in questo tutorial, può fare affidamento su un servizio hosting meno oneroso.

Per utilizzare questi due elementi (dominio e hosting) possiamo acquistarli in una soluzione integrata e comoda e, per farlo, utilizzeremo NetSons perché è il servizio che utilizzo personalmente. Con i miei clienti utilizzo anche SiteGround, Register e altre piattaforme, ma Netsons è quello più adatto per iniziare e offre un’assistenza tecnica impareggiabile.

Acquisto Dominio e Hosting

Ricapitolando: abbiamo detto di acquistare dominio e hosting, che Netsons (come tanti altri) vende in una soluzione unica. Andiamo quindi con il browser su www.netsons.com e inseriamo il dominio del nostro sito web nel box centrale, come nell’immagine di seguito.

Selezioniamo l’estensione del dominio (.it, .com sono le più utilizzate) dalla tendina a fianco del box.

A questo punto potete seguire il video di seguito per vedere un esempio di registrazione e acquisto di un dominio con hosting su Netsons.

Installazione di WordPress dal pannello

Per installare WordPress, dobbiamo accedere a Netsons e aprire il pannello dell’hosting.

Un tempo era necessario scaricare WordPress dal sito ufficiale, decomprimere un file contenente tutto l’occorrente e caricarlo nell’hosting via FTP, SSH o SFTP.

Oggi, dato che la maggior parte dei siti web sono realizzati con WordPress, i fornitori di hosting sono organizzati per offrire pannelli che permettono di installare tutto in pochi click. Nel video che segue vedremo come appare l’installazione dal pannello di Netsons.

Capiamo insieme le voci che troviamo nel pannello. La maggior parte possono essere lasciate come sono già selezionate, ma cerchiamo di capirne qualcosa:

Dominio, è quello che abbiamo acquistato, è l’indirizzo del nostro sito web. Nel caso del video che segue, il dominio è https://www.sitowebdazero.com.
Percorso, è un campo poco utilizzato nel caso di siti web semplici. Permette di installare un sito in una cartella interna, come ad esempio https://www.sitowebdazero.com/blog. Quindi se volessimo installare dentro https://www.sitowebdazero.com/blog, metteremmo /blog nel campo Percorso. Non lo faremo in questo tutorial.
Versione, di solito viene proposta l’ultima versione di WordPress disponibile. Nel caso del video, è la 6.1.1.
Lingua, è la lingua con la quale le parole presenti nel sito web saranno scritte;
WordPress 6.1.1 EULA, è la dichiarazione che abbiamo capito i termini e condizioni di utilizzo di WordPress e sono da leggere;
Di solito ha senso lasciare i seguenti punti come già selezionati:
- Aggiornamento automatico, WordPress Plugin aggiornamento automatico, WordPress Theme aggiornamento automatico, Aggiornamento Backup automatici per lasciare attiva l’impostazione che prevede che WordPress aggiorni automaticamente alcune parti e creare backup per ripristinarli nel caso l’aggiornamento non andasse a buon fine.
Impostazioni, questa è una sezione più interessante perché è da qui che andremo ad impostare Admin Username e Admin Password, ovvero il nome utente e la password per accedere al pannello di amministrazione di WordPress che vedremo più avanti. Il Titolo sito sarà il nome del sito web, Sito web messaggio personale sarà invece una frase che alcuni temi (theme) di WordPress mostrano, mentre altri no (anche questo aspetto verrà analizzato più avanti). Da qui ci sono altre impostazioni che di solito vengono lasciate come le vediamo pre-impostate: Autenticazione a due fattori, che serve ad attivare una modalità più sicura di accesso al pannello di amministrazione (non trattata in questo tutorial); limite tentativi di accesso, che si riferisce ad un plugin che troveremo pre-installato e che promette di bloccare l’accesso quando la password viene sbagliata per più di un numero configurabile di volte; abilita Multi-site, una impostazione non trattata in questo tutorial.
Avanzato, qui possiamo lasciare selezionata la voce Gestire automaticamente le impostazioni avanzate per me.

Finalmente possiamo cliccare il bottone in basso a destra con su scritto Installa e avviare la procedura di installazione.

WP è installato: cosa fare ora?

Ricapitolando: abbiamo acquistato il dominio e l’hosting (lo spazio web) dove abbiamo installato WordPress. Adesso cosa dobbiamo fare? WordPress è praticamente vuoto, contiene soltanto:

il classico articolo Hello World e la pagina Sample Page;
un tema di default (vedremo più avanti cosa è un tema e come utilizzarlo);
alcuni plugin di dubbia utilità.

Se per curiosità volete vedere cosa c’è nel sito che avete appena creato, andate con il browser all’indirizzo che avete scelto. Vedrete soltanto quello che WordPress offre quando viene installato. Apparirà più o meno così:

Torniamo quindi alla sezione precedente su Netsons, da dove possiamo accedere al pannello di gestione /wp-admin attraverso il secondo link a disposizione. Quindi di nuovo, se il vostro sito si chiama www.ilmiobellissimosito.it andrete su www.ilmiobellissimosito.it/wp-admin.

Primi passi nel wp-admin

Adesso che abbiamo installato WordPress per creare il nostro sito web, abbiamo verificato l’installazione nel nostro dominio e spazio web (hosting), abbiamo anche visto che l’installazione ha creato un sito web base, con poche parole di default, e siamo entrati nel /wp-admin, vediamo un po’ di azioni base da fare in un sito web appena creato. Di solito ci sono aggiornamenti da fare, anche se WordPress è stato appena installato. La versione di WordPress è l’ultima, quindi non vedremo nessun aggiornamento in questa sezione.

Ci sono invece due plugin preinstallati che hanno bisogno di aggiornamenti. Probabilmente non li utilizzeremo ma a scopo dimostrativo, vediamo come aggiornarli. Clicchiamo sul piccolo box a sinistra Seleziona tutto, proprio sotto Aggiorna plugin. In questo modo tutti i plugin sono selezionati. E clicchiamo il bottone Aggiorna plugin in basso a sinistra.

Andrebbe bene lo stesso cliccare Aggiorna plugin in alto a sinistra, ma è assurdo selezionare qualcosa e poi cliccare su un bottone in alto: vedremo che WordPress ha molti limiti di progettazione del layout e dell’usabilità.

Nel frattempo WordPress ha aggiornato ciò che serviva e non abbiamo più nulla da aggiornare.

Panoramica del wp-admin, il pannello per amministrare il nostro sito web

Il wp-admin è il pannello da cui potrete amministrare tutti gli aspetti del vostro sito web.

Nella parte a sinistra è presente un menu come si vede di seguito:

Vediamo insieme le voci che al momento è importante conoscere:

Bacheca: è la pagina iniziale, per il momento non c’è molto di interessante qui per noi;
Articoli: è la sezione per vedere, modificare, aggiungere e cancellare gli articoli del blog; per il momento ci basta sapere questo;
Media: qui sono presenti tutte le immagini, i video e i file che eventualmente caricheremo nel nostro sito web. Sono organizzate per mese di caricamento.
Pagine: è la sezione per vedere, modificare, aggiungere e cancellare le pagine del sito web.
Commenti: è una sezione che negli ultimi anni è sempre meno utilizzata, saltiamola.
Aspetto: qui ci sono un pò di strumenti che in parte impareremo ad utilizzare. Alcune parti (come l’editor) rimangono uguali per tutti i temi, perchè sono offerte direttamente da WordPress, mentre altre parti dipendono dal tema installato. Anche qui cerchiamo di restare sul generico.
Plugin: questa sezione è una delle preferiti di tutti gli amanti di WordPress. Troverete tutti i plugin installati, potrete verificare se sono attivi o meno (e attivarli, in caso), eliminarli e installarne degli altri.
Lasciamo le sezioni Utenti, Strumenti e Impostazioni perchè non verranno utilizzate in questo tutorial.

Vediamo ora la definizione di alcuni elementi che fanno parte del sito WordPress:

Un tema (theme) WordPress è quello che da la struttura al sito web (lo vedremo meglio in altri video). Contiene alcuni file di base e serve a costruire l’estetica e le funzionalità del sito web.
Un plugin WordPress è un pacchetto di software che serve ad aggiungere funzionalità che WordPress di base non offre. Ad esempio, WordPress offre una modalità per la creazione di pagine e articoli, ma non offre un modo per inviare email da sito web. Per questa e tante altre mancanze, esistono una moltitudine di plugin, realizzati appositamente per aggiungere una o più funzioni a WordPress. Per ricevere email dal sito web, è molto utilizzato il plugin “Contact Form 7 Plugin”, ma ce ne sono tanti altri.
I contenuti del sito web, di base le pagine e gli articoli, vengono invece gestiti direttamente da WordPress attraverso le sezioni Articoli, che al momento contiene un articolo chiamato Hello World (e che prima vedevamo in homepage) e la sezione Pagine, che di base contiene la pagina per la Privacy Policy (che però va scritta da chi realizza il sito web, non contiene nulla di specifico, solo una serie di indicazioni generiche e una pagina Sample page di esempio). Per vedere il contenuto di una pagina e modificarlo, basta cliccare sul titolo per accedere all’editor (che per ora non vedremo).
Nella sezione Aspetto -> Temi ci sono i temi installati (che vedremo dopo).
Nella sezione Plugin ci sono i plugin installati e la possibilità di installarne altri (vedremo dopo le modalità di installazione dei plugin e capiremo perchè alcuni di loro sono utili).
La sezione Utenti contiene tutti gli utenti che possono accedere al wp-admin; per ora c’è solo il nostro utente ma possiamo crearne diversi con diverse tipologie.

Per il momento possiamo saltare le altre voci in questa panoramica di wp-admin.

Inserire dei contenuti

A questo punto dovremmo parlare di cosa sono un tema WordPress (theme), i plugin e gli altri elementi che di solito sentiamo nominare in questo ambito. Ma è difficile capire, se non ci sono dei contenuti come Articoli, Pagine e Immagini.

Così, creiamo dei contenuti a partire da questi che mettiamo a disposizione: non saranno perfettamente quelli che servono nel vostro sito web, ma vi consigliamo di utilizzare questi per il momento, rifarete poi tutto con i vostri contenuti. Questa fase vi serve per fare pratica, quindi vi consigliamo vivamente di copiare questi.

Creazione di Pagine

Per aggiungere una pagina al sito web, dobbiamo andare sulla voce del pannello Pagine. Qui clicchiamo su Aggiungi Pagina: la pagina creata non avrà ancora contenuti e saremo noi a inserirli. Per inserire il titolo della pagina dobbiamo cliccare su Aggiungi titolo e scrivere.

Cliccando sull’area testo, possiamo aggiungere i contenuti della pagina: scriveremo ciò che vogliamo che la pagina contenga, come la descrizione di un servizio o di un prodotto, la pagina Chi siamo o la pagina Contatti. Possiamo impostare l’impaginazione come desideriamo: in ogni box di contenuto possiamo selezionare se desideriamo inserire un paragrafo, un’immagine, un elenco puntato, una citazione, un separatore o dividere l’area in due o più colonne di testo (nel prossimo capitolo vediamo l’editor di WordPress).

Nella sezione a destra dello schermo, possiamo cliccare nell’area Pagina e cercare la voce Template.

Cliccando sul menu a tendina, possiamo scegliere il template che vogliamo che la pagina abbia. I template di pagina definiscono il modo in cui viene mostrato il contenuto quando viene visualizzato il sito web. I template disponibili sono quelli presenti dalla versione base di WordPress: proviamo tutti quelli a disposizione per vedere le differenze.

Per creare una pagina all’interno del tuo sito web, segui questo tutorial passo passo.

Creare nuovi articoli

Se vogliamo inserire nel sito web un’area blog e aggiungere nuovi articoli per popolarla, dobbiamo cliccare nella sezione Articoli.

Nell’area Tutti gli articoli troviamo tutti gli articoli che finora abbiamo inserito nel blog del nostro sito web (in questo caso, non sono ancora presenti).

Cliccando su Aggiungi nuovo possiamo creare un nuovo articolo.

La bozza dell’articolo è completamente vuota e contiene, al pari della bozza di una Pagina, i campi che possiamo compilare con il testo che desideriamo, dal titolo ai sottotitoli, paragrafi e citazioni. Cliccando nell’area a destra, sottosezione Articolo possiamo aggiungere dettagli per completare il post del blog, come la categoria a cui appartiene, i tag (le etichette) che ne identificano l’argomento, l’immagine in evidenza, il riassunto.

La sezione Categorie ci mostra tutte le categorie del blog presenti nel nostro sito web: inizialmente, la categoria presente è Undefined, ma è possibile aggiungere categorie nuove, a seconda di come vogliamo organizzare il blog e il sito web.

Per approfondire come scrivere al meglio un articolo per il tuo sito web, leggi questo tutorial.

Adesso capiamo cosa sono i temi (theme) e l’effetto che fanno

Per capire meglio che cos’è un tema e come funziona, vediamo come cambia il nostro sito web quando attiviamo i diversi temi che sono stati installati automaticamente durante l’installazione di WordPress.

Nel capitolo precedente abbiamo creato pagine e articoli di prova. Saranno utili per capire meglio cosa cambia (e cosa non cambia) quando attiviamo diversi temi, e aiutano a comprendere subito l’effetto che ogni tema porta sul sito web.

All’inizio, vediamo il sito web con il tema di base impostato automaticamente dall’installazione. Nel nostro caso, come si vede nel video di seguito, il tema ha il menu in alto a destra e contiene l’unica pagina presente (Sample Page), mentre l’homepage mostra tutti gli articoli (Hello World! e quelli creati nel capitolo precedente).

Adesso, proviamo ad attivare un altro tema: nella sezione temi del menù wp-admin di WordPress, clicchiamo sul bottone Attiva sul box del tema Twenty-twenty one.

Notiamo subito che la struttura del sito web è cambiata, come è cambiato il colore e la tipologia del font utilizzato. Nel video di seguito abbiamo modo di vedere titolo e sottotitolo che abbiamo impostato durante l’installazione, ma non abbiamo il menù in alto come l’altro tema.

Ora proviamo ad attivare l’ultimo tema.

Questo tema fornisce qualche informazione in più e mostra un’immagine; rimane presente la Sample Page, proprio come l’articolo Hello World e il titolo del sito, che sono sempre gli stessi.

COSA ABBIAMO CAPITO?

Che variare un tema, attivandone uno piuttosto che un altro, non cambia il contenuto, i testi e le immagini, di un sito web, ma agisce soltanto sulla struttura. Possono esserci temi, come l’ultimo visto, che mostrano un’immagine, ma non è un’immagine caricata da noi, è presente all’interno del tema, è proposta da chi ha prodotto il tema.
Possono esserci temi che mostrano menu di tutte le pagine (come il primo e il terzo tema) o nessun menu (come il secondo) ma le parti che scriviamo (Hello World e Sample page) rimangono invariate, sia nei titoli che nei testi contenuti

Scegliamo il tema di WP

Esistono diverse possibilità, più avanti nell’articolo le accenneremo, ma noi abbiamo in mente di realizzare un sito web con poche pagine e quindi scegliamo di lavorare con il tema Twenty Twenty-Three, utilizzando l’editor offerto del tema e le Pagine con gli Articoli creati nei capitoli precedenti.

Installiamo dei plugin utili

I plugin, come dicevamo all’inizio, sono un modo intelligente di estendere le funzionalità base di WordPress. Ce ne sono davvero tanti, gratuiti o a pagamento, e seguendo un tutorial avanzato (in preparazione) possiamo capire anche come svilupparne da zero. Per questo sito web semplice di presentazione di un’attività commerciale, possiamo decidere di non metterne nessuno, o di installarne alcuni base, che personalmente ritengo utili:

Google kit
Contact form 7

Per rendere compliant il sito web al GDPR, consigliamo di rivolgersi a servizi web come iubenda.com o legalblink.it.

Vediamo la procedura per installare Google Kit, per Contact form e gli altri plugin funziona allo stesso modo.

Dal menu a sinistra Plugin->Aggiungi nuovo

Si aprirà la pagina per cercare il plugin per nome: scriviamo Google kit nel campo di testo in alto a destra:

Appariranno molti plugin ma quello da installare cliccando il bottone Installa adesso, ha questo aspetto:

Per il dettaglio dell’installazione e attivazione, leggi questo tutorial e segui le indicazioni.

L’editor di WordPress

L’editor di WordPress è fatto appositamente per essere utilizzato senza alcuna competenza informatica. Non è fatto soltanto per chi non ha competenza web, ma offre strumenti naturali per scrivere testi, aggiungere immagini e tutto ciò che può servire. Lo abbiamo già utilizzato senza saperne nulla, quando nei capitoli precedenti abbiamo inserito una Pagina e un Articolo.

Diamo quindi solo un paio di indicazioni di base. L’editor si presenta con questa scritta:

Premedo il bottone + a destra si apre un menu dal qualche è possibile selezionare l’elemento da inserire in pagina:

Proviamo a cliccare Titolo e potremo inserire un testo che apparirà più grande.

Se nella riga successiva ripetiamo la stessa operazione selezionando Paragrafo, potremo inserire il testo di un articolo. Per impostare un elenco basterà ripetere ancora l’operazione usando il tasto Elenco.

Cliccando il bottone nero Sfoglia tutto in fondo, appariranno le altre funzioni:

Provate questa parte per scoprire gli elementi disponibili, sono moltissimi.

Ritocchi finali

Più o meno siamo arrivati al risultato che cercavamo all’inizio, ma vogliamo accennare qualcosa su un altro elemento che spesso viene richiamato quando si parla di creazione di siti web: i CSS.

I CSS servono a modificare lo stile di alcuni elementi presenti in pagina. Ad esempio il colore di un testo o dello sfondo di una pagina. I CSS sono quindi delle direttive che si applicano agli elementi della pagina: ma come facciamo ad agganciarli all’elemento che vogliamo modificare? Principalmente attraverso due ancore (in inglese vengono chiamati “anchor”):

l’id un codice che identifica un solo elemento in pagina;
la classe, che può essere associata, e quindi identificare, uno o più elementi in pagina.

Per questo tutorial base ci basta sapere questo, ma nel tutorial avanzato vedremo come utilizzare Inspect element, uno strumento molto utile presente in tutti i browser Chrome per capire cosa sono le classi e come utilizzarle.

Conclusione (per il momento)

Si può andare ancora più in profondità. Sia utilizzando gli strumenti che abbiamo brevemente praticato, sia modificando i file del tema; il tema infatti è costituito da una cartella contenente i file che a loro volta contengono codici in linguaggio HTML, PHP e a volte Javascript. In questo tutorial non dobbiamo capire questi aspetti che approfondiremo in un altro tutorial.

Elementor

Elementor è un plugin molto completo che estende le funzioni dell’editor di WordPress. Consigliamo di provare ad installarlo seguendo la normale procedura di installazione di un plugin (mostrata nel capitolo “Installiamo plugin utili”).

Esistono temi gratuiti e a pagamento su siti come themeforest.com, ma sarebbe inutile vederli in questo tutorial perchè ognuno ha il suo pannello di configurazione e le sue specifiche funzionalità.

Attenzione ai temi venduti di themeforest.com, dopo averli acquistati e installati sono più complessi da utilizzare rispetto a quanto sembra prima di installarli. Molto spesso il tuo sito web non sarà uguale al tema che hai acquistato, perchè mancheranno tutti i testi e le immagini di test che hai visto nel tema.

Se desideri realizzare un sito più complesso di quello proposto da questo tutorial, con una grafica più bella e personalizzata, consiglio di rivolgersi a qualcuno in grado di realizzare l’idea che hai in mente, come un’agenzia web. Per ogni cosa esiste un professionista o un’azienda in grado di realizzarla e il web non fa differenza.

Link che piacciono a Google

Accedi al /wp-admin e clicca su Impostazioni->Permalink si aprirà una pagina con alcune opzioni. Sotto la voce Struttura dei permalink clicca Nome articolo e le URL del nostro sito saranno nel formato giusto per essere indicizzate. Vuoi saperne di più su come scrivere articoli? Clicca qui.