Skip to content

Tutto per WordPress, lo sviluppo web — e non solo

🛠️ Creare un tema WordPress da HTML: guida passo passo (parte 1)
Temi WordPressSviluppo web
9 min1,722 parole

🛠️ Creare un tema WordPress da HTML: guida passo passo (parte 1)

Un sito HTML finito non deve essere buttato via quando passi a WordPress. Puoi prendere il tuo markup, index.html e style.css, e trasformarlo in un tema perfettamente funzionante in circa un'ora. Non è magia: WordPress è costruito su template PHP, che a loro volta sono assemblati a partire da HTML ordinario suddiviso in parti logiche.

Il problema è che la maggior parte dei tutorial o ti sommerge di terminologia fin dai primi paragrafi o dà tacitamente per scontato che tu conosca già PHP. Noi seguiremo un approccio diverso: partiremo da un mockup HTML concreto (header, contenuto, sidebar, footer) e, metodicamente, file dopo file, costruiremo un tema funzionante. Niente magia, solo codice e logica.

Alla fine di questa guida avrai un tema già pronto da caricare nel pannello di amministrazione di WordPress, attivare e vedere il tuo HTML dentro una piattaforma dinamica. Questa è la prima parte, le fondamenta. Nella seconda parte tratteremo i template di pagina singoli, i campi personalizzati e il customizer.

💡 Panoramica rapida:

  • Assegna al tema un nome univoco e compila l'intestazione del file style.css: WordPress riconosce i temi da questi metadati.
  • Taglia l'index.html originale in quattro file PHP: header.php, index.php, sidebar.php e footer.php.
  • Implementa gli hook standard di WordPress (get_header, get_sidebar, get_footer, wp_head e wp_footer) in modo che la piattaforma «veda» e interpreti il tuo markup.
  • Aggiungi il Loop di WordPress a index.php, lo snippet di codice che restituisce gli articoli del blog all'interno della tua struttura HTML.
  • Crea un archivio ZIP, carica il tema nel pannello di amministrazione e attivalo: il tuo sito prende vita su WordPress.

1. Dare un nome al tema e al file style.css

La prima cosa da fare è assegnare al tema un nome univoco. Anche se realizzi il tema esclusivamente per il tuo sito, WordPress deve poterlo identificare in qualche modo nel pannello «Aspetto → Temi».

Condizioni di partenza:

  • Hai un index.html e un foglio di stile style.css (o un qualsiasi altro file CSS).
  • Hai un'installazione WordPress funzionante con almeno un tema standard, per esempio Twenty Twenty-Five.
  • Hai già creato una cartella per il tuo futuro tema dentro /wp-content/themes/.

Apri il tuo editor di codice (consigliamo Sublime Text o VS Code), copia il contenuto del tuo foglio di stile in un nuovo file e salvalo come style.css nella cartella del tema. In cima al file, prima di tutto il codice CSS, aggiungi il blocco dei metadati:

1/*
2Theme Name: My HTML-to-WordPress Theme
3Theme URI: https://example.com
4Description: Theme assembled from a static HTML layout.
5Version: 1.0
6Author: Your Name
7Author URI: https://example.com
8Tags: custom-theme, html-to-wordpress, beginner
9*/

Non rimuovere i simboli di commento /* e */: WordPress legge esattamente questi. Il campo Theme Name è quello chiave: è il nome con cui il tema apparirà nel pannello di amministrazione. Gli altri campi sono facoltativi, ma consigliamo di compilarli tutti, è una buona prassi.

Salva il file. A questo punto WordPress è già in grado di riconoscere il tuo tema, anche se è ancora vuoto e non fa nulla di utile.

2. Suddividere l'HTML in template PHP

Un tema WordPress classico è assemblato a partire da diversi file PHP, ciascuno responsabile di una propria sezione della pagina. La struttura più comune è header, contenuto, sidebar, footer. Se il tuo HTML è strutturato diversamente (per esempio sidebar a sinistra o due sidebar), il principio resta lo stesso: adatta la suddivisione alla tua struttura.

Crea quattro file vuoti nella cartella del tema:

  • header.php, intestazione del sito
  • index.php, template principale, punto di assemblaggio
  • sidebar.php, pannello laterale
  • footer.php, piè di pagina

Per ora sono vuoti, non aspettarti miracoli. Procediamo con ordine.

2.1 Header.php, intestazione del sito

Vai al pannello di amministrazione di WordPress, apri «Aspetto → Editor dei temi» e seleziona il tema standard (per esempio Twenty Twenty-Five). Trova il suo header.php e copia l'intero blocco <head>: è il set minimo di meta tag e hook senza il quale WordPress non funziona correttamente. Ecco cosa devi trasferire nel tuo header.php:

1<head>
2    <meta charset="<?php bloginfo( 'charset' ); ?>">
3    <meta name="viewport" content="width=device-width">
4    <title>&lt;?php wp_title( '|', true, 'right' ); ?&gt;</title>
5    <link rel="profile" href="https://gmpg.org/xfn/11">
6    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
7    <?php wp_head(); ?>
8</head>

La funzione bloginfo() sostituisce dinamicamente le impostazioni del sito (codifica, URL del pingback). L'hook wp_head() è critico: plugin e core di WordPress inseriscono attraverso di esso i propri script, stili e meta tag. Senza, il tema sarà mezzo morto.

Ora apri il tuo index.html originale e copia il codice dell'header, tutto ciò che è dentro <header> o un blocco simile, e incollalo in header.php **subito dopo il tag di chiusura </head> e il tag di apertura **<body>. Nel nostro markup dimostrativo si presenta così:

1<body>
2    <header class="header">
3        <p>This is header section. Put your logo and other details here.</p>
4    </header>
5

Aggiungi il collegamento al tuo foglio di stile tra i tag <head>:

1<link rel="stylesheet" type="text/css" media="all" href="<?php echo get_template_directory_uri(); ?>/style.css" />

La funzione get_template_directory_uri() restituisce l'URL della cartella del tuo tema: il percorso al CSS funzionerà su qualsiasi server senza bisogno di hardcoding. Salva header.php.

2.2 Index.php, punto di assemblaggio

index.php in WordPress è un file obbligatorio. Non contiene markup in quanto tale, ma assembla la pagina a partire da più parti. Apri il tuo index.php vuoto e aggiungi tre righe:

1<?php get_header(); ?>
2 
3<?php get_sidebar(); ?>
4<?php get_footer(); ?>

La prima riga include header.php. Le ultime due, sidebar.php e footer.php, vanno in fondo. Il contenuto principale (area contenuti e Loop, ne parleremo nella prossima sezione) sarà inserito tra di esse.

Copia il blocco con la classe .content (area del contenuto principale) dal tuo index.html originale e incollalo tra get_header() e get_sidebar():

1<?php get_header(); ?>
2 
3    <div class="content">
4        <p>This is the main content area.</p>
5    </div><!-- .content -->
6 
7<?php get_sidebar(); ?>
8<?php get_footer(); ?>
9

Lo schema è semplice: WordPress assembla la pagina in sequenza dall'alto verso il basso, header, contenuto, sidebar, footer. Ogni get_*() richiama il file PHP corrispondente.

2.3 Sidebar.php e footer.php

La sidebar e il footer sono molto semplici. Copia il contenuto dei blocchi .sidebar e .footer dal tuo index.html nei rispettivi file PHP.

sidebar.php:

1<aside class="sidebar">
2    <p>This is the side bar</p>
3</aside>
4 
5<?php dynamic_sidebar( 'sidebar' ); ?>
6

La funzione dynamic_sidebar() restituisce i widget assegnati nel pannello di amministrazione («Aspetto → Widget»). Se la sidebar non serve, cancella questa riga.

footer.php:

1<footer class="footer">
2    <p>And this is the footer.</p>
3</footer>
4 
5<?php wp_footer(); ?>
6</body>
7</html>
8

Nota: </body> e </html> sono spostati in footer.php. Nel tuo HTML originale probabilmente sono anche loro in fondo, ed è giusto così. L'hook wp_footer() è obbligatorio tanto quanto wp_head(): senza, molti plugin e WordPress stesso non funzionano (per esempio la barra di amministrazione non compare).

3. Il Loop di WordPress: visualizzare gli articoli

Il tema è assemblato, la struttura funziona. Ma l'area del contenuto è ancora statica, con testo hardcoded dall'HTML originale. Perché WordPress inizi a visualizzare veri articoli del blog, ti serve Il Loop, un costrutto PHP speciale che itera tra gli articoli pubblicati e li mostra uno per uno dentro il tuo markup.

Questo è il pezzo di codice più importante del tema. Va in index.php, dentro il blocco <div class="content">, in sostituzione del testo segnaposto statico:

1<?php if ( have_posts() ) : ?>
2    <?php while ( have_posts() ) : the_post(); ?>
3        <article <?php post_class(); ?>>
4            <header class="post-header">
5                <time datetime="<?php echo get_the_date( 'c' ); ?>">
6                    <?php echo get_the_date(); ?>
7                </time>
8                <h2>
9                    <a href="<?php the_permalink(); ?>" rel="bookmark">
10                        <?php the_title(); ?>
11                    </a>
12                </h2>
13                <span class="post-author"><?php the_author(); ?></span>
14            </header>
15 
16            <div class="entry">
17                <?php if ( has_post_thumbnail() ) : ?>
18                    <?php the_post_thumbnail( 'medium' ); ?>
19                <?php endif; ?>
20                <?php the_content(); ?>
21                <?php edit_post_link( 'Edit', '<span class="edit-link">', '</span>' ); ?>
22                <?php wp_link_pages(); ?>
23            </div>
24 
25            <footer class="post-footer">
26                <?php comments_popup_link(
27                    'Leave a comment',
28                    '1 comment',
29                    '% comments'
30                ); ?>
31            </footer>
32        </article>
33    <?php endwhile; ?>
34 
35    <nav class="navigation">
36        <div class="prev-posts"><?php next_posts_link( '← Previous posts' ); ?></div>
37        <div class="next-posts"><?php previous_posts_link( 'Newer posts →' ); ?></div>
38    </nav>
39<?php else : ?>
40    <p>No posts found.</p>
41<?php endif; ?>
42

Come funziona:

  • have_posts() verifica se ci sono articoli da mostrare. Se ce ne sono, entra nel Loop.
  • the_post() prepara i dati per l'articolo successivo.
  • post_class() aggiunge classi CSS standard a <article>, utili per stilizzare tipi di post diversi.
  • the_permalink() e the_title() restituiscono l'URL e il titolo dell'articolo.
  • the_content() è il corpo vero e proprio dell'articolo.
  • the_post_thumbnail() è la miniatura dell'articolo, se impostata.
  • comments_popup_link() è il link ai commenti.
  • next_posts_link() e previous_posts_link() gestiscono l'impaginazione.

Il blocco else si attiva quando non ci sono affatto articoli, mostrando un messaggio segnaposto.

Dopo aver inserito il Loop, il tuo index.php completo si presenta così:

1<?php get_header(); ?>
2 
3    <div class="content">
4        <?php if ( have_posts() ) : ?>
5            <?php while ( have_posts() ) : the_post(); ?>
6                <article <?php post_class(); ?>>
7                    <header class="post-header">
8                        <time datetime="<?php echo get_the_date( 'c' ); ?>">
9                            <?php echo get_the_date(); ?>
10                        </time>
11                        <h2>
12                            <a href="<?php the_permalink(); ?>" rel="bookmark">
13                                <?php the_title(); ?>
14                            </a>
15                        </h2>
16                        <span class="post-author"><?php the_author(); ?></span>
17                    </header>
18                    <div class="entry">
19                        <?php if ( has_post_thumbnail() ) : ?>
20                            <?php the_post_thumbnail( 'medium' ); ?>
21                        <?php endif; ?>
22                        <?php the_content(); ?>
23                        <?php edit_post_link( 'Edit', '<span class="edit-link">', '</span>' ); ?>
24                        <?php wp_link_pages(); ?>
25                    </div>
26                    <footer class="post-footer">
27                        <?php comments_popup_link(
28                            'Leave a comment',
29                            '1 comment',
30                            '% comments'
31                        ); ?>
32                    </footer>
33                </article>
34            <?php endwhile; ?>
35            <nav class="navigation">
36                <div class="prev-posts"><?php next_posts_link( '← Previous posts' ); ?></div>
37                <div class="next-posts"><?php previous_posts_link( 'Newer posts →' ); ?></div>
38            </nav>
39        <?php else : ?>
40            <p>No posts found.</p>
41        <?php endif; ?>
42    </div><!-- .content -->
43 
44<?php get_sidebar(); ?>
45<?php get_footer(); ?>
46

4. Compilare e installare il tema

Tutti e cinque i file (style.css, header.php, index.php, sidebar.php e footer.php) devono trovarsi nella cartella del tuo tema (chiamala, per esempio, my-html-theme). Comprimi la cartella in un archivio ZIP.

Poi, lo scenario standard: amministrazione WordPress → «Aspetto» → «Temi» → «Aggiungi tema» → «Carica tema». Seleziona il file ZIP, clicca «Installa», poi «Attiva». Visita il sito: il tuo mockup HTML ha preso vita dentro WordPress e gli articoli del blog vengono visualizzati nell'area del contenuto.

Qui si conclude la prima parte. Ora hai una struttura di tema funzionante: WordPress la riconosce, aggancia gli hook e restituisce contenuto dinamico attraverso il Loop. Nella prossima parte tratteremo i template di pagina singoli (single.php, page.php), la gerarchia dei template e l'inclusione degli script tramite functions.php.

⁉️🤔 Domande frequenti

Devo conoscere PHP per costruire un tema a partire da HTML?

No. Il minimo che scriverai sono poche chiamate a funzione come get_header() e un Loop di 15 righe. Tutto il resto è copiare codice HTML che già possiedi. Qui PHP fa da «collante», non da linguaggio principale. Se capisci dove <?php ?> si apre e si chiude, è sufficiente per iniziare.

E se il mio mockup HTML non ha l'aspetto «header-contenuto-sidebar-footer»?

Il principio non cambia. WordPress assembla la pagina richiamando in sequenza i file PHP: il loro ordine in index.php determina il layout. Se la tua sidebar è a sinistra, ti basta chiamare get_sidebar() prima del blocco del contenuto. Due sidebar? Crea sidebar-left.php e sidebar-right.php con chiamate separate. Lo schema è flessibile.

Posso creare un tema senza sidebar?

Sì, e il compito diventa ancora più semplice. Basta rimuovere la chiamata <?php get_sidebar(); ?> da index.php e non creare il file sidebar.php. Molti temi moderni, inclusi i temi a blocchi di WordPress, funzionano del tutto senza sidebar.

È obbligatorio usare esattamente header.php, index.php, sidebar.php e footer.php?

index.php e style.css sono obbligatori: senza, WordPress non vede il tema. Gli altri file sono facoltativi. Ma header.php, sidebar.php e footer.php sono lo standard de facto per i temi classici: tutti gli sviluppatori li conoscono e le funzioni get_header(), get_sidebar() e get_footer() sono pensate per loro. Per il tuo primo tema, attieniti a questo set di quattro.

Questo approccio funziona con i temi a blocchi (FSE)?

No, questa guida è per i temi PHP classici, che sono ancora vivi e supportati (WordPress non li ha abbandonati e non ha in programma di farlo). I temi a blocchi (Full Site Editing) usano template HTML e un file theme.json. Se il tuo obiettivo è trasformare rapidamente HTML esistente in un tema funzionante, l'approccio classico è sensibilmente più semplice: meno astrazioni, modello familiare «header-contenuto-sidebar-footer».

Qual è il prossimo passo: il tuo primo passo nello sviluppo di temi

Hai assemblato una struttura di tema di base a partire da markup HTML, con un Loop funzionante, hook inclusi e contenuto dinamico. Il tema si installa già nel pannello di amministrazione e restituisce gli articoli. Ora ci sono due direzioni di crescita:

  • Se visualizzare gli articoli nel tuo markup ti basta, popola il sito di contenuti e rifinisci il CSS per adattarlo al tuo brand.

Inizia in piccolo: costruisci il tema seguendo questa guida, attivalo e aggiungi un paio di articoli di prova. Quando vedrai il tuo HTML con articoli veri al suo interno, tutto il resto verrà più facile.

Redazione
RedazioneTeam editoriale→ All publications

Un team professionale di scrittori e redattori specializzati nella creazione di contenuti di qualità.