Pagina iniziale/Conoscenza/WordPress/Dettagli del contenuto

Creare un tema WordPress perfetto: costruirlo da zero e guida alle migliori pratiche.

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

Preparazioni e configurazione dell’ambiente

Prima di iniziare a scrivere il codice, è fondamentale creare un ambiente di sviluppo efficiente e standardizzato. Questo non solo migliora l’efficienza dello sviluppo, ma garantisce anche la robustezza e la manutenibilità del codice stesso.

Configurazione dell’ambiente di sviluppo locale

Consigliamo di utilizzare software per l’ambiente di server locale, come Local by Flywheel, XAMPP o MAMP. Questi strumenti permettono di configurare rapidamente sul vostro computer i servizi necessari per il funzionamento di WordPress, ovvero PHP, MySQL e il server web. Dopo aver installato l’ambiente locale, scaricate i file principali di WordPress più recenti e completate il processo di installazione standard, creando così un ambiente “sandbox” pulito e sicuro per lo sviluppo di temi personalizzati.

Struttura del catalogo tematico e file principali

Un tema standard per WordPress deve essere posizionato nella directory appropriata del sito web. Di solito, questa directory si trova all’interno della directory “wp-content/themes”. wp-content/themes All’interno del directory, ogni argomento dovrebbe avere una cartella separata; il nome della cartella dovrà corrispondere all’identificatore dell’argomento stesso. All’interno di questa cartella, devono essere creati due file principali:style.css 和 index.php。

Si consiglia di leggere Sviluppo di temi per WordPress: Da principianti a esperti: Una guida completa per la creazione di temi personalizzati。

style.css Non si tratta solo di un file di stili (stylesheet), ma anche di un contenitore di metadati relativi al tema stesso. La parte iniziale del file deve contenere un commento formattato, utilizzato per comunicare a WordPress le caratteristiche e le funzionalità del tema.

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-perfect-theme
Author: 你的名字
Author URI: https://example.com
Description: 一个从零开始打造的现代化WordPress主题，遵循最佳实践。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-perfect-theme
*/

index.php Si tratta del file di template predefinito per il tema, utilizzato come modello di base per tutte le pagine del sito. Inizialmente, può contenere soltanto la struttura HTML di base e i cicli necessari per il funzionamento di WordPress.

Creare un modello di base per un tema

I file di template determinano il modo in cui vengono visualizzati i diversi componenti di un sito web (come la pagina principale, gli articoli, le singole pagine e le pagine di archivio). Comprendere la struttura gerarchica dei template è fondamentale per creare temi (design grafici) flessibili e adattabili alle esigenze dell’utente.

Comprendere i livelli delle template e il file della template principale

WordPress cerca il file del template corrispondente in base all’URL richiesto, seguendo un insieme preciso di regole di priorità. Ad esempio, quando si accede a un articolo del blog, WordPress cerca i file del template in ordine determinato. single-post.php、single.php、singular.phpE, infine, index.phpOltre a… index.phpAltri file di template principali comunemente utilizzati includono:
* header.phpHeader della pagina web<head> Area e intestazione della pagina.
* footer.phpParte inferiore della pagina del sito web.
* sidebar.phpBarra laterale.
* functions.phpFile di funzionalità tematiche, utilizzati per aggiungere nuove funzionalità, registrare menu, ecc.
* front-page.phpPersonalizzare la pagina iniziale.
* page.phpTemplate a pagina singola.
* single.phpModello per un singolo articolo.
* archive.phpTemplate per la pagina degli archivi (categorie, etichette, autori, ecc.).

Separare la parte superiore (header) dalla parte inferiore della pagina (footer).

Per rispettare il principio DRY (Don’t Repeat Yourself), le parti comuni dovrebbero essere separate e rese disponibili in modo da poter essere riutilizzate in più contesti. header.php Il file contiene… <!DOCTYPE html> Tutto il codice che si trova prima dell’inizio del corpo principale della pagina, in particolare… wp_head() La chiamata a funzione consente ai plugin e ai temi di interagire tra loro. <head> Inserisci il codice necessario al suo interno.

Si consiglia di leggere Lo sviluppo di temi WordPress, dall'inizio alla perfezione: una guida completa per creare siti web professionali.。

Creare footer.php Il file contiene il contenuto in fondo alla pagina e si conclude… <p>Io non sono un'attrice.</p> Chiamare prima dell’etichetta wp_footer() Funzione.

Poi, in index.php Utilizzato nei modelli di attesa. get_header() 和 get_footer() Le funzioni le introducono.

<?php get_header(); ?>

<main id="primary" class="site-main">
    <!-- 主内容区域 -->
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            // 显示内容
        endwhile;
    endif;
    ?>
</main>

<?php get_sidebar(); // 如果存在 ?>
<?php get_footer(); ?>

Integrazione delle funzionalità e delle caratteristiche principali

Un tema completo e funzionale deve integrare le funzionalità di base di WordPress, come il menu di navigazione, l’area degli strumenti (widgets) e le immagini di rilievo per gli 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

Menù di navigazione registrato e area dei widget

在 functions.php Nel file, viene utilizzato… register_nav_menus() La funzione permette di definire le impostazioni relative alla posizione dei menu all’interno di un tema.

function my_perfect_theme_setup() {
    register_nav_menus(
        array(
            'menu-1' => esc_html__( '主导航', 'my-perfect-theme' ),
            'footer' => esc_html__( '页脚导航', 'my-perfect-theme' ),
        )
    );
}
add_action( 'after_setup_theme', 'my_perfect_theme_setup' );

Allo stesso modo, utilizzare… register_sidebar() Funzione per registrare le aree dedicate agli strumenti aggiuntivi (barre laterali).

Nel file di template (ad esempio…) header.phpNel testo fornito, non è presente alcun contenuto specifico da tradurre. Potresti fornire il testo che desideri tradurre in italiano, così potrò eseguire il lavoro per te. wp_nav_menu() Esiste una funzione per visualizzare il menu. sidebar.php In cinese, usare dynamic_sidebar() Una funzione per visualizzare l’area degli strumenti aggiuntivi (widget).

Si consiglia di leggere Guida completa allo sviluppo di temi WordPress: dalla creazione di un tema da zero alla costruzione di un sito web professionale.。

Aggiungere il supporto per i temi e le immagini caratteristiche.

Molte funzionalità di WordPress richiedono una dichiarazione esplicita di “supporto”. functions.php 的 my_perfect_theme_setup Nella funzione, viene utilizzato… add_theme_support() Esistono funzioni per abilitarle.

function my_perfect_theme_setup() {
    // ... 之前的菜单注册代码 ...

// 添加主题支持
    add_theme_support( 'title-tag' ); // 让WordPress管理页面标题
    add_theme_support( 'post-thumbnails' ); // 启用文章特色图像
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption', 'style', 'script' ) ); // 启用HTML5标记支持
    add_theme_support( 'customize-selective-refresh-widgets' ); // 在定制器中实时预览小工具
}

Dopo aver abilitato la funzione “Immagini di rilievo”, nell’interfaccia di editing degli articoli e delle pagine apparirà un riquadro dedicato a queste immagini; gli utenti potranno quindi caricarne di nuove. Per utilizzare questa funzionalità nei modelli, basta seguire le indicazioni fornite dal sistema. the_post_thumbnail() Utilizzare una funzione per mostrarlo.

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

Seguire le migliori pratiche di sicurezza e prestazioni.

Quando si sviluppa un tema, la sicurezza, le prestazioni e la manutenibilità sono altrettanto importanti come gli effetti visivi.

Estrarre e visualizzare i dati in modo sicuro, nonché escaparli correttamente.

Non fidarti mai dei dati provenienti dagli utenti, dai database o da qualsiasi altra fonte esterna. L’output diretto di tali dati può comportare attacchi di tipo Cross-Site Scripting (XSS). WordPress offre una serie di funzioni di escape per garantire che i dati vengano visualizzati in modo sicuro, nel contesto appropriato.
* esc_html()“:” viene utilizzato per il testo puro; serve per escapare i tag HTML.
* esc_attr()Utilizzato nei valori degli attributi HTML.
* esc_url()`: Utilizzato per purificare gli URL.
* wp_kses_post()Tag HTML di contenuto degli articoli consentiti.

Ad esempio, quando si visualizzano campi personalizzati o titoli:

<h2><?php echo esc_html( get_the_title() ); ?></h2>
<div class="description">ID, '_custom_desc', true ) ); ?&gt;</div>

正确地排入脚本与样式表

Non dovrebbe essere utilizzato direttamente nei file di template. <link> 或 <script> I tag introducono risorse. È necessario utilizzare wp_enqueue_scripts Gancio, passato attraverso… wp_enqueue_style() 和 wp_enqueue_script() La funzione viene utilizzata per effettuare il caricamento dei dati.

function my_perfect_theme_scripts() {
    // 排入主样式表
    wp_enqueue_style( 'my-perfect-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );

// 排入主JavaScript文件
    wp_enqueue_script( 'my-perfect-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );

// 为评论回复功能添加条件加载
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_perfect_theme_scripts' );

Questo metodo consente a WordPress di gestire le dipendenze e il controllo delle versioni, assicurando che i risorse vengano caricate nei luoghi corretti; inoltre, facilita l’overwriting (l’alterazione dei contenuti) da parte dei sottotempi (subthemes).

Riassumendo

Costruire un tema WordPress da zero rappresenta una pratica preziosa per comprendere a fondo l’architettura di base di WordPress. L’intero processo inizia con la configurazione dell’ambiente e la creazione dei file di base; l’elemento chiave consiste nel creare strutture di pagine flessibili attraverso il sistema di gerarchia dei template. functions.php Integrare funzionalità chiave come la navigazione, gli strumenti utili (widget) e le immagini di rilievo è fondamentale per creare un tema efficace. Inoltre, applicare best practice come l’output sicuro dei dati e l’organizzazione corretta dei risorse è essenziale per garantire che il tema sia sia bello da vedere che funzionale, sicuro e ad alto rendimento. Seguendo questi passaggi e principi, sarà possibile creare un tema di alta qualità che risponda agli standard, sia facile da mantenere e sia progettato per il futuro.

FAQ - Domande frequenti

È obbligatorio utilizzare i sottotemi (subtopics) nello sviluppo di temi (topics)?

Non è obbligatorio, ma è fortemente consigliato. Se state modificando un tema esistente, creare un sottotema è l’unico modo sicuro e sostenibile per procedere. Questo vi permette di aggiungere o sovrascrivere funzionalità senza modificare i file principali del tema padre, garantendo che le vostre modifiche non vengano perse in caso di aggiornamenti del tema stesso. Se invece state sviluppando un nuovo tema da zero, create direttamente il tema padre.

Come posso aggiungere tipi di articoli personalizzati al mio tema?

Hai bisogno di… (in riferimento al contenuto o all’azione da svolgere all’interno del tema) functions.php Utilizzato nel file. register_post_type() Questa è una funzione molto potente che richiede una configurazione attenta dei tag, dei parametri e delle autorizzazioni. Si consiglia di registrare i tipi di articoli personalizzati all’interno del plugin, al fine di mantenere l’integrità delle funzionalità del tema: in questo modo, anche cambiando tema, le funzionalità relative ai dati rimarranno disponibili.

Perché il mio stile o script personalizzato non viene caricato?

La causa più comune è… wp_enqueue_scripts L’hook non è stato utilizzato correttamente, oppure il percorso del file è errato. Assicurati che il codice che hai inserito sia stato inserito nel posto giusto. wp_enqueue_scripts Aggiungere questo elemento ai “action hooks” (per il lato front-end) e utilizzarlo. get_template_directory_uri() Per ottenere l’URL corretto del catalogo dei temi, è necessario verificare anche se nella console di sviluppo del browser viene visualizzato un errore 404.

Come posso far sì che il mio tema supporti la traduzione in più lingue?

Questo processo viene definito “internazionalizzazione” (i18n). È necessario utilizzare le funzioni di traduzione fornite da WordPress in tutti i testi rivolti agli utenti. ()、_e()、esc_html() E così via, specificando anche quando… style.css Il campo di testo definito nella parte superiore del documento (Text Domain). Successivamente, utilizzare uno strumento come Poedit per crearlo. .pot File di template, e generare i relativi contenuti. .po 和 .mo File da tradurre.

Dopo aver completato lo sviluppo del tema, come si prepara la sua pubblicazione nel catalogo ufficiale di WordPress?

Il catalogo ufficiale impone requisiti rigorosi. È necessario assicurarsi che il codice sia conforme agli standard di codifica di WordPress, che tutte le funzionalità siano correttamente “escape” (cioè che i caratteri pericolosi siano stati sostituiti con quelli sicuri), che non ci siano link hardcodati, che vengano utilizzate le funzionalità native di WordPress invece di implementazioni personalizzate per soddisfare esigenze comuni (ad esempio, la navigazione a pagine), che vengano forniti documentazioni complete e screenshot, e che il software venga testato a fondo in un ambiente reale. Per le specifiche dettagliate, si prega di consultare il “WordPress Theme Review Handbook”.

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: