Pagina iniziale/Conoscenza/WordPress/Dettagli del contenuto

Guida introduttiva allo sviluppo di temi WordPress: crea il tuo primo tema da zero.

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

Comprendere la struttura di base di un tema WordPress

Prima di iniziare a scrivere il codice, è fondamentale comprendere la struttura di un tema WordPress. Un tema di base richiede almeno due file: uno è lo stile (stylesheet) utilizzato per definire le informazioni relative al tema, l’altro è il file di template PHP che viene utilizzato per visualizzare il contenuto del sito web. Questi file insieme costituiscono lo “scheletro” del tema e seguono specifiche strutture di directory e regole di denominazione.

Il file principale è…style.cssQuesto file non contiene soltanto i codici CSS, ma anche un blocco di commenti nella parte iniziale del file che rappresenta, in sostanza, il “cartellino d’identità” del tema stesso. Questo blocco fornisce al sistema WordPress informazioni fondamentali sul tema, come il nome, l’autore, la descrizione e la versione. Senza una corretta formattazione di questi commenti, il tema non potrà essere utilizzato correttamente da WordPress.style.cssWordPress non riconoscerà e non attiverà il tuo tema.

Un altro file essenziale è…index.phpQuesto è il file del modello principale del tema; viene utilizzato quando WordPress non riesce a trovare un file di modello più specifico (ad esempio, uno creato appositamente per una determinata funzionalità o per una sezione specifica del sito).single.php或page.phpQuando viene utilizzato, viene automaticamente impiegato per il rendering della pagina. Costituisce l’opzione di riserva per tutti i file di template.

Si consiglia di leggere Rivelazioni sullo sviluppo di temi per WordPress: le tecnologie chiave per creare siti personalizzati da zero。

Documento di dichiarazione delle informazioni sull'argomento.

Il foglio di stile del temastyle.cssLa parte iniziale (il “header”) deve contenere determinate note o informazioni obbligatorie. Ecco un esempio molto semplice:

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 
/*
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
*/

Tra questi,Text DomainUtilizzato per l’internazionalizzazione, rappresenta un identificatore che verrà utilizzato durante le fasi successive di traduzione. Questo file contiene solitamente anche tutti i codici relativi ai tuoi stili CSS.

File del modello principale

index.phpI file rappresentano l’ingresso ai contenuti relativi a un determinato argomento (tema). Il modo più semplice per gestirli…index.phpÈ possibile utilizzare soltanto cicli di base che chiamano le funzioni di base di WordPress per ottenere e visualizzare l’elenco degli articoli.

<!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>
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            the_title( &#039;<h2>', '</h2>' );
            the_content();
        endwhile;
    endif;
    ?&gt;
</body>
</html>

In questo codice,wp_head()和wp_footer()Si tratta di due “ganci” (hook) fondamentali: permettono al core di WordPress, agli plugin e ad altri script di inserire il codice necessario all’inizio e alla fine delle pagine, come stili, script e meta-tag.

Configurare un ambiente di sviluppo locale

Prima di distribuire un tema sui server online, creare un ambiente di sviluppo locale rappresenta il metodo più efficiente e sicuro. L’ambiente locale consente di testare il codice in modo libero e di risolvere eventuali errori senza influenzare il sito web online.

Si consiglia di leggere Maestria completa nello sviluppo di temi WordPress: una guida completa dall'inizio alla perfezione.。

Selezionare il software per il server locale.

Per i principianti, i software di server locali integrati rappresentano la scelta migliore. Essi combinano Apache/Nginx, PHP e il database MySQL in un unico pacchetto, che può essere installato con un solo clic ed è immediatamente utilizzabile. Esempi di tali strumenti includono XAMPP, Local by Flywheel e DevKinsta. Questi strumenti simulano un ambiente di server web reale, permettendoti di eseguire WordPress sul tuo stesso computer.

Installare WordPress e creare la directory dei temi.

Dopo aver eseguito il programma sul server locale, è necessario installare una nuova versione di WordPress. Scarica il pacchetto compresso più recente di WordPress e decomprimilo nella directory radice del sito sul server locale (ad esempio, la cartella htdocs di XAMPP). Successivamente, accedi al sito utilizzando un browser tramite l’indirizzo locale (ad esempio, http://localhost) e segui le istruzioni per completare l’installazione, nota come “installazione in cinque minuti”.

Dopo l’installazione, accedi a WordPress.wp-content/themesIndice. Qui, crea una nuova cartella per il tema che stai per sviluppare; ad esempio, chiamala “my-first-theme”. Quelle che hai creato in precedenza…style.css和index.phpI file dovrebbero essere posizionati all’interno di questa cartella. Ora, accedi al pannello di amministrazione di WordPress e, nella sezione “Aspetto” -> “Temi”, dovresti riuscire a vedere il tuo tema; anche se al momento le sue funzionalità sono ancora molto semplici.

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

Costruire un sistema di file di template di base

Soloindex.phpIl tema fornito non è assolutamente sufficiente per le esigenze di un sito web funzionale. Un tema completo deve includere un insieme di file di template in grado di gestire diversi tipi di visualizzazioni, come singoli articoli, pagine indipendenti, archivi di articoli, ecc. Il sistema di gerarchia dei template di WordPress seleziona automaticamente il file di template più adatto per rendere la pagina richiesta dall’utente.

Articoli e template di pagine

single.phpIl template viene utilizzato per visualizzare un singolo articolo del blog. Quando un utente clicca per leggere l’intero testo di un articolo, WordPress utilizza questo template. Di solito contiene informazioni più dettagliate sull’articolo, come la categoria, i tag, l’autore e l’area per i commenti.

page.phpI template vengono utilizzati per visualizzare pagine statiche indipendenti (ad esempio, la pagina “Informazioni su di noi” o la pagina “Contatti”). La differenza rispetto ai template per gli articoli risiede nel fatto che di solito non vengono mostrati elementi tipici degli articoli del blog, come la data di pubblicazione o la categoria a cui appartiene l’articolo.

Si consiglia di leggere Guida completa allo sviluppo di temi per WordPress: dall’approccio iniziale alla padronanza dell’argomento。

Template per la parte superiore e per la parte inferiore della pagina

Per rispettare il principio DRY (Don’t Repeat Yourself), i temi di WordPress solitamente separano le parti della pagina (Header e Footer) in file indipendenti.

header.phpIl file contiene tutto il codice presente dall’inizio fino alla zona principale del contenuto della pagina, inclusi gli elementi grafici, l’identificativo del sito web e il menu di navigazione principale.index.php、single.phpIn altri template, viene utilizzato…get_header()Utilizzate una funzione per introdurlo.

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

Allo stesso modo,footer.phpIl file contiene tutti i contenuti della parte inferiore della pagina (footnote), come informazioni sul copyright, navigazione ausiliaria, ecc., e viene utilizzato per…get_footer()Introduzione delle funzioni. Inoltre,sidebar.php(Nella barra laterale) viene spesso effettuato un separazione, per poi utilizzarla in modo appropriato.get_sidebar()Chiamata.

Ristrutturatoindex.phpDiventerà molto semplice e conciso.

<?php get_header(); ?>

<main>
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 文章内容输出
        endwhile;
    endif;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Integrazione di stili e script

I temi moderni richiedono che i file di stile CSS e i script JavaScript vengano caricati in modo corretto ed efficiente. WordPress fornisce funzioni apposite per gestire questi risorse, assicurando che vengano caricati nell’ordine giusto di dipendenza e evitando che vengano importati più volte o che si verifichino conflitti tra di loro.

Utilizzare la coda di funzioni per applicare gli stili.

Il modo corretto per fare qualcosa è…wp_enqueue_style()La funzione aggiunge lo stile alla coda. Devi creare un elemento nel tema con il nome…functions.phpQuesto file rappresenta il cuore delle funzionalità di un tema e viene utilizzato per aggiungere varie caratteristiche, funzionalità e modificare il comportamento predefinito.

在functions.phpIn questo contesto, è possibile montare (o collegare) una funzione a…wp_enqueue_scriptsSu questo “action hook”:

function my_first_theme_scripts() {
    // 为主题的主样式表排队
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

// 引入一个Google字体
    wp_enqueue_style( 'google-font', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', array(), null );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

get_stylesheet_uri()La funzione acquisirà automaticamente i dati relativi al tema.style.cssPercorso del file: caricando i file in questo modo, WordPress riesce a gestire i propri risorse in modo più efficace.

Utilizzare la coda di funzioni per aggiungere script.

Anche il caricamento dei script JavaScript richiede l’uso di una coda; la funzione corrispondente è…wp_enqueue_script()È possibile aggiungerli nella stessa funzione.

function my_first_theme_scripts() {
    // ... 加载样式的代码同上 ...

// 加载主题的主JavaScript文件，依赖于jQuery，并放在页脚
    wp_enqueue_script( 'main-js', get_template_directory_uri() . '/js/main.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Questo, qui,array( 'jquery' )Il script dichiara di dipendere dalla libreria principale jQuery; WordPress si assicurerà che jQuery venga caricata prima di tutto. L’ultimo parametro…trueQuesto indica che lo script viene posizionato nella parte inferiore della pagina (prima dell’elenco dei contenuti principali), il che aiuta a migliorare la velocità di caricamento della pagina stessa.

Riassumendo

Sviluppare un tema per WordPress da zero rappresenta un processo di apprendimento sistematico che coinvolge diversi passaggi fondamentali: dalla comprensione della struttura dei file di base, all’installazione di un ambiente di sviluppo locale, alla creazione di un sistema di template, fino all’integrazione corretta di tutti i componenti necessari. Tutto questo può essere realizzato solo mettendo mano personalmente alle operazioni di sviluppo.style.css、index.php、header.php、footer.phpE inoltrefunctions.phpOltre a creare file chiave necessari per il funzionamento del tema, hai anche compreso in modo approfondito il funzionamento della struttura gerarchica dei template di WordPress e del sistema di “hook” (meccanismi di interazione tra moduli). Ricorda che l’essenza dello sviluppo di temi consiste nel rispettare le convenzioni e gli standard stabiliti da WordPress: questo garantisce che il tuo tema sia compatibile, efficiente e facile da mantenere. Partendo da questa base, puoi esplorare funzionalità più avanzate, come la personalizzazione dei tipi di articoli, gli strumenti di configurazione del tema (tema customizer) e le aree dedicate agli strumenti aggiuntivi (plugin areas), per creare gradualmente temi personalizzati e potenti.

FAQ - Domande frequenti

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

Sì, conoscere PHP è una condizione essenziale per lo sviluppo di temi per WordPress. Infatti, WordPress è scritto in PHP, e tutti i file di template (come…)index.php、single.phpTutti questi file sono in PHP; utilizzano codice PHP per chiamare le funzioni di base di WordPress al fine di generare dinamicamente il contenuto delle pagine. Inoltre, vengono utilizzati per aggiungere nuove funzionalità al sito.functions.phpIl file è interamente composto da codice PHP. HTML e CSS vengono utilizzati per definire la struttura e lo stile del sito, mentre PHP rappresenta l’elemento fondamentale per implementare funzionalità dinamiche e interazioni con i dati.

Qual è la funzione del file functions.php relativo al tema?

functions.phpIl file rappresenta il “centro funzionalità” del tuo tema. Non si tratta di un file di template, poiché non genera direttamente alcuna parte della pagina. Piuttosto, viene utilizzato per contenere tutto il codice PHP necessario per modificare e estendere le funzionalità del tema stesso. Alcuni utilizzi comuni includono: l’impostazione della posizione dei menu di navigazione, la definizione delle aree per gli strumenti aggiuntivi (widget), e…wp_enqueue_scriptsIl file “hook” permette di aggiungere file CSS e JavaScript, di implementare funzionalità specifiche per il tema (ad esempio, miniature degli articoli, sfondi personalizzabili), nonché di definire varie funzioni personalizzate. Questo file viene caricato automaticamente all’attivazione del tema.

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

Per rendere un tema compatibile con più lingue (internazionalizzazione e localizzazione), si seguono principalmente due passaggi. Il primo passaggio consiste nell’utilizzare le funzioni di traduzione fornite da WordPress in tutti i punti del tema in cui è necessario tradurre il testo.__('文本', 'text-domain')或_e('文本', 'text-domain')Tra questi,text-domainDeve essere associato a…style.cssQuello dichiarato nella…Text DomainConcordo. Il secondo passo consiste nell’utilizzare strumenti come Poedit per analizzare il codice del tema e generare i file necessari..potFile di template: il traduttore utilizza questi file per creare le versioni in lingua corrispondente (ad esempio, il cinese)..poE quello compilato….moFile, e mettili all’interno del tema./languages/All’interno della directory, WordPress caricherà automaticamente le traduzioni corrispondenti in base alle impostazioni di lingua del sito.

Qual è la differenza tra un tema (theme) e un plugin?

I temi e i plugin in WordPress svolgono ruoli completamente diversi. I temi sono responsabili del aspetto visivo del sito web, ovvero dell’immagine che gli utenti percepiscono, della sua struttura di layout, degli stili grafici e delle template utilizzate. Essi determinano “come” appare il sito. I plugin, invece, servono ad aggiungere funzionalità specifiche al sito; queste funzionalità funzionano indipendentemente dal tema scelto, permettendo ad esempio di creare moduli di contatto, ottimizzare i contenuti per i motori di ricerca (SEO) o aggiungere un carrello della spesa per le attività di e-commerce. I plugin determinano “cosa” il sito può fare. Un buon principio di progettazione è quello di inserire il codice relativo all’aspetto visivo e al layout all’interno del tema stesso, mentre il codice legato alle funzionalità essenziali del sito dovrebbe essere realizzato come plugin, in modo da garantire che queste funzionalità non vengano perse in caso di cambio di tema.

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: