Pagina iniziale/Conoscenza/WordPress/Dettagli del contenuto

Guida allo sviluppo di temi per WordPress: Creare siti personalizzati da zero

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

Cos’è un tema per WordPress e qual è la sua struttura di base?

UnoWordPressIl tema definisce l’aspetto e il modo in cui un sito web viene visualizzato; si tratta di un insieme di file che collaborano tra loro attraverso template, fogli di stile (style sheets) e codice PHP. Comprendere la sua struttura di base è il primo passo nell’ambito dello sviluppo. I file fondamentali di un tema includono solitamente:
- style.cssIl principale stile del tema, che contiene anche le informazioni metadati del tema (nome del tema, autore, descrizione, ecc.).
- index.phpIl file del modello principale predefinito è un file essenziale per il tema.
- functions.phpUtilizzato per aggiungere funzionalità relative ai temi, script di registrazione, stili grafici, nonché per definire funzionalità personalizzate.
- header.phpDefinire l’area del titolo della pagina del sito web.
- footer.phpDefinire l’area del piede di pagina del sito web.
- page.php 和 single.phpVengono utilizzati rispettivamente per rendere visuali la “pagina” e l“”articolo”.

Questi file di template seguono…WordPressIl sistema di gerarchia dei template consente agli sviluppatori di sovrascrivere la logica di visualizzazione predefinita creando file con nomi specifici, permettendo così di controllare in modo preciso l’output di diversi tipi di contenuti.

Prima di iniziare, avrai bisogno di un ambiente di sviluppo locale (ad esempio Local by Flywheel o XAMPP) o di un server di test. Sono inoltre necessari un editor di codice (come VS Code) e un client FTP (per il deployment).

Si consiglia di leggere Guida introduttiva allo sviluppo di temi per WordPress: creare un sito web personalizzato da zero。

Crea il tuo primo tema di base.

Iniziamo creando un tema il più semplice possibile, ma comunque completamente funzionante. Prima di tutto, nella tua…wp-content/themesCreare una nuova cartella nella directory, ad esempio.my-first-themeQuesto è il luogo in cui vengono archiviati tutti i tuoi file tematici.

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

Definire lo stile e le informazioni del tema

Crearestyle.cssFile, e aggiungi il seguente blocco di note all’inizio del file. Ecco:WordPressÈ necessario per identificare un argomento o un tema specifico.

/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://yourwebsite.com
Description: 这是一个用于学习的自定义WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Questo blocco di note fornisce informazioni sul tema in…WordPressInformazioni visualizzate sul lato backend.Text DomainUtilizzato per l’internazionalizzazione, rappresenta l’identificatore del tema.

Creare il file del modello principale.

Successivamente, creeremo la versione più basilare di…index.phpQuesto è il file che contiene il modello predefinito per tutte le pagine.

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

<main>
        <?php
        if (have_posts()) :
            while (have_posts()) : the_post();
                ?>
                <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>
                &lt;?php
            endwhile;
        else :
            echo &#039;<p>没有找到内容。</p>';
        endif;
        ?&gt;
    </main>

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

Questo file utilizza diversi componenti fondamentali (o “core”) per il suo funzionamento.WordPressTag di template, come…the_post(), the_title(), the_content()Eseguire l’output ciclico dell’articolo.wp_head()和wp_footer()Gli “hook” sono di fondamentale importanza: permettono…WordPressInserisci il codice necessario nel nucleo del programma, nei plugin e negli altri script.

Si consiglia di leggere Sviluppo di temi per WordPress: Una guida completa per creare temi per siti web di livello professionale da zero。

Dopo aver caricato il file sul server, potrai accedervi e utilizzarlo come desideri.WordPressNella sezione “Aspetto” -> “Temi” del pannello di amministrazione, hai visto e attivato questo tema. Ora il tuo sito utilizzerà questo layout minimalista.

Migliorare le funzionalità e la flessibilità del tema.

Una volta definita la struttura di base, dobbiamo introdurre elementi di modularità e funzionalità per rendere il tema più professionale e facile da mantenere.

Introduzione dei file contenenti le funzionalità principali

Crearefunctions.phpIl file rappresenta il “cervello” del tema: è qui che aggiungiamo le funzionalità di supporto per il tema stesso, il menu di navigazione per l’iscrizione, nonché i file di stile e i script necessari per il corretto funzionamento del sito.

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 
<?php
function my_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support('title-tag');
    // 启用文章和页面的特色图像功能
    add_theme_support('post-thumbnails');
    // 注册一个主菜单
    register_nav_menus(array(
        'primary' => __('主导航菜单', 'my-first-theme'),
    ));
    // 为RSS feed链接添加支持
    add_theme_support('automatic-feed-links');
}
add_action('after_setup_theme', 'my_theme_setup');

function my_theme_scripts() {
    // 引入主样式表
    wp_enqueue_style('main-style', get_stylesheet_uri());
    // 引入自定义JavaScript文件
    wp_enqueue_script('my-theme-script', get_template_directory_uri() . '/js/script.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');
?>

add_theme_support()La funzione è stata abilitata con le funzionalità più recenti.WordPressFunzioni comuni di un tema: come utilizzarle.wp_enqueue_style()和wp_enqueue_script()È il metodo standard per il caricamento dei risorse; permette di gestire correttamente le dipendenze e il controllo delle versioni.

Separare i template della parte superiore (header) e della parte inferiore (footer) della pagina

将index.phpSeparare il codice per la parte superiore (header) e quella inferiore (footer) della pagina in file indipendenti permette di migliorare la riutilizzabilità del codice. Creare tali file è un passaggio fondamentale per mantenere un progetto organizzato e facilmente gestibile.header.phpContiene da…Aprire.Tutto il codice che precede l’etichetta. Creare.footer.phpContiene informazioni relative al processo di chiusura…Dopo il tag…Tutto il codice… Poi,index.phpUtilizzare nel contestoget_header()和get_footer()Le funzioni le introducono.

Creare un template per la barra laterale

Creare uno…sidebar.phpIl file può contenere una sezione dedicata agli strumenti o ai widget. Per iniziare,functions.phpRegistra una piccola area per gli strumenti aggiuntivi (tools) all’interno del sistema:

Si consiglia di leggere Dall’inizio alla perfezione: Guida completa e tutorial pratico per lo sviluppo di temi per WordPress。

function my_theme_widgets_init() {
    register_sidebar(array(
        'name'          =&gt; __('主侧边栏', 'my-first-theme'),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __('在这里添加小工具。', 'my-first-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>'function my_theme_widgets_init() {  
    register_sidebars('my_sidebars');  
    add_action('widgets_init', 'my_theme_widgets_init');  
}

```;

Poi, insidebar.phpArea per l’invocazione degli strumenti aggiuntivi (widget):

<?php if (is_active_sidebar('sidebar-1')) : ?>
    <aside>
        <?php dynamic_sidebar('sidebar-1'); ?>
    </aside>
<?php endif; ?>

Infine,index.phpAll’interno del contenuto principale, è possibile utilizzare questa funzionalità accanto all’area dedicata al contenuto principale stesso.get_sidebar()Per chiamarlo…

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

Applicazione di stili e progettazione responsive

Un tema che non presenta alcun stile estetico è privo di attrattiva. Utilizzeremo il CSS per rendere il tema più bello e adatto a diversi dispositivi.

Creare lo stile del layout di base

在style.cssSotto il blocco di commenti, iniziamo ad aggiungere gli stili di base. Prima definiamo alcune variabili CSS e gli stili di reset, quindi impostiamo la struttura di base del layout.

:root {
    --primary-color: #0073aa;
    --text-color: #333;
    --background-color: #f5f5f5;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background: var(--background-color);
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}
header {
    background: white;
    padding: 2rem;
    margin-bottom: 2rem;
    border-bottom: 3px solid var(--primary-color);
}
main {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
}
article {
    background: white;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 5px;
}

Realizzare un menu di navigazione responsive

Per quanto riguarda…functions.phpPer il menu di navigazione registrato, dobbiamo aggiungere degli stili e renderlo più user-friendly sui dispositivi mobili. Prima di tutto,header.phpMostra il menu nella finestra principale.

<nav>
    <?php
    wp_nav_menu(array(
        'theme_location' => 'primary',
        'menu_class'     => 'primary-menu',
    ));
    ?>
</nav>

Successivamente, aggiungi gli stili nel CSS e utilizza i query di media per adattare il design al formato mobile:

.primary-menu {
    display: flex;
    list-style: none;
}
.primary-menu li {
    margin-left: 1.5rem;
}
.primary-menu a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
}
.primary-menu a:hover {
    color: var(--primary-color);
}

/* 响应式设计 */
@media (max-width: 768px) {
    main {
        grid-template-columns: 1fr; /* 移除侧边栏 */
    }
    .primary-menu {
        flex-direction: column;
    }
    .primary-menu li {
        margin: 0.5rem 0;
    }
}

Ottimizzare le immagini caratteristiche di un articolo

Poiché abbiamo attivato…post-thumbnailsSì, è possibile.index.php或single.phpNel ciclo di..., utilizzare...the_post_thumbnail()Una funzione per visualizzare immagini caratteristiche e per applicare loro classi CSS al fine di controllarne le dimensioni.

Riassumendo

Questo guida ti ha accompagnato nel percorso di…WordPressIl flusso principale dello sviluppo di temi: dalla comprensione della struttura di base dei file del tema, alla creazione del primo tema funzionante, fino al passaggio successivo…functions.phpPotenziare le funzionalità, suddividere i template per realizzare un approccio modulare, e infine utilizzare il CSS per l’abbellimento grafico e il design responsive. Questo è il processo di sviluppo descritto.WordPressLa chiave per comprendere il funzionamento di un tema risiede nella conoscenza dei livelli dei template, delle funzioni principali e del sistema di “hook” (meccanismi di interazione tra componenti del tema). Partendo da questo punto di partenza, puoi proseguire nell’esplorazione di opzioni per personalizzare i tipi di articoli, nonché funzionalità avanzate legate al tema stesso.GutenbergIl blocco editor supporta ambiti più complessi, permettendo di creare siti web professionali che soddisfano davvero le esigenze personalizzate degli utenti.

FAQ - Domande frequenti

Deve iniziare tutto da zero lo sviluppo di un tema per ###?
Non è necessario. Puoi scegliere di basare il tuo sviluppo su un tema di partenza (“Starter Theme”) o su un framework esistente e leggero, come Underscores (_s) o Sage. Questi strumenti offrono una buona struttura del codice e le migliori pratiche di programmazione, permettendoti di risparmiare molto tempo nella fase di configurazione iniziale e di concentrarti maggiormente sul design e sulle funzionalità uniche del tuo progetto.

Come posso far sì che il mio tema supporti i sottotemi?

Per permettere una personalizzazione sicura del tuo tema, puoi progettarlo come un “tema genitore” (parent theme), che consente agli utenti di creare “temi figlio” (child themes) per modificare gli stili e i modelli. È importante assicurarti che il tema segua una buona struttura organizzativa dei modelli.style.cssEvitare di utilizzare percorsi assoluti per fare riferimento alle risorse; invece, si dovrebbero utilizzare…get_template_directory_uri()Funzioni come… Il sottotema richiede soltanto una di queste funzioni.style.csse opzionalefunctions.phpIn questo modo, sarà possibile ereditare tutte le funzionalità dei temi genitori.

Come si possono debuggare gli errori comuni durante lo sviluppo?

AprireWordPressIl modo di debug è di fondamentale importanza. Nel tuo…wp-config.phpNel documento, verrà indicato che...WP_DEBUGLa costante è impostata sutrueQuesto farà apparire tutti gli errori, gli avvisi e le notifiche di PHP sullo schermo. Inoltre, è possibile utilizzare gli strumenti di sviluppo del browser (premendo F12) per verificare gli errori presenti nel CSS e nel JavaScript, nonché consultare la console e la scheda “Rete” (Network).

Come posso pubblicare il mio tema una volta che lo ho sviluppato?

Se desideri inviare il tema alle autorità ufficiali…WordPressIl catalogo dei temi deve rispettare rigorosamente gli standard di revisione relativi al tema stesso, inclusi aspetti come la qualità del codice, la sicurezza, l’internazionalizzazione e l’accessibilità. È necessario leggere attentamente la guida ufficiale. Per la distribuzione autonoma, è possibile archiviare tutti i file del tema in formato ZIP, in modo che gli utenti possano utilizzarli direttamente.WordPressUtilizzate la funzione “Carica Tema” presente nel backend per effettuare l’installazione.

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: