Pagina iniziale/Conoscenza/WordPress/Dettagli del contenuto

Introduzione allo sviluppo di temi per WordPress: costruisci il tuo primo tema da zero

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

Preparazioni: Comprendere la struttura del tema e i file di base.

Prima di iniziare a scrivere il codice, dobbiamo comprendere la struttura di base di un tema standard per WordPress. Il tema più semplice per WordPress richiede soltanto due file:style.css 和 index.phpTuttavia, un tema completo e ben strutturato richiede l’utilizzo di ulteriori file di template specifici per definire le diverse parti del sito web.

I file di template principali includono:
* index.phpIl file del modello principale del tema rappresenta il modello di fallback predefinito per tutte le pagine del sito web.
* style.cssIl file che contiene lo stile principale di un tema (il cosiddetto “style sheet”) non solo contiene regole CSS, ma anche commenti nella parte iniziale del file che definiscono le informazioni metadati del tema stesso, come il nome del tema, l’autore, la descrizione, ecc. Questi dati sono fondamentali affinché WordPress possa riconoscere e utilizzare correttamente quel tema.
* header.phpIl template della barra di titolo di un sito web contiene solitamente:<head>Alcuni elementi, il logo del sito web e il menu di navigazione principale.
* footer.phpIl template del piede di pagina di un sito web contiene solitamente informazioni sul copyright, aree per widget e altri elementi.
* functions.phpIl file funzionale del tema è utilizzato per aggiungere funzionalità al tema, registrare i menu, gestire le aree dedicate ai widget, nonché contenere altri file PHP.

Inoltre, esistono anche template specifici per pagine particolari, come… single.php(Un singolo articolo)page.php(Pagina indipendente)archive.php(Pagina di archiviazione degli articoli) etc. Comprendere la funzione di questi file è fondamentale per costruire un argomento coerente e strutturato.

Si consiglia di leggere Introduzione allo sviluppo di temi per WordPress: costruisci il tuo primo tema personalizzato da zero。

Non ho bisogno di un amico che cambia ogni volta che soffia il vento.

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

L’installazione di un ambiente di sviluppo è altrettanto importante. Hai bisogno di un ambiente di sviluppo PHP locale (ad esempio XAMPP, Local by Flywheel o DevKinsta), un editor di codice (come VS Code o PhpStorm), e devi assicurarti che la versione di WordPress installata sul tuo computer sia la più recente.

Non ho bisogno di un amico che cambia ogni volta che soffia il vento.

Creare un file di tema e una struttura di directory

Prima di tutto, all’interno della directory di installazione di WordPress… wp-content/themes/ All’interno della cartella, crea una nuova cartella e dale il nome del tuo argomento, ad esempio: my-first-themeTutti i file relativi ai vari argomenti (temi) verranno posizionati in questa cartella.

Successivamente, creeremo il primo e indispensabile file:style.cssAll’inizio di questo file, è necessario aggiungere un commento specifico per informare WordPress che si tratta del tuo tema.

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://yourwebsite.com
Description: 这是一个用于学习WordPress主题开发的入门主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Ora, creiamo il secondo file necessario:index.phpNella fase iniziale, possiamo renderlo molto semplice, limitandoci a produrre una struttura HTML di base.

<!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>
        <h1>Benvenuti nel mio primo tema per WordPress!</h1>
    </header>
    <main>
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) :
                the_post();
                the_content();
            endwhile;
        endif;
        ?>
    </main>
    <footer>
        <p>© Copyright Reserved</p>
    </footer>
    <p><strong>Questo è un testo di esempio.</strong></p>
</body>
</html>

In questo momento, se entri nel pannello di amministrazione di WordPress, seleziona “Aspetto” -> “Temi” e dovresti vedere il tuo “Primo tema” disponibile per l’attivazione. Dopo averlo attivato, visita la pagina iniziale del sito: noterai che i contenuti degli articoli sono visualizzati all’interno di una pagina HTML molto semplice e basilare.

Si consiglia di leggere Guida completa allo sviluppo di temi WordPress: dall'inizio all'avanzato.。

Non ho bisogno di un amico che cambia ogni volta che soffia il vento.

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

Creare modelli e funzionalità di base

Per rendere la struttura del tema più chiara, dobbiamo…index.phpDividere il tutto in parti più piccole e riutilizzabili. Per iniziare, creare… header.php Il documento, che verrà<head>Alcuni contenuti e il testo del titolo della pagina sono stati spostati all’interno del corpo principale del documento.

<!DOCTYPE html>
<html no numeric noise key 1012>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="https://gmpg.org/xfn/11">
    <p><strong>Questo è un testo di prova</strong></p>
</head>
<body no numeric noise key 1009>
<p><strong>Questo testo è stato tradotto automaticamente.</strong></p>
<header id="masthead" class="site-header">
    <div class="site-branding">
        <?php
        if ( is_front_page() && is_home() ) :
            ?>
            <h1 class="site-title"><a href="/it/</?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
            <?php
        else :
            ?>
            <p class="site-title"><a href="/it/</?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
            <?php
        endif;
        ?>
    </div>
    <nav id="site-navigation" class="main-navigation">
        'menu-1',
                'menu_id'        =&gt; 'primary-menu',
            )
        );
        ?&gt;
    </nav>
</header>

Poi, crea footer.php Documenti.

<footer id="colophon" class="site-footer">
    <div class="site-info">
        <p><?php echo esc_html__( '由WordPress驱动', 'my-first-theme' ); ?></p>
    </div>
</footer>
<p><strong>Questo è un testo di esempio.</strong></p>
<p>Io non sono un'attrice.</p>
<p>Questo testo è stato tradotto automaticamente.</p>

Ora dobbiamo creare il “cervello” del tema… functions.php File: Qui impostiamo le funzionalità di supporto ai temi, i percorsi per l’aggiunta di ingredienti, nonché gli stili grafici e i script necessari.

Non ho bisogno di un amico che cambia ogni volta che soffia il vento.

<?php
// 添加主题功能支持
function my_first_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support( 'title-tag' );
    // 启用文章和评论的RSS feed链接
    add_theme_support( 'automatic-feed-links' );
    // 启用文章缩略图（特色图像）
    add_theme_support( 'post-thumbnails' );
    // 注册一个主菜单
    register_nav_menus(
        array(
            'menu-1' => esc_html__( '主导航', 'my-first-theme' ),
        )
    );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
// 注册前端样式表
function my_first_theme_scripts() {
    // 主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
    // 主JavaScript文件（如果存在）
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Infine, ristruttura il tuo… index.phpUtilizzare i tag dei template di WordPress per inserire l'intestazione e il piè di pagina.

<?php get_header(); ?>
<main id="primary" class="site-main">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            get_template_part( 'template-parts/content', get_post_type() );
        endwhile;
        the_posts_navigation();
    else :
        get_template_part( 'template-parts/content', 'none' );
    endif;
    ?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Aggiungere stili e funzionalità interattive.

Ora che la struttura di base del tema è stata completata, è il momento di aggiungere stile e interazioni. Prima di tutto,style.cssDopo le note nel file di intestazione, aggiungi alcuni codici CSS di base per personalizzare e migliorare l’aspetto del tuo tema.

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 
/* 基础样式 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
    margin: 0;
    padding: 20px;
}
.site-header {
    background: #fff;
    padding: 1rem 2rem;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.main-navigation ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}
.main-navigation li {
    margin-left: 1.5rem;
}
.site-main {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
    background: white;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
}
.site-footer {
    text-align: center;
    padding: 2rem;
    color: #666;
    border-top: 1px solid #eee;
}

Per gestire la navigazione su dispositivi mobili, possiamo creare un semplice file JavaScript. Creiamolo nella directory principale del tema. /js/navigation.js。

Si consiglia di leggere Guida completa allo sviluppo di plugin per WordPress: un corso pratico per partire da zero fino alla pubblicazione sul sito web.。

Non ho bisogno di un amico che cambia ogni volta che soffia il vento.

// 简单的移动端菜单切换示例
document.addEventListener('DOMContentLoaded', function() {
    const menuToggle = document.createElement('button');
    menuToggle.textContent = '菜单';
    menuToggle.classList.add('menu-toggle');
    const primaryMenu = document.querySelector('#primary-menu');
    if (primaryMenu) {
        primaryMenu.parentNode.insertBefore(menuToggle, primaryMenu);
        menuToggle.addEventListener('click', function() {
            primaryMenu.classList.toggle('show');
        });
    }
});

E aggiungi lo stile corrispondente nel CSS:

.menu-toggle {
    display: none;
    background: #007cba;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
}
@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }
    .main-navigation ul {
        display: none;
        flex-direction: column;
        width: 100%;
    }
    .main-navigation ul.show {
        display: flex;
    }
}

Riassumendo

Attraverso i passaggi descritti, abbiamo completato un tema WordPress di base ma con una struttura completa. Abbiamo iniziato comprendendo i file fondamentali del tema e, passo dopo passo, ne abbiamo creato il contenuto.style.css和index.phpPoi, attraverso il processo di suddivisione…header.php、footer.phpe potentefunctions.phpI file hanno reso la struttura del tema più modulare e facile da mantenere. Infine, abbiamo aggiunto stili di base e interazioni semplici in JavaScript per migliorare l’esperienza utente.

Non ho bisogno di un amico che cambia ogni volta che soffia il vento.

Questo tema presenta le caratteristiche di base di un tema WordPress moderno: supporto per i tag dei titoli, immagini di presentazione, menu di navigazione, e già possiede le basi di un design responsive (adattativo a diversi dispositivi). Partendo da questo punto, puoi continuare a esplorare le possibilità per personalizzarlo e svilupparlo ulteriormente.single.php、page.phpAspettatevi di trovare molti altri file di template; è anche possibile integrare framework CSS più complessi (come Bootstrap) o utilizzare l’API REST di WordPress per creare interfacce utente più dinamiche. Il mondo dello sviluppo di temi per siti web è vasto e interessante; la chiave per avere successo sta nell’imparare praticamente e nel continuare a migliorare il proprio lavoro attraverso iterazioni costanti.

FAQ - Domande frequenti

Perché il mio tema non appare nell’elenco dei temi presenti nel backend?

Per favore, controlla prima se la tua cartella dei temi è stata posizionata nella directory corretta.wp-content/themes/In secondo luogo, assicurarsi che…style.cssIl blocco di note con le informazioni sul tema posizionato in cima al file ha un formato completamente corretto; in particolare, la riga “Theme Name:” è obbligatoria. Qualsiasi errore di battitura o problema di formattazione potrebbe impedire a WordPress di riconoscere il tema correttamente.

Come posso aggiungere una zona per i widget (Widget) al mio tema?

Hai bisogno di…functions.phpUtilizzato nel file.register_sidebar()Esiste una funzione per registrare gli strumenti aggiuntivi (widget) nell’area dedicata. Dopo la registrazione, sarà possibile utilizzarli nei file di template appropriati (ad esempio…).sidebar.php或footer.phpUtilizzato all'interno di…)dynamic_sidebar()È una funzione utilizzata per richiamarla; rappresenta il metodo standard per estendere le funzionalità della barra laterale o del piede di pagina di un tema.

函数 get_template_part() 有什么用？

get_template_part()È un tag template molto potente, utilizzato per caricare frammenti di codice riutilizzabili all’interno di un tema. Ad esempio, può essere utilizzato per eseguire chiamate in cicli.get_template_part( 'template-parts/content', get_post_type() );Si proverà innanzitutto a caricare il contenuto.template-parts/content-post.php(Assumendo che il tipo di articolo sia…)postSe fallisce, verrà effettuato il caricamento.template-parts/content.phpQuesto ha notevolmente migliorato il livello di modularità e manutenibilità del codice.

Quando si sviluppa un tema per WordPress, come si può assicurare che sia conforme agli standard di codifica di WordPress?

WordPress ha stabilito standard di codifica dettagliati per PHP, HTML, CSS e JavaScript. Ti consigliamo di installare strumenti di analisi del codice (come PHP_CodeSniffer in combinazione con le regole di codifica di WordPress, o ESLint) nel tuo editor di codice. Inoltre, consulta regolarmente i documenti relativi agli standard di codifica presenti nel manuale ufficiale di WordPress e assicurati che tali standard vengano rigorosamente rispettati durante lo sviluppo di gruppo, al fine di garantire la qualità e l’omogeneità del codice.

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: