Ti insegnerò passo dopo passo come creare un potente tema WordPress personalizzato.

Perché scegliere di costruire un tema per WordPress da zero?

Nel mondo dell’open source esistono un’infinità di temi per WordPress, sia gratuiti che a pagamento, il che spinge molti utenti a preferire il download e l’utilizzo immediato di tali temi. Tuttavia, scegliere di creare un tema personalizzato da zero offre vantaggi indiscutibili. Innanzitutto, permette allo sviluppatore di avere un controllo assoluto sull’aspetto, sulle funzionalità e sulle prestazioni del sito web. È possibile eliminare tutto il codice e le funzionalità non necessarie, creando così una soluzione “leggera” che risponda esattamente alle esigenze del progetto, migliorando notevolmente la velocità di caricamento del sito e l’esperienza dell’utente.

In secondo luogo, i temi personalizzati non rischiano di incorrere in problemi di compatibilità con le funzionalità principali di WordPress o con gli plugin già installati durante gli aggiornamenti, a differenza di alcuni temi di terze parti. È inoltre possibile seguire le migliori pratiche di sviluppo e le linee guida di sicurezza stabilite da WordPress, garantendo così la manutenibilità a lungo termine e la sicurezza del codice sorgente, aspetti particolarmente importanti per i progetti commerciali. Infine, questo rappresenta un ottimo processo di apprendimento che permette di comprendere in profondità la struttura gerarchica dei template di WordPress.WP_QueryL’API per la personalizzazione dei temi, nonché i “hook” (meccanismi di interazione tra componenti del sistema).actions 和 filtersConcetti fondamentali come questi sono essenziali per qualsiasi sviluppatore di WordPress.

I passaggi preparatori includono diversi elementi fondamentali: assicurarsi di disporre di un ambiente di sviluppo per WordPress, sia locale che online; di un editor di codice efficace, come VS Code o PhpStorm; nonché di una conoscenza di base di HTML, CSS, PHP e JavaScript. Ora, diamo inizio alla creazione del primo file relativo a un tema (theme) per WordPress.

Si consiglia di leggere Guida completa allo sviluppo di temi per WordPress: dall’approccio iniziale alla creazione di temi personalizzati avanzati。

Costruire la struttura di base e i file principali di un tema

Un tema WordPress valido deve contenere almeno due file fondamentali:index.php 和 style.cssQuest’ultimo non fornisce soltanto gli stili grafici, ma contiene anche metadati che descrivono il tema per WordPress. Iniziamo creando il directory 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).

pagina di accesso

Creare un catalogo dei temi e un file di stili.

Prima di tutto, nella directory di installazione di WordPress… wp-content/themes/ All’interno della cartella, crea una nuova directory, ad esempio… my-custom-themeTutti i file relativi ai vari argomenti (temi) verranno posizionati in questo luogo.

Successivamente, creare… style.css Si tratta di file che devono essere creati e nella parte iniziale di ciascun file vanno aggiunti i blocchi di commenti necessari. Questi commenti sono essenziali affinché WordPress possa riconoscere il tema corrispondente.

/*
Theme Name: My Custom Theme
Theme URI: https://yourwebsite.com/
Author: Your Name
Author URI: https://yourwebsite.com/
Description: 一个为学习和实践而打造的强大自定义主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

Text Domain Utilizzato per l’internazionalizzazione; sarà necessario utilizzarlo in seguito quando si chiamerà la funzione di traduzione.

Creare un modello di indice di base

index.php È il modello predefinito per i temi e rappresenta anche il punto di ritorno finale nella gerarchia dei modelli. Si tratta di un modello molto basilare. index.php È possibile garantire che il sito web mostri i contenuti in qualsiasi situazione.

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

<!DOCTYPE html>
<html no numeric noise key 1009>
<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 1006>
    <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>
        <p><?php bloginfo( 'description' ); ?></p>
    </header>

<main>
        &lt;?php
        if ( have_posts() ) :
            while ( have_posts() ) :
                the_post();
                // 循环内容将在这里展示
                the_title( &#039;<h2>', '</h2>' );
                the_content();
            endwhile;
        else :
            echo '<p>暂无内容。</p>';
        endif;
        ?&gt;
    </main>

<footer>
        <p>© Copyright ….</p>
    </footer>

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

In questo momento, basta inserire questi due file nella directory del tema e potrai vederlo e attivarlo nella sezione “Aspetto” -> “Temi” dell’interfaccia di amministrazione di WordPress. Anche se sembra molto semplice, si tratta già di un tema completo e funzionale. Successivamente, dovremo introdurre elementi di modularità e miglioramenti alle funzionalità del tema stesso.

Implementare un design a livelli di template e modulare

Ai fini della chiarezza e della manutenibilità del codice, non è consigliabile inserire tutta la struttura HTML all'interno di . index.php Sì. Il sistema di gerarchia dei template di WordPress ci permette di creare file di template specifici per diversi tipi di pagine.

Dividere la parte superiore della pagina (header), la parte inferiore della pagina (footer) e la barra laterale (sidebar).

Creare header.php、footer.php 和 sidebar.php È il primo passo verso la modularizzazione.

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

将 index.php 中 <head> 到 <main> “La parte precedente è stata spostata…” header.php。 <footer> Trasferire la parte successiva… footer.phpPoi, index.php Utilizzare nel contesto get_header() 和 get_footer() Le funzioni le introducono.

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

<main>
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            the_title( &#039;<h2>', '</h2>' );
            the_content();
        endwhile;
    else :
        echo '<p>暂无内容。</p>';
    endif;
    ?&gt;
</main>

<?php get_sidebar(); ?> <!-- 如果创建了侧边栏文件 -->
<?php get_footer(); ?>

Creare un modello per il contenuto degli articoli

Per la visualizzazione del contenuto degli articoli, la pratica migliore è creare una sezione dedicata ai template (modelli grafici o strutturali). content.php 或 template-parts/content.phpMetti la logica di visualizzazione all’interno del ciclo. Dopodiché… index.php Utilizzato all'interno di un ciclo. get_template_part() Chiamalo.

// 在 index.php 的循环中替换为：
while ( have_posts() ) :
    the_post();
    get_template_part( 'template-parts/content', get_post_format() );
endwhile;

Questa funzione cercherà innanzitutto elementi come… content-video.php Per questo tipo di formato specifico, se il template non viene trovato, il sistema torna alla configurazione predefinita. content.php。

Si consiglia di leggere Lo sviluppo di temi WordPress, dall'inizio all'avanzato: una guida fondamentale per creare siti web personalizzati.。

Integrazione delle funzionalità di base di WordPress con la personalizzazione dei temi

Un tema potente deve essere profondamente integrato con le funzionalità di base di WordPress, come i menu, gli strumenti aggiuntivi, le anteprime degli articoli e il personalizzatore del tema stesso.

Menù di navigazione registrato e area dei widget

Nel tema… functions.php Nel file, viene utilizzato… register_nav_menus() Indirizzo per l’iscrizione al ristorante.

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

function my_custom_theme_setup() {
    // 注册主菜单
    register_nav_menus( array(
        'primary' => esc_html__( '主导航菜单', 'my-custom-theme' ),
        'footer'  => esc_html__( '页脚菜单', 'my-custom-theme' ),
    ) );

// 添加文章缩略图支持
    add_theme_support( 'post-thumbnails' );

// 添加自定义Logo支持
    add_theme_support( 'custom-logo' );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

Inoltre, possiamo registrare gli strumenti aggiuntivi nella zona degli strumenti (barra laterale).

function my_custom_theme_widgets_init() {
    register_sidebar( array(
        'name'          => esc_html__( '主侧边栏', 'my-custom-theme' ),
        'id'            => 'sidebar-1',
        'description'   => esc_html__( '在此添加小工具。', 'my-custom-theme' ),
        'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>',
        'before_title'  =&gt; '<h2 class="widget-title">',
        'after_title'   =&gt; '</h2>',
    ) );
}
add_action( 'widgets_init', 'my_custom_theme_widgets_init' );

在 header.php Oppure, all’interno del file di template, utilizzare… wp_nav_menu() Mostra il menu.

Aggiungere opzioni per il personalizzatore di temi

Il “Customizer” consente agli utenti di visualizzare in tempo reale e modificare le impostazioni del tema. Possiamo utilizzarlo per… WP_Customize_Manager Aggiunta di opzioni all’oggetto.

function my_custom_theme_customize_register( $wp_customize ) {
    // 添加一个“主题选项”板块
    $wp_customize->add_section( 'theme_options', array(
        'title'    => __( '主题选项', 'my-custom-theme' ),
        'priority' => 130,
    ) );

// 添加一个页脚版权文本设置
    $wp_customize->add_setting( 'footer_copyright_text', array(
        'default'           => '© 2026 Your Company',
        'sanitize_callback' => 'sanitize_text_field',
        'transport'         => 'postMessage', // 支持实时预览
    ) );

$wp_customize->add_control( 'footer_copyright_text', array(
        'label'    => __( '页脚版权文本', 'my-custom-theme' ),
        'section'  => 'theme_options',
        'type'     => 'text',
    ) );
}
add_action( 'customize_register', 'my_custom_theme_customize_register' );

E poi… footer.php In cinese, usare get_theme_mod() Esegui l’operazione di output per questo valore.

<p><?php echo esc_html( get_theme_mod( 'footer_copyright_text', '© 2026 Your Company' ) ); ?></p>

Ottimizzare le prestazioni e la sicurezza del tema.

L’ultimo passaggio cruciale nella creazione di un tema è assicurarsi che sia veloce da utilizzare e sicuro dal punto di vista tecnico.

Caricare correttamente gli script e i file di stile.

È obbligatorio utilizzarlo. wp_enqueue_scripts Gli “hook” (meccanismi di integrazione) vengono utilizzati per caricare i file CSS e JavaScript, il che garantisce che le dipendenze tra questi file vengano gestite correttamente e evita il loro caricamento ripetuto.

function my_custom_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );

// 加载Google Fonts
    wp_enqueue_style( 'my-custom-theme-fonts', 'https://fonts.googleapis.com/css2?family=...' );

// 加载主JavaScript文件
    wp_enqueue_script( 'my-custom-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_custom_theme_scripts' );

Attuare misure di sicurezza di base

Non fidarti mai degli output originali forniti dagli utenti o dai database. Esegui sempre l’elaborazione (l’“escape”) di tutti i contenuti dinamici.

• Usare esc_html(), esc_attr(), esc_url() Esegue l'escape del testo che viene inserito nelle proprietà o nel contenuto HTML.
• Prima di inserire i dati nel database, utilizzare… sanitize_text_field() Eseguire operazioni di pulizia su tali elementi.
• Utilizzare nel template the_title(), the_content() Funzioni come queste includono già alcune funzionalità di “escape” (ovvero la conversione di caratteri speciali in forme leggibili). Per i campi personalizzati, è necessario utilizzare metodi specifici per gestire correttamente tali caratteri. echo esc_html( get_post_meta( $post->ID, 'key', true ) );。

Riassumendo

Attraverso i passaggi descritti, abbiamo completato la creazione della struttura di base di un tema personalizzato per WordPress estremamente funzionale. Abbiamo iniziato dalla creazione degli elementi più fondamentali… style.css 和 index.php All’inizio, abbiamo introdotto gradualmente i concetti di gerarchia dei template e di progettazione modulare, dividendo la parte superiore e quella inferiore della pagina (header e footer). In seguito, abbiamo… functions.php Integra le funzionalità principali di WordPress, come il menu di navigazione, gli strumenti utili e le immagini in miniatura degli articoli, offrendo agli utenti un’interfaccia di configurazione semplice e intuitiva grazie al tema personalizzabile. Infine, sottolineiamo l’importanza di utilizzare… wp_enqueue_scripts L’importanza di ottimizzare il caricamento dei risorse e di attuare misure di sicurezza, come l’escapamento dei dati in output.

Questo tema, sebbene sia di base, presenta una struttura chiara e segue le migliori pratiche di progettazione, creando così una solida base per l’aggiunta di funzionalità più complesse in futuro (come tipi di articoli personalizzati, opzioni di configurazione avanzate, caricamento tramite AJAX, ecc.). Continuando a esplorare il WordPress Codex e le risorse per sviluppatori, sarai in grado di espandere ulteriormente le possibilità offerte da questo tema.

FAQ - Domande frequenti

Quali linguaggi di programmazione è necessario padroneggiare per creare un tema WordPress?

Per creare un tema WordPress completo e funzionale, è necessario padroneggiare PHP, HTML, CSS e JavaScript. PHP viene utilizzato per gestire la logica lato server e interagire con il nucleo di WordPress; HTML costituisce lo scheletro delle pagine; CSS si occupa degli stili e della disposizione visiva; JavaScript, infine, permette di realizzare interazioni utente e effetti dinamici sul lato client. Una conoscenza di base di SQL è anche utile per comprendere i meccanismi di interrogazione dei dati presenti in WordPress.

Qual è il ruolo speciale del file functions.php all’interno di un tema?

functions.php Il file rappresenta il “centro funzionale” di un tema e svolge un ruolo fondamentale. Non si tratta di un plugin che viene incluso ogni volta che la pagina viene caricata, ma fa parte integrante del tema stesso. Il codice che aggiungi in questo file può modificare il comportamento predefinito del tema, registrare nuove funzionalità (come menù o aree per gli strumenti), aggiungere supporti specifici per il tema (ad esempio, miniature degli articoli), gestire il caricamento sequenziale di script e stili, nonché definire varie funzioni personalizzate. In altre parole, questo file funge da ponte tra il tuo tema e le funzionalità di base di WordPress.

Come posso far sì che il tema WordPress che ho creato supporti più lingue?

Per rendere un tema supportivo di più lingue (internazionalizzazione, i18n, e localizzazione, l10n), sono necessari principalmente due passaggi. Prima di tutto, style.css Utilizzare, ad esempio, un tag attorno all'intestazione dei commenti e a tutte le stringhe che richiedono una traduzione. __（'Text', 'text-domain'） 或 _e（'Text', 'text-domain'） Questo tipo di funzione di traduzione va incapsulata (ovvero racchiusa all’interno di un oggetto o di una classe appropriata). Inoltre, si può utilizzare uno strumento come Poedit per esaminare i file relativi ai temi (tema files) e generare i contenuti da tradurre. .pot File di template, e per ogni lingua creare i relativi file di configurazione. .po E quello compilato… .mo File, e mettili all’interno del tema. /languages/ I file di traduzione si trovano all’interno di un determinato directory. Gli utenti possono gestirli utilizzando plugin come Loco Translate.

Come scegliere un tema personalizzato e un sottotema (Child Theme)?

Dipende dai tuoi obiettivi specifici e dal modello di sviluppo che utilizzi. Se stai creando da zero un design e delle funzionalità uniche per un progetto particolare, senza voler fare affidamento sugli stili e sui modelli di un altro tema “padre”, allora creare un tema personalizzato è la scelta giusta. Il vantaggio principale è che il codice risulta completamente autonomo e privo di ridondanze.

I sottotemi (subthemes) servono per modificare o estendere un tema padre esistente. Quando si desidera personalizzare un tema popolare (come Astra o GeneratePress) e allo stesso tempo garantire che le modifiche apportate vengano mantenute anche in futuro, in modo sicuro, è necessario utilizzare i sottotemi. I sottotemi contengono esclusivamente i file personalizzati creati dall’utente. style.css, functions.php Il file di template utilizzato per la personalizzazione eredita tutte le funzionalità del tema padre. Questo è il metodo di personalizzazione raccomandato ufficialmente da WordPress, poiché garantisce la massima compatibilità con le future aggiornamenti.