Guida introduttiva allo sviluppo di temi per WordPress: crea il tuo primo tema per il sito web partendo da zero.

Fundamenti dello sviluppo di temi per WordPress e configurazione dell’ambiente di sviluppo

Prima di iniziare a scrivere il codice, è necessario comprendere la struttura di base di un tema per WordPress. Un tema è essenzialmente una cartella che contiene una serie di file scritti in PHP, CSS, JavaScript e immagini, i quali insieme definiscono l’aspetto e alcune funzionalità del sito web. Questa cartella deve trovarsi all’interno della directory di installazione di WordPress.wp-content/themesÈ presente nel catalogo. Ogni argomento richiede un file di stile principale.style.cssE un file di template di base.index.phpQuesti sono i requisiti minimi per avviare qualsiasi progetto di sviluppo di un tema.

Per sviluppare in modo efficiente, si consiglia caldamente di creare un ambiente di sviluppo locale. Questo ti permetterà di testare i tuoi progetti in totale libertà, senza influenzare il funzionamento del sito web online. Puoi utilizzare pacchetti integrati come XAMPP, MAMP, Local by Flywheel o DevKinsta, che installano in un solo clic Apache/Nginx, PHP e MySQL. Nell’ambiente locale, avrai anche bisogno di un editor di codice, come VS Code,PhpStorm o Sublime Text; le funzionalità di evidenziazione del codice e di suggerimenti relative a PHP, HTML e CSS renderanno il tuo lavoro molto più veloce e semplice.

Dopo aver completato i preparativi, è necessario che tu…wp-content/themesCrea una nuova cartella all’interno del directory, ad esempio…my-first-themeSuccessivamente, creeremo il primo file necessario.

Si consiglia di leggere Imparare a sviluppare temi per WordPress da zero: le migliori pratiche e guide per creare siti web personalizzati。

Creare un file di stili principali

All’interno della cartella tematica, crea una nuova cartella chiamata…style.cssQuesto file non è solo responsabile dello stile del sito web, ma anche l’intestazione commentata (Header) presente all’inizio rappresenta l’unico modo per cui WordPress riconosce il tema utilizzato. L’intestazione commentata contiene informazioni metadati sul tema, come il nome, l’autore e la descrizione.

UltaHost – Hosting per siti WordPress

Garanzia di rimborso entro 30 giorni, larghezza di banda illimitata e accesso ai database, protezione gratuita contro gli attacchi DDoS; sconto del 50% per l’acquisto di un piano valido per 3 anni (da 3 a 4 TB di spazio di archiviazione).

pagina di accesso

Di seguito…style.cssEsempio standard del contenuto della parte iniziale di un file:

/*
Theme Name: 我的第一个主题
Theme URI: http://example.com/my-first-theme/
Author: 你的名字
Author URI: http://example.com/
Description: 一个用于学习WordPress主题开发的简洁入门主题。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: 博客, 简洁, 响应式
Text Domain: my-first-theme
*/

Dopo la parte del codice che si trova all’inizio del file, puoi iniziare ad aggiungere regole di stile ai elementi del tuo sito web, esattamente come faresti con il CSS tradizionale. Questo riguarda in particolare i campi di testo (Text Fields).my-first-themeQuesto è un identificatore riservato all’internazionalizzazione dei temi (temi in lingue diverse); deve essere mantenuto in linea con il nome della cartella contenente i temi stessi.

Creare il file del modello principale per il tema.

I file di template rappresentano lo “scheletro” di un tema WordPress e determinano come vengono organizzati e visualizzati i diversi tipi di contenuti. Questi file sono composti principalmente da codice PHP, con l’aggiunta di tag HTML. Il file di template più basilare è…index.phpÈ il modello alternativo per tutte le pagine; viene utilizzato quando non esiste un modello più specifico (ad esempio…).single.php或page.phpQuando viene utilizzato, WordPress lo impiega automaticamente.

Creare un file di indice di base

Crea una cartella nella cartella dei temi.index.phpUn esempio molto semplice, ma completo nelle funzionalità…index.phpÈ possibile includere il “WordPress Loop”, che rappresenta il meccanismo fondamentale per ottenere e visualizzare i contenuti degli articoli dal database.

Si consiglia di leggere Sviluppo di temi per WordPress: dall’approccio base alla perfezione: impara passo dopo passo a creare siti web personalizzati。

Un minimizzato…index.phpEcco un esempio:

<!DOCTYPE html>
<html no numeric noise key 1017>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <p><strong>Questo è un testo di prova</strong></p>
</head>
<body no numeric noise key 1014>
    <header>
        <h1><a href="/it/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
        <p><?php bloginfo( 'description' ); ?></p>
    </header>

<main>
        
                <article>
                    <h2><a href="/it/</?php the_permalink(); ?>"><p><strong>Questo testo verrà sostituito dal titolo dell'articolo corrente.</strong></p></a></h2>
                    <div><p><strong>Questo testo è stato tradotto automaticamente. Se desideri una traduzione corretta, contattaci.</strong></p></div>
                </article>
            
            <p>Non sono disponibili articoli.</p>
        <?php endif; ?>
    </main>

<footer>
        <p>©</p>
    </footer>
    <p><strong>Questo è un testo di esempio.</strong></p>
</body>
</html>

Questo file contiene diversi parti chiave:wp_head()和wp_footer()Gli “hook” (ganci) consentono al core di WordPress, ai plugin e ad altri script di inserire il codice necessario prima dell’inizio e alla fine della pagina (ad esempio, CSS e JS).the_post()La funzione viene utilizzata all’interno di un ciclo per impostare i dati dell’articolo corrente; successivamente…the_title()和the_content()Basta utilizzare le tag dei template per ottenere il contenuto corrispondente.

Introduzione di stili e script

Solo…style.cssI file non sono ancora sufficienti; è necessario indicare a WordPress quando caricarli tramite una funzione. Per farlo, è necessario creare un altro file estremamente importante nella cartella del tema:functions.phpQuesto non è un file di template, bensì una “libreria di funzionalità” per il tema, utilizzata per potenziare le funzionalità del tema stesso, gestire i menu di registrazione, le barre laterali, nonché per introdurre in modo sicuro i file di stile (CSS) e i script.

hosting.com Hosting condiviso

Prestazioni elevate con CPU AMD EPYC, storage SSD NVMe e LiteSpeed, supporto interno di esperti 24 ore su 24, 7 giorni su 7, misure di sicurezza avanzate, tra cui SSL, brute force, malware e protezione DDoS, risparmi fino a 73%

pagina di accesso

Estensione delle funzionalità relative ai temi e del caricamento dei stili

functions.phpI file rappresentano la “cabina di controllo” dei contenuti del sito; tutto il codice PHP che non è direttamente correlato all’output delle pagine deve essere inserito in questi file. In questo file, dovresti utilizzare…add_action()La funzione permette di collegare il proprio codice agli appuntamenti (action hooks) specifici di WordPress, garantendo che venga eseguito nel momento giusto.

Caricare i fogli di stile in modo sicuro

Il modo corretto non è quello di inserire direttamente i tag nel file del template.style.css…ma piuttosto attraverso…wp_enqueue_style()La funzione permette di caricare i componenti in ordine, seguendo il meccanismo di gestione delle dipendenze di WordPress e evitando così il caricamento ripetuto degli stessi elementi.

在functions.phpAggiungi il seguente codice:

Si consiglia di leggere Guida pratica per principianti del 2026: Come creare il vostro primo tema WordPress da zero。

<?php
function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
    // 可以在此加载其他样式或脚本，例如：
    // wp_enqueue_script( 'my-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Questo, qui,get_stylesheet_uri()La funzione acquisirà automaticamente il tema associato.style.cssPercorso del file.add_action( 'wp_enqueue_scripts', ... )Assicurarsi che la nostra funzione di caricamento venga eseguita quando WordPress prepara gli script e i stili front-end.

Attiva la funzionalità del tema di base.

在functions.phpInoltre, possiamo attivare alcune funzionalità essenziali per i siti web moderni. Ad esempio, è possibile abilitare il supporto per immagini di rilievo (miniature degli articoli) per gli articoli e le pagine, nonché aggiungere posizioni personalizzate per i menu del sito web.

Hosting condiviso InterServer

Hosting condiviso $2,50 USD al mese, primo mese $0,1 USD codice promozionale tryinterserver, 461 script di applicazioni cloud, installazione con un clic.

pagina di accesso

// 启用文章特色图像
add_theme_support( 'post-thumbnails' );

// 注册一个导航菜单位置
register_nav_menus( array(
    'primary' => __( '主导航菜单', 'my-first-theme' ),
) );

// 为WordPress生成的标签添加title属性支持
add_theme_support( 'title-tag' );

add_theme_support()Le funzioni servono a dichiarare le varie funzionalità supportate da un tema.register_nav_menus()Questo definisce quindi le posizioni in cui è possibile assegnare i menu all’interno della sezione “Aspetto” -> “Menu” presente nell’interfaccia di amministrazione di WordPress.

Creare modelli e temi dedicati per i test.

Con il perfezionamento delle funzionalità di base del tema, il singolo…index.phpIl file non è più in grado di soddisfare le esigenze di visualizzazione di tutti i tipi di pagine. La struttura gerarchica dei template di WordPress ti consente di creare file di template dedicati per la pagina principale, per singoli articoli, per le pagine di archivio, ecc., offrendoti un controllo più dettagliato sulle loro caratteristiche visuali.

Creare un modello per la pagina singola di un articolo

Quando un utente clicca per leggere l’intero testo di un articolo, viene visualizzata la pagina dedicata a quell’articolo. Creiamo una funzione o una sezione denominata “Visualizzazione dell’articolo completo”.single.phpIl file in questione viene utilizzato per controllare in modo specifico la visualizzazione dei contenuti. Solitamente contiene informazioni più complete sull’articolo, come la categoria, i tag, l’autore e i commenti.

<p><strong>Questo è un testo di esempio.</strong></p>

<main>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1013>
            <h1><p><strong>Questo testo verrà sostituito dal titolo dell'articolo corrente.</strong></p></h1>
            <div class="meta">
                发布于： | 作者：
            </div>
            <?php if ( has_post_thumbnail() ) : ?>
                <div class="featured-image">
                    <?php the_post_thumbnail(); ?>
                </div>
            <?php endif; ?>
            <div class="content">
                <p><strong>Questo testo è stato tradotto automaticamente. Se desideri una traduzione corretta, contattaci.</strong></p>
            </div>
            <div class="taxonomies">
                分类：
                <br>
                标签：
            </div>
        </article>
        
</main>

Questo template introduce nuove funzioni per la creazione di altri template:get_header(), get_sidebar()和get_footer()Verranno caricati separatamente file con i nomi…header.php、sidebar.php和footer.phpI file relativi ai componenti del template. Questo approccio modula la struttura della pagina, evitando la ripetizione del codice. Devi creare questi file e inserire al loro interno il contenuto necessario.index.phpIl codice corrispondente per la parte superiore, inferiore e le barre laterali.

Testare e verificare il tuo tema.

Dopo aver completato la creazione del modello di base, accedi al pannello di amministrazione di WordPress e vai su “Aspetto” -> “Temi”. Dovresti vedere “Il mio primo tema” nell’elenco dei temi disponibili. Attivalo, quindi visita la pagina iniziale del sito e la pagina di un singolo articolo per verificare che tutti gli elementi (titolo, contenuto, menu, piede di pagina) vengano visualizzati correttamente come previsto.

Utilizza gli strumenti di sviluppo del browser per verificare che la struttura HTML sia corretta e che il CSS venga applicato correttamente. Prova a creare alcuni articoli di testo che includano immagini, categorie e tag, assicurandoti che questi elementi vengano richiamati e visualizzati correttamente all’interno del template. Questo è il modo migliore per individuare e risolvere eventuali problemi.

Riassumendo

Congratulazioni per aver completato la creazione di base del tuo primo tema per WordPress. Grazie a questa guida, hai imparato come creare una cartella per il tema da zero e come scrivere i file necessari per il suo funzionamento corretto.style.css和index.phpFile, per il loro utilizzo…functions.phpIl processo completo che include l’aggiunta di funzionalità, il caricamento di risorse, la creazione di file di template dedicati e lo sviluppo modulare rappresenta soltanto il punto di partenza nel mondo dello sviluppo di temi. Successivamente, potrai esplorare più a fondo i vari tipi di file di template disponibili.page.php、archive.phpFunzioni avanzate come la sezione degli strumenti aggiuntivi, la gestione dei tipi di articoli personalizzati, ecc.; inoltre, continua a ottimizzare la struttura del codice e il design del tuo progetto.

FAQ - Domande frequenti

Perché il mio tema non viene visualizzato nel backend?
Di solito, questo è dovuto a…style.cssIl problema è dovuto a un formato errato o all’assenza dell’intestazione delle note relative al tema presente nel file. Assicurati che il file si trovi nella directory principale della cartella dei temi e che le informazioni presenti nell’intestazione delle note siano complete e correttamente formattate. Un altro possibile motivo potrebbero essere problemi di permessi: verifica che WordPress abbia i permessi necessari per leggere la cartella dei temi.

Il file functions.php è obbligatorio?

Dal punto di vista tecnico, un sistema che dispone soltanto di…style.css和index.phpAnche il tema relativo a questo argomento funzionerà. Tuttavia…functions.phpÈ essenziale per implementare funzionalità che vanno oltre l’output di base fornito da HTML (ad esempio, menu di registrazione, aggiunta di barre laterali, caricamento sicuro di script e stili). Costituisce il metodo standard per estendere e personalizzare le funzionalità di un tema, quindi è indispensabile per qualsiasi tema pratico e funzionale.

Come posso aggiungere una barra laterale al mio tema?

Prima di tutto,functions.phpUtilizzare nel contestoregister_sidebar()La funzione permette di registrare una o più aree per gli strumenti aggiuntivi (barre laterali). Successivamente, in quel file di template in cui si desidera visualizzare la barra laterale…index.php或single.phpNel testo fornito, non è presente alcun contenuto specifico da tradurre. Potresti fornire il testo che desideri tradurre in italiano, così potrò eseguire il lavoro per te.dynamic_sidebar()La funzione viene utilizzata per richiamarlo. Infine, l’utente potrà trascinare gli strumenti (widget) nella relativa area sulla pagina “Aspetto” -> “Widget” presente nell’interfaccia di amministrazione di WordPress.

Quali sono le considerazioni di sicurezza da tenere in considerazione durante lo sviluppo di temi (temi per applicazioni o siti web)?

Non fidarsi mai direttamente dei dati inseriti dagli utenti o dei dati provenienti dal database. Prima di visualizzare qualsiasi contenuto dinamico sulla pagina, assicurati di utilizzare le funzioni di escape fornite da WordPress.esc_html()、esc_url()和wp_kses_post()Quando si introducono funzionalità personalizzate o moduli all’interno di un tema, è necessario rispettare i meccanismi di verifica degli “nonce” (Nonce Values) e dei diritti di accesso (permissions) forniti da WordPress.wp_enqueue_style()和wp_enqueue_script()Questo meccanismo permette di caricare i risorse dinamicamente, invece di utilizzare codice fisso o etichette predefinite.