Pagina iniziale/Conoscenza/WordPress/Dettagli del contenuto

Guida definitiva per i principianti: creare da zero un tema personalizzato per WordPress

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

Preparativi e allestimento dell'ambiente.

Prima di iniziare a scrivere il codice, è fondamentale creare un ambiente di sviluppo locale efficiente e professionale. Questo non solo ti permetterà di effettuare test senza influenzare il sito web online, ma aumenterà anche notevolmente l’efficienza dello sviluppo.

Configurazione dell’ambiente di sviluppo locale

Consigliamo l’utilizzo di pacchetti software per server locali, come Local by Flywheel, MAMP o XAMPP. Questi strumenti permettono di installare facilmente Apache/Nginx, PHP e MySQL sul proprio computer, simulando in modo perfetto l’ambiente di un server online con un solo clic. Dopo l’installazione, crea un nuovo sito WordPress e assicurati che la versione di PHP utilizzata sia compatibile con le ultime richieste di WordPress.

Creare il directory di base e i file per un tema

Un tema WordPress è essenzialmente un insieme di file che definiscono l'aspetto e il funzionamento di un sito web WordPress. /wp-content/themes/ I folder presenti nel directory… Per prima cosa, crea un folder unico per il tuo argomento di lavoro, ad esempio: my-custom-themeAll’interno di quella cartella, devi creare due file principali:style.css 和 index.php。

Si consiglia di leggere Sviluppo di temi WordPress: una guida completa e un tutorial pratico da zero a livello avanzato.。

style.css Non si tratta semplicemente di un file di stili (stylesheet), ma piuttosto dell“”identificativo” di un tema (theme). Il blocco di commenti presente in cima a tale file viene utilizzato per comunicare informazioni sul tema a WordPress. Ecco un esempio di intestazione di un file di stili di base:

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: My Custom Theme
Theme URI: https://example.com/my-custom-theme
Author: Your Name
Author URI: https://example.com
Description: 这是一个为学习目的而创建的个性化 WordPress 主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

index.php Si tratta del file di template predefinito per il tema; deve essere presente anche in assenza di altri file di template. In questo caso, puoi inizialmente scrivere una semplice struttura HTML al suo interno per effettuare dei test.

Costruire il file del modello centrale del tema

WordPress utilizza un sistema a livelli di template per determinare come visualizzare i diversi tipi di contenuti. Comprendere e creare questi file di template fondamentali rappresenta la base dello sviluppo di temi (temi personalizzati per il sito).

Creare template per la parte superiore e inferiore del sito web

Per realizzare il riutilizzo del codice, dobbiamo separare la parte superiore (Header) e la parte inferiore (Footer) della pagina web in file indipendenti. Creiamo questi file. header.php Il file dovrebbe contenere i dati provenienti da… Dall’inizio all’apertura Tutto il codice che precede l’etichetta è importante; l’essenziale è che venga incluso. wp_head() Chiamata di funzione.

<!DOCTYPE html>
<html no numeric noise key 1006>
<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 1003>
<p><strong>Questo testo è stato tradotto automaticamente.</strong></p>
<header>
    <h1><a href="/it/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
</header>

Allo stesso modo, creare… footer.php Il file dovrebbe contenere il contenuto del piede di pagina e dovrà essere creato tramite una chiamata… wp_footer() La funzione termina con la chiusura della relativa etichetta. Poi, index.php In cinese, usare get_header() 和 get_footer() Si utilizzano funzioni per introdurle.

Si consiglia di leggere Analisi completa dello sviluppo di temi per WordPress: una guida pratica dall’approccio iniziale all’espertizzazione。

Progettare cicli di articoli e contenuti per le pagine web

Il ciclo degli articoli è il meccanismo fondamentale di WordPress per ottenere e visualizzare gli articoli dal database. index.php Nella parte principale del testo, è necessario utilizzare una struttura di ciclo standard.

<?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>
    &lt;?php endwhile;
else :
    echo &#039;<p>暂无文章。</p>';
endif;
?&gt;

Successivamente, verrà creato un modello per la pagina di un singolo articolo. single.phpPer creare pagine statiche… page.phpPuoi anche creare… front-page.php Come homepage personalizzata, o… archive.php Per visualizzare elenchi di archiviazione che includono categorie, etichette e altri elementi correlati.

Aggiungere funzionalità e stili

Un tema completo non richiede soltanto una struttura, ma anche funzionalità interattive e un design visivo. Questo viene realizzato attraverso file funzionali e fogli di stile (style sheets).

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

Introduzione del supporto alla funzionalità di gestione dei temi.

Creare functions.php File: Questo file viene utilizzato per estendere le funzionalità del tema. Non è obbligatorio, ma è estremamente importante. Qui puoi registrare i menu, abilitare le immagini di rappresentazione del tema, aggiungere il supporto per i temi, e molto altro ancora.

