Dall’inizio alla perfezione: Guida completa e tutorial pratico per lo sviluppo di temi per WordPress

I concetti fondamentali e le basi dello sviluppo di temi per WordPress

Prima di iniziare a scrivere qualsiasi codice, è fondamentale comprendere i concetti fondamentali di un tema WordPress. Un tema WordPress è essenzialmente un insieme di file che definiscono l’aspetto visivo del sito web, compresi la disposizione delle pagine, i colori e i stili dei caratteri. Segue una struttura di directory specifica e interagisce con il sistema principale di WordPress per visualizzare i contenuti in modo dinamico.

Il cuore del tema sono i file di template. Questi file, basati su PHP, determinano il modo in cui vengono visualizzati i diversi tipi di contenuti. Ad esempio,index.phpQuesto è il file del template principale, utilizzato come soluzione di fallback quando WordPress non trova un template più specifico. La pagina iniziale (la homepage) viene solitamente generata utilizzando questo file.home.php或front-page.phpControllo: Un singolo articolo è…single.phpIl controllo è gestito da…, mentre la pagina è creata da…page.phpControllo.

Un altro file chiave è…style.cssNon si tratta soltanto degli stili grafici (stylesheet) del tema, ma funge anche da “carta d’identità” del tema stesso. Il blocco delle note nella parte iniziale di questo file contiene metadati importanti come il nome del tema, l’autore, la descrizione e il numero di versione. Senza queste informazioni corrette…style.cssWordPress non riconoscerà il tuo tema. La sua struttura di base è la seguente:

Si consiglia di leggere Guida completa allo sviluppo di temi per WordPress: dal principiante all’esperto, con tutorial pratici。

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 开发者名称
Author URI: https://example.com
Description: 这是一个为学习而创建的WordPress主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Costruisci la struttura del tuo primo file tematico

Per creare un tema completo e ben strutturato, è necessario seguire un approccio standard per l’organizzazione dei contenuti e dei file. Un tema di base, ma completo, può essere costruito partendo da alcune file fondamentali.

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).

pagina di accesso

Oltre a quanto menzionato sopra…index.php和style.cssInoltre, un tema solido (o “robusto”) per un sito web include solitamente i seguenti file chiave:
1. functions.phpQuesto rappresenta il “cervello” del tema, utilizzato per aggiungere funzionalità specifiche del tema, il menu di registrazione, la barra laterale (area Widget), i file di script da caricare, i file di stile, e altro ancora. Non si tratta di un file di template, ma ogni tema dovrebbe includerlo.
2. header.phpStruttura HTML che include la parte iniziale dei documenti del sito web, il menu di navigazione e l’inizio della pagina stessa.
3. footer.phpContiene le informazioni sul copyright, i script e le tag di chiusura presenti in fondo alla pagina.
4. sidebar.phpDefinire la struttura HTML del menu laterale.
5. page.php 和 single.phpVengono utilizzati rispettivamente per rendere le pagine statiche e un singolo articolo.

Un flusso di lavoro di sviluppo efficiente prevede la creazione di un file di template principale.index.phpPer richiamare questi file, utilizzate le funzioni di template integrate in WordPress:

<p><strong>Questo è un testo di esempio.</strong></p>

<main id="main">
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 显示内容
            the_title( &#039;<h1>', '</h1>' );
            the_content();
        endwhile;
    else :
        echo '<p>没有找到内容。</p>';
    endif;
    ?&gt;
</main>

在functions.phpIn questo contesto, è possibile procedere in diversi modi…add_actionGli “hook” (meccanismi di integrazione) vengono utilizzati per registrare nuove funzionalità, ad esempio per aggiungere il supporto alle miniature degli articoli (immagini rappresentative).

<?php
// 为主题添加基本支持
function mytheme_setup() {
    // 启用文章和页面上的“特色图像”功能
    add_theme_support( 'post-thumbnails' );
    // 添加对HTML5标记的支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
    // 注册一个主导航菜单
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

Utilizzare i livelli dei template e i sistemi di ciclo.

Il sistema di gerarchia dei template di WordPress rappresenta un insieme di regole che determinano quale file di template venga utilizzato in risposta a una richiesta di una pagina specifica. Comprendere questa struttura gerarchica è fondamentale per lo sviluppo di temi avanzati, poiché consente di creare layout altamente personalizzati per diverse parti del sito web.

Si consiglia di leggere Imparare dall'inizio lo sviluppo di temi WordPress: creare un sito web personalizzato.。

Quando un utente visita il tuo sito web, WordPress cerca il file di template appropriato in base al tipo di contenuto attuale (ad esempio, un articolo del blog, una pagina, un archivio di categorie, ecc.). L’ordine della ricerca segue il principio dal più specifico al più generico. Ad esempio, per una pagina con l’ID 5, WordPress cercherà sequenzialmente:
1. page-5.php (Creato appositamente per l’ID di questa pagina)
2. page-sample-page.php (Usare l’alias della pagina)
3. page.php (Template per pagine generiche)
4. singular.php (Template per contenuti unici, utilizzabile in contesti generali)
5. index.php (Retrazione finale)

Il cuore di tutta la visualizzazione dei contenuti è il “WordPress Loop”. Si tratta di un blocco di codice PHP utilizzato per iterare attraverso l’insieme di risultati ottenuti dalla query attuale e per visualizzare ciascun articolo o pagina. La struttura di base del loop è più o meno la stessa in qualsiasi file di template.

<?php
if ( have_posts() ) :
    while ( have_posts() ) : the_post();
        // 当前文章/页面的内容在这里输出
        the_title( &#039;<h2 class="entry-title"><a href="/it/' . esc_url( get_permalink() ) . '/">', '</a></h2>' );
        the_excerpt(); // 或使用 the_content()
    endwhile;
    the_posts_navigation(); // 文章导航链接
else :
    // 如果没有找到任何内容
    _e( '抱歉，没有找到符合您要求的内容。', 'textdomain' );
endif;
?&gt;

Per migliorare la modularità e la manutenibilità dei template, WordPress incoraggia l’uso di…get_template_part()Funzioni: Questo ti permette di separare il codice di visualizzazione comune (ad esempio, i riassunti degli articoli o i metadati degli articoli) in file separati, in modo da poterlo riutilizzare più volte.

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%

pagina di accesso

// 在 archive.php 或 index.php 中
while ( have_posts() ) : the_post();
    get_template_part( 'template-parts/content', get_post_format() );
endwhile;

Questo codice cercherà di caricare…template-parts/content-{post-format}.php(Per esempio)content-video.phpSe non esiste, caricalo.template-parts/content.php。

Funzionalità avanzate: Personalizzatore di temi e campi personalizzabili

Lo sviluppo di temi per WordPress moderni si concentra non solo sull’aspetto estetico, ma anche sul fornire agli utenti opzioni di personalizzazione intuitive. Il Personalizer di WordPress offre un’interfaccia di anteprima in tempo reale, che permette di modificare le impostazioni del tema senza dover toccare il codice sorgente.

在functions.phpIn questo contesto, puoi utilizzare…$wp_customizeGli oggetti vengono utilizzati per aggiungere impostazioni, controlli e blocchi di contenuto. Ad esempio, è possibile aggiungere un’opzione per visualizzare il testo del copyright nella parte inferiore della pagina.

Si consiglia di leggere Da zero a uno: padroneggia le competenze fondamentali e le linee guida pratiche per lo sviluppo di temi WordPress moderni。

function mytheme_customize_register( $wp_customize ) {
    // 添加一个新的设置
    $wp_customize->add_setting( 'mytheme_footer_text', array(
        'default'           => '© 2026 我的网站。保留所有权利。',
        'sanitize_callback' => 'sanitize_text_field',
        'transport'         => 'postMessage', // 实现实时预览
    ) );

// 添加一个控件来编辑这个设置
    $wp_customize->add_control( 'mytheme_footer_text', array(
        'label'    => __( '页脚版权文本', 'my-first-theme' ),
        'section'  => 'title_tagline', // 放在“站点身份”区域
        'type'     => 'text',
    ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );

Poi, infooter.phpIn questo contesto, è possibile procedere in diversi modi…get_theme_mod()La funzione restituisce questo valore:

echo esc_html( get_theme_mod( 'mytheme_footer_text', '默认版权文本' ) );

Per strutture di contenuto più complesse, i metadati degli articoli (campi personalizzati) e le estensioni dei sistemi di classificazione rappresentano strumenti molto efficaci. È possibile implementarli utilizzando plugin per campi personalizzati avanzati (Advanced Custom Fields, ACF) o funzioni native di WordPress. Ad esempio, è possibile aggiungere un campo “Durata di lettura” agli articoli.

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.

pagina di accesso

// 在 single.php 中显示自定义字段
$reading_time = get_post_meta( get_the_ID(), 'reading_time_minutes', true );
if ( $reading_time ) {
    echo '<span class="reading-time">Tempo di lettura: ''.intval($reading_time).’ minuti</span>';
}

Per creare pagine più dinamiche, uno strumento molto utilizzato è la creazione di modelli di pagina personalizzati. Basta aggiungere un blocco di commenti specifico all’inizio del file PHP; tale blocco apparirà poi nell’elenco a discesa relativo ai “modelli” della pagina.

<?php
/*
Template Name: 全宽页面模板
*/
get_header();
?>
<!-- 你的全宽内容布局代码 -->
<?php get_footer(); ?>

Riassumendo

Lo sviluppo di temi per WordPress rappresenta una competenza complessiva che integra design, tecnologie front-end e logica back-end. Per iniziare, è fondamentale comprendere i concetti di base…style.css和index.phpAll’inizio del file, è fondamentale imparare gradualmente le regole relative alle strutture dei modelli e i sistemi di ciclazione: queste conoscenze costituiscono la base per creare temi funzionali. Modulare la struttura di un tema e saperla utilizzare al meglio permette di…functions.php和get_template_part()Le funzioni possono migliorare notevolmente la manutenibilità e la riutilizzabilità del codice.

Nella fase avanzata, l’integrazione profonda con i personalizzatori di temi offre all’utente un’esperienza di configurazione semplice e in tempo reale; inoltre, l’utilizzo flessibile di campi personalizzabili e modelli di pagina permette di creare layout di contenuti in grado di soddisfare esigenze complesse. Seguire gli standard di codifica ufficiali di WordPress e le migliori pratiche è fondamentale per garantire che il tuo tema sia sicuro, efficiente e compatibile con l’intero ecosistema WordPress. Questo rappresenta il passo essenziale per elevare le tue competenze di sviluppo da “funzionali” a “eccellenti”.

FAQ - Domande frequenti

Qual è la differenza tra i temi (templates) e i plugin per WordPress?

Il tema principale controlla l’aspetto estetico del sito web e la sua visualizzazione in modalità front-end, determinando la struttura del sito, i colori utilizzati, la formattazione del testo e altre caratteristiche visive. Interagisce direttamente con la gerarchia dei template di WordPress tramite file di template.

I plugin servono per estendere le funzionalità di un sito web, permettendo di aggiungere nuove caratteristiche senza modificare l’aspetto esteriore del sito stesso. Ad esempio, è possibile integrare moduli di contatto, strumenti per l’ottimizzazione dei motori di ricerca o funzionalità di e-commerce. Un sito web può attivare soltanto un tema alla volta, ma è possibile installare e attivare più plugin.

Qual è il metodo corretto per registrare stili e script in functions.php?

Il metodo corretto da utilizzare è…wp_enqueue_scriptsGanci (hooks): Questi elementi garantiscono che le dipendenze vengano gestite correttamente e evitano il caricamento ripetuto dei file necessari. Ecco un esempio standard:

function mytheme_enqueue_assets() {
    // 注册并排队主样式表
    wp_enqueue_style( 'mytheme-main-style', get_stylesheet_uri(), array(), '1.0.0' );
    // 注册并排队一个自定义JavaScript文件
    wp_enqueue_script( 'mytheme-custom-script', get_template_directory_uri() . '/js/custom.js', array('jquery'), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_assets' );

Assolutamente non utilizzare direttamente i contenuti all’interno dei file di template.link或scriptL’inserimento dei file di risorse tramite codice hardcoded nelle etichette (tags) non segue le migliori pratiche di WordPress e può causare conflitti o problemi di prestazioni.

Cosa è un sottotema (subtopic), perché utilizzarlo e come farlo?

Un sottotema (subtopic) è un tema che dipende da un altro tema (chiamato tema principale, o parent theme). Permette di modificare o estendere le funzionalità e gli stili del tema principale senza dover modificare direttamente i suoi file. Il vantaggio di questo approccio è che, quando il tema principale viene aggiornato, le modifiche personalizzate apportate nel sottotema non vengono sovrascritte, garantendo così sicurezza e facilitando la manutenzione.

Creare un sottotema è molto semplice. Per prima cosa…/wp-content/themes/Crea una nuova cartella all’interno del directory (ad esempio…).mytheme-childPoi, all’interno di esso, creare un altro elemento (o struttura).style.cssIl file deve contenere, nella sua parte iniziale, delle note (commenti) obbligatorie.Template:Si specifica il nome della directory del tema padre tramite questa riga di codice.

/*
Theme Name: 我的主题子主题
Template: my-first-theme
*/

In seguito, potrai lavorare sui sottotemi…style.cssAggiungi regole di stile al file appropriato, oppure crea un file di template con lo stesso nome per sovrascrivere il file di template corrispondente del tema genitore.

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

Far sì che il tuo tema sia compatibile con l’internazionalizzazione (i18n) e la localizzazione rappresenta un passo importante verso uno sviluppo professionale. È necessario utilizzare le funzionalità di localizzazione fornite da WordPress per incapsulare tutte le stringhe di testo che vengono visualizzate all’utente sul lato frontend.

Prima di tutto, utilizzare il metodo di traduzione in tutti i punti in cui i testi sono disponibili per la traduzione.__()(Usato per i valori restituiti) o_e()(Per l’echeggiamento diretto di una funzione) e impostare un campo di testo (Text Domain).functions.phpIn cinese, usareload_theme_textdomain()La funzione carica i file di traduzione.

// 在 functions.php 中
function mytheme_load_textdomain() {
    load_theme_textdomain( 'my-first-theme', get_template_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'mytheme_load_textdomain' );

// 在模板文件中使用
_e( '阅读更多', 'my-first-theme' );
$heading = __( '最新文章', 'my-first-theme' );

Successivamente, puoi utilizzare strumenti come Poedit per analizzare le stringhe presenti nei file dei temi e generare il contenuto necessario..potFile, e crearne versioni per diverse lingue..po和.moI documenti, collocati sotto il tema/languages/All’interno della directory.