Pagina iniziale/Conoscenza/WordPress/Dettagli del contenuto

Sviluppo di temi WordPress: una guida completa per creare temi personalizzati da zero.

Leggere in 3 minuti.
2026-03-14
2026-06-04
1,864
Guadagno delle commissioni quando fai acquisti tramite i link qui sotto, senza alcun costo aggiuntivo per te.

Perché scegliere di sviluppare un tema per WordPress da zero?

Nell’ecosistema di WordPress, sono disponibili un’infinità di temi gratuiti e a pagamento tra cui scegliere. Allora, perché gli sviluppatori dovrebbero ancora imparare a creare temi da zero? La ragione principale risiede nel controllo totale che hanno sul codice, nell’ottimizzazione delle prestazioni del sito e nel miglioramento delle proprie competenze. Sebbene l’utilizzo di temi pronti sia conveniente, spesso comporta codice ridondante, funzionalità non necessarie e limitazioni nella personalizzazione. Creare un tema da zero permette di gestire ogni singola riga di codice, assicurandosi che il tema contenga soltanto le funzionalità essenziali per il sito, il che garantisce tempi di caricamento più rapidi, un miglior posizionamento nei motori di ricerca (SEO) e un livello di sicurezza più elevato.

Costruire un tema da zero rappresenta anche il modo migliore per comprendere a fondo il funzionamento fondamentale di WordPress. Sarai a contatto diretto con gli strati di templazione (template layers)…WP_QueryInteragire con gli Action Hooks e i Filter Hooks rappresenta la base per realizzare personalizzazioni avanzate e lo sviluppo di plugin. Inoltre, un tema personalizzato ben progettato è in grado di adattarsi perfettamente all’immagine aziendale e alle esigenze dell’esperienza utente, qualcosa che i temi standard difficilmente riescono a offrire.

Configurare l’ambiente di sviluppo e creare la struttura di base di un tema

Prima di scrivere la prima riga di codice, è fondamentale creare un ambiente di sviluppo locale efficiente. Si consiglia l’uso di strumenti come Local by Flywheel, DevKinsta o Docker, che permettono di configurare rapidamente un ambiente completo contenente PHP, MySQL e un server web.

Si consiglia di leggere Guida all’approccio di base allo sviluppo di temi per WordPress: costruisci il tuo primo tema personalizzato da zero。

Successivamente, nella directory di installazione di WordPress…wp-content/themesAll’interno della cartella, crea una nuova cartella che fungerà da directory principale per i tuoi argomenti (temi). Ad esempio:my-custom-themeUn tema WordPress valido richiede almeno due file:style.css和index.php。

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).
LOGO di UltaHost pagina di accesso

style.cssI file non contengono soltanto le tabelle di stile, ma anche informazioni meta relative al tema stesso. I commenti presenti nella parte iniziale del file costituiscono, in sostanza, il “cartellino d’identità” del tema.