<?php
function my_theme_setup() {
    // 让 WordPress 管理标题标签
    add_theme_support( 'title-tag' );
    // 启用文章和页面的特色图像
    add_theme_support( 'post-thumbnails' );
    // 注册一个导航菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

// 引入样式表和脚本
function my_theme_scripts() {
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/script.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );
?>

Scrivere un foglio di stile responsive

在 style.css Sotto le informazioni relative alla dichiarazione del tema, inizia a scrivere il tuo codice CSS. Il tema deve essere responsive, adattarsi automaticamente a diversi dispositivi e dimensioni di schermo. Si consiglia di seguire il principio del “mobile first” (dare priorità alle funzionalità per dispositivi mobili) e di utilizzare i query di media CSS per personalizzare l’aspetto del sito in base alle dimensioni dello schermo.

/* 基础样式 - 移动设备 */
body { font-family: sans-serif; margin: 0; }
.container { width: 100%; padding: 1rem; }
/* 平板设备及以上 */
@media (min-width: 768px) {
    .container { max-width: 720px; margin: 0 auto; }
}
/* 桌面设备 */
@media (min-width: 992px) {
    .container { max-width: 960px; }
}

Puoi creare file CSS aggiuntivi e utilizzarli per personalizzare l’aspetto del sito web. functions.php 中的 wp_enqueue_style() Introdurre questo elemento per mantenere un’organizzazione ordinata del codice.

Si consiglia di leggere Analisi approfondita dello sviluppo di temi per WordPress: una guida pratica completa dall’introduzione all’espertizzazione。

Advanced Theme Development Techniques

Una volta acquisite le basi, le seguenti tecniche permetteranno di rendere il tuo argomento più professionale e efficace.

Creare tipi di articoli personalizzati e barre laterali

Per raccolte di opere, prodotti o altri contenuti non standard, è possibile utilizzare i seguenti metodi: functions.php 中的 register_post_type() La funzione crea un tipo di articolo personalizzato. Inoltre, viene utilizzata… register_sidebar() Una funzione per creare l’area dei widget (barra laterale), da utilizzare nei template. dynamic_sidebar() La funzione la chiama.

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

Implementare l’internazionalizzazione dei sottotemi e dei temi principali.

Per assicurarti che i tuoi modifiche non vengano perse quando vengono aggiornati i temi, ti consigliamo caldamente di creare un “sottotema” per il tuo tema personalizzato. Il sottotema richiede soltanto… style.css E uno functions.phpErede tutte le funzionalità del tema padre e ti consente di sovrascrivere gli stili e le funzionalità in modo sicuro.

Inoltre, per consentire all’uso del tema da parte di utenti in tutto il mondo, è necessario prepararlo per l’internazionalizzazione. Ciò significa utilizzare, nel codice, i testi che devono essere tradotti in tutte le lingue appropriate. __() 或 _e() Avvolgere le funzioni di traduzione in un oggetto e impostarne correttamente il funzionamento. Text DomainSuccessivamente, è possibile utilizzare strumenti come Poedit per generare il contenuto desiderato. .pot Traduci il file di template.

Riassumendo

Creare un tema WordPress da zero rappresenta un processo di apprendimento sistematico che copre l’intero percorso, dall’installazione dell’ambiente di sviluppo, alla grammatica dei template in PHP, alla struttura dei file di base del sistema, fino all’espansione delle funzionalità e alla progettazione degli stili grafici. La chiave per imparare davvero è la pratica: inizia creando il tema più semplice possibile… style.css 和 index.php Inizia aggiungendo gradualmente la parte superiore del sito (header), la parte inferiore (footer), i cicli (loop) e, infine, i meccanismi per la gestione dei flussi di dati (flow management). functions.php Funzionalità aggiuntive: Comprendere la struttura gerarchica dei template e il funzionamento delle funzioni “hook” è fondamentale per avanzare nel proprio percorso di apprendimento. Alla fine, creando sottotemi (subtopics) e preparando il codice per l’internazionalizzazione, il tuo lavoro acquisirà un livello di manutenibilità e estensibilità professionale. Ricorda che il modo migliore per imparare è continuare a scrivere codice, testarlo e iterare sui risultati ottenuti.

FAQ - Domande frequenti

Per sviluppare temi per WordPress con il codice ###, è necessario conoscere a fondo PHP?
Sì, è necessario disporre di una solida conoscenza di PHP, poiché il nucleo di WordPress e il suo sistema di template sono sviluppati principalmente in PHP. È fondamentale comprendere la grammatica di PHP, le funzioni, i cicli e come interagire con l’API di WordPress (ad esempio, gli hook e le funzioni). Inoltre, è essenziale padroneggiare HTML, CSS e i fondamenti di JavaScript.

Perché il mio tema non viene visualizzato nel backend?

Di solito, questo è dovuto a… style.css Il problema deriva da un formato errato o dall’assenza del blocco di note con le informazioni sul tema posizionato in cima al file. Assicurati di compilare correttamente i campi come “Theme Name” e “Author”, seguendo il formato specificato. Inoltre, verifica se la cartella contenente i temi è stata posizionata correttamente nella directory radice della tua cartella dei temi. /wp-content/themes/ È nel percorso.

get_template_part() 函数有什么用处？

get_template_part() Le funzioni rappresentano una delle migliori pratiche per organizzare il codice. Vengono utilizzate per recuperare dati da altri file (ad esempio…). content.php, sidebar.phpI frammenti di codice vengono caricati all’interno di specifici file, evitando così la ripetizione della stessa struttura HTML in più file di template. Questo aumenta notevolmente la riutilizzabilità e la manutenibilità del codice.

Come posso rendere il mio tema compatibile con l’editor di Gutenberg?

Per rendere il tema più compatibile con l’editor Gutenberg, è necessario… functions.php Aggiungere il supporto per i temi correlati. Ad esempio, utilizzare… add_theme_support(‘editor-styles’) Per caricare i stilisti dell’editor, utilizza… add_theme_support(‘wp-block-styles’) Per supportare lo stile dei blocchi front-end, è anche possibile utilizzare… add_theme_support(‘responsive-embeds’) È importante rendere il contenuto inserito responsive (adattabile a diversi dispositivi e dimensioni di schermo). È inoltre fondamentale scrivere gli stili grafici per i blocchi più utilizzati, come i blocchi di gruppo e i blocchi di copertina.

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: