Cos'è il codice?
Il codice è essenzialmente un linguaggio che i computer possono
comprendere ed eseguire. Ogni sito web, compreso il tuo sito
WordPress, è costruito utilizzando diverse tipologie di codice.
Pensa al codice come alle istruzioni che dici al computer per
realizzare ciò che desideri: mostrare un'immagine, cambiare un
colore, inviare un'email quando qualcuno compila un modulo.
Proprio come noi umani parliamo lingue diverse, anche i computer
"parlano" linguaggi diversi, ognuno con uno scopo specifico.
I linguaggi che compongono un sito WordPress
HTML CSS
È la struttura del sito: definisce titoli, paragrafi, immagini, link e Gestisce lo stile: colori, font, margini, sfondi e tutto ciò che
tutti gli elementi visibili. riguarda l'aspetto visivo.
PHP JavaScript
Controlla la logica: cosa deve succedere quando un utente Si occupa dell'interattività: animazioni, effetti di click, moduli
interagisce con il sito. WordPress è scritto principalmente in dinamici e funzionalità reattive.
PHP.
Come interagiscono i linguaggi
Pensa a un sito web come a una casa:
HTML è la struttura portante PHP è l'impianto elettrico e
(muri, tetto, porte) idraulico (funzionalità)
CSS è la parte decorativa (colori, JavaScript è l'automazione della
mobili, tessuti) casa (comfort)
HTML: La struttura di una pagina
HTML (HyperText Markup Language) è il linguaggio fondamentale
che definisce la struttura di una pagina web.
Si basa su tag: parole speciali racchiuse tra parentesi angolari che
indicano al browser come visualizzare il contenuto.
Un elemento HTML tipicamente ha un tag di apertura, del
contenuto e un tag di chiusura:
<tag>Il contenuto va qui</tag>
I tag HTML più comuni
Tag Cosa fa Esempio
<h1> - <h6> Titoli (dal più importante al meno <h1>Titolo principale</h1>
importante)
<p> Paragrafo di testo <p>Questo è un paragrafo.</p>
<a> Link (con attributo href) <a
href="[Link]
<img> Immagine (con attributo src) <img src="[Link]" alt="Descrizione">
<ul> e <li> Lista non ordinata con elementi <ul><li>Elemento</li></ul>
<div> Contenitore generico <div>Contenuto vario</div>
Esempio di codice HTML
<h1>Benvenuto nel mio sito!</h1>
<p>Questo è un paragrafo di testo.</p>
<a href="[Link] Google</a>
<img src="[Link]" alt="La mia foto">
<ul>
<li>Primo elemento</li>
<li>Secondo elemento</li>
</ul>
Gli attributi HTML
Gli attributi forniscono informazioni aggiuntive ai tag HTML e sono sempre specificati nel tag di apertura.
href src
Usato nei tag <a> per specificare l'URL di destinazione Usato nei tag <img> per indicare il percorso dell'immagine
<a href="[Link] <img src="[Link]" alt="Logo aziendale">
class id
Assegna una o più classi CSS per lo styling Assegna un identificatore unico all'elemento
<div class="contenitore principale">...</div> <div id="header">...</div>
HTML in WordPress
Dove trovi l'HTML in WordPress?
Nelle pagine create con editor visivi (Gutenberg, Elementor)
Nei file dei temi ([Link], [Link], [Link])
Nei blocchi "HTML personalizzato"
Nei widget personalizzati
Nei modelli email
L'editor di WordPress ti permette di passare dalla visualizzazione
visuale alla visualizzazione HTML per vedere e modificare il codice
sottostante.
CSS: Lo stile della pagina
CSS (Cascading Style Sheets) è il linguaggio che controlla
l'aspetto visivo degli elementi HTML.
Mentre l'HTML definisce cosa mostrare, il CSS definisce come
mostrarlo: colori, dimensioni, posizionamento, animazioni e molto
altro.
La sintassi del CSS è composta da:
Selettore: indica a quale elemento HTML applicare lo stile
Proprietà: cosa vuoi modificare (es. colore, dimensione)
Valore: come vuoi modificarlo (es. rosso, 16px)
Sintassi di base del CSS
selettore {
proprietà: valore;
proprietà: valore;
}
Ad esempio:
h1 {
color: red;
font-size: 32px;
}
p{
color: grey;
margin-top: 10px;
font-family: Arial, sans-serif;
}
In questo esempio, tutti i titoli h1 saranno rossi con dimensione 32px, mentre tutti i paragrafi saranno grigi, con un margine superiore di 10px e
carattere Arial.
Tipi di selettori CSS
1 2
Selettore di tag Selettore di classe
h1 { color: blue; } .importante { font-weight: bold; }
Seleziona tutti gli elementi con il tag specificato Seleziona tutti gli elementi con class="importante"
3 4
Selettore di ID Selettore combinato
#header { background: black; } [Link] { font-style: italic; }
Seleziona l'elemento con id="header" Seleziona i paragrafi con class="nota"
Proprietà CSS comuni
Proprietà Cosa fa Esempio
color Colore del testo color: #333333;
background-color Colore di sfondo background-color: #f5f5f5;
font-size Dimensione del carattere font-size: 16px;
font-family Tipo di carattere font-family: Arial, sans-serif;
margin Margine esterno margin: 10px 5px 15px 20px;
padding Spaziatura interna padding: 10px;
border Bordo dell'elemento border: 1px solid #000000;
CSS in WordPress
Dove aggiungere CSS in WordPress:
Personalizzatore: Aspetto > Personalizza > CSS aggiuntivo
File del tema: [Link] principale o file CSS secondari
Plugin: Simple Custom CSS, CSS Hero, ecc.
Editor a blocchi: CSS nei blocchi avanzati
Child theme: metodo consigliato per personalizzazioni
permanenti
L'editor CSS integrato in WordPress ti permette di aggiungere stili
personalizzati senza modificare i file del tema.
Esempio pratico di personalizzazione CSS
Problema:
Il titolo principale del sito è troppo piccolo e vuoi renderlo più
grande e colorato.
Soluzione CSS:
.site-title {
font-size: 48px;
color: #007bff;
font-weight: bold;
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
Questo codice seleziona l'elemento con classe "site-title" (comune
nei temi WordPress) e ne modifica dimensione, colore e aggiunge
un'ombra sottile.
PHP: Il motore di WordPress
PHP (Hypertext Preprocessor) è un linguaggio di programmazione
lato server che gestisce la logica del tuo sito WordPress.
Mentre HTML e CSS si occupano dell'aspetto visivo, PHP:
Interagisce con il database
Gestisce le richieste degli utenti
Elabora i dati dei moduli
Genera dinamicamente le pagine
Gestisce le sessioni utente
WordPress è costruito quasi interamente in PHP!
Sintassi di base del PHP
Il codice PHP inizia sempre con <?php e termina con ?>. Tra questi tag si possono inserire istruzioni PHP.
<?php
// Questo è un commento
echo "Ciao, mondo!";
$nome = "Mario";
echo "Benvenuto, " . $nome . "!";
if ($nome == "Mario") {
echo "Ciao Mario!";
} else {
echo "Tu non sei Mario!";
}
?>
Il PHP può essere mescolato con l'HTML, rendendo le pagine dinamiche:
<h1><?php echo "Benvenuto sul sito!"; ?></h1>
Concetti base di PHP
Variabili Echo
Contenitori per dati, iniziano sempre con $ Stampa testo o variabili sullo schermo
$nome = "Mario"; echo "Ciao!";
$età = 30; echo $nome;
$isAdmin = true;
Condizioni Cicli
Eseguono codice in base a condizioni Ripetono codice più volte
if ($età > 18) { for ($i = 1; $i <= 5; $i++) {
echo "Sei maggiorenne"; echo $i;
} }
PHP in WordPress
WordPress utilizza PHP per generare dinamicamente le pagine.
Ecco un esempio tipico trovato nei file dei temi:
<?php get_header(); ?>
<h1><?php the_title(); ?></h1>
<div class="content">
<?php the_content(); ?>
</div>
<?php get_footer(); ?>
Questo codice chiama funzioni WordPress che inseriscono
dinamicamente il titolo e il contenuto dell'articolo o della pagina
corrente.
Funzioni PHP comuni in WordPress
Funzione Cosa fa
get_header() Carica l'intestazione del tema ([Link])
get_footer() Carica il piè di pagina del tema ([Link])
the_title() Mostra il titolo dell'articolo o pagina corrente
the_content() Mostra il contenuto dell'articolo o pagina
the_excerpt() Mostra un estratto del contenuto
have_posts() Verifica se ci sono articoli da mostrare
the_post() Prepara l'articolo corrente per il loop
Il Loop di WordPress
Il "Loop" è uno dei concetti fondamentali di WordPress: è un ciclo
PHP che mostra gli articoli.
<?php
if (have_posts()) :
while (have_posts()) :
the_post();
?>
<h2><?php the_title(); ?></h2>
<div class="excerpt">
<?php the_excerpt(); ?>
</div>
<?php
endwhile;
else :
echo '<p>Nessun articolo trovato</p>';
endif;
?>
Il Loop controlla quali articoli mostrare, in quale ordine, e come
formattarli. È ciò che rende WordPress un vero sistema di gestione
dei contenuti.
Dove trovare il PHP in WordPress
File dei temi [Link]
I file principali come [Link], [Link], [Link], Il file più importante per personalizzazioni, contiene funzioni
[Link] e template-parts contengono il codice PHP che che estendono WordPress. Spesso è qui che si aggiungono
struttura le diverse pagine del sito. snippet personalizzati.
Plugin Snippet
I plugin WordPress sono composti principalmente da file Piccoli pezzi di codice PHP che puoi aggiungere tramite
PHP che aggiungono funzionalità specifiche al tuo sito. plugin come "Code Snippets" per funzionalità
personalizzate.
Modificare il PHP in WordPress
Precauzioni importanti:
Fai sempre un backup completo prima di modificare file PHP
Usa un tema child per le modifiche ai temi
Testa le modifiche in un ambiente di sviluppo, mai
direttamente sul sito live
Un errore di sintassi può rendere il sito inaccessibile
Documenta le modifiche apportate con commenti nel codice
Ricorda: è facile "rompere" un sito con modifiche PHP errate.
Procedi con cautela e impara gradualmente.
Esercizio 1: Analisi HTML
Esamina questo codice HTML:
<h2>Chi siamo</h2>
<p>La nostra azienda esiste dal 1995.</p>
Domande:
Qual è il titolo? Di che livello è?
Qual è il contenuto del paragrafo?
Cosa succederebbe se cambiassi <h2> in <h1>?
Risposte:
Il titolo è "Chi siamo" ed è un titolo di secondo livello (h2)
Il contenuto del paragrafo è "La nostra azienda esiste dal
1995."
Cambiando in h1, il titolo diventerebbe più grande e importante
nella gerarchia della pagina
Esercizio 2: Analisi CSS
Esamina questo codice CSS:
p{
color: blue;
font-size: 18px;
}
Domande:
A quali elementi si applica questo stile?
Quali proprietà vengono modificate?
Cosa succederebbe cambiando "blue" in "green"?
Risposte:
Lo stile si applica a tutti i paragrafi della pagina (<p>)
Vengono modificati il colore del testo e la dimensione del font
Tutti i paragrafi avrebbero testo verde invece di blu
Esercizio 3: Analisi PHP
Esamina questo codice PHP di WordPress:
<h1><?php the_title(); ?></h1>
Domande:
Che cosa mostrerà questo codice sulla pagina?
Da dove proviene il contenuto?
Cosa succederebbe se lo rimuovessi?
Risposte:
Mostrerà il titolo dell'articolo o pagina corrente come titolo h1
Il contenuto proviene dal database di WordPress
La pagina non avrebbe un titolo principale visibile
Applicazioni pratiche:
Personalizzare un tema
1 Creare un tema child
Prima di qualsiasi modifica, crea un tema child per mantenere le tue
personalizzazioni al sicuro dagli aggiornamenti.
2 Modificare lo stile CSS
Aggiungi regole CSS personalizzate nel file [Link] del tema child
per modificare colori, font e layout.
3 Modificare la struttura HTML
Copia i file modello dal tema genitore al tema child e modifica la
struttura HTML secondo le tue esigenze.
4 Aggiungere funzionalità PHP
Utilizza il file [Link] del tema child per aggiungere hook,
shortcode o altre funzionalità personalizzate.
Glossario dei termini essenziali
Termine Significato
Tag HTML Elemento che costruisce la struttura di una pagina web (es. <p>,
<h1>)
CSS Linguaggio che definisce lo stile e l'aspetto degli elementi HTML
PHP Linguaggio di programmazione che controlla la logica e il
funzionamento del sito
Echo Funzione PHP che stampa testo o variabili sullo schermo
get_header() Funzione WordPress che richiama l'intestazione del tema
[Link] File del tema dove si possono aggiungere funzioni
personalizzate
Tema child Tema derivato che permette personalizzazioni senza modificare
il tema principale
Risorse per continuare a
imparare
Documentazione ufficiale Corsi online
WordPress Developer [Link] (video tutorial
Resources gratuiti)
WordPress Codex Udemy, Coursera, LinkedIn
(disponibile anche in italiano) Learning
MDN Web Docs per HTML e FreeCodeCamp per le basi di
CSS HTML e CSS
Comunità
Forum ufficiale [Link]
Gruppi WordPress Italia su Facebook
Meetup locali di WordPress
WordCamp (conferenze WordPress)
Collegamenti futuri a WordPress
Con le basi che hai appreso oggi, sarai in grado di:
Personalizzare temi Usare HTML personalizzato
Modificare il file [Link] per adattare l'aspetto del tuo sito alle Inserire blocchi HTML nei tuoi contenuti per ottenere layout o
tue esigenze specifiche funzionalità non disponibili nell'editor
Modificare file PHP Personalizzare plugin
Apportare piccole modifiche ai file del tema come [Link] o Comprendere e modificare il comportamento dei plugin per
[Link] per personalizzare il layout adattarli alle tue necessità specifiche
Grazie per l'attenzione!
Prossimi passi:
Metti in pratica gli esercizi visti oggi
Esplora il codice del tuo tema attuale
Prova a fare piccole modifiche in un ambiente di test
Unisciti alla comunità WordPress Italia
Continua ad imparare con le risorse consigliate
Ricorda: ogni esperto è stato un principiante. La chiave è la pratica
costante e la curiosità!