/*
Theme Name: My Custom Theme
Theme URI: https://example.com/my-custom-theme
Author: Your Name
Author URI: https://example.com
Description: 一个从零开始构建的现代化WordPress主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

Text DomainUtilizzato per l’internazionalizzazione; deve essere in linea con il nome della cartella tematica.

index.phpQuesto file rappresenta il modello predefinito per un tema e costituisce anche l’ultima opzione di “ritorno” (ovvero l’ultima soluzione disponibile) all’interno della gerarchia dei modelli. Nella fase iniziale, può essere molto semplice e utilizzato soltanto per garantire che il tema venga riconosciuto da WordPress.

<!DOCTYPE html>
<html no numeric noise key 1006>
<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 1003>
    <p><strong>Questo testo è stato tradotto automaticamente.</strong></p>
    <header>
        <h1>Il mio tema personalizzato</h1>
    </header>
    <main>
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) :
                the_post();
                the_content();
            endwhile;
        endif;
        ?>
    </main>
    <footer>
        <p>Informazioni in fondo al sito web</p>
    </footer>
    <p><strong>Questo è un testo di esempio.</strong></p>
</body>
</html>

In questo momento, puoi visualizzare e attivare il tuo tema nella sezione “Aspetto” -> “Temi” dell’interfaccia amministrativa di WordPress.

Si consiglia di leggere Creare un sito web professionale: una guida completa allo sviluppo di un tema WordPress personalizzato da zero.。

File di template principali e gerarchia dei template

WordPress utilizza un sofisticato sistema di “livelli di template” per determinare quale file di template caricare in risposta a una richiesta specifica. Comprendere questo meccanismo è fondamentale per lo sviluppo di temi personalizzati.

Comprendere l’ordine di caricamento dei template

Quando un utente visita una pagina, WordPress inizia la ricerca della template appropriata partendo dal file di template più specifico in base al tipo di richiesta (è la pagina iniziale, un singolo articolo, una pagina di categoria, o un elenco di categorie?). Se il file richiesto non esiste, WordPress continua a cercare più in alto nella gerarchia delle template, fino a utilizzare quella di livello successivo.index.phpAd esempio, per un singolo articolo, WordPress cercherà in ordine:single-post-{slug}.php -> single-post-{id}.php -> single-post.php -> single.php -> singular.php -> index.php。

Creare file di template utilizzati frequentemente

Devi creare i seguenti file di template chiave per costruire la struttura di base di un tema:
* header.phpParte superiore del sito web, che include…<head>Area e navigazione in alto.
* footer.phpIn fondo al sito web.
* functions.phpI file funzionali relativi al tema servono per aggiungere nuove funzionalità, registrare elementi del menu, elementi della barra laterale, e altro ancora.
* page.php`: Utilizzato per visualizzare pagine statiche.
* single.php`: Utilizzato per visualizzare un singolo articolo.
* archive.php`: Utilizzato per visualizzare l’elenco degli articoli (per categoria, tag, autore, ecc.).`
* 404.phpPagina di errore 404.
* search.phpPagina dei risultati della ricerca.

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%
LOGO di hosting.com pagina di accesso

Usareget_header(), get_footer(), get_sidebar()I tag di template vengono utilizzati per includere componenti all’interno dei file di template.

Potenziare le funzionalità del tema in functions.php

functions.phpQuesto è il “Centro di controllo” relativo al tuo tema. Qui puoi estendere e modificare le funzionalità del tema utilizzando i vari “Hook” forniti da WordPress.

Funzionalità supportate dall’iscrizione a un argomento (topic):

Usareadd_theme_support()Utilizza una funzione per specificare quali funzionalità di base di WordPress il tuo tema supporta. Questo viene solitamente inserito all’interno di un file specifico, che viene caricato dal sistema quando il tema viene attivato.after_setup_themeNella funzione eseguita dal “hook”.

Si consiglia di leggere Partire da zero: Acquisire in modo efficace le conoscenze fondamentali e le tecniche pratiche per lo sviluppo di temi per WordPress。

function my_custom_theme_setup() {
    // 让主题支持文章和评论的RSS feed链接
    add_theme_support( 'automatic-feed-links' );
    // 支持文章标题标签（Title Tag），无需手动写入<head>
    add_theme_support( 'title-tag' );
    // 支持文章特色图像
    add_theme_support( 'post-thumbnails' );
    // 支持自定义Logo
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ) );
    // 支持HTML5标记（用于评论表单、搜索表单等）
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

Registra il menu di navigazione e la barra laterale.

Anche il menu di navigazione e la barra laterale (area degli strumenti) devono essere inclusi.functions.phpIscriversi in Cina.

// 注册导航菜单位置
function my_custom_theme_menus() {
    register_nav_menus( array(
        'primary' =&gt; __( '主导航菜单', 'my-custom-theme' ),
        'footer'  =&gt; __( '底部菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'init', 'my_custom_theme_menus' );

// 注册侧边栏（小工具区域）
function my_custom_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; __( '主侧边栏', 'my-custom-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __( '在此添加小工具。', 'my-custom-theme' ),
        'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>',
        'before_title'  =&gt; '<h2 class="widget-title">',
        'after_title'   =&gt; '</h2>',
    ) );
}
add_action( 'widgets_init', 'my_custom_theme_widgets_init' );

Dopo aver effettuato la registrazione, potrai configurare gli elementi visivi nel pannello di controllo “Aspetto” -> “Menù” e “Aspetto” -> “Strumenti”, e utilizzarli nei tuoi template.wp_nav_menu()和dynamic_sidebar()Per chiamarle.

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.
LOGO InterServer pagina di accesso

Stili, inserimento di script e controllo dei cicli

Nello sviluppo di temi moderni è necessario seguire le migliori pratiche per gestire il CSS e il JavaScript, nonché per produrre il contenuto degli articoli in modo sicuro ed efficiente.

Aggiungere CSS e JavaScript in modo sicuro.

Non collegare mai direttamente i file CSS e JS nei file di template. È consigliabile utilizzare altri metodi per includerli nel progetto.wp_enqueue_style()和wp_enqueue_script()Funzione, e montarla…wp_enqueue_scriptsSul gancio.

function my_custom_theme_scripts() {
    // 引入主题主样式表
    wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
    // 引入自定义CSS
    wp_enqueue_style( 'my-custom-theme-custom', get_template_directory_uri() . '/assets/css/custom.css', array(), '1.0' );
    // 引入jQuery（WordPress已内置）和自定义JS
    wp_enqueue_script( 'my-custom-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );

Passa il terzo parametro…$depsImpostato come…array( 'jquery' )È possibile dichiarare una dipendenza per garantire che jQuery venga caricato prima di tutti gli altri componenti. L’ultimo parametro utilizzato in questo processo è…trueIndica che lo script viene caricato in fondo alla pagina.

Eseguire l’output di contenuti in modo sicuro all’interno di un ciclo

Nel file di template (ad esempio…)single.php, archive.phpNel codice, si utilizza un “ ciclo” per visualizzare il contenuto dell’articolo. È fondamentale utilizzare le etichette di template fornite da WordPress nonché le funzioni di escape per garantire la sicurezza del codice.

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <article id="post-<?php the_ID(); ?>" no numeric noise key 1009>
        <header class="entry-header">
            <h1 class="entry-title"><p><strong>Questo testo verrà sostituito dal titolo dell'articolo corrente.</strong></p></h1>
            <div class="entry-meta">
                |
            </div>
        </header>
        <div class="entry-content">
            <?php
            // 输出文章内容，并应用段落过滤器等
            the_content();
            ?>
        </div>
        <footer class="entry-footer">
            &lt;?php the_tags( &#039;标签: &#039;, &#039;, &#039;, &#039;<br />' ); ?&gt;
        </footer>
    </article>
    
    <p><?php esc_html_e( '抱歉，没有找到符合条件的内容。', 'my-custom-theme' ); ?></p>
<?php endif; ?>

Usarethe_title(), the_content()Funzioni come queste genereranno automaticamente il contenuto da visualizzare. Basta utilizzarle.esc_html_e()或esc_html__()Esegui l’escapamento e l’internazionalizzazione delle stringhe da tradurre.

Riassumendo

Sviluppare un tema per WordPress da zero è un progetto sistematico che va ben oltre la semplice scrittura di codice HTML e CSS. È necessario comprendere i concetti fondamentali di WordPress: la struttura gerarchica dei template determina la logica di visualizzazione dei contenuti.functions.phpÈ il centro nevralgico delle tue funzionalità, che interagisce con il nucleo di WordPress tramite un sistema di “hook” (meccanismi di integrazione).WP_QueryIl meccanismo di “ciclo” è fondamentale per l’output di contenuti dinamici; inoltre, l’introduzione sicura delle risorse, l’elaborazione dei dati in uscita e l’internazionalizzazione rappresentano criteri essenziali per la creazione di temi di livello professionale. A partire dalla creazione dei contenuti più semplici…style.css和index.phpInizia aggiungendo gradualmente i file di template, il menu di registrazione e le funzionalità speciali che desideri; così potrai assistere passo dopo passo alla creazione di un tema personalizzato completo, ad alto rendimento e facile da mantenere. Questo processo non solo ti permetterà di creare un sito web unico, ma ti aiuterà anche a diventare un vero sviluppatore WordPress.

FAQ - Domande frequenti

Per sviluppare temi da zero, è necessario padroneggiare quali linguaggi di programmazione?

Per sviluppare da zero un tema per WordPress, è necessario padroneggiare HTML, CSS e PHP come linguaggi fondamentali. HTML viene utilizzato per costruire la struttura delle pagine, CSS per la progettazione degli stili e la disposizione visiva (si consiglia di conoscere anche il design responsivo). PHP è il linguaggio lato server di WordPress, utilizzato per elaborare le logiche, accedere ai dati e generare pagine dinamiche. Inoltre, avere una conoscenza di base di JavaScript (soprattutto di jQuery) è molto utile per realizzare effetti interattivi sul lato client.

Nello sviluppo di temi, come è possibile personalizzare la disposizione delle pagine?

Nello sviluppo di temi per WordPress, la disposizione delle pagine viene realizzata principalmente tramite file di template e CSS. Inizialmente, è possibile creare file di template distinti per i diversi tipi di pagine (ad esempio, la pagina principale, l’elenco dei blog, una pagina singola).front-page.php, home.phpIn ogni file, è necessario definire una struttura HTML unica. In secondo luogo, si possono utilizzare le tecnologie di layout Flexbox o Grid di CSS per realizzare un design responsivo. Un approccio più avanzato consiste nella creazione di più aree per le barre laterali, permettendo agli utenti di combinare dinamicamente il layout tramite componenti trascinati tramite “strumenti” presenti nell’interfaccia di back-end.

Cosa è un sottotema (subtopic), perché utilizzarlo e come farlo?

Un sottotema (subtopic) è un tema che funziona in base a un altro tema (tema principale, o “tema genitore”). Permette di modificare o estendere le funzionalità e gli stili del tema genitore senza dover modificare direttamente il suo codice. Il vantaggio di questo approccio è che, quando il tema genitore viene aggiornato, le modifiche personalizzate apportate nel sottotema non vengono sovrascritte, garantendo così un processo di aggiornamento sicuro e affidabile.

Utilizzare i sottotitoli (subtopics) è molto semplice.wp-content/themesCrea una nuova cartella all’interno del catalogo come sottotema, e all’interno di essa crea un altro file o una struttura ulteriore, a seconda delle tue esigenze.style.cssIl file deve avere un header corretto; tale header deve essere conforme ai requisiti specificati.Template:Il campo dichiara il nome del catalogo del tema principale; i sottotemi…functions.phpVerrà caricato in modo prioritario; puoi aggiungere nuove funzionalità oppure modificare il comportamento del tema principale tramite degli “hook” (meccanismi di interazione). Anche i file di template verranno utilizzati in modo prioritario.

Come posso rendere il mio tema compatibile con più lingue (internazionalizzazione)?

Per rendere un tema compatibile con più lingue, ovvero per implementare la funzionalità di internazionalizzazione (i18n), è necessario “incapsulare” le stringhe di testo visibili agli utenti in modo che possano essere riconosciute dai tool di traduzione. Nel codice, non è consigliabile inserire direttamente testi in inglese o cinese; invece, è opportuno utilizzare le funzioni di traduzione fornite da WordPress.()Utilizzato per restituire stringhe tradotte in PHP._e()Per l’output diretto.esc_html()Utilizzato per escapare i caratteri e restituirli.

Hai bisogno di…style.css的Text DomainUtilizza lo stesso dominio di testo (Text Domain) in tutte le chiamate alle funzioni di traduzione. Successivamente, è possibile utilizzare software come Poedit per analizzare il codice del tuo tema e generare i file necessari per la traduzione..potTradurre il file di template: il traduttore ne crea una versione per la lingua richiesta (ad esempio…).zh_CN.poIl file di traduzione per…) viene infine compilato in….moI file vengono inseriti nell'argomento.languagesCartella: WordPress caricherà automaticamente le traduzioni corrispondenti in base alle impostazioni di lingua del sito web.

Il prossimo passo, cosa dovremo fare dopo?

Se stai creando o ottimizzando un sito WordPress, il passo successivo è continuare a leggere i contenuti relativi all'ottimizzazione delle prestazioni, alla configurazione dei plug-in e alla personalizzazione dei temi.

Per una lettura approfondita e conoscenza pratica

I seguenti contenuti sono correlati all'argomento di questo articolo e sono adatti per una lettura approfondita. È consigliabile iniziare con l'articolo più vicino al tuo problema attuale, per poi passare gradualmente agli argomenti correlati, il che di solito dà risultati migliori.

Etichette: