Per creare un tema WordPress completo e funzionale, è necessario preparare una serie di file fondamentali. Questi file costituiscono lo “scheletro” del tema, e ognuno di essi svolge un ruolo specifico.
I file più basilari includono:
* `style.css`：主题的样式表，同时也是主题的“身份证”，包含主题名称、作者、描述等元信息。
* `index.php`：主题的主模板文件，是默认的首页和文章列表页模板。
* `header.php`：网站的头部模板，通常包含`<head>`部分和网站顶部的导航区域。
* `footer.php`：网站的底部模板，通常包含版权信息、脚本等。
* `functions.php`：主题的功能文件，用于添加自定义功能、注册菜单、侧边栏等。
Iniziamo creando il file `style.css`. All’inizio del file, è necessario aggiungere una nota di testo che fornisca informazioni sul tema utilizzato.
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个为学习WordPress主题开发而创建的简单自定义主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/Successivamente, creare il file `index.php`. Nella versione più basilare, questo file dovrà includere i contenuti della parte superiore (header) e della parte inferiore (footer) del sito, nonché eseguire un ciclo per visualizzare tutti gli articoli disponibili.
<p><strong>Questo è un testo di esempio.</strong></p>
<main id="main-content">
<article id="post-<?php the_ID(); ?>">
<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>
<p>Non sono disponibili articoli.</p>
<?php endif; ?>
</main>
<?php get_footer(); ?>I file `header.php` e `footer.php` contengono rispettivamente la struttura HTML del header e del footer comune al sito web. Il file `functions.php` viene utilizzato per potenziare le funzionalità del tema.
Comprendere i livelli delle template e i meccanismi di iterazione
WordPress utilizza un intelligente sistema di gerarchia dei template per determinare come visualizzare i diversi contenuti delle pagine. Ad esempio, quando si accede a un singolo articolo, WordPress cerca per prima cosa il file `single.php`; se si accede a una pagina di categoria, cerca il file `category.php`; se questi file non esistono, ricorre al file `archive.php`; infine, se nemmeno `archive.php` è disponibile, utilizza il file `index.php`.
What is the main loop?
`the loop`是WordPress主题开发的核心概念。它是一段PHP代码，用于从数据库中获取文章内容并将其显示在网页上。你在`index.php`中看到的`while ( have_posts() ) : the_post();`就是循环的开始。在循环内部，你可以使用一系列模板标签来输出文章信息，如`the_title()`, `the_content()`, `the_permalink()`等。
Si consiglia di leggere Guida completa allo sviluppo di temi WordPress: dall'inizio all'avanzato.。
Creare altri file di template.
Per rendere il tema più professionale, dovresti creare alcuni file di template utilizzati frequentemente. Ad esempio, crea il file `single.php` per visualizzare gli articoli in modo separato.
<p><strong>Questo è un testo di esempio.</strong></p>
<main>
<?php while ( have_posts() ) : the_post(); ?>
<article>
<h1><p><strong>Questo testo verrà sostituito dal titolo dell'articolo corrente.</strong></p></h1>
<div class="post-meta">
发布于： | 作者：
</div>
<div class="post-content">
<p><strong>Questo testo è stato tradotto automaticamente. Se desideri una traduzione corretta, contattaci.</strong></p>
</div>
</article>
</main>
<?php get_footer(); ?>Allo stesso modo, puoi creare il file `page.php` per definire il modello della pagina principale, e il file `archive.php` per definire i modelli delle pagine di archiviazione relative a categorie, tag, ecc.
Integrazione del menu con la barra laterale
Un tema moderno di solito include un menu di navigazione personalizzabile e una zona per gli strumenti presenti nella barra laterale. Queste funzionalità devono essere registrate e attivate tramite il file `functions.php`.
Registrazione del menu di navigazione
Aggiungendo il seguente codice in `functions.php`, è possibile registrare una posizione per il menu nel tema, ad esempio “Menu principale”.
function my_first_theme_setup() {
// 注册一个导航菜单位置
register_nav_menus( array(
'primary' => __( '主菜单', 'my-first-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );Dopo l’iscrizione, gli utenti potranno assegnare il menu alla posizione desiderata nella sezione “Aspetto” -> “Menu” dell’interfaccia di amministrazione di WordPress. Successivamente, nel file `header.php`, all’interno della parte in cui si desidera visualizzare il menu, è necessario aggiungere il seguente codice per renderlo visibile:
<nav id="site-navigation">
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_id' => 'primary-menu',
) );
?>
</nav>Aggiungere una barra laterale con gli strumenti (widget).
Gli “strumenti” (widgets) rappresentano una funzionalità molto flessibile di WordPress. Per aggiungere una barra laterale, è necessario registrare un’area dedicata agli strumenti nel file `functions.php`.
function my_first_theme_widgets_init() {
register_sidebar( array(
'name' => __( '主侧边栏', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具。', 'my-first-theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'my_theme_widgets_init' );Poi, nel file del template in cui desideri visualizzare la barra laterale (ad esempio `sidebar.php`), utilizza la funzione `dynamic_sidebar()` per renderla.
<aside id="secondary" class="widget-area">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>Infine, non dimenticate di includere il file della barra laterale utilizzando la funzione `get_sidebar()` all’interno di `index.php` o `single.php`.
Si consiglia di leggere Guida allo sviluppo di temi per WordPress: Costruire temi personalizzati da zero。
Aggiungere stili e script
为了保持代码的整洁和可维护性，不应该直接在HTML中硬编码样式和脚本链接。正确的方式是通过`functions.php`文件，使用`wp_enqueue_style()`和`wp_enqueue_script()`函数将它们加入队列。
Importare un file di stili (stylesheet)
Sebbene il file `style.css` sia essenziale, WordPress non lo carica automaticamente; è necessario aggiungerlo esplicitamente alla lista dei file da caricare. Di solito, si separa anche il file contenente lo stile principale da quello che effettua il “reset” (cioè che ripristina le impostazioni predefinite del sito).
function my_first_theme_scripts() {
// 引入主题的主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
// 引入一个自定义样式表 (假设位于 /assets/css/main.css)
wp_enqueue_style( 'my-first-theme-main', get_template_directory_uri() . '/assets/css/main.css' );
// 引入一个自定义JavaScript文件 (假设位于 /assets/js/navigation.js)
wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );Utilizzare le pratiche di sviluppo CSS moderne
Nello sviluppo front-end del 2026, prestare attenzione al design responsivo e all’accessibilità è di fondamentale importanza. Nel tuo file `style.css` o in un file `main.css` separato, dovresti utilizzare i query di media per garantire che il sito venga visualizzato correttamente su diversi dispositivi.
/* 基础样式 */
body {
font-family: sans-serif;
line-height: 1.6;
}
/* 响应式导航菜单 */
@media screen and (max-width: 768px) {
#primary-menu {
display: none;
}
/* 移动端菜单样式 */
}Test e debug
Una volta completato lo sviluppo del tema, i test sono un passaggio essenziale. È necessario eseguire test approfonditi in diversi ambienti, browser e dispositivi.
Attiva il modalità di debug.
Durante lo sviluppo, è fondamentale attivare il modalità di debug di WordPress. Questo ti aiuterà a individuare rapidamente errori, avvisi e notifiche in PHP. Apri il file `wp-config.php` e trova o aggiungi il seguente codice:
Si consiglia di leggere Guida avanzata allo sviluppo di temi WordPress nel 2026: dalla creazione di un sito web aziendale reattivo da zero all'ottenimento di risultati concreti.。
define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true ); // 将错误记录到 /wp-content/debug.log 文件
define( 'WP_DEBUG_DISPLAY', false ); // 不在页面上显示错误，更安全Unit testing per i componenti tematici
Si consiglia di utilizzare i dati di test ufficiali forniti da WordPress per testare completamente il proprio tema. Questi dati includono vari tipi di articoli, pagine, media, commenti, ecc., e permettono di verificare che il tema si comporti correttamente in ogni situazione, senza problemi di stile o layout.
Riassumendo
Dalla creazione dei file di base `style.css` e `index.php`, fino alla comprensione dei livelli delle strutture di template e dei meccanismi di iterazione, passando per l’aggiunta di menu, barre laterali e lo inserimento sicuro di script di stile, hai completato il processo di creazione di un tema personalizzato per WordPress, semplice ma funzionale. Ricorda che lo sviluppo di temi è un processo iterativo: iniziare dalla versione più semplice e aggiungere gradualmente funzionalità e perfezionare i dettagli rappresenta la migliore pratica. Continuando a imparare i tag dei template, gli “action hooks” e i “filters”, sarai in grado di creare temi più potenti e flessibili.
FAQ - Domande frequenti
Quali conoscenze di base sono necessarie per sviluppare un tema WordPress?
È necessario padroneggiare le nozioni di base di HTML, CSS e PHP. Una conoscenza di base di JavaScript sarà anche molto utile per aggiungere funzionalità interattive. Inoltre, è essenziale essere familiari con i concetti fondamentali di WordPress, come articoli, pagine, categorie, tag, widget e menu.
Perché le modifiche apportate al mio tema non vengono applicate in background?
Di solito, il problema è causato dal cache del browser o da quello di WordPress. Prova prima a raffrescare forzatamente il browser (Ctrl + F5 o Cmd + Shift + R). Se il problema persiste, verifica se hai aggiunto correttamente i file di stile e i script alla coda di elaborazione (queue) e assicurati che il file `functions.php` non contenga errori di sintassi. In casi molto rari, potrebbe essere necessario pulire il cache del server o degli plugin.
Come posso rendere il mio tema compatibile con più lingue?
你需要做好主题的“国际化”准备。这意味着在代码中所有需要翻译的文本，都应使用翻译函数（如`__()`， `_e()`）进行包装，并为`text-domain`设置一个唯一标识（在`style.css`的头部已定义）。然后，你可以使用如Poedit这样的工具创建`.po`和`.mo`翻译文件，使你的主题能够被轻松翻译成其他语言。
Qual è la differenza tra un tema personalizzato e un sottotema?
I temi personalizzati sono temi completamente nuovi, sviluppati da zero in modo indipendente. I sottotemi, invece, si basano su un “tema padre” esistente e ne ereditano tutte le funzionalità, gli stili e i file di template. I sottotemi permettono di modificare o aggiungere soltanto le parti necessarie (solitamente gli stili e pochi file di template), senza dover modificare il tema padre. Questo approccio garantisce che le modifiche apportate non vengano sovrascritte quando si personalizza o si aggiorna un tema popolare, rendendolo più sicuro ed efficiente.
Il prossimo passo, cosa dovremo fare dopo?
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.
- Sviluppo di temi per WordPress: Da principianti a esperti: Una guida completa per creare siti web personalizzati
- Sviluppo di temi per WordPress da zero: creare un’interfaccia web unica e originale
- Guida allo sviluppo di temi per WordPress: costruire siti personalizzati da zero
- Guida completa allo sviluppo di temi per WordPress: un corso pratico per passare dall’essere principianti all’essere esperti
- Guida completa allo sviluppo di temi per WordPress: costruire template per siti web di livello professionale da zero
Italiano