Pagina iniziale/Conoscenza/WordPress/Dettagli del contenuto

Guida completa allo sviluppo di temi per WordPress: costruisci l’aspetto del tuo sito web da zero

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

Comprendere la struttura di base del tema e i file chiave

Il nucleo di un tema standard per WordPress è una cartella che contiene file specifici, e questa cartella si trova all’interno della directory principale del sito web./wp-content/themes/All’interno del directory, ogni tema deve contenere almeno due file principali per essere riconosciuto e attivato da WordPress.

Prima di tutto…style.cssQuesto non è solo lo stile del tema, ma anche un file di informazioni. Il blocco di commenti in cima definisce le informazioni di base del tema, come il nome del tema, l’autore, la descrizione e la versione. Senza questi commenti nella parte iniziale del file, in formato corretto, WordPress non sarà in grado di visualizzare il tuo tema nell’elenco dei temi presenti nell’interfaccia di amministrazione.

Un altro file necessario è…index.phpÈ il file di template predefinito per il tema. Quando WordPress non trova un template più specifico per visualizzare i contenuti, utilizza questo file.

Si consiglia di leggere Guida all’approccio di base allo sviluppo di temi per WordPress: creare dall’zero un aspetto personalizzato per il proprio sito web。

Oltre a ciò, un tema completo e funzionale di solito include i seguenti file:header.php、footer.php、sidebar.php和functions.php. Documentofunctions.phpIl fattore più importante è che rappresenta il “cervello” del tema stesso: ti permette di aggiungere funzionalità, registrare barre laterali, definire menu di navigazione, ecc., senza dover modificare il codice sorgente principale.

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

Come progettare un header di informazioni tematiche standard?

在style.cssNel file, il formato delle informazioni di intestazione deve essere rigorosamente rispettato. Ecco un esempio standard:

/*
Theme Name: 我的第一个主题
Theme URI: https://www.example.com/my-first-theme/
Author: 你的名字
Author URI: https://www.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
Text Domain: my-first-theme
*/

Queste informazioni verranno visualizzate nella sezione “Aspetto” -> “Temi” dell’interfaccia di amministrazione di WordPress.Text DomainÈ essenziale per l’internazionalizzazione: diventa fondamentale quando si prepara a tradurre i contenuti di un tema in altre lingue.

Creare la struttura di un modello di pagina di base

I file di template rappresentano lo “scheletro” di un tema WordPress e determinano il modo in cui vengono visualizzati i diversi tipi di contenuti. Comprendere e utilizzare la struttura gerarchica dei template in WordPress è fondamentale per uno sviluppo efficiente.

Creare i file per la parte superiore e inferiore della pagina

Separare le parti ripetute della pagina in file separati è la migliore pratica per mantenere il codice ordinato e facilmente gestibile.header.phpI file di solito contengono una dichiarazione del tipo di documento.<head>Tutti i tag della regione (come titoli, riferimenti a CSS e JS), nonché i marcatori del titolo della pagina del sito (come il Logo e il menu principale).

Si consiglia di leggere Imparare a sviluppare temi per WordPress da zero: una guida completa per creare temi personalizzati per siti web。

<!DOCTYPE html>
<html no numeric noise key 1005>
<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 1002>
    <header id="site-header">
        <h1><a href="/it/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
    </header>

Di conseguenza,footer.phpIl file contiene contenuti della parte inferiore della pagina (ad esempio, informazioni sul copyright) e termina in…header.phpLe etichette HTML aperte in questo contesto vengono chiamate (invocate) contemporaneamente.wp_footer()Funzione.

    <footer id="site-footer">
        <p>©</p>
    </footer>
    <p><strong>Questo è un testo di esempio.</strong></p>
<p>Io non sono un'attrice.</p>
<p>Questo testo è stato tradotto automaticamente.</p>

wp_head()和wp_footer()Questi due “ganci” (hook) sono essenziali: permettono ai plugin e al core di WordPress di inserire codice rispettivamente nella parte iniziale e nella parte finale della pagina.

Implementare i template per la pagina principale e le pagine degli articoli.

Come contenitore generico per i temi…index.phpIl file utilizza le etichette dei template di WordPress per includere altre parti dei template e per visualizzare in modo ciclico i contenuti degli articoli.

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 
<p><strong>Questo è un testo di esempio.</strong></p>

<main id="primary">
    
            <article id="post-<?php the_ID(); ?>" no numeric noise key 1007>
                <h2><a href="/it/</?php the_permalink(); ?>"><p><strong>Questo testo verrà sostituito dal titolo dell'articolo corrente.</strong></p></a></h2>
                <div class="entry-content">
                    <p><strong>Questo testo è stato tradotto automaticamente. Se desideri una traduzione corretta, contattaci.</strong></p>
                </div>
            </article>
        
</main>

Per la pagina di un singolo articolo, è necessario creare…single.phpLa sua struttura è simile a…index.phpSimile, ma di solito viene eseguito tramite una chiamata (una funzione, un metodo, ecc.).the_post_thumbnail()Per visualizzare le immagini di rilievo, utilizza…the_category()和the_tags()Per visualizzare le categorie e i tag.

Estendere le funzionalità nel file della funzione tematica.

functions.phpIl file è il luogo in cui aggiungi tutte le funzionalità personalizzate e le configurazioni per il tuo tema WordPress. È come un altro plugin, ma appartiene esclusivamente al tuo tema.

Funzionalità di base per la configurazione di un tema

Usareadd_theme_support()Le funzioni possono dichiarare le varie funzionalità supportate da un tema, come immagini caratteristiche degli articoli, loghi personalizzati, marcature HTML5, ecc. Questo avviene solitamente all’interno di un documento specifico che descrive le caratteristiche del tema.after_setup_themeVerrà eseguito all’interno della funzione attivata dal “gancio” (hook).

Si consiglia di leggere Guida completa allo sviluppo di temi per WordPress: costruire siti web professionali e responsive da zero。

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

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

// 支持HTML5标记
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Implementare la barra laterale e l’area degli strumenti aggiuntivi

Gli strumenti aggiuntivi (plugin) sono una componente fondamentale di WordPress. Per creare un’area dedicata agli strumenti aggiuntivi per un tema (nella barra laterale), è necessario…functions.phpUtilizzare nel contestoregister_sidebar()Funzione.

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>',
    ) );
}
add_action( 'widgets_init', 'my_theme_widgets_init' );

Dopo aver completato la registrazione, potrai…sidebar.phpUtilizzato nei file di template.dynamic_sidebar( ‘sidebar-1’ )È arrivato il momento di richiamare questa funzionalità/area.

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

Integrare i file di stile e i file di script

Inserire correttamente i file di stile CSS e i script JavaScript all’interno del tema è fondamentale per garantire prestazioni ottimali e compatibilità con i diversi browser. Non si dovrebbero mai codificare direttamente i link nei file di template, ma utilizzare il sistema di gestione degli script fornito da WordPress (il cosiddetto “enqueue system”).

Il file che definisce lo stile principale del tema.

Anche sestyle.cssÈ necessario, ma di solito conserviamo soltanto le informazioni relative alla parte iniziale del codice per l’identificazione del tema; lo stile effettivo viene invece definito in un altro file CSS, che viene poi importato nel file principale tramite specifiche istruzioni.wp_enqueue_style()Caricamento della funzione.

function my_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri(), array(), '1.0' );

// 加载一个自定义样式表
    wp_enqueue_style( 'my-theme-custom-style', get_template_directory_uri() . '/assets/css/custom.css', array('my-theme-style'), '1.0' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

get_stylesheet_uri()La funzione si indirizzerà automaticamente al directory radice del tema.style.cssI file: L’utilizzo di un sistema di gestione delle attività in coda (queue system) consente agli plugin o ai sottotempi (subthemes) di fare riferimento ai tuoi stili o di sostituirli in modo semplice e agevole.

Aggiungere e integrare script personalizzati

Per i file JavaScript, il procedimento è simile, ma è necessario utilizzare…wp_enqueue_script()Funzione: Una buona pratica consiste nel caricare lo script nella parte inferiore della pagina (footer) per migliorare la velocità di rendering del sito.

function my_theme_scripts() {
    // ... 样式加载代码 ...

// 在页脚加载一个自定义JS文件，并依赖jQuery
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/assets/js/main.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Attenzione all’ultimo parametro.trueIn pratica, indica a WordPress di posizionare lo script nella parte inferiore della pagina (footnote). Se il tuo script ha bisogno di essere eseguito in un momento specifico durante la visualizzazione della pagina…<head>Se viene caricato, impostalo come…false。

Riassumendo

Lo sviluppo di temi per WordPress è un processo che richiede la comprensione integrata di elementi legati al design, all’HTML, al PHP e al core di WordPress. Per iniziare, è fondamentale comprendere la struttura di un tema e come esso interagisce con il sistema di gestione del contenuto. Questo significa conoscere i file che compongono un tema, il loro ruolo all’interno del sistema e il modo in cui vengono utilizzati per creare un’interfaccia utente accattivante estyle.css和index.phpPartendo da questi due file di base, si costruisce la struttura della pagina creando file di template separati, per poi utilizzare strumenti potenti per completare il lavoro.functions.phpIl file in questione integra diverse funzionalità nel tuo tema e, infine, gestisce gli stili e i script utilizzando metodi standard di gestione delle code di attesa (queueing). Seguendo gli standard di codifica e la struttura gerarchica dei template di WordPress, non solo sarà possibile creare un tema ben strutturato e facile da mantenere, ma si garantirà anche la sua compatibilità con l’intero ecosistema WordPress. Il modo migliore per acquisire queste competenze è iniziare creando una cartella contenente il tema al minimo indispensabile, per poi aggiungere gradualmente le funzionalità desiderate.

FAQ - Domande frequenti

开发一个WordPress主题需要掌握哪些语言

Per sviluppare un tema base per WordPress, è necessario padroneggiare HTML, CSS e PHP. HTML viene utilizzato per costruire la struttura delle pagine, CSS per controllare lo stile e la disposizione visiva, mentre PHP è il linguaggio di scripting lato server di WordPress, utilizzato per implementare tutte le funzionalità dinamiche. Per temi più complessi e interattivi, è anche essenziale conoscere JavaScript.

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

Il processo per rendere un tema compatibile con più lingue viene definito “internazionalizzazione”. È necessario…style.cssI dati di intestazione vanno impostati correttamente all’interno delle informazioni principali.Text DomainE inoltre…functions.phpUtilizzare nel contestoload_theme_textdomain()La funzione carica i file di linguaggio.

Successivamente, nel file PHP relativo al tema, tutte le stringhe da tradurre dovrebbero essere indicate utilizzando un formato specifico, come ad esempio:__('Hello World', 'my-theme-text-domain')Avvolgere tale funzione di traduzione in un pacchetto (un modulo software). Infine, utilizzare strumenti come Poedit per generare il codice necessario..po和.moI file linguistici sono destinati agli interpreti.

Il design responsivo è obbligatorio nello sviluppo di temi (temi per siti web)?

Oggi, nel 2026, il design responsivo non è più semplicemente un “plus” per un sito web, ma un requisito essenziale per lo sviluppo di contenuti digitali. Più della metà del traffico internet globale proviene da dispositivi mobili; quindi, un tema web che non sia responsive può compromettere gravemente l’esperienza di utilizzo degli utenti e influenzare negativamente la posizione di un sito nei risultati di ricerca sui dispositivi mobili.

Dovresti utilizzare tecniche come i CSS media queries per garantire che la struttura del tuo tema sia adattabile a schermi di dimensioni diverse, offrendo un’ottima esperienza di navigazione sia sui computer desktop che sugli smartphone. Molti framework CSS moderni (come Tailwind CSS) semplificano inoltre la creazione di interfacce responsive.

Come possono gli utenti personalizzare il mio tema tramite il pannello di controllo amministrativo?

Per fornire agli utenti opzioni di personalizzazione del backend, si utilizza principalmente l’API “Customizer” di WordPress. È possibile farlo…functions.phpUtilizzare nel contesto$wp_customize->add_setting()和$wp_customize->add_control()Metodi per aggiungere impostazioni e controlli.

Ad esempio, è possibile aggiungere un’opzione che permetta all’utente di modificare il colore del titolo del sito web. I valori di queste impostazioni possono essere definiti nei file dei template tematici.get_theme_mod()La funzione permette di ottenere e visualizzare i dati desiderati. Questo offre agli utenti la possibilità di personalizzare l’aspetto di un tema senza dover modificare il codice sorgente, migliorando notevolmente l’usabilità e la professionalità dello stesso.

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: