Partire da zero: Guida passo dopo passo per sviluppare un tema personalizzato per WordPress

Sviluppare un tema personalizzato per WordPress rappresenta il modo migliore per trasformare le proprie idee in realtà online, controllando completamente l’aspetto e le funzionalità del sito web. A differenza degli temi già pronti, i temi personalizzati ti permettono di partire da zero e creare un sito unico che risponda esattamente alle tue esigenze o a quelle dei tuoi clienti. Anche se questo processo può sembrare intimidatorio, seguendo le specifiche ufficiali di WordPress e i passaggi guidati, potrai completarlo in modo semplice e chiaro. Questo articolo ti guiderà attraverso l’intero processo, dalla creazione dei file di base all’implementazione delle funzionalità principali.

Preparativi e allestimento dell'ambiente.

Prima di scrivere la prima riga di codice, è necessario disporre di un ambiente di sviluppo appropriato e di una pianificazione del progetto chiara.

Creazione di un ambiente di sviluppo locale

Prima di tutto, è necessario configurare un ambiente server PHP sul proprio computer locale. Si consiglia l’uso di pacchetti software integrati, come XAMPP, MAMP o Local by Flywheel. Questi strumenti permettono di installare automaticamente Apache, MySQL e PHP con un solo clic, evitando così la necessità di una configurazione complessa. Ad esempio, con XAMPP, i file del sito web verranno solitamente posizionati nella directory di installazione dello stesso.htdocsAll’interno della cartella. Qui puoi creare una nuova cartella, ad esempio…my-custom-themeQuesto diventerà il directory radice del tuo tema.

Si consiglia di leggere Imparare dall'inizio lo sviluppo di temi WordPress: una guida essenziale per creare siti web personalizzati.。

Pianificazione della struttura del progetto tematico

Un tema standard per WordPress contiene almeno due file fondamentali:style.css和index.phpTuttavia, prima dell’inizio del progetto, si consiglia di pianificare una struttura di directory chiara ed estensibile. Una tipica struttura tematica moderna potrebbe essere la seguente:

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

my-custom-theme/
├── style.css          // 主样式表，包含主题信息头
├── index.php          // 主模板文件
├── functions.php      // 主题功能与函数文件
├── header.php         // 头部模板
├── footer.php         // 底部模板
├── sidebar.php        // 侧边栏模板
├── page.php           // 页面模板
├── single.php         // 文章页模板
├── archive.php        // 文章归档页模板
├── 404.php            // 404错误页模板
├── search.php         // 搜索结果页模板
├── assets/            // 静态资源目录
│   ├── css/           // 样式文件
│   ├── js/            // 脚本文件
│   └── images/        // 图片资源
└── templates/         // 可选的模板部件目录

Disporre di una buona struttura aiuta nell’organizzazione e nella manutenzione del codice.

Creare il file dei temi principali

Questi sono i fondamenti per la creazione di un tema: l’intestazione del file indica a WordPress che si tratta di un tema valido.

Definire lo stile della tabella dei temi

style.cssSi tratta dell“”identificativo” del tema; il blocco di note in cima (la parte che contiene le informazioni sul tema) è obbligatorio. WordPress si avvale di queste informazioni per riconoscere e visualizzare il tuo tema in background. Crea quindi tale blocco di note contenente i dati necessari.style.cssFile, e inserisci il seguente contenuto:

/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-custom-theme
Author: 你的名字
Author URI: https://yourwebsite.com
Description: 这是一个为了学习从零开始开发而创建的自定义WordPress主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

Tra questi,Text DomainUtilizzato per l’internazionalizzazione (i18n), rappresenta l’unico identificatore del tuo tema e di solito coincide con il nome della cartella contenente il tema stesso. Dopo questo blocco di commenti, puoi iniziare a scrivere i tuoi stili CSS.

Si consiglia di leggere Guida allo sviluppo di temi per WordPress: un corso pratico completo per principianti e esperti。

Creare un file di template di base

index.phpÈ il modello di ritorno predefinito per tutte le pagine. È il più basilare, ma possiamo iniziare da una semplice struttura HTML. Prima di tutto, creiamo…header.phpIl file viene utilizzato per conservare la parte iniziale del documento (il “header”).<!DOCTYPE html>Aprire.<body>La parte relativa alle etichette…footer.phpViene utilizzato per memorizzare i tag di chiusura e il contenuto del piede di pagina.

header.phpEsempio:

<!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>
    <header>
        <h1><a href="/it/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
        <p><?php bloginfo( 'description' ); ?></p>
    </header>

Si prega di notare che è stato utilizzato…wp_head()Gli “hook” (ganci) sono elementi essenziali per il funzionamento di WordPress: sono utilizzati dal nucleo del software, dai plugin e dai temi per aggiungere script e stili alle pagine web.

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

footer.phpEsempio:

    <footer>
        <p>©  . All rights reserved.</p>
    </footer>
    <p><strong>Questo è un testo di esempio.</strong></p>
<p>Io non sono un'attrice.</p>
<p>Questo testo è stato tradotto automaticamente.</p>

Qui è stato utilizzato…wp_footer()Gancio.

Ora, il tuo…index.phpPuò diventare molto semplice e conciso:

Si consiglia di leggere Guida completa allo sviluppo di temi per WordPress: costruire temi di livello professionale da zero。

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

<main>
    
            <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>
        
        <p><?php _e( 'Sorry, no posts matched your criteria.', 'my-custom-theme' ); ?></p>
    <?php endif; ?>
</main>

Questo template utilizza il ciclo principale di WordPress (The Loop) per visualizzare l’elenco degli articoli.

Introduzione di funzionalità e contenuti dinamici

Un vero tema non è semplicemente una pagina statica: deve interagire con il nucleo di WordPress, caricare i necessari risorse e implementare funzionalità dinamiche.

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

Scrivere un file contenente la funzione tematica.

functions.phpIl tuo tema è “Cervello” (Brain), utilizzato per aggiungere funzionalità, menu di registrazione, barre laterali, caricare stili e script, ecc. Crea questo file e inizia ad aggiungere le funzionalità di base.

<?php
// 主题设置
function my_custom_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support( 'title-tag' );
    // 启用文章和评论的RSS feed链接
    add_theme_support( 'automatic-feed-links' );
    // 启用文章缩略图（特色图像）
    add_theme_support( 'post-thumbnails' );
    // 注册一个导航菜单
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

// 注册小工具区域（侧边栏）
function my_custom_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; __( '主侧边栏', 'my-custom-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __( '在此添加小工具。', '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' );

add_theme_support()La funzione viene utilizzata per abilitare la funzionalità tematica (tema).register_nav_menus()和register_sidebar()Quindi, registrare separatamente il menu di navigazione e l’area degli strumenti aggiuntivi (widget).

Caricare stili e script

Il modo corretto per caricare le risorse è includere i file delle tabelle di stile (style sheet) e i file JavaScript tramite…wp_enqueue_scripts“Hook queue. Your…”functions.phpAggiungere quanto segue:

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

// 加载自定义JavaScript文件
    wp_enqueue_script( 'my-custom-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), '1.0.0', true );

// 如果使用评论功能，加载评论回复脚本（仅当需要时）
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );

get_stylesheet_uri()Ottenerestyle.cssL’URL…get_template_directory_uri()Ottenere l’URL del catalogo dei temi.

Creare una struttura gerarchica dei template

WordPress utilizza una struttura gerarchica di template per determinare quale file di template applicare a una pagina specifica. Creare file di template dedicati permette di rendere la visualizzazione dei contenuti più precisa e flessibile.

Creare template per diversi tipi di contenuti.

È necessario creare template specifici per i diversi tipi di pagine. Ad esempio:
* single.phpUtilizzato per visualizzare un singolo articolo.
* page.phpUtilizzato per visualizzare una singola pagina.
* archive.phpUtilizzato per visualizzare informazioni relative a categorie, tag, autori, date e altre caratteristiche delle pagine di archiviazione.
* search.phpUtilizzato per visualizzare i risultati della ricerca.
* 404.phpUtilizzato per visualizzare la pagina “Non trovato”.

Un elemento di basesingle.phpPotrebbe apparire come segue:

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

<main>
    <?php while ( have_posts() ) : the_post(); ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1012>
            <header>
                <h1><p><strong>Questo testo verrà sostituito dal titolo dell'articolo corrente.</strong></p></h1>
                <div>
                    |
                </div>
            </header>
            <?php if ( has_post_thumbnail() ) : ?>
                <div>
                    <?php the_post_thumbnail(); ?>
                </div>
            <?php endif; ?>
            <div>
                <p><strong>Questo testo è stato tradotto automaticamente. Se desideri una traduzione corretta, contattaci.</strong></p>
            </div>
            <footer>
                &lt;?php the_tags( &#039;标签: &#039;, &#039;, &#039;, &#039;<br />' ); ?&gt;
            </footer>
        </article>
    <?php endwhile; ?>
</main>

Questo template utilizza…the_post_thumbnail()Per visualizzare le immagini di rilievo, nonché…comments_template()Carica l’area dei commenti.

Utilizzare componenti template per realizzare un approccio modulare.

Al fine di migliorare ulteriormente la riutilizzabilità del codice, è possibile estrarre le parti ripetute delle pagine, come le informazioni metadati degli articoli o gli elementi delle liste di articoli, e trasformarle in componenti template (Template Parts). Ad esempio, è possibile creare…template-parts/content.phpFile, e poi…index.php或archive.phpUtilizzato all'interno di un ciclo.get_template_part( 'template-parts/content' );Utilizzalo per effettuare le chiamate necessarie; in questo modo il tuo file di template principale rimarrà semplice e pulito.

Riassumendo

Seguendo i passaggi descritti, hai completato lo sviluppo di un tema personalizzato per WordPress che, sebbene semplice, è comunque completo di funzionalità. Il processo ha incluso la configurazione dell’ambiente di sviluppo, la creazione dei file fondamentali del tema, l’integrazione delle funzionalità offerte da WordPress e la strutturazione dei livelli di template. Ricorda che lo sviluppo di temi è un processo iterativo: puoi iniziare dalle funzionalità più basilari per poi aggiungere gradualmente caratteristiche più complesse, come tipi di articoli personalizzati, opzioni di personalizzazione del tema e design responsive. La cosa più importante è seguire gli standard di codifica e le migliori pratiche di WordPress, in modo da garantire che il tuo tema sia sicuro, efficiente e facile da mantenere. Ora, copia la cartella contenente il tuo tema nella directory di installazione di WordPress.wp-content/themes/All’interno di tale sezione, è possibile visualizzarlo e attivarlo nella parte di configurazione denominata “Aspetto” -> “Temi” (in inglese: “Appearance” -> “Themes”).

FAQ - Domande frequenti

Quali sono le basi di programmazione necessarie per sviluppare un tema WordPress?

Per sviluppare temi per WordPress è necessario padroneggiare principalmente HTML, CSS e PHP. HTML viene utilizzato per costruire la struttura delle pagine, CSS per la progettazione grafica, mentre PHP è il linguaggio di programmazione lato server di WordPress, utilizzato per gestire la logica, le query al database e la generazione di contenuti dinamici. Inoltre, conoscere nozioni di base di JavaScript è utile per aggiungere funzionalità interattive alle pagine.

Perché è necessario utilizzare le funzioni `get_header()` e `get_footer()`?

get_header()和get_footer()Sono tag di template di WordPress, utilizzati per includere contenuti all’interno della pagina.header.php和footer.phpFile: Utilizzate queste funzioni invece di procedere in modo diretto.includeLe “istruzioni” (statements) rappresentano il cuore del meccanismo di strutturazione dei tempi WordPress e dei suoi sottotempi (subthemes). Questo meccanismo consente ai sottotempi di sovrascrivere i contenuti della parte iniziale (“header”) e della parte finale (“footer”) del tema principale creando file con lo stesso nome, offrendo così una grande flessibilità nella personalizzazione dell’aspetto del sito.

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

Devi utilizzare le funzioni di internazionalizzazione (i18n) di WordPress per incapsulare tutte le stringhe di testo che vengono visualizzate nel tema. Principalmente, dovresti…__()、_e()Eseguire funzioni come “aspettare” (wait) e altre operazioni correlate…style.cssImpostare correttamente nei…Text DomainPoi, utilizzare uno strumento come Poedit per generare il contenuto desiderato..potTraduci il file di template: in base a esso, il traduttore potrà creare i contenuti per la lingua desiderata (ad esempio…).zh_CN.po和.moInfine,functions.phpIl documento è stato approvato dal Consiglio di Stato cinese il 22 novembre 2019.load_theme_textdomain()Funzione di caricamento delle librerie (function loading).

Dopo aver completato lo sviluppo di un tema, come si può testarne la compatibilità?

Prima di pubblicare o distribuire un tema nell’ambiente di produzione, è essenziale eseguire test approfonditi. Innanzitutto, è necessario verificare che il tema sia responsive (adatto a diversi schermi e dispositivi) su diversi browser (Chrome, Firefox, Safari, Edge) e su diversi tipi di dispositivi (desktop, tablet, smartphone). Inoltre, è consigliabile testare il tema utilizzando diverse configurazioni di WordPress, attivando o disattivando vari plugin, nonché utilizzando diversi tipi di articoli e widget. Per ulteriori controlli, è possibile utilizzare il plugin ufficiale di WordPress “Theme Check” per verificare che il tema rispetti gli standard di codifica più recenti e le migliori pratiche di sviluppo.