Pagina iniziale/Conoscenza/WordPress/Dettagli del contenuto

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

Leggere in 2 minuti.
2026-03-14
2026-06-05
2,000
Guadagno delle commissioni quando fai acquisti tramite i link qui sotto, senza alcun costo aggiuntivo per te.

Concetti di base dello sviluppo di temi per WordPress

Prima di iniziare a scrivere il codice, è fondamentale comprendere la struttura di base di un tema per WordPress. Un tema è essenzialmente una cartella che contiene una serie di file che seguono regole specifiche; questi file insieme determinano l’aspetto e alcune funzionalità del sito web. L’idea principale alla base del funzionamento di WordPress è quella dei “livelli di template”: il sistema seleziona e carica automaticamente il file template corrispondente in base al tipo di pagina che viene visualizzato (ad esempio, la pagina iniziale, la pagina di un articolo o una pagina personalizzata).

Ogni tema deve contenere due file principali:style.css 和 index.php。style.css Non fornisce soltanto gli stili grafici, ma anche le note presenti all’inizio dei file contengono metadati relativi al tema, come il nome del tema, l’autore, la descrizione, ecc. Questo è l’unico modo con cui WordPress riesce a riconoscere un tema.index.php Si tratta del file di template predefinito; quando non esistono altri template più specifici, WordPress utilizza automaticamente questo file.

I temi interagiscono con il nucleo di WordPress tramite le cosiddette “Template Tags” (Etichette di Template). Si tratta di funzioni PHP che vengono utilizzate per ottenere e visualizzare dinamicamente i contenuti dal database. the_title() Titolo dell’articolo:the_content() Comprendere e utilizzare correttamente queste funzioni è fondamentale per la visualizzazione di contenuti dinamici.

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

Configurare l’ambiente di sviluppo e creare la struttura del tema

Un ambiente di sviluppo efficiente e isolato rappresenta il primo passo nella creazione di contenuti per siti web. Si consiglia l’uso di software per server locali come XAMPP, MAMP o Laragon, che permettono di configurare rapidamente un ambiente PHP e MySQL sul proprio computer. Installare i file principali di WordPress nella directory radice del server locale (ad esempio, nella directory “public”). htdocs 或 www…) all’interno di…

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

Successivamente, nella directory di installazione di WordPress… wp-content/themes/ All’interno di questa directory, crea una nuova cartella per il tuo nuovo tema; ad esempio, puoi chiamarla “my_new_theme”. my-first-themeAll’interno di questa cartella, creare il primo file necessario:style.cssLe note presenti nella parte iniziale del testo devono seguire esattamente il seguente formato:

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

Dopo aver salvato il file, accedi alla pagina “Aspetto” -> “Temi” nell’interfaccia di amministrazione di WordPress. Dovresti vedere il tuo tema elencato tra quelli disponibili e poterlo attivare.

Ora, creiamo il secondo file necessario:index.phpQuesto è il file del modello principale del tema. All’inizio, è sufficiente inserire soltanto la struttura di base di HTML5 e un ciclo semplice per effettuare dei test.

<!DOCTYPE html>
<html no numeric noise key 1008>
<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 1005>
    <header>
        <h1>Il mio tema personalizzato</h1>
    </header>
    <main>
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) :
                the_post();
                ?>
                <article>
                    <h2><p><strong>Questo testo verrà sostituito dal titolo dell'articolo corrente.</strong></p></h2>
                    <div><p><strong>Questo testo è stato tradotto automaticamente. Se desideri una traduzione corretta, contattaci.</strong></p></div>
                </article>
                <?php
            endwhile;
        endif;
        ?>
    </main>
    <footer>
        <p>Informazioni in fondo al sito web</p>
    </footer>
    <p><strong>Questo è un testo di esempio.</strong></p>
</body>
</html>

Dettagliati spiegazioni sui file di template principali e sulle funzioni

Con l’aumentare della complessità dei temi, è necessario separare il codice relativo alle diverse funzionalità in file di template dedicati. Il sistema di gerarchia dei template di WordPress cercherà automaticamente e caricherà il template più adatto alla pagina attiva.

Si consiglia di leggere Ti insegnerò passo dopo passo come creare un potente tema WordPress personalizzato.。

Creare header.php Il documento, che verrà index.php 中 <head> Parte e <header> Inserisci una parte del codice qui, e poi… index.php Utilizzato nella parte superiore. get_header() Si utilizza una funzione per introdurla. Allo stesso modo, per crearla… footer.php Conserva le informazioni in posizione inferiore e utilizzale. get_footer() Introdurre. Creare. sidebar.phpE utilizzare… get_sidebar() L’introduzione di questo approccio consente di modularizzare e riutilizzare il codice.

Per i diversi tipi di pagine, è possibile creare template specifici.
* single.phpUtilizzato per visualizzare un singolo articolo.
* page.phpUtilizzato per visualizzare una singola pagina.
* front-page.phpSe esiste, verrà utilizzato come pagina iniziale statica.
* home.phpUtilizzato per visualizzare l’indice degli articoli del blog (quando la pagina iniziale è impostata su “Articoli più recenti”).
* archive.phpUtilizzato per visualizzare pagine di archiviazione che contengono informazioni su categorie, tag, autori, ecc.
* 404.phpUtilizzato per visualizzare la pagina di errore 404.

Nel file di template, la struttura più fondamentale è la “ciclo” (The Loop). Si tratta di un blocco di codice PHP utilizzato da WordPress per recuperare e visualizzare gli articoli dal database. La struttura di base è la seguente:

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 if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <!-- 在这里输出文章内容，使用 the_title(), the_content() 等函数 -->
<?php endwhile; else : ?>
    <p>Mi dispiace, non è stato trovato alcun contenuto.</p>
<?php endif; ?>

funzione bloginfo() 或 get_bloginfo() Utilizzato per ottenere informazioni di base su un sito web, come… bloginfo( 'name' ) Titolo del sito web:bloginfo( 'stylesheet_url' ) Indica l’URL del file che contiene lo stile del tema.

Estensioni delle funzionalità di stili, script e temi

Per garantire che lo stile del tema venga caricato correttamente e per evitare conflitti, è necessario utilizzare le funzioni fornite da WordPress per inserire i file di stile e di script nella “coda di caricamento” (queue), anziché scriverli direttamente nell’HTML. <link> 或 <script> Tag: Questo viene fornito attraverso il tema. functions.php Realizzato tramite file.

Creare functions.php Questo file viene utilizzato per aggiungere funzionalità specifiche relative al tema, modificare il comportamento predefinito o registrare gli stili dei script. wp_enqueue_style() 和 wp_enqueue_script() Funzione:

Si consiglia di leggere Guida completa allo sviluppo di temi per WordPress: costruire da zero temi personalizzati ad alte prestazioni。

<?php
function my_first_theme_scripts() {
    // 注册并排入主样式表
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

// 注册并排入一个自定义 CSS 文件
    wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/css/custom.css', array(), '1.0' );

// 注册并排入一个 JavaScript 文件，依赖于 jQuery
    wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/script.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );
?>

在 functions.php Inoltre, è anche possibile utilizzare… add_theme_support() Le funzioni servono a dichiarare le funzionalità supportate da un tema, come ad esempio le immagini caratteristiche degli articoli, i loghi personalizzati, il formato degli articoli, ecc.

// 支持文章特色图像
add_theme_support( 'post-thumbnails' );

// 支持自定义 Logo
add_theme_support( 'custom-logo', array(
    'height'      => 100,
    'width'       => 400,
    'flex-height' => true,
    'flex-width'  => true,
) );

// 在文章编辑器中添加编辑器样式
add_editor_style( 'editor-style.css' );

Lo stile finale di un argomento (o di un elemento grafico) viene solitamente definito nel file di configurazione relativo a quel tema. style.css O in altri file CSS caricati tramite funzioni. WordPress aggiunge automaticamente molte classi CSS utili a body e articoli, come ad esempio: home, single, page-id-{ID} Puoi utilizzare questi nomi di classe per creare stili personalizzati.

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

Riassumendo

Seguendo i passaggi descritti in questo articolo, hai acquisito la conoscenza fondamentale per creare da zero un tema personalizzato per WordPress. Hai imparato a comprendere i concetti di base dei temi e la struttura dei file di template, a configurare l’ambiente di sviluppo, a creare i file necessari, a analizzare i componenti principali dei template, a capire il funzionamento dei cicli e dei tag di template, e infine a conoscere i metodi per personalizzare il look e il comportamento del tema. functions.php Aggiungere correttamente gli stili, i script e le funzionalità relative ai temi è un passaggio fondamentale nel processo di sviluppo di temi per siti web. Sebbene questo processo sia di base, esso rappresenta comunque l’ossatura essenziale per lo sviluppo di temi efficaci. Successivamente, potrai approfondire le tue conoscenze esplorando lo sviluppo di sottotemi, la personalizzazione dei tipi di articoli, le opzioni avanzate dei temi, nonché l’integrazione con WooCommerce, per arricchire e perfezionare ulteriormente le tue competenze in questo ambito.

FAQ - Domande frequenti

Per sviluppare temi (temi per siti web), è necessario conoscere PHP?

Sì, PHP è il linguaggio di programmazione principale di WordPress. I file delle temi sono essenzialmente file PHP che combinano HTML con le funzioni PHP di WordPress (etichette di template) per generare pagine in modo dinamico. Anche se si utilizzano strumenti per la creazione di pagine, comprendere il funzionamento di PHP è fondamentale per personalizzare funzionalità avanzate e risolvere eventuali problemi.

È possibile cambiare il nome del file style.css relativo al tema?

No.style.css Questo è un file essenziale per che WordPress riconosca un tema; il suo nome è fisso. Tutte le informazioni metadati del tema (come il nome e l’autore) sono definite nelle annotazioni in cima a questo file. Tuttavia, è possibile modificare alcune di queste informazioni. functions.php La funzione in questione registra i file CSS con altri nomi e li carica per integrare i relativi stili.

Come far sì che un tema supporti il cinese o la traduzione?

Prima di tutto, style.css I commenti in testa devono essere impostati correttamente. Text Domain(Per esempio) my-first-theme(...) e usarlo in tutte le stringhe che necessitano di traduzione. __() 或 _e() Le funzioni vengono incapsulate (ovvero racchiuse all’interno di strutture specifiche). Successivamente, si utilizzano strumenti come Poedit per analizzare i file del tema (il “theme”) e generare i contenuti necessari. .pot File di template, e creazione delle versioni in lingua corrispondente (ad esempio…) zh_CN.poIl file di traduzione per…) deve essere compilato infine in… .mo I file sono posizionati all’interno del tema. languages All’interno della cartella.

Come aggiungere la funzionalità del menu a un tema personalizzato?

Prima di tutto, riguardo al tema… functions.php Utilizzato nel file. register_nav_menus() Posizione per la registrazione delle funzioni. Successivamente, nel file di template (ad esempio…) header.phpNelle aree in cui si desidera visualizzare il menu, utilizzare… wp_nav_menu() La funzione permette di registrare i menu desiderati; in seguito, gli utenti possono configurare il contenuto di questi menu nella sezione “Aspetto” -> “Menu” dell’interfaccia di amministrazione di WordPress.

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